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.

Font

Global

Family

Token Value Example
jh-font-family-roboto
Roboto font family
'Roboto', 'Helvetica Neue', sans-serif
Aa

Weight

Token Value Example
jh-font-weight-300
Font weight 300
300
Aa
jh-font-weight-400
Font weight 400
400
Aa
jh-font-weight-500
Font weight 500
500
Aa
jh-font-weight-700
Font weight 700
700
Aa

Size

Token Value Example
jh-font-size-250
Font size 250
10px
Aa
jh-font-size-300
Font size 300
12px
Aa
jh-font-size-350
Font size 350
14px
Aa
jh-font-size-400
Font size 400
16px
Aa
jh-font-size-450
Font size 450
18px
Aa
jh-font-size-500
Font size 500
20px
Aa
jh-font-size-600
Font size 600
24px
Aa
jh-font-size-700
Font size 700
28px
Aa
jh-font-size-800
Font size 800
32px
Aa
jh-font-size-900
Font size 900
36px
Aa
jh-font-size-1050
Font size 1050
42px
Aa
jh-font-size-1200
Font size 1200
48px
Aa
jh-font-size-1350
Font size 1350
54px
Aa
jh-font-size-1500
Font size 1500
60px
Aa
jh-font-size-1700
Font size 1700
68px
Aa
jh-font-size-1900
Font size 1900
76px
Aa
jh-font-size-2100
Font size 2100
84px
Aa
jh-font-size-2300
Font size 2300
92px
Aa

Line-height

Token Value Example
jh-font-line-height-300
Line-height 300
12px
Aa
jh-font-line-height-400
Line-height 400
16px
Aa
jh-font-line-height-500
Line-height 500
20px
Aa
jh-font-line-height-600
Line-height 600
24px
Aa
jh-font-line-height-700
Line-height 700
28px
Aa
jh-font-line-height-800
Line-height 800
32px
Aa
jh-font-line-height-900
Line-height 900
36px
Aa
jh-font-line-height-1000
Line-height 1000
40px
Aa
jh-font-line-height-1100
Line-height 1100
44px
Aa
jh-font-line-height-1300
Line-height 1300
52px
Aa
jh-font-line-height-1500
Line-height 1500
60px
Aa
jh-font-line-height-1600
Line-height 1600
64px
Aa
jh-font-line-height-1800
Line-height 1800
72px
Aa
jh-font-line-height-2000
Line-height 2000
80px
Aa
jh-font-line-height-2300
Line-height 2300
92px
Aa
jh-font-line-height-2500
Line-height 2500
100px
Aa
jh-font-line-height-2700
Line-height 2700
108px
Aa

Decision

Micro

Token Value Example
jh-font-micro-regular
Used for fine-print text and small snippets of text with limited space within a component
400 10px/12px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-micro-medium
Used for fine-print text and small snippets of text with limited space within a component
500 10px/12px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-micro-bold
Used for fine-print text and small snippets of text with limited space within a component
700 10px/12px 'Roboto', 'Helvetica Neue', sans-serif
Aa

Helper

Token Value Example
jh-font-helper-regular
Used for secondary or explanatory text as well as field labels
400 12px/16px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-helper-medium
Used for secondary or explanatory text as well as field labels
500 12px/16px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-helper-bold
Used for secondary or explanatory text as well as field labels.
700 12px/16px 'Roboto', 'Helvetica Neue', sans-serif
Aa

Body

Token Value Example
jh-font-body-regular-1
Used for blocks of text and most content displayed within components
400 14px/20px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-body-regular-2
Used for intro or leading blocks of text
400 16px/24px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-body-medium-1
Used for blocks of text and most content displayed within components
500 14px/20px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-body-medium-2
Used for intro or leading blocks of text
500 16px/24px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-body-bold-1
Used for blocks of text and most content displayed within components
700 14px/20px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-body-bold-2
Used for intro or leading blocks of text
700 16px/24px 'Roboto', 'Helvetica Neue', sans-serif
Aa

Display

Token Value Example
jh-font-display-light-1
Used to create visual emphasis through size without being misconstrued as a heading
300 42px/52px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-display-light-2
Used to create visual emphasis through size without being misconstrued as a heading
300 54px/64px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-display-light-3
Used to create visual emphasis through size without being misconstrued as a heading
300 92px/108px 'Roboto', 'Helvetica Neue', sans-serif
Aa

Heading

Token Value Example
jh-font-heading-regular-1
Used to create visual hierarchy on a page and within a component
400 14px/20px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-regular-2
Used to create visual hierarchy on a page and within a component
400 16px/24px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-regular-3
Used to create visual hierarchy on a page and within a component
400 20px/28px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-regular-4
Used to create visual hierarchy on a page and within a component
400 28px/36px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-regular-5
Used to create visual hierarchy on a page and within a component
400 32px/40px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-regular-6
Used to create visual hierarchy on a page and within a component
400 36px/44px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-medium-1
Used to create visual hierarchy on a page and within a component
500 14px/20px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-medium-2
Used to create visual hierarchy on a page and within a component
500 16px/24px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-medium-3
Used to create visual hierarchy on a page and within a component
500 20px/28px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-medium-4
Used to create visual hierarchy on a page and within a component
500 28px/36px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-medium-5
Used to create visual hierarchy on a page and within a component
500 32px/40px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-medium-6
Used to create visual hierarchy on a page and within a component
500 36px/44px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-bold-1
Used to create visual hierarchy on a page and within a component
700 14px/20px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-bold-2
Used to create visual hierarchy on a page and within a component
700 16px/24px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-bold-3
Used to create visual hierarchy on a page and within a component
700 20px/28px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-bold-4
Used to create visual hierarchy on a page and within a component
700 28px/36px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-bold-5
Used to create visual hierarchy on a page and within a component
700 32px/40px 'Roboto', 'Helvetica Neue', sans-serif
Aa
jh-font-heading-bold-6
Used to create visual hierarchy on a page and within a component
700 36px/44px 'Roboto', 'Helvetica Neue', sans-serif
Aa