Skip to main content

Dimensions

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

Dimensions can be used to define any length-based value, particularly size and space. The dimension scale is based on a multiple of four from 4 to 96 to correspond with the grid. Smaller dimensions of 1 and 2 are also available to accommodate minor adjustments within a layout.

An example of spacing within a card: vertical spacings based on multiples of four are highlighted between content.
The dimension scale is used to ensure consistent placement and scaling 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.