Learn about the Jack Henry Design System

By adopting the Jack Henry Design System, designers gain a collection of reusable assets to design user interfaces quickly and efficiently. Our design system translates the design language into code for building digital experiences.

This is accomplished through elements such as design tokens, icons, and components that are meant to be applied to all sorts of digital experiences.

Install the fonts

The Jack Henry design system uses Roboto Flex and Roboto Mono for all typography. These fonts should automatically be available within Figma. However, you can use the following links if you need to manually install them.

• Download Roboto Flex
• Download Roboto Mono

Work with the base design kit

Our base design kit is actively maintained by the design system team. It is a single Figma library that includes variables, styles, icons, and components available for use in your product and web experiences. Using this kit provides a number of benefits:

• Aligns you to a carefully versioned workflow giving you the flexibility to update to the latest release without any major disruption
• Promotes a common language regarding style and functionality between designer and developer throughout the development cycle
• Ensures consistency and efficiency when working with common components and patterns affording you more opportunity to focus on solving specific and complex user tasks

Set up

To help you better manage updates and allow for custom theming, we recommend connecting to a local version of the base design kit.

1. Duplicate the base design kit from either the Figma community page or the shared library (internal users only).
2. Move the local version of the kit to a project that has appropriate permissions for users who need to access it.
3. Publish the local version of the base kit. Be sure and publish it to the correct context. This will typically be your product team and not the entire Figma organization.
4. Connect your product libraries and project files to your local version of the base kit.

Extend

Create product-specific libraries to house custom components and variables. These can be built using elements from the connected local version of the base design kit.

1. Create a new product library.
2. Open the Assets tab and click on the Libraries icon.
3. In the libraries modal, scroll down to your local version of the base design kit and toggle it on.
4. Use variables, styles, and components from the base design kit to build our your product-specific kit. Do not add custom elements to the base kit.
5. Publish out your product library as appropriate.

Update

Working with a local version of the base kit helps you stay aligned to a specific version of the design system as well as makes it relatively easy to update to a new version when you and your team are ready.

1. Follow the instructions to set up the base design kit for the new version you want to use. Do not yet unpublish or delete the local base design kit you are currently connected to.
2. Create a new branch on your product library.
3. Swap the current base design kit with the new base design kit (this could take multiple attempts to ensure everything gets swapped).
4. Use the Swap Variables plugin to swap variable references to the new base design kit. It should be okay to swap all of the pages at one time, although it may take a minute.
5. Repeat the variable swap for each collection (be sure and swap every collection within the base design kit).
6. Review your product library to ensure everything correctly updated. Make any revisions/fixes as needed.
7. Disconnect the old base design kit.
8. Merge the branch.
9. Publish your updated product library.

Theme

Connect and map your custom theme library to the base kit to define the design system with your product-specific variables.

1. Open your local version of the base design kit.
2. Create a new branch on the base kit.
3. Open the Assets tab and click on the Libraries icon.
4. In the libraries modal, scroll down to the library that has your custom theme variables (ex., your product library) and toggle it on.
5. Map your product variables to any of the base variables as needed. We recommend redefining only the alias, theme, and component variables. Do not make any other changes to the base kit such as redefining the styles or removing variables.
6. Merge the branch.
7. Publish your updated local base kit.
8. Create a new branch on your product library.
9. Update the base design kit in your product library.
10. Perform any clean-up and testing as needed.
11. Merge the branch.
12. Publish your updated product library.

Reach out for support

The design system team has several ways you can reach out to us with questions or feedback. Visit our support page to learn more about how to contact us.