Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Getting started

The Jack Henry Design System provides all the resources you need to get started with designing and developing beautiful and consistent user experiences.

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. Additionally, keep up-to-date with new releases and best practices so you always have the latest resources at your disposal.

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

Caution
Please note that the Figma libraries are currently in an alpha state. They are being continually updated and may break without warning. As such, they should only be used for testing purposes.

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, 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.

These libraries are currently only available to Jack Henry teams though our Figma organization.

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 decisions 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 for all typography. Roboto is automatically enabled through our Figma organization, so you shouldn’t have to install any fonts.

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

For developers

The code packages and developer documentation is currently only accessible to Jack Henry employees.

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.