Dark theme
Global tokens
Color
jh-color-black-alpha-10- Description
- Black at 10% opacity
- Value
#0000001a- Computed value
#0000001a
jh-color-black-alpha-20- Description
- Black at 20% opacity
- Value
#00000033- Computed value
#00000033
jh-color-black-alpha-30- Description
- Black at 30% opacity
- Value
#0000004d- Computed value
#0000004d
jh-color-black-alpha-40- Description
- Black at 40% opacity
- Value
#00000066- Computed value
#00000066
jh-color-black-alpha-50- Description
- Black at 50% opacity
- Value
#00000080- Computed value
#00000080
jh-color-black-alpha-60- Description
- Black at 60% opacity
- Value
#00000099- Computed value
#00000099
jh-color-black-alpha-70- Description
- Black at 70% opacity
- Value
#000000b3- Computed value
#000000b3
jh-color-black-alpha-80- Description
- Black at 80% opacity
- Value
#000000cc- Computed value
#000000cc
jh-color-black-alpha-90- Description
- Black at 90% opacity
- Value
#000000e6- Computed value
#000000e6
jh-color-black-alpha-100- Description
- Black at 100% opacity
- Value
#000000ff- Computed value
#000000ff
jh-color-white-alpha-10- Description
- White at 10% opacity
- Value
#ffffff1a- Computed value
#ffffff1a
jh-color-white-alpha-20- Description
- White at 20% opacity
- Value
#ffffff33- Computed value
#ffffff33
jh-color-white-alpha-30- Description
- White at 30% opacity
- Value
#ffffff4d- Computed value
#ffffff4d
jh-color-white-alpha-40- Description
- White at 40% opacity
- Value
#ffffff66- Computed value
#ffffff66
jh-color-white-alpha-50- Description
- White at 50% opacity
- Value
#ffffff80- Computed value
#ffffff80
jh-color-white-alpha-60- Description
- White at 60% opacity
- Value
#ffffff99- Computed value
#ffffff99
jh-color-white-alpha-70- Description
- White at 70% opacity
- Value
#ffffffb3- Computed value
#ffffffb3
jh-color-white-alpha-80- Description
- White at 80% opacity
- Value
#ffffffcc- Computed value
#ffffffcc
jh-color-white-alpha-90- Description
- White at 90% opacity
- Value
#ffffffe6- Computed value
#ffffffe6
jh-color-white-alpha-100- Description
- White at 100% opacity
- Value
#ffffffff- Computed value
#ffffffff
jh-color-gray-50- Description
- Gray 50
- Value
#f4f4f4ff- Computed value
#f4f4f4ff
jh-color-gray-100- Description
- Gray 100; Brand color: Light cool gray
- Value
#ebebebff- Computed value
#ebebebff
jh-color-gray-150- Description
- Gray 150
- Value
#d7d7d7ff- Computed value
#d7d7d7ff
jh-color-gray-200- Description
- Gray 200
- Value
#cdcdcdff- Computed value
#cdcdcdff
jh-color-gray-250- Description
- Gray 250; Brand color: Medium cool gray
- Value
#bababaff- Computed value
#bababaff
jh-color-gray-300- Description
- Gray 300
- Value
#afafafff- Computed value
#afafafff
jh-color-gray-350- Description
- Gray 350
- Value
#a2a2a2ff- Computed value
#a2a2a2ff
jh-color-gray-400- Description
- Gray 400
- Value
#989898ff- Computed value
#989898ff
jh-color-gray-450- Description
- Gray 450
- Value
#8a8a8aff- Computed value
#8a8a8aff
jh-color-gray-500- Description
- Gray 500
- Value
#747474ff- Computed value
#747474ff
jh-color-gray-550- Description
- Gray 550
- Value
#6a6a6aff- Computed value
#6a6a6aff
jh-color-gray-600- Description
- Gray 600
- Value
#636363ff- Computed value
#636363ff
jh-color-gray-650- Description
- Gray 650; Brand color: Dark cool gray
- Value
#595959ff- Computed value
#595959ff
jh-color-gray-700- Description
- Gray 700
- Value
#515151ff- Computed value
#515151ff
jh-color-gray-750- Description
- Gray 750
- Value
#474747ff- Computed value
#474747ff
jh-color-gray-800- Description
- Gray 800
- Value
#3e3e3eff- Computed value
#3e3e3eff
jh-color-gray-850- Description
- Gray 850
- Value
#343434ff- Computed value
#343434ff
jh-color-gray-900- Description
- Gray 900
- Value
#2c2c2cff- Computed value
#2c2c2cff
jh-color-gray-950- Description
- Gray 950
- Value
#202020ff- Computed value
#202020ff
jh-color-red-50- Description
- Red 50
- Value
#fdf1eeff- Computed value
#fdf1eeff
jh-color-red-100- Description
- Red 100
- Value
#fae7e2ff- Computed value
#fae7e2ff
jh-color-red-150- Description
- Red 150
- Value
#f5cfc4ff- Computed value
#f5cfc4ff
jh-color-red-200- Description
- Red 200
- Value
#fbbfaeff- Computed value
#fbbfaeff
jh-color-red-250- Description
- Red 250
- Value
#f8a48eff- Computed value
#f8a48eff
jh-color-red-300- Description
- Red 300
- Value
#fa9176ff- Computed value
#fa9176ff
jh-color-red-350- Description
- Red 350
- Value
#f97b5eff- Computed value
#f97b5eff
jh-color-red-400- Description
- Red 400
- Value
#f96749ff- Computed value
#f96749ff
jh-color-red-450- Description
- Red 450
- Value
#f15135ff- Computed value
#f15135ff
jh-color-red-500- Description
- Red 500
- Value
#db3520ff- Computed value
#db3520ff
jh-color-red-550- Description
- Red 550
- Value
#ca2515ff- Computed value
#ca2515ff
jh-color-red-600- Description
- Red 600
- Value
#bd2113ff- Computed value
#bd2113ff
jh-color-red-650- Description
- Red 650
- Value
#ae180dff- Computed value
#ae180dff
jh-color-red-700- Description
- Red 700
- Value
#9e150bff- Computed value
#9e150bff
jh-color-red-750- Description
- Red 750
- Value
#8b150aff- Computed value
#8b150aff
jh-color-red-800- Description
- Red 800
- Value
#77190dff- Computed value
#77190dff
jh-color-red-850- Description
- Red 850
- Value
#601b0eff- Computed value
#601b0eff
jh-color-red-900- Description
- Red 900
- Value
#4e1a0fff- Computed value
#4e1a0fff
jh-color-red-950- Description
- Red 950
- Value
#391307ff- Computed value
#391307ff
jh-color-orange-50- Description
- Orange 50
- Value
#faf2ebff- Computed value
#faf2ebff
jh-color-orange-100- Description
- Orange 100
- Value
#fbe8d5ff- Computed value
#fbe8d5ff
jh-color-orange-150- Description
- Orange 150
- Value
#f5d0a9ff- Computed value
#f5d0a9ff
jh-color-orange-200- Description
- Orange 200
- Value
#fcc17fff- Computed value
#fcc17fff
jh-color-orange-250- Description
- Orange 250
- Value
#f0ab58ff- Computed value
#f0ab58ff
jh-color-orange-300- Description
- Orange 300
- Value
#e89e3eff- Computed value
#e89e3eff
jh-color-orange-350- Description
- Orange 350
- Value
#db912cff- Computed value
#db912cff
jh-color-orange-400- Description
- Orange 400
- Value
#cf8722ff- Computed value
#cf8722ff
jh-color-orange-450- Description
- Orange 450
- Value
#bf7a17ff- Computed value
#bf7a17ff
jh-color-orange-500- Description
- Orange 500
- Value
#a4670cff- Computed value
#a4670cff
jh-color-orange-550- Description
- Orange 550
- Value
#935d11ff- Computed value
#935d11ff
jh-color-orange-600- Description
- Orange 600
- Value
#885818ff- Computed value
#885818ff
jh-color-orange-650- Description
- Orange 650
- Value
#7a5019ff- Computed value
#7a5019ff
jh-color-orange-700- Description
- Orange 700
- Value
#6e4818ff- Computed value
#6e4818ff
jh-color-orange-750- Description
- Orange 750
- Value
#604018ff- Computed value
#604018ff
jh-color-orange-800- Description
- Orange 800
- Value
#523714ff- Computed value
#523714ff
jh-color-orange-850- Description
- Orange 850
- Value
#462e11ff- Computed value
#462e11ff
jh-color-orange-900- Description
- Orange 900
- Value
#3b270fff- Computed value
#3b270fff
jh-color-orange-950- Description
- Orange 950
- Value
#2c1c04ff- Computed value
#2c1c04ff
jh-color-yellow-50- Description
- Yellow 50
- Value
#f9f3e7ff- Computed value
#f9f3e7ff
jh-color-yellow-100- Description
- Yellow 100
- Value
#f8eac7ff- Computed value
#f8eac7ff
jh-color-yellow-150- Description
- Yellow 150
- Value
#ecd595ff- Computed value
#ecd595ff
jh-color-yellow-200- Description
- Yellow 200
- Value
#e9ca65ff- Computed value
#e9ca65ff
jh-color-yellow-250- Description
- Yellow 250
- Value
#d8b63bff- Computed value
#d8b63bff
jh-color-yellow-300- Description
- Yellow 300
- Value
#ccab28ff- Computed value
#ccab28ff
jh-color-yellow-350- Description
- Yellow 350
- Value
#be9e1fff- Computed value
#be9e1fff
jh-color-yellow-400- Description
- Yellow 400
- Value
#b19524ff- Computed value
#b19524ff
jh-color-yellow-450- Description
- Yellow 450
- Value
#a28823ff- Computed value
#a28823ff
jh-color-yellow-500- Description
- Yellow 500
- Value
#8a7318ff- Computed value
#8a7318ff
jh-color-yellow-550- Description
- Yellow 550
- Value
#7d6815ff- Computed value
#7d6815ff
jh-color-yellow-600- Description
- Yellow 600
- Value
#746118ff- Computed value
#746118ff
jh-color-yellow-650- Description
- Yellow 650
- Value
#695716ff- Computed value
#695716ff
jh-color-yellow-700- Description
- Yellow 700
- Value
#5f4f13ff- Computed value
#5f4f13ff
jh-color-yellow-750- Description
- Yellow 750
- Value
#544511ff- Computed value
#544511ff
jh-color-yellow-800- Description
- Yellow 800
- Value
#483b0fff- Computed value
#483b0fff
jh-color-yellow-850- Description
- Yellow 850
- Value
#3d320cff- Computed value
#3d320cff
jh-color-yellow-900- Description
- Yellow 900
- Value
#332a0dff- Computed value
#332a0dff
jh-color-yellow-950- Description
- Yellow 950
- Value
#261f04ff- Computed value
#261f04ff
jh-color-green-50- Description
- Green 50
- Value
#ecf7e7ff- Computed value
#ecf7e7ff
jh-color-green-100- Description
- Green 100
- Value
#d1f5c3ff- Computed value
#d1f5c3ff
jh-color-green-150- Description
- Green 150
- Value
#a9e794ff- Computed value
#a9e794ff
jh-color-green-200- Description
- Green 200
- Value
#88e26eff- Computed value
#88e26eff
jh-color-green-250- Description
- Green 250
- Value
#6ad150ff- Computed value
#6ad150ff
jh-color-green-300- Description
- Green 300
- Value
#5fc445ff- Computed value
#5fc445ff
jh-color-green-350- Description
- Green 350
- Value
#57b640ff- Computed value
#57b640ff
jh-color-green-400- Description
- Green 400
- Value
#56aa41ff- Computed value
#56aa41ff
jh-color-green-450- Description
- Green 450
- Value
#539b40ff- Computed value
#539b40ff
jh-color-green-500- Description
- Green 500
- Value
#438332ff- Computed value
#438332ff
jh-color-green-550- Description
- Green 550
- Value
#3e772fff- Computed value
#3e772fff
jh-color-green-600- Description
- Green 600
- Value
#3b6f2dff- Computed value
#3b6f2dff
jh-color-green-650- Description
- Green 650
- Value
#366429ff- Computed value
#366429ff
jh-color-green-700- Description
- Green 700
- Value
#325a26ff- Computed value
#325a26ff
jh-color-green-750- Description
- Green 750
- Value
#2d4f23ff- Computed value
#2d4f23ff
jh-color-green-800- Description
- Green 800
- Value
#28451fff- Computed value
#28451fff
jh-color-green-850- Description
- Green 850
- Value
#22391aff- Computed value
#22391aff
jh-color-green-900- Description
- Green 900
- Value
#1d3017ff- Computed value
#1d3017ff
jh-color-green-950- Description
- Green 950
- Value
#12240aff- Computed value
#12240aff
jh-color-mint-50- Description
- Mint 50
- Value
#e7f8eeff- Computed value
#e7f8eeff
jh-color-mint-100- Description
- Mint 100
- Value
#c0f8dbff- Computed value
#c0f8dbff
jh-color-mint-150- Description
- Mint 150
- Value
#90eabeff- Computed value
#90eabeff
jh-color-mint-200- Description
- Mint 200
- Value
#65e4acff- Computed value
#65e4acff
jh-color-mint-250- Description
- Mint 250
- Value
#34d395ff- Computed value
#34d395ff
jh-color-mint-300- Description
- Mint 300
- Value
#18c789ff- Computed value
#18c789ff
jh-color-mint-350- Description
- Mint 350
- Value
#02b97eff- Computed value
#02b97eff
jh-color-mint-400- Description
- Mint 400
- Value
#14ad77ff- Computed value
#14ad77ff
jh-color-mint-450- Description
- Mint 450
- Value
#1a9e6dff- Computed value
#1a9e6dff
jh-color-mint-500- Description
- Mint 500
- Value
#07865bff- Computed value
#07865bff
jh-color-mint-550- Description
- Mint 550
- Value
#177954ff- Computed value
#177954ff
jh-color-mint-600- Description
- Mint 600
- Value
#237050ff- Computed value
#237050ff
jh-color-mint-650- Description
- Mint 650
- Value
#236548ff- Computed value
#236548ff
jh-color-mint-700- Description
- Mint 700
- Value
#205b41ff- Computed value
#205b41ff
jh-color-mint-750- Description
- Mint 750
- Value
#1f503aff- Computed value
#1f503aff
jh-color-mint-800- Description
- Mint 800
- Value
#1c4633ff- Computed value
#1c4633ff
jh-color-mint-850- Description
- Mint 850
- Value
#173a2aff- Computed value
#173a2aff
jh-color-mint-900- Description
- Mint 900
- Value
#163124ff- Computed value
#163124ff
jh-color-mint-950- Description
- Mint 950
- Value
#0e2319ff- Computed value
#0e2319ff
jh-color-cyan-50- Description
- Cyan 50; Brand color: Open sky
- Value
#e8f7f7ff- Computed value
#e8f7f7ff
jh-color-cyan-100- Description
- Cyan 100
- Value
#ccf2fbff- Computed value
#ccf2fbff
jh-color-cyan-150- Description
- Cyan 150
- Value
#9ce3fcff- Computed value
#9ce3fcff
jh-color-cyan-200- Description
- Cyan 200; Brand color: Tech blue
- Value
#76dcfdff- Computed value
#76dcfdff
jh-color-cyan-250- Description
- Cyan 250
- Value
#48caf0ff- Computed value
#48caf0ff
jh-color-cyan-300- Description
- Cyan 300
- Value
#29bfe6ff- Computed value
#29bfe6ff
jh-color-cyan-350- Description
- Cyan 350
- Value
#18b2d7ff- Computed value
#18b2d7ff
jh-color-cyan-400- Description
- Cyan 400
- Value
#1aa7c9ff- Computed value
#1aa7c9ff
jh-color-cyan-450- Description
- Cyan 450
- Value
#2098b7ff- Computed value
#2098b7ff
jh-color-cyan-500- Description
- Cyan 500
- Value
#1b809aff- Computed value
#1b809aff
jh-color-cyan-550- Description
- Cyan 550
- Value
#25748bff- Computed value
#25748bff
jh-color-cyan-600- Description
- Cyan 600
- Value
#266c81ff- Computed value
#266c81ff
jh-color-cyan-650- Description
- Cyan 650
- Value
#246174ff- Computed value
#246174ff
jh-color-cyan-700- Description
- Cyan 700
- Value
#205869ff- Computed value
#205869ff
jh-color-cyan-750- Description
- Cyan 750
- Value
#1e4d5cff- Computed value
#1e4d5cff
jh-color-cyan-800- Description
- Cyan 800
- Value
#1b4350ff- Computed value
#1b4350ff
jh-color-cyan-850- Description
- Cyan 850
- Value
#153843ff- Computed value
#153843ff
jh-color-cyan-900- Description
- Cyan 900
- Value
#0d303aff- Computed value
#0d303aff
jh-color-cyan-950- Description
- Cyan 950
- Value
#03232cff- Computed value
#03232cff
jh-color-blue-50- Description
- Blue 50
- Value
#ecf5feff- Computed value
#ecf5feff
jh-color-blue-100- Description
- Blue 100
- Value
#daeeffff- Computed value
#daeeffff
jh-color-blue-150- Description
- Blue 150
- Value
#badcfbff- Computed value
#badcfbff
jh-color-blue-200- Description
- Blue 200
- Value
#a3d4ffff- Computed value
#a3d4ffff
jh-color-blue-250- Description
- Blue 250
- Value
#86c1f8ff- Computed value
#86c1f8ff
jh-color-blue-300- Description
- Blue 300
- Value
#76b4f8ff- Computed value
#76b4f8ff
jh-color-blue-350- Description
- Blue 350
- Value
#67a6f8ff- Computed value
#67a6f8ff
jh-color-blue-400- Description
- Blue 400
- Value
#5c9afcff- Computed value
#5c9afcff
jh-color-blue-450- Description
- Blue 450
- Value
#4a8afbff- Computed value
#4a8afbff
jh-color-blue-500- Description
- Blue 500
- Value
#1470ebff- Computed value
#1470ebff
jh-color-blue-550- Description
- Blue 550
- Value
#1665ebff- Computed value
#1665ebff
jh-color-blue-600- Description
- Blue 600; Brand color: Vibrant cobalt
- Value
#085ce5ff- Computed value
#085ce5ff
jh-color-blue-650- Description
- Blue 650
- Value
#264fd5ff- Computed value
#264fd5ff
jh-color-blue-700- Description
- Blue 700
- Value
#3343c4ff- Computed value
#3343c4ff
jh-color-blue-750- Description
- Blue 750
- Value
#2a3bb1ff- Computed value
#2a3bb1ff
jh-color-blue-800- Description
- Blue 800
- Value
#23339eff- Computed value
#23339eff
jh-color-blue-850- Description
- Blue 850
- Value
#192a89ff- Computed value
#192a89ff
jh-color-blue-900- Description
- Blue 900
- Value
#132377ff- Computed value
#132377ff
jh-color-blue-950- Description
- Blue 950; Brand color: Legacy navy
- Value
#06185fff- Computed value
#06185fff
jh-color-violet-50- Description
- Violet 50
- Value
#f7f2faff- Computed value
#f7f2faff
jh-color-violet-100- Description
- Violet 100
- Value
#f4e7faff- Computed value
#f4e7faff
jh-color-violet-150- Description
- Violet 150
- Value
#e8cff6ff- Computed value
#e8cff6ff
jh-color-violet-200- Description
- Violet 200
- Value
#e5c0faff- Computed value
#e5c0faff
jh-color-violet-250- Description
- Violet 250
- Value
#d8a9f4ff- Computed value
#d8a9f4ff
jh-color-violet-300- Description
- Violet 300
- Value
#d298f6ff- Computed value
#d298f6ff
jh-color-violet-350- Description
- Violet 350
- Value
#ca87f5ff- Computed value
#ca87f5ff
jh-color-violet-400- Description
- Violet 400
- Value
#c676fcff- Computed value
#c676fcff
jh-color-violet-450- Description
- Violet 450
- Value
#bd5ffeff- Computed value
#bd5ffeff
jh-color-violet-500- Description
- Violet 500
- Value
#a83df3ff- Computed value
#a83df3ff
jh-color-violet-550- Description
- Violet 550
- Value
#9e2aefff- Computed value
#9e2aefff
jh-color-violet-600- Description
- Violet 600
- Value
#961ee7ff- Computed value
#961ee7ff
jh-color-violet-650- Description
- Violet 650
- Value
#8818d3ff- Computed value
#8818d3ff
jh-color-violet-700- Description
- Violet 700
- Value
#7b17bfff- Computed value
#7b17bfff
jh-color-violet-750- Description
- Violet 750
- Value
#6d14aaff- Computed value
#6d14aaff
jh-color-violet-800- Description
- Violet 800
- Value
#5e0c96ff- Computed value
#5e0c96ff
jh-color-violet-850- Description
- Violet 850
- Value
#510981ff- Computed value
#510981ff
jh-color-violet-900- Description
- Violet 900
- Value
#45086eff- Computed value
#45086eff
jh-color-violet-950- Description
- Violet 950
- Value
#340257ff- Computed value
#340257ff
jh-color-magenta-50- Description
- Magenta 50
- Value
#ffeffbff- Computed value
#ffeffbff
jh-color-magenta-100- Description
- Magenta 100
- Value
#ffe3f8ff- Computed value
#ffe3f8ff
jh-color-magenta-150- Description
- Magenta 150
- Value
#fac9efff- Computed value
#fac9efff
jh-color-magenta-200- Description
- Magenta 200
- Value
#fdb8edff- Computed value
#fdb8edff
jh-color-magenta-250- Description
- Magenta 250
- Value
#fb99e8ff- Computed value
#fb99e8ff
jh-color-magenta-300- Description
- Magenta 300
- Value
#fc82e6ff- Computed value
#fc82e6ff
jh-color-magenta-350- Description
- Magenta 350
- Value
#f76ddfff- Computed value
#f76ddfff
jh-color-magenta-400- Description
- Magenta 400
- Value
#f359daff- Computed value
#f359daff
jh-color-magenta-450- Description
- Magenta 450
- Value
#e547cdff- Computed value
#e547cdff
jh-color-magenta-500- Description
- Magenta 500
- Value
#ca2ab4ff- Computed value
#ca2ab4ff
jh-color-magenta-550- Description
- Magenta 550
- Value
#bd1ca8ff- Computed value
#bd1ca8ff
jh-color-magenta-600- Description
- Magenta 600
- Value
#b11a9dff- Computed value
#b11a9dff
jh-color-magenta-650- Description
- Magenta 650
- Value
#a0188eff- Computed value
#a0188eff
jh-color-magenta-700- Description
- Magenta 700
- Value
#8f1a7fff- Computed value
#8f1a7fff
jh-color-magenta-750- Description
- Magenta 750
- Value
#7f1771ff- Computed value
#7f1771ff
jh-color-magenta-800- Description
- Magenta 800
- Value
#6e1662ff- Computed value
#6e1662ff
jh-color-magenta-850- Description
- Magenta 850
- Value
#5d1153ff- Computed value
#5d1153ff
jh-color-magenta-900- Description
- Magenta 900
- Value
#500e46ff- Computed value
#500e46ff
jh-color-magenta-950- Description
- Magenta 950
- Value
#3f0237ff- Computed value
#3f0237ff
Border
jh-border-radius-0- Description
- No border radius
- Value
0px- Computed value
0px
jh-border-radius-50- Description
- Border radius 50
- Value
2px- Computed value
2px
jh-border-radius-100- Description
- Border radius 100
- Value
4px- Computed value
4px
jh-border-radius-200- Description
- Border radius 200
- Value
8px- Computed value
8px
jh-border-radius-300- Description
- Border radius 300
- Value
12px- Computed value
12px
jh-border-radius-400- Description
- Border radius 400
- Value
16px- Computed value
16px
jh-border-radius-circle- Description
- Circular border radius
- Value
50%- Computed value
50%
jh-border-radius-pill- Description
- Pill border radius
- Value
9999px- Computed value
9999px
Font
jh-font-family-sans- Description
- Sans-serif font family
- Value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-family-mono- Description
- Monospace font family
- Value
'Roboto Mono', monospace- Computed value
'Roboto Mono', monospace
jh-font-line-height-300- Description
- Line-height 300
- Value
12px- Computed value
12px
jh-font-line-height-400- Description
- Line-height 400
- Value
16px- Computed value
16px
jh-font-line-height-500- Description
- Line-height 500
- Value
20px- Computed value
20px
jh-font-line-height-600- Description
- Line-height 600
- Value
24px- Computed value
24px
jh-font-line-height-700- Description
- Line-height 700
- Value
28px- Computed value
28px
jh-font-line-height-800- Description
- Line-height 800
- Value
32px- Computed value
32px
jh-font-line-height-900- Description
- Line-height 900
- Value
36px- Computed value
36px
jh-font-line-height-1000- Description
- Line-height 1000
- Value
40px- Computed value
40px
jh-font-line-height-1100- Description
- Line-height 1100
- Value
44px- Computed value
44px
jh-font-line-height-1300- Description
- Line-height 1300
- Value
52px- Computed value
52px
jh-font-line-height-1500- Description
- Line-height 1500
- Value
60px- Computed value
60px
jh-font-line-height-1600- Description
- Line-height 1600
- Value
64px- Computed value
64px
jh-font-line-height-1800- Description
- Line-height 1800
- Value
72px- Computed value
72px
jh-font-line-height-2000- Description
- Line-height 2000
- Value
80px- Computed value
80px
jh-font-line-height-2300- Description
- Line-height 2300
- Value
92px- Computed value
92px
jh-font-line-height-2500- Description
- Line-height 2500
- Value
100px- Computed value
100px
jh-font-line-height-2700- Description
- Line-height 2700
- Value
108px- Computed value
108px
jh-font-weight-300- Description
- Font weight 300
- Value
300- Computed value
300
jh-font-weight-400- Description
- Font weight 400
- Value
400- Computed value
400
jh-font-weight-500- Description
- Font weight 500
- Value
500- Computed value
500
jh-font-weight-700- Description
- Font weight 700
- Value
700- Computed value
700
jh-font-size-250- Description
- Font size 250
- Value
10px- Computed value
10px
jh-font-size-300- Description
- Font size 300
- Value
12px- Computed value
12px
jh-font-size-350- Description
- Font size 350
- Value
14px- Computed value
14px
jh-font-size-400- Description
- Font size 400
- Value
16px- Computed value
16px
jh-font-size-450- Description
- Font size 450
- Value
18px- Computed value
18px
jh-font-size-500- Description
- Font size 500
- Value
20px- Computed value
20px
jh-font-size-600- Description
- Font size 600
- Value
24px- Computed value
24px
jh-font-size-700- Description
- Font size 700
- Value
28px- Computed value
28px
jh-font-size-800- Description
- Font size 800
- Value
32px- Computed value
32px
jh-font-size-900- Description
- Font size 900
- Value
36px- Computed value
36px
jh-font-size-1050- Description
- Font size 1050
- Value
42px- Computed value
42px
jh-font-size-1200- Description
- Font size 1200
- Value
48px- Computed value
48px
jh-font-size-1350- Description
- Font size 1350
- Value
54px- Computed value
54px
jh-font-size-1500- Description
- Font size 1500
- Value
60px- Computed value
60px
jh-font-size-1700- Description
- Font size 1700
- Value
68px- Computed value
68px
jh-font-size-1900- Description
- Font size 1900
- Value
76px- Computed value
76px
jh-font-size-2100- Description
- Font size 2100
- Value
84px- Computed value
84px
jh-font-size-2300- Description
- Font size 2300
- Value
92px- Computed value
92px
Opacity
jh-opacity-0- Description
- Transparent
- Value
0- Computed value
0
jh-opacity-100- Description
- Opacity 100
- Value
0.1- Computed value
0.1
jh-opacity-200- Description
- Opacity 200
- Value
0.2- Computed value
0.2
jh-opacity-300- Description
- Opacity 300
- Value
0.3- Computed value
0.3
jh-opacity-400- Description
- Opacity 400
- Value
0.4- Computed value
0.4
jh-opacity-500- Description
- Opacity 500
- Value
0.5- Computed value
0.5
jh-opacity-600- Description
- Opacity 600
- Value
0.6- Computed value
0.6
jh-opacity-700- Description
- Opacity 700
- Value
0.7- Computed value
0.7
jh-opacity-800- Description
- Opacity 800
- Value
0.8- Computed value
0.8
jh-opacity-900- Description
- Opacity 900
- Value
0.9- Computed value
0.9
jh-opacity-1000- Description
- Fully opaque
- Value
1.0- Computed value
1.0
Dimension
jh-dimension-0- Description
- Dimension 0
- Value
0px- Computed value
0px
jh-dimension-25- Description
- Dimension 25
- Value
1px- Computed value
1px
jh-dimension-50- Description
- Dimension 50
- Value
2px- Computed value
2px
jh-dimension-100- Description
- Dimension 100
- Value
4px- Computed value
4px
jh-dimension-200- Description
- Dimension 200
- Value
8px- Computed value
8px
jh-dimension-300- Description
- Dimension 300
- Value
12px- Computed value
12px
jh-dimension-400- Description
- Dimension 400
- Value
16px- Computed value
16px
jh-dimension-500- Description
- Dimension 500
- Value
20px- Computed value
20px
jh-dimension-600- Description
- Dimension 600
- Value
24px- Computed value
24px
jh-dimension-700- Description
- Dimension 700
- Value
28px- Computed value
28px
jh-dimension-800- Description
- Dimension 800
- Value
32px- Computed value
32px
jh-dimension-900- Description
- Dimension 900
- Value
36px- Computed value
36px
jh-dimension-1000- Description
- Dimension 1000
- Value
40px- Computed value
40px
jh-dimension-1100- Description
- Dimension 1100
- Value
44px- Computed value
44px
jh-dimension-1200- Description
- Dimension 1200
- Value
48px- Computed value
48px
jh-dimension-1300- Description
- Dimension 1300
- Value
52px- Computed value
52px
jh-dimension-1400- Description
- Dimension 1400
- Value
56px- Computed value
56px
jh-dimension-1500- Description
- Dimension 1500
- Value
60px- Computed value
60px
jh-dimension-1600- Description
- Dimension 1600
- Value
64px- Computed value
64px
jh-dimension-1700- Description
- Dimension 1700
- Value
68px- Computed value
68px
jh-dimension-1800- Description
- Dimension 1800
- Value
72px- Computed value
72px
jh-dimension-1900- Description
- Dimension 1900
- Value
76px- Computed value
76px
jh-dimension-2000- Description
- Dimension 2000
- Value
80px- Computed value
80px
jh-dimension-2100- Description
- Dimension 2100
- Value
84px- Computed value
84px
jh-dimension-2200- Description
- Dimension 2200
- Value
88px- Computed value
88px
jh-dimension-2300- Description
- Dimension 2300
- Value
92px- Computed value
92px
jh-dimension-2400- Description
- Dimension 2400
- Value
96px- Computed value
96px
Z-index
jh-z-index-0- Description
- Z-index 0
- Value
0- Computed value
0
jh-z-index-negative-100- Description
- Z-index -100
- Value
-100- Computed value
-100
jh-z-index-positive-100- Description
- Z-index 100
- Value
100- Computed value
100
jh-z-index-positive-200- Description
- Z-index 200
- Value
200- Computed value
200
jh-z-index-positive-300- Description
- Z-index 300
- Value
300- Computed value
300
jh-z-index-positive-400- Description
- Z-index 400
- Value
400- Computed value
400
jh-z-index-positive-500- Description
- Z-index 500
- Value
500- Computed value
500
jh-z-index-positive-600- Description
- Z-index 600
- Value
600- Computed value
600
jh-z-index-positive-700- Description
- Z-index 700
- Value
700- Computed value
700
jh-z-index-positive-800- Description
- Z-index 800
- Value
800- Computed value
800
jh-z-index-positive-900- Description
- Z-index 900
- Value
900- Computed value
900
jh-z-index-positive-1000- Description
- Z-index 1000
- Value
1000- Computed value
1000
Alias tokens
Color
jh-color-container-page- Description
- Used on page-level containers that make up large portions of the overall background
- Value
jh-color-gray-950- Computed value
#202020ff
jh-color-container-primary-enabled- Description
- Used on the major containers throughout the user interface such as cards and dialogs
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-container-primary-hover- Description
- Hover color for primary container
- Value
jh-color-gray-850- Computed value
#343434ff
jh-color-container-primary-active- Description
- Active color for primary container
- Value
jh-color-gray-800- Computed value
#3e3e3eff
jh-color-container-primary-selected- Description
- Selected color for primary container
- Value
jh-color-blue-850- Computed value
#192a89ff
jh-color-container-secondary-enabled- Description
- Used on containers and sections that will sit on top of or within a primary container
- Value
jh-color-gray-850- Computed value
#343434ff
jh-color-container-secondary-hover- Description
- Hover color for secondary container
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-container-secondary-active- Description
- Active color for secondary container
- Value
jh-color-gray-800- Computed value
#3e3e3eff
jh-color-container-secondary-selected- Description
- Selected color for secondary container
- Value
jh-color-blue-800- Computed value
#23339eff
jh-color-container-neutral-enabled- Description
- Used on containers that have a neutral context
- Value
jh-color-gray-800- Computed value
#3e3e3eff
jh-color-container-neutral-hover- Description
- Hover color for neutral container
- Value
jh-color-gray-750- Computed value
#474747ff
jh-color-container-neutral-active- Description
- Active color for neutral container
- Value
jh-color-gray-700- Computed value
#515151ff
jh-color-container-brand-enabled- Description
- Used on containers that have a branded context
- Value
jh-color-blue-800- Computed value
#23339eff
jh-color-container-brand-hover- Description
- Hover color for branded container
- Value
jh-color-blue-750- Computed value
#2a3bb1ff
jh-color-container-brand-active- Description
- Active color for branded container
- Value
jh-color-blue-700- Computed value
#3343c4ff
jh-color-container-positive-enabled- Description
- Used on containers that have a positive context
- Value
jh-color-green-800- Computed value
#28451fff
jh-color-container-positive-hover- Description
- Hover color for positive container
- Value
jh-color-green-750- Computed value
#2d4f23ff
jh-color-container-positive-active- Description
- Active color for positive container
- Value
jh-color-green-700- Computed value
#325a26ff
jh-color-container-negative-enabled- Description
- Used on containers that have a negative context
- Value
jh-color-red-800- Computed value
#77190dff
jh-color-container-negative-hover- Description
- Hover color for negative container
- Value
jh-color-red-750- Computed value
#8b150aff
jh-color-container-negative-active- Description
- Active color for negative container
- Value
jh-color-red-700- Computed value
#9e150bff
jh-color-overlay- Description
- Used to distinguish the modal layer from the layer underneath
- Value
jh-color-black-alpha-70- Computed value
#000000b3
jh-color-control-enabled- Description
- Used on the containers of interactive elements such as slider and switch tracks
- Value
jh-color-gray-750- Computed value
#474747ff
jh-color-control-hover- Description
- Hover color for control
- Value
jh-color-gray-700- Computed value
#515151ff
jh-color-control-active- Description
- Active color for control
- Value
jh-color-gray-650- Computed value
#595959ff
jh-color-divider-primary- Description
- Used on border elements that require more visual emphasis such as input fields
- Value
jh-color-gray-400- Computed value
#989898ff
jh-color-divider-secondary- Description
- Used on subtle border elements such as dividers and table borders
- Value
jh-color-gray-800- Computed value
#3e3e3eff
jh-color-divider-inverse- Description
- Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-brand-primary- Description
- Used to emphasize areas of importance such as feature areas or primary calls-to-action
- Value
jh-color-blue-950- Computed value
#06185fff
jh-color-brand-secondary- Description
- Used when another layer of visual hierarchy is needed within feature areas or on secondary calls-to-action
- Value
jh-color-blue-600- Computed value
#085ce5ff
jh-color-brand-tertiary- Description
- Used to add thoughtful branded touches to components such as accent bars
- Value
jh-color-cyan-200- Computed value
#76dcfdff
jh-color-brand-gradient-light- Description
- Used to accent branded elements with content such as ads or other calls-to-action
- Value
linear-gradient(135deg, jh-color-cyan-50 0%, jh-color-cyan-200 100%)- Computed value
linear-gradient(135deg, #e8f7f7ff 0%, #76dcfdff 100%)
jh-color-brand-gradient-medium- Description
- Used to accents branded elements without content
- Value
linear-gradient(135deg, jh-color-cyan-200 0%, jh-color-blue-600 100%)- Computed value
linear-gradient(135deg, #76dcfdff 0%, #085ce5ff 100%)
jh-color-brand-gradient-dark- Description
- Used to accent branded elements with content such as ads or other calls-to-action
- Value
linear-gradient(135deg, jh-color-blue-600 0%, jh-color-blue-950 100%)- Computed value
linear-gradient(135deg, #085ce5ff 0%, #06185fff 100%)
jh-color-brand-on-primary- Description
- Used for content that sits on the primary brand color
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-brand-on-secondary- Description
- Used for content that sits on the secondary brand color
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-brand-on-tertiary- Description
- Used for content that sits on the tertiary brand color
- Value
jh-color-blue-950- Computed value
#06185fff
jh-color-brand-on-gradient-light- Description
- Used for content that sits on the light brand gradient
- Value
jh-color-blue-950- Computed value
#06185fff
jh-color-brand-on-gradient-dark- Description
- Used for content that sits on the dark brand gradient
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-content-brand-enabled- Description
- Used for content that needs to have a strong branded presence
- Value
jh-color-blue-300- Computed value
#76b4f8ff
jh-color-content-brand-hover- Description
- Hover color for branded content
- Value
jh-color-blue-250- Computed value
#86c1f8ff
jh-color-content-brand-active- Description
- Active color for branded content
- Value
jh-color-blue-200- Computed value
#a3d4ffff
jh-color-content-primary-enabled- Description
- Used for the majority of fundamental content within a layout such as body copy and headers as well as neutral messages
- Value
jh-color-gray-100- Computed value
#ebebebff
jh-color-content-primary-hover- Description
- Hover color for primary content
- Value
jh-color-gray-50- Computed value
#f4f4f4ff
jh-color-content-primary-active- Description
- Active color for primary content
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-content-secondary-enabled- Description
- Used for supportive content such as labels, subtitles, and placeholder text
- Value
jh-color-gray-300- Computed value
#afafafff
jh-color-content-secondary-hover- Description
- Hover color for secondary content
- Value
jh-color-gray-250- Computed value
#bababaff
jh-color-content-secondary-active- Description
- Active color for secondary content
- Value
jh-color-gray-200- Computed value
#cdcdcdff
jh-color-content-positive-enabled- Description
- Used for content that conveys a positive response such as a deposit
- Value
jh-color-green-300- Computed value
#5fc445ff
jh-color-content-positive-hover- Description
- Hover color for positive content
- Value
jh-color-green-250- Computed value
#6ad150ff
jh-color-content-positive-active- Description
- Active color for positive content
- Value
jh-color-green-200- Computed value
#88e26eff
jh-color-content-negative-enabled- Description
- Used for content that conveys a negative response such as an error message
- Value
jh-color-red-300- Computed value
#fa9176ff
jh-color-content-negative-hover- Description
- Hover color for negative content
- Value
jh-color-red-250- Computed value
#f8a48eff
jh-color-content-negative-active- Description
- Active color for negative content
- Value
jh-color-red-200- Computed value
#fbbfaeff
jh-color-content-inverse-enabled- Description
- Used on backgrounds that don't provide sufficient contrast with other content colors
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-inverse-hover- Description
- Hover color for inverse content
- Value
jh-color-gray-850- Computed value
#343434ff
jh-color-content-inverse-active- Description
- Active color for inverse content
- Value
jh-color-gray-800- Computed value
#3e3e3eff
jh-color-content-on-brand-enabled- Description
- Used for content that sits on the content brand color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-brand-hover- Description
- Used for content that sits on the content brand hover color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-brand-active- Description
- Used for content that sits on the content brand active color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-primary-enabled- Description
- Used for content that sits on the content primary color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-primary-hover- Description
- Used for content that sits on the content primary hover color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-primary-active- Description
- Used for content that sits on the content primary active color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-secondary-enabled- Description
- Used for content that sits on the content secondary color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-secondary-hover- Description
- Used for content that sits on the content secondary hover color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-secondary-active- Description
- Used for content that sits on the content secondary active color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-positive-enabled- Description
- Used for content that sits on the content positive color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-positive-hover- Description
- Used for content that sits on the content positive hover color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-positive-active- Description
- Used for content that sits on the content positive active color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-negative-enabled- Description
- Used for content that sits on the content negative color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-negative-hover- Description
- Used for content that sits on the content negative hover color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-negative-active- Description
- Used for content that sits on the content negative active color
- Value
jh-color-gray-900- Computed value
#2c2c2cff
jh-color-content-on-inverse-enabled- Description
- Used for content that sits on the content inverse color
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-content-on-inverse-hover- Description
- Used for content that sits on the content inverse hover color
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-content-on-inverse-active- Description
- Used for content that sits on the content inverse active color
- Value
jh-color-white-alpha-100- Computed value
#ffffffff
jh-color-interactive-focus- Description
- Used for the outermost part of the focus ring
- Value
jh-color-blue-300- Computed value
#76b4f8ff
jh-color-interactive-highlight- Description
- Used for highlighting content on the page
- Value
jh-color-cyan-800- Computed value
#1b4350ff
jh-color-interactive-visited- Description
- Used for visited links
- Value
jh-color-violet-300- Computed value
#d298f6ff
jh-color-shadow-primary- Description
- Used on menus and dropdowns
- Value
jh-color-black-alpha-30- Computed value
#0000004d
jh-color-shadow-secondary- Description
- Used on components that should overlay the entire UI such as modals and dialogs
- Value
jh-color-black-alpha-10- Computed value
#0000001a
Border
jh-border-decorative-color- Description
- used for purely decorative styling such as on table borders, dividers, and edges of layout elements; does not meet the contrast minimum against the primary container
- Value
jh-color-divider-secondary- Computed value
#3e3e3eff
jh-border-decorative-width- Description
- used for purely decorative styling such as on table borders, dividers, and edges of layout elements; does not meet the contrast minimum against the primary container
- Value
jh-dimension-25- Computed value
1px
jh-border-decorative-style- Description
- used for purely decorative styling such as on table borders, dividers, and edges of layout elements; does not meet the contrast minimum against the primary container
- Value
solid- Computed value
solid
jh-border-control-color- Description
- used on interactive elements such as form controls; meets the contrast minimum against the primary container
- Value
jh-color-divider-primary- Computed value
#989898ff
jh-border-control-width- Description
- used on interactive elements such as form controls; meets the contrast minimum against the primary container
- Value
jh-dimension-25- Computed value
1px
jh-border-control-style- Description
- used on interactive elements such as form controls; meets the contrast minimum against the primary container
- Value
solid- Computed value
solid
jh-border-action-color- Description
- used to style containers with a border such as buttons; meets the contrast minimum against the primary container
- Value
jh-color-content-brand-enabled- Computed value
#76b4f8ff
jh-border-action-width- Description
- used to style containers with a border such as buttons; meets the contrast minimum against the primary container
- Value
jh-dimension-25- Computed value
1px
jh-border-action-style- Description
- used to style containers with a border such as buttons; meets the contrast minimum against the primary container
- Value
solid- Computed value
solid
jh-border-focus-color- Description
- used to style bordered implementations of the focus ring
- Value
jh-color-interactive-focus- Computed value
#76b4f8ff
jh-border-focus-width- Description
- used to style bordered implementations of the focus ring
- Value
jh-dimension-50- Computed value
2px
jh-border-focus-style- Description
- used to style bordered implementations of the focus ring
- Value
solid- Computed value
solid
jh-border-selected-color- Description
- used on selected elements such as list items and tabs
- Value
jh-color-content-brand-enabled- Computed value
#76b4f8ff
jh-border-selected-width- Description
- used on selected elements such as list items and tabs
- Value
jh-dimension-200- Computed value
8px
jh-border-selected-style- Description
- used on selected elements such as list items and tabs
- Value
solid- Computed value
solid
jh-border-error-color- Description
- used to denote an error or invalid state on elements
- Value
jh-color-content-negative-enabled- Computed value
#fa9176ff
jh-border-error-width- Description
- used to denote an error or invalid state on elements
- Value
jh-dimension-25- Computed value
1px
jh-border-error-style- Description
- used to denote an error or invalid state on elements
- Value
solid- Computed value
solid
Font
jh-font-family-primary- Description
- Used to set the default typeface for the system
- Value
jh-font-family-sans- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-micro-regular-font-family- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-micro-regular-font-size- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-size-250- Computed value
10px
jh-font-micro-regular-font-weight- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-micro-regular-line-height- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-line-height-300- Computed value
12px
jh-font-micro-medium-font-family- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-micro-medium-font-size- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-size-250- Computed value
10px
jh-font-micro-medium-font-weight- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-micro-medium-line-height- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-line-height-300- Computed value
12px
jh-font-micro-bold-font-family- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-micro-bold-font-size- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-size-250- Computed value
10px
jh-font-micro-bold-font-weight- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-micro-bold-line-height- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-line-height-300- Computed value
12px
jh-font-helper-regular-font-family- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-helper-regular-font-size- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-size-300- Computed value
12px
jh-font-helper-regular-font-weight- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-weight-400- Computed value
400
jh-font-helper-regular-line-height- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-line-height-400- Computed value
16px
jh-font-helper-medium-font-family- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-helper-medium-font-size- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-size-300- Computed value
12px
jh-font-helper-medium-font-weight- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-weight-500- Computed value
500
jh-font-helper-medium-line-height- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-line-height-400- Computed value
16px
jh-font-helper-bold-font-family- Description
- Used for secondary or explanatory text as well as field labels.
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-helper-bold-font-size- Description
- Used for secondary or explanatory text as well as field labels.
- Value
jh-font-size-300- Computed value
12px
jh-font-helper-bold-font-weight- Description
- Used for secondary or explanatory text as well as field labels.
- Value
jh-font-weight-700- Computed value
700
jh-font-helper-bold-line-height- Description
- Used for secondary or explanatory text as well as field labels.
- Value
jh-font-line-height-400- Computed value
16px
jh-font-body-regular-1-font-family- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-regular-1-font-size- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-size-350- Computed value
14px
jh-font-body-regular-1-font-weight- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-weight-400- Computed value
400
jh-font-body-regular-1-line-height- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-line-height-500- Computed value
20px
jh-font-body-regular-2-font-family- Description
- Used for intro or leading blocks of text
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-regular-2-font-size- Description
- Used for intro or leading blocks of text
- Value
jh-font-size-400- Computed value
16px
jh-font-body-regular-2-font-weight- Description
- Used for intro or leading blocks of text
- Value
jh-font-weight-400- Computed value
400
jh-font-body-regular-2-line-height- Description
- Used for intro or leading blocks of text
- Value
jh-font-line-height-600- Computed value
24px
jh-font-body-medium-1-font-family- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-medium-1-font-size- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-size-350- Computed value
14px
jh-font-body-medium-1-font-weight- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-weight-500- Computed value
500
jh-font-body-medium-1-line-height- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-line-height-500- Computed value
20px
jh-font-body-medium-2-font-family- Description
- Used for intro or leading blocks of text
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-medium-2-font-size- Description
- Used for intro or leading blocks of text
- Value
jh-font-size-400- Computed value
16px
jh-font-body-medium-2-font-weight- Description
- Used for intro or leading blocks of text
- Value
jh-font-weight-500- Computed value
500
jh-font-body-medium-2-line-height- Description
- Used for intro or leading blocks of text
- Value
jh-font-line-height-600- Computed value
24px
jh-font-body-bold-1-font-family- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-bold-1-font-size- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-size-350- Computed value
14px
jh-font-body-bold-1-font-weight- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-weight-700- Computed value
700
jh-font-body-bold-1-line-height- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-line-height-500- Computed value
20px
jh-font-body-bold-2-font-family- Description
- Used for intro or leading blocks of text
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-bold-2-font-size- Description
- Used for intro or leading blocks of text
- Value
jh-font-size-400- Computed value
16px
jh-font-body-bold-2-font-weight- Description
- Used for intro or leading blocks of text
- Value
jh-font-weight-700- Computed value
700
jh-font-body-bold-2-line-height- Description
- Used for intro or leading blocks of text
- Value
jh-font-line-height-600- Computed value
24px
jh-font-code-regular-1-font-family- Description
- Used for code references in standard blocks of text
- Value
jh-font-family-mono- Computed value
'Roboto Mono', monospace
jh-font-code-regular-1-font-size- Description
- Used for code references in standard blocks of text
- Value
jh-font-size-350- Computed value
14px
jh-font-code-regular-1-font-weight- Description
- Used for code references in standard blocks of text
- Value
jh-font-weight-400- Computed value
400
jh-font-code-regular-1-line-height- Description
- Used for code references in standard blocks of text
- Value
jh-font-line-height-500- Computed value
20px
jh-font-code-regular-2-font-family- Description
- Used for code references in intro or leading blocks of text
- Value
jh-font-family-mono- Computed value
'Roboto Mono', monospace
jh-font-code-regular-2-font-size- Description
- Used for code references in intro or leading blocks of text
- Value
jh-font-size-400- Computed value
16px
jh-font-code-regular-2-font-weight- Description
- Used for code references in intro or leading blocks of text
- Value
jh-font-weight-400- Computed value
400
jh-font-code-regular-2-line-height- Description
- Used for code references in intro or leading blocks of text
- Value
jh-font-line-height-600- Computed value
24px
jh-font-display-light-1-font-family- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-display-light-1-font-size- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-size-1050- Computed value
42px
jh-font-display-light-1-font-weight- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-weight-300- Computed value
300
jh-font-display-light-1-line-height- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-line-height-1300- Computed value
52px
jh-font-display-light-2-font-family- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-display-light-2-font-size- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-size-1350- Computed value
54px
jh-font-display-light-2-font-weight- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-weight-300- Computed value
300
jh-font-display-light-2-line-height- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-line-height-1600- Computed value
64px
jh-font-display-light-3-font-family- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-display-light-3-font-size- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-size-2300- Computed value
92px
jh-font-display-light-3-font-weight- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-weight-300- Computed value
300
jh-font-display-light-3-line-height- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-line-height-2700- Computed value
108px
jh-font-heading-regular-1-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-1-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-350- Computed value
14px
jh-font-heading-regular-1-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-heading-regular-1-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-500- Computed value
20px
jh-font-heading-regular-2-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-2-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-400- Computed value
16px
jh-font-heading-regular-2-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-heading-regular-2-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-600- Computed value
24px
jh-font-heading-regular-3-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-3-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-500- Computed value
20px
jh-font-heading-regular-3-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-heading-regular-3-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-700- Computed value
28px
jh-font-heading-regular-4-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-4-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-700- Computed value
28px
jh-font-heading-regular-4-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-heading-regular-4-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-900- Computed value
36px
jh-font-heading-regular-5-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-5-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-800- Computed value
32px
jh-font-heading-regular-5-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-heading-regular-5-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-1000- Computed value
40px
jh-font-heading-regular-6-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-6-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-900- Computed value
36px
jh-font-heading-regular-6-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400- Computed value
400
jh-font-heading-regular-6-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-1100- Computed value
44px
jh-font-heading-medium-1-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-1-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-350- Computed value
14px
jh-font-heading-medium-1-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-heading-medium-1-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-500- Computed value
20px
jh-font-heading-medium-2-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-2-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-400- Computed value
16px
jh-font-heading-medium-2-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-heading-medium-2-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-600- Computed value
24px
jh-font-heading-medium-3-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-3-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-500- Computed value
20px
jh-font-heading-medium-3-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-heading-medium-3-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-700- Computed value
28px
jh-font-heading-medium-4-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-4-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-700- Computed value
28px
jh-font-heading-medium-4-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-heading-medium-4-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-900- Computed value
36px
jh-font-heading-medium-5-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-5-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-800- Computed value
32px
jh-font-heading-medium-5-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-heading-medium-5-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-1000- Computed value
40px
jh-font-heading-medium-6-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-6-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-900- Computed value
36px
jh-font-heading-medium-6-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500- Computed value
500
jh-font-heading-medium-6-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-1100- Computed value
44px
jh-font-heading-bold-1-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-1-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-350- Computed value
14px
jh-font-heading-bold-1-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-heading-bold-1-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-500- Computed value
20px
jh-font-heading-bold-2-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-2-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-400- Computed value
16px
jh-font-heading-bold-2-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-heading-bold-2-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-600- Computed value
24px
jh-font-heading-bold-3-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-3-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-500- Computed value
20px
jh-font-heading-bold-3-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-heading-bold-3-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-700- Computed value
28px
jh-font-heading-bold-4-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-4-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-700- Computed value
28px
jh-font-heading-bold-4-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-heading-bold-4-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-900- Computed value
36px
jh-font-heading-bold-5-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-5-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-800- Computed value
32px
jh-font-heading-bold-5-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-heading-bold-5-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-1000- Computed value
40px
jh-font-heading-bold-6-font-family- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-family-primary- Computed value
Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-6-font-size- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-size-900- Computed value
36px
jh-font-heading-bold-6-font-weight- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700- Computed value
700
jh-font-heading-bold-6-line-height- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-line-height-1100- Computed value
44px
jh-font-micro-regular- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-weight-400 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary- Computed value
400 10px/12px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-micro-medium- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-weight-500 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary- Computed value
500 10px/12px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-micro-bold- Description
- Used for fine-print text and small snippets of text with limited space within a component
- Value
jh-font-weight-700 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary- Computed value
700 10px/12px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-helper-regular- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-weight-400 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary- Computed value
400 12px/16px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-helper-medium- Description
- Used for secondary or explanatory text as well as field labels
- Value
jh-font-weight-500 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary- Computed value
500 12px/16px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-helper-bold- Description
- Used for secondary or explanatory text as well as field labels.
- Value
jh-font-weight-700 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary- Computed value
700 12px/16px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-regular-1- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary- Computed value
400 14px/20px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-regular-2- Description
- Used for intro or leading blocks of text
- Value
jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary- Computed value
400 16px/24px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-medium-1- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary- Computed value
500 14px/20px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-medium-2- Description
- Used for intro or leading blocks of text
- Value
jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary- Computed value
500 16px/24px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-bold-1- Description
- Used for blocks of text and most content displayed within components
- Value
jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary- Computed value
700 14px/20px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-body-bold-2- Description
- Used for intro or leading blocks of text
- Value
jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary- Computed value
700 16px/24px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-code-regular-1- Description
- Used for code references in standard blocks of text
- Value
jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-mono- Computed value
400 14px/20px 'Roboto Mono', monospace
jh-font-code-regular-2- Description
- Used for code references in intro or leading blocks of text
- Value
jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-mono- Computed value
400 16px/24px 'Roboto Mono', monospace
jh-font-display-light-1- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-weight-300 jh-font-size-1050/jh-font-line-height-1300 jh-font-family-primary- Computed value
300 42px/52px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-display-light-2- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-weight-300 jh-font-size-1350/jh-font-line-height-1600 jh-font-family-primary- Computed value
300 54px/64px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-display-light-3- Description
- Used to create visual emphasis through size without being misconstrued as a heading
- Value
jh-font-weight-300 jh-font-size-2300/jh-font-line-height-2700 jh-font-family-primary- Computed value
300 92px/108px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-1- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary- Computed value
400 14px/20px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-2- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary- Computed value
400 16px/24px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-3- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary- Computed value
400 20px/28px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-4- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary- Computed value
400 28px/36px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-5- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary- Computed value
400 32px/40px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-regular-6- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-400 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary- Computed value
400 36px/44px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-1- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary- Computed value
500 14px/20px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-2- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary- Computed value
500 16px/24px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-3- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary- Computed value
500 20px/28px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-4- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary- Computed value
500 28px/36px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-5- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary- Computed value
500 32px/40px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-medium-6- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-500 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary- Computed value
500 36px/44px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-1- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary- Computed value
700 14px/20px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-2- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary- Computed value
700 16px/24px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-3- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary- Computed value
700 20px/28px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-4- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary- Computed value
700 28px/36px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-5- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary- Computed value
700 32px/40px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
jh-font-heading-bold-6- Description
- Used to create visual hierarchy on a page and within a component
- Value
jh-font-weight-700 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary- Computed value
700 36px/44px Figtree, 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
Opacity
jh-opacity-disabled- Description
- Value
jh-opacity-300- Computed value
0.3
Shadow
jh-shadow-low- Description
- Used on surface-level content and components such as cards and control thumbs
- Value
0px 4px 6px 0px jh-color-shadow-primary, 0px 2px 2px 0px jh-color-shadow-secondary- Computed value
0px 4px 6px 0px #0000004d, 0px 2px 2px 0px #0000001a
jh-shadow-mid- Description
- Used on elevated components such as FABs and toasts
- Value
0px 8px 12px 0px jh-color-shadow-primary, 0px 4px 4px 0px jh-color-shadow-secondary- Computed value
0px 8px 12px 0px #0000004d, 0px 4px 4px 0px #0000001a
jh-shadow-high- Description
- Used on menus and dropdowns
- Value
0px 12px 18px 0px jh-color-shadow-primary, 0px 6px 6px 0px jh-color-shadow-secondary- Computed value
0px 12px 18px 0px #0000004d, 0px 6px 6px 0px #0000001a
jh-shadow-overlay- Description
- Used on components that should overlay the entire UI such as modals and dialogs
- Value
0px 16px 24px 0px jh-color-shadow-primary, 0px 8px 8px 0px jh-color-shadow-secondary- Computed value
0px 16px 24px 0px #0000004d, 0px 8px 8px 0px #0000001a