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.

Shape

Shape provides distinction to individual components as well as establishes a sense of overall visual identity throughout the application.

Border radius

Border radius is used to set the rounded-ness of a container or shape. Consistent use of a container’s border radius can be used to clarify intent such as whether or not a component is interactive.

0
50
100
200
300
400
Circle

Border width

Border width is used to define the edge of a frame or component. This can be used alone or in conjunction with background fills to create various levels of visual hierarchy within a series of containers.