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 tends to provide 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.

We do not currently support or offer resources for any other UI design software.

Fonts

The Jack Henry design system uses the following fonts for all typography:

• Roboto Flex
• Roboto Mono

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 both font families to your computer.

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: Colors, typography, and other token-based styles and variables for both light and dark themes
• UI: Components designed for browser-based applications
• Icons: Complete set of system-wide icons

Enable the libraries

Follow these steps to enable the 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.

Work 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 inspecting components or copying over unpublished base components to aid in the construction of custom product-level components. Use the following steps to open a library file directly from your project:

1. Go to the "Assets" tab.
2. Click the book icon in the upper corner.
3. Hover over the name of the library you would like to open.
4. Click the button labeled "Open file."

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

Extend the system

The design system is created to be a foundation layer for use in Jack Henry products and applications. It includes a comprehensive set of design tokens, components, and icons with sensible defaults that will support many needs right out of the box.

However, we realize there are many products that have unique requirements that the system doesn't explicitly address or support. In these situations, the system may be extended to address product-specific uses or gaps in functionality. Many times, a component can simply serve as a base and be customized in a way that serves the user's needs. In other cases, new components and tokens may be created using existing design system conventions, maintained in product-specific libraries, and used alongside existing design system components.

Product-specific themes can also be created to accommodate custom stylings and overrides. When creating custom themes, please reference the themes section to learn about the recommended process for creating a theme and some of the quirks you may encounter when working with custom themes within Figma.

When extending the system, it's important to reference relevant token and component documentation to ensure what can be customized and how to specify that to developers.

Manage versions and updates

Figma allows you to directly connect to the design system libraries so you will always have the latest updates. However, if you want to have greater control of when design system updates are reflected in your design project, or if you want to design and develop with a specific version of the system, you may want to work with local versions of the libraries. When libraries are published out, the semantic version number is added to the description so you can align your local library to a specific version and accurately communicate that to developers using the comparable coded version.

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. You may want to rename the local libraries to help distinguish them from managed versions.

To change versions, you can use the "swap library" feature within Figma to replace your current version with a newer one. Please note, it's likely you will have to make manual updates and fixes as part of migrating to a new library version.

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.

Icons

The Icons library includes the icons used throughout the design system. Users are welcome to submit recommendations for the icon library, which then go through a design and review process.

However, there may be situations where an icon needs to be quickly implemented into a product feature or is outside the scope of what we might typically include as part of the system library. In those situations, we encourage designers to create and manage their own product-specific icons that compliment the standard system icons.

Components

Design kit components are structured in a way that leverage the features and functionality of Figma and are inspired by common code conventions and implementation. This makes for a consistent way to understand a component's structure and included elements.

Layer names

Layers are prefixed with the component name to clarify context and are named in such a way as to clarify semantic function. While these conventions should help designers effectively call out specific elements to developers in specs and other documentation, it's important to note that these layers are unique to Figma and not necessarily named or structured the same way in code.

Properties

Components are designed with a series of properties that align to how they are implemented in code. This is intended to give designers a close approximation of each component's functionality as well as create a common language between designers and developers. Many of the properties are shared between design and code. However, there are some Figma-specific properties necessary for certain functionality not found in the coded component and vice-versa.

Be sure to reference each component's Storybook page to see a complete list of the properties and attributes that component supports.

Placeholder slots

Slots are a powerful feature of certain components. They allow users to customize the content and layout within specific areas to make truly versatile components unique to a particular product or context.

In the design kit, these are most often represented by nested component instances at the top level of a component's properties. They are named using simplified versions of the coded names.

Where there is recommended guidance on what to use in a given slot, we will often include a pre-loaded component. For example, jh-checkbox-group should only contain a series of jh-checkbox components. Thus, we have preloaded several jh-checkbox components to make for a more streamlined experience. However, if you needed more than ten checkboxes represented in this group or had specific checkbox formatting that's being used throughout your UI, you could readily create a new component that has this custom implementation of checkbox and replace the default slotted layout.

In situations where there's greater flexibility such as jh-card, you will see a generic placeholder component. To make use of the placeholder slot, simply replace it with a different component instance such as a custom header or multi-column layout.

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.

Install packages

The system is managed in a monorepo that consists of multiple 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.