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