Welcome to the Jack Henry design system! We hope the system and all its related resources provides you with a solid foundation to build on and iterate with to create amazing products.

We encourage all users of the system to get started by familiarizing yourselves with what we’re about.

Also, feel free to connect with us whenever you have a question or feedback related to the system.

For designers

Figma

All design system design assets are created in and distributed through Figma. You can use Figma either directly within the web browser or as a desktop app. We recommend using the desktop app as it provides for a more productive experience, especially when working with multiple open files.

Jack Henry designers can request access to our Figma organization within the #org-design-system Slack channel.

Design kit

Our design kit contains a comprehensive set of libraries that encapsulate the system’s core styles as well as component representations for our web-based applications. These include:

• Core: Color, type, and other styles
• UI: Components designed for browser-based applications
• Icons: Complete set of system-wide icons

Enabling the libraries

Follow these steps to enable the three system libraries:

1. Open the file you will be working in.
2. Go to the “Assets” tab.
3. Click the book icon in the upper corner.
4. From the libraries modal, toggle on the libraries for Core, Core: Light, UI, and Icons.

Team admins can also enable these by default at the team level as appropriate. Additional instructions for enabling libraries are available in Figma’s help library.

Working with the libraries

We encourage you to leverage Figma’s assets panel and style dropdown to access the libraries. This will ensure a seamless experience working with the system in Figma. However, there may be situations where you need to directly access the files such as directly inspecting components or copying over unpublished base components to aid in the construction of custom product-level components.

Figma currently doesn’t have a straightforward way to open shared library files from a project, but there is a workaround. Simply right-click on a component or icon from any of the following locations and select “Go to main component:”

• In a selected library from within the libraries modal
• In the assets panel
• In the resources dropdown menu
• In context as a placed instance

Additionally, you can select a component and click on the arrow button in the instance section of the design panel to open the library where that component originates.

To access the Core library, right-click a style name in the styles dropdown and select “Go to style definition.”

Controlling library updates

Figma allows you to directly connect to the design system libraries so you will always have the latest updates. If you are working with an unstable pre-release version of the system or want to have more manual control of when design system updates are reflected in your project, you may want to work with local versions of the libraries.

To create local versions of the libraries:

1. Open each library as previously outlined in the working with the libraries section.
2. Select the dropdown next to the file name in the title bar and select Duplicate.
3. Check your Drafts folder to ensure the files correctly duplicated. If they aren’t there, you might also open Recents from the Home screen and they should be near the beginning of the list.
4. Move each library to the project folder where you want to make your libraries available for use. Keep in mind that Figma scopes access to a team by default.
5. Connect your projects to the libraries using the instructions found under the enabling the libraries section. Be sure you connect to your local versions instead of the shared versions.

Styles

The styles within the Core library are aligned as closely as possible to our design tokens. This is particularly the case with color and type aliases as well as shadows. However, due to limitations of what Figma can store as a style, many tokens aren’t represented in the libraries. Designers should reference the visual language and design token sections to ensure other property values are correctly reflected in the design and specified for developer handoff.

Fonts

The Jack Henry design system uses Roboto Flex and Roboto Mono for all typography. Both fonts are automatically enabled through our Figma organization, so there shouldn’t be any need to locally install the fonts to work with the system in Figma.

However, if you would like to use either font in a program other than Figma, be sure to download and install the full Roboto Flex type family as well as the Roboto Mono type family.

For developers

Web Components

The design system is built on native Web Component technologies that are framework-agnostic. Learn more about the features of our architecture to help you start working with Web Components.

Installing packages

The system consists of three npm packages. Review instructions on how to install these packages in your particular project.

Basic concepts

Learn some basic concepts of how to work with the packages and components.