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.

Size

Global

Token Value Example
jh-size-50
Size 50
2px
jh-size-100
Size 100
4px
jh-size-200
Size 200
8px
jh-size-300
Size 300
12px
jh-size-400
Size 400
16px
jh-size-500
Size 500
20px
jh-size-600
Size 600
24px
jh-size-700
Size 700
28px
jh-size-800
Size 800
32px
jh-size-900
Size 900
36px
jh-size-1000
Size 1000
40px
jh-size-1100
Size 1100
44px
jh-size-1200
Size 1200
48px
jh-size-1300
Size 1300
52px
jh-size-1400
Size 1400
56px
jh-size-1500
Size 1500
60px
jh-size-1600
Size 1600
64px
jh-size-1700
Size 1700
68px
jh-size-1800
Size 1800
72px
jh-size-1900
Size 1900
76px
jh-size-2000
Size 2000
80px
jh-size-2100
Size 2100
84px
jh-size-2200
Size 2200
88px
jh-size-2300
Size 2300
92px
jh-size-2400
Size 2400
96px