Themes

The design system is structured in a way to allow for extensive flexibility in theming. The system defaults to a pre-defined set of values, but can be overridden using the design tokens to quickly create any number of branded themes as well as light and dark variants.

When creating a custom theme, it’s important to adhere to the semantic nature of the tokens—especially their property and pairing designations—and assign values accordingly. Ignoring the functional names of the tokens can result in unpredictable and non-accessible themes.

It’s also essential to note color contrast ratios when selecting colors that are meant to be paired together. Be sure that text and iconography meet the WCAG AA accessibility requirements for minimum color contrast.

Available themes

The Jack Henry design system currently ships with a default theme that includes light and dark variants. This provides a visual foundation that is consistent with the overarching Jack Henry brand allowing products and applications utilizing the system to compliment each other.

Creating themes

The design system uses CSS custom properties to allow various facets to be themed. While any token can be redefined as part of a theme, we recommend that you avoid redefining the global values unless your application requires that degree of customization. Not only can it be somewhat overwhelming, adjusting the global tokens can have a far-reaching effect on the entire system. For most applications, customizing the alias tokens—those that are contextualized to specific usages—will afford you a high-degree of flexibility in theming without altering some of the foundational relationships established via the global tokens.

While not required, consider creating both light and dark variants when creating custom themes to ensure a comprehensive experience for users based on their viewing preferences.

Our light and dark themes showcase all of the alias tokens that are currently used throughout the system. We encourage you to reference these themes to get an idea of where to start when redefining tokens.

Theming in Figma

Users may readily switch between and design with either the light or dark theme within the Core library. However, to work with a custom theme, users must bring in design system components into a product library, make the appropriate theme overrides, and republish the components out as part of the product library.