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.

Layout

The Jack Henry Design System utilizes defined sizes and spacings to create consistent layouts regardless of platform or screen size.

Size

Sizings are available in multiples of four from 4 to 96 to correspond with the grid. A smaller sizing of 2 is also available to accommodate minor sizing adjustments within a layout. This variety allows for greater flexibility in scaling components while maintaining fidelity.

Space

Spacings are available in multiples of four from 4 to 96. A smaller spacing of 2 is also available when minor spacing adjustments or corrections are needed within a layout.

The spacing scale is used to ensure consistent placement of elements within layouts and components.

Vertical rhythm

All components are composed using the eight-pixel grid. Dimensions, margins, and padding within the component utilize the size and space scales to ensure a consistent vertical rhythm. This same rhythm should also be applied as components are placed within the larger layout.