Color

Global color palette

The design system includes a global color palette that consists of twelve hues plus a set of grays each with nineteen graduated steps plus black and white. The hues are equidistantly spaced around the color wheel and coordinate with a handful of anchor colors that correlate to the broader Jack Henry brand.

Each hue is scaled 0 to 1000 in steps of 50 with 0 representing pure white and 1000 representing pure black. The steps represent a specific luminance range that guarantees what kind of contrast a color will have with other colors from the palette. To guarantee a specific contrast between two colors, ensure they have a minimum difference of one of the following:

• 4.5:1 contrast: A difference of 500 or more
• 3:1 contrast: A difference of 400 or more

For example, pairing jh-color-gray-200 with jh-color-azure-700 (a difference of 500) would guarantee a contrast of at least 4.5:1. However, jh-color-gray-200 with jh-color-gray-500 (a difference of 300) would fail both WCAG guidelines for color contrast.

To ensure consistency, colors with a 100-level designation (100, 200, 300, etc.) should be used for most aspects of the user interface. However, colors that have a 50-level designation (50, 150, 250, etc.) can be used in situations where a change in color is necessary but contrast with any paired content needs to be maintained such as changes in state. Additionally, 50-level colors can be used when a specific tone is required such as one of the Jack Henry anchor colors.

Colors from the global color palette are context-agnostic and as such should never be directly used within a design. Instead, use global colors to define sensible defaults for existing and custom alias tokens.

Color aliases

Each color within the system falls within a specific semantic concept. These concepts allow color to be used in a consistent and predictable manner throughout the user interface.

• Container: Container colors are used as the main surfaces found throughout the user interface. As a general rule of thumb, all content should sit on a container color.
• Overlay: The overlay color is used when modals such as dialogs need to sit on top of the main user interface.
• Control: Control colors should be used on the containers of interactive control elements such as slider and switch tracks.
• Divider: Divider colors are used on bordered elements throughout the user interface such as dividers, table borders, and component outlines.
• Brand: Brand colors should typically correlate to a customer's core color palette and be used on elements where that level of branding is important. Note that these colors do not have the same interactive capabilities as the content colors and should be used accordingly.
• Content: Content colors are used throughout the bulk of the components to style text, iconography, and other content-based elements. They have a full range of states that allow them to be used in both static and interactive contexts.
• Interactive: Interactive colors are used on general user interface interactions such as focus and content highlighting.

Avoid using color alias tokens outside of their intended context as it may create unintended results when overriding or theming parts of your application. For example, brand and content may have identical blues available for use, but should not be used interchangeably.

Color aliases are intentionally property-agnostic to create a more streamlined and versatile set of color choices. This means that jh-color-content-negative-enabled can be used as the background of a warning notification, the border of a destructive button, or the text of an input error message.

Pairings

To ensure appropriate color contrast throughout the system, the color tokens have been designed with specific pairings in mind. This includes a series of "on" colors for certain concepts. These colors denote which color tokens they may be paired with. "On" colors should only be used with their referenced "surface" token. For example, jh-color-content-on-primary-enabled may only be used on jh-color-content-primary-enabled. This ensures proper color contrast ratios and predictable theming results.

States

Many of the color aliases include colors for hover and active states. This allows all of the content-based colors—as well as several other color concepts—to be used in both static and interactive situations. By default, the states are stepped in increments of 50 to provide enough of a visual difference when the state changes while ensuring appropriate color contrast with the corresponding "on" colors. However, as with all of the color tokens, the state colors can be adjusted as needed.

Selected states are also available for container colors to denote when an item within the container has been selected.

Opacity

With few exceptions, the default colors are completely opaque. This is by design to ensure predictable contrast between backgrounds and content. However, a pre-defined eleven-step opacity scale is available for use to adjust the opacity of colors and elements as appropriate.