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
var(--jh-font-weight-400) var(--jh-font-size-250)/var(--jh-font-line-height-300) var(--jh-font-family-roboto)
Aa
--jh-font-micro-medium
Used for fine-print text and small snippets of text with limited space within a component
var(--jh-font-weight-500) var(--jh-font-size-250)/var(--jh-font-line-height-300) var(--jh-font-family-roboto)
Aa
--jh-font-micro-bold
Used for fine-print text and small snippets of text with limited space within a component
var(--jh-font-weight-700) var(--jh-font-size-250)/var(--jh-font-line-height-300) var(--jh-font-family-roboto)
Aa

Helper

Token Value Example
--jh-font-helper-regular
Used for secondary or explanatory text as well as field labels
var(--jh-font-weight-400) var(--jh-font-size-300)/var(--jh-font-line-height-400) var(--jh-font-family-roboto)
Aa
--jh-font-helper-medium
Used for secondary or explanatory text as well as field labels
var(--jh-font-weight-500) var(--jh-font-size-300)/var(--jh-font-line-height-400) var(--jh-font-family-roboto)
Aa
--jh-font-helper-bold
Used for secondary or explanatory text as well as field labels.
var(--jh-font-weight-700) var(--jh-font-size-300)/var(--jh-font-line-height-400) var(--jh-font-family-roboto)
Aa

Body

Token Value Example
--jh-font-body-regular-1
Used for blocks of text and most content displayed within components
var(--jh-font-weight-400) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto)
Aa
--jh-font-body-regular-2
Used for intro or leading blocks of text
var(--jh-font-weight-400) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto)
Aa
--jh-font-body-medium-1
Used for blocks of text and most content displayed within components
var(--jh-font-weight-500) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto)
Aa
--jh-font-body-medium-2
Used for intro or leading blocks of text
var(--jh-font-weight-500) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto)
Aa
--jh-font-body-bold-1
Used for blocks of text and most content displayed within components
var(--jh-font-weight-700) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto)
Aa
--jh-font-body-bold-2
Used for intro or leading blocks of text
var(--jh-font-weight-700) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto)
Aa

Display

Token Value Example
--jh-font-display-light-1
Used to create visual emphasis through size without being misconstrued as a heading
var(--jh-font-weight-300) var(--jh-font-size-1050)/var(--jh-font-line-height-1300) var(--jh-font-family-roboto)
Aa
--jh-font-display-light-2
Used to create visual emphasis through size without being misconstrued as a heading
var(--jh-font-weight-300) var(--jh-font-size-1350)/var(--jh-font-line-height-1600) var(--jh-font-family-roboto)
Aa
--jh-font-display-light-3
Used to create visual emphasis through size without being misconstrued as a heading
var(--jh-font-weight-300) var(--jh-font-size-2300)/var(--jh-font-line-height-2700) var(--jh-font-family-roboto)
Aa

Heading

Token Value Example
--jh-font-heading-regular-1
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-400) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto)
Aa
--jh-font-heading-regular-2
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-400) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto)
Aa
--jh-font-heading-regular-3
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-400) var(--jh-font-size-500)/var(--jh-font-line-height-700) var(--jh-font-family-roboto)
Aa
--jh-font-heading-regular-4
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-400) var(--jh-font-size-700)/var(--jh-font-line-height-900) var(--jh-font-family-roboto)
Aa
--jh-font-heading-regular-5
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-400) var(--jh-font-size-800)/var(--jh-font-line-height-1000) var(--jh-font-family-roboto)
Aa
--jh-font-heading-regular-6
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-400) var(--jh-font-size-900)/var(--jh-font-line-height-1100) var(--jh-font-family-roboto)
Aa
--jh-font-heading-medium-1
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-500) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto)
Aa
--jh-font-heading-medium-2
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-500) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto)
Aa
--jh-font-heading-medium-3
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-500) var(--jh-font-size-500)/var(--jh-font-line-height-700) var(--jh-font-family-roboto)
Aa
--jh-font-heading-medium-4
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-500) var(--jh-font-size-700)/var(--jh-font-line-height-900) var(--jh-font-family-roboto)
Aa
--jh-font-heading-medium-5
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-500) var(--jh-font-size-800)/var(--jh-font-line-height-1000) var(--jh-font-family-roboto)
Aa
--jh-font-heading-medium-6
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-500) var(--jh-font-size-900)/var(--jh-font-line-height-1100) var(--jh-font-family-roboto)
Aa
--jh-font-heading-bold-1
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-700) var(--jh-font-size-350)/var(--jh-font-line-height-500) var(--jh-font-family-roboto)
Aa
--jh-font-heading-bold-2
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-700) var(--jh-font-size-400)/var(--jh-font-line-height-600) var(--jh-font-family-roboto)
Aa
--jh-font-heading-bold-3
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-700) var(--jh-font-size-500)/var(--jh-font-line-height-700) var(--jh-font-family-roboto)
Aa
--jh-font-heading-bold-4
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-700) var(--jh-font-size-700)/var(--jh-font-line-height-900) var(--jh-font-family-roboto)
Aa
--jh-font-heading-bold-5
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-700) var(--jh-font-size-800)/var(--jh-font-line-height-1000) var(--jh-font-family-roboto)
Aa
--jh-font-heading-bold-6
Used to create visual hierarchy on a page and within a component
var(--jh-font-weight-700) var(--jh-font-size-900)/var(--jh-font-line-height-1100) var(--jh-font-family-roboto)
Aa