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

Figma allows designers to test themes within their layouts to get a good idea of how a design will translate to the custom values. While this is a helpful option within the design process, it's important to know a few limitations that exist when working with themes in Figma.

• Only Figma-native styles (color, type, effects) can currently be themed within Figma. Other token-based values without style representation such as border radius and space can not be represented as part of a Figma theme.
• The styles must be named identically (including any nesting) to the default theme counterparts. This is essential for Figma to know how to swap values.
• Theme changes only affect what is present in the file at the moment of the swap. Components added to the design after the swap will retain their original theme.
• Theme changes introduce overrides to components. These overrides are not always easy to revert making it difficult for certain updates to occur from the main libraries.

Because of some of these limitations, Figma themes currently are not well-suited for designing with in real time. However, they are ideal for "stress testing" designs and generating mock-ups.

When testing themes, we recommend the following workflow:

• Design your layouts with the default light theme. This will ensure seamless integration with other system libraries and allow updates to apply when available.
• Create a custom theme by duplicating one of the existing system themes into your own project. Working from the system themes ensures you have a comprehensive representation of Figma-themeable styles. Additionally, you are guaranteed to have the names match up.
• Apply themes in branches or duplicate files. These branches or secondary files can be used for generating mock-ups or sending out for feedback. Avoid testing themes in the main branch of your project. This could introduce unwanted overrides or other artifacts that may be extremely difficult—if not impossible—to undo.

Use the following instructions to change a theme within Figma.

1. Open the Assets panel.
2. Select the Team library icon.
3. Select the current theme library in use (ie. Core: Light).
4. Select Swap library.
5. Select Choose library.
6. Choose the custom theme you would like to swap to.
7. Choose which styles you want to swap. The default is to swap all of them.
8. Ensure Swap default styles in instances is selected.
9. Select Swap library.