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
#f0f5f9ff
- Computed value
#f0f5f9ff
-
jh-color-gray-100
- Description
-
Gray 100; Brand color: Light cool gray
- Value
#e7ecf0ff
- Computed value
#e7ecf0ff
-
jh-color-gray-150
- Description
-
Gray 150
- Value
#d3d8dcff
- Computed value
#d3d8dcff
-
jh-color-gray-200
- Description
-
Gray 200
- Value
#c9ced3ff
- Computed value
#c9ced3ff
-
jh-color-gray-250
- Description
-
Gray 250; Brand color: Medium cool gray
- Value
#b6bbc0ff
- Computed value
#b6bbc0ff
-
jh-color-gray-300
- Description
-
Gray 300
- Value
#a9b0b6ff
- Computed value
#a9b0b6ff
-
jh-color-gray-350
- Description
-
Gray 350
- Value
#9ca3aaff
- Computed value
#9ca3aaff
-
jh-color-gray-400
- Description
-
Gray 400
- Value
#93999fff
- Computed value
#93999fff
-
jh-color-gray-450
- Description
-
Gray 450
- Value
#868b91ff
- Computed value
#868b91ff
-
jh-color-gray-500
- Description
-
Gray 500
- Value
#70757aff
- Computed value
#70757aff
-
jh-color-gray-550
- Description
-
Gray 550
- Value
#666b6fff
- Computed value
#666b6fff
-
jh-color-gray-600
- Description
-
Gray 600
- Value
#5f6468ff
- Computed value
#5f6468ff
-
jh-color-gray-650
- Description
-
Gray 650; Brand color: Dark cool gray
- Value
#575a5dff
- Computed value
#575a5dff
-
jh-color-gray-700
- Description
-
Gray 700
- Value
#4e5155ff
- Computed value
#4e5155ff
-
jh-color-gray-750
- Description
-
Gray 750
- Value
#44484bff
- Computed value
#44484bff
-
jh-color-gray-800
- Description
-
Gray 800
- Value
#3b3e41ff
- Computed value
#3b3e41ff
-
jh-color-gray-850
- Description
-
Gray 850
- Value
#313437ff
- Computed value
#313437ff
-
jh-color-gray-900
- Description
-
Gray 900
- Value
#2a2c2eff
- Computed value
#2a2c2eff
-
jh-color-gray-950
- Description
-
Gray 950
- Value
#1e2021ff
- Computed value
#1e2021ff
-
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-lime-50
- Description
-
Yellow 50
- Value
#f1f6e5ff
- Computed value
#f1f6e5ff
-
jh-color-lime-100
- Description
-
Yellow 100
- Value
#e2f1beff
- Computed value
#e2f1beff
-
jh-color-lime-150
- Description
-
Yellow 150
- Value
#c7e18bff
- Computed value
#c7e18bff
-
jh-color-lime-200
- Description
-
Yellow 200
- Value
#b3da5fff
- Computed value
#b3da5fff
-
jh-color-lime-250
- Description
-
Yellow 250
- Value
#9ac937ff
- Computed value
#9ac937ff
-
jh-color-lime-300
- Description
-
Yellow 300
- Value
#8ebd26ff
- Computed value
#8ebd26ff
-
jh-color-lime-350
- Description
-
Yellow 350
- Value
#83b01fff
- Computed value
#83b01fff
-
jh-color-lime-400
- Description
-
Yellow 400
- Value
#7ba521ff
- Computed value
#7ba521ff
-
jh-color-lime-450
- Description
-
Yellow 450
- Value
#719621ff
- Computed value
#719621ff
-
jh-color-lime-500
- Description
-
Yellow 500
- Value
#5f7f1cff
- Computed value
#5f7f1cff
-
jh-color-lime-550
- Description
-
Yellow 550
- Value
#58731fff
- Computed value
#58731fff
-
jh-color-lime-600
- Description
-
Yellow 600
- Value
#546a24ff
- Computed value
#546a24ff
-
jh-color-lime-650
- Description
-
Yellow 650
- Value
#4c6021ff
- Computed value
#4c6021ff
-
jh-color-lime-700
- Description
-
Yellow 700
- Value
#45571eff
- Computed value
#45571eff
-
jh-color-lime-750
- Description
-
Yellow 750
- Value
#3d4c1cff
- Computed value
#3d4c1cff
-
jh-color-lime-800
- Description
-
Yellow 800
- Value
#36431aff
- Computed value
#36431aff
-
jh-color-lime-850
- Description
-
Yellow 850
- Value
#2c3714ff
- Computed value
#2c3714ff
-
jh-color-lime-900
- Description
-
Yellow 900
- Value
#252f11ff
- Computed value
#252f11ff
-
jh-color-lime-950
- Description
-
Yellow 950
- Value
#1b2208ff
- Computed value
#1b2208ff
-
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-azure-50
- Description
-
Azure 50
- Value
#ecf5feff
- Computed value
#ecf5feff
-
jh-color-azure-100
- Description
-
Azure 100
- Value
#daeeffff
- Computed value
#daeeffff
-
jh-color-azure-150
- Description
-
Azure 150
- Value
#badcfbff
- Computed value
#badcfbff
-
jh-color-azure-200
- Description
-
Azure 200
- Value
#a3d4ffff
- Computed value
#a3d4ffff
-
jh-color-azure-250
- Description
-
Azure 250
- Value
#86c1f8ff
- Computed value
#86c1f8ff
-
jh-color-azure-300
- Description
-
Azure 300
- Value
#76b4f8ff
- Computed value
#76b4f8ff
-
jh-color-azure-350
- Description
-
Azure 350
- Value
#67a6f8ff
- Computed value
#67a6f8ff
-
jh-color-azure-400
- Description
-
Azure 400
- Value
#5c9afcff
- Computed value
#5c9afcff
-
jh-color-azure-450
- Description
-
Azure 450
- Value
#4a8afbff
- Computed value
#4a8afbff
-
jh-color-azure-500
- Description
-
Azure 500
- Value
#1470ebff
- Computed value
#1470ebff
-
jh-color-azure-550
- Description
-
Azure 550
- Value
#1665ebff
- Computed value
#1665ebff
-
jh-color-azure-600
- Description
-
Azure 600; Brand color: Vibrant cobalt
- Value
#085ce5ff
- Computed value
#085ce5ff
-
jh-color-azure-650
- Description
-
Azure 650
- Value
#264fd5ff
- Computed value
#264fd5ff
-
jh-color-azure-700
- Description
-
Azure 700
- Value
#3343c4ff
- Computed value
#3343c4ff
-
jh-color-azure-750
- Description
-
Azure 750
- Value
#2a3bb1ff
- Computed value
#2a3bb1ff
-
jh-color-azure-800
- Description
-
Azure 800
- Value
#23339eff
- Computed value
#23339eff
-
jh-color-azure-850
- Description
-
Azure 850
- Value
#192a89ff
- Computed value
#192a89ff
-
jh-color-azure-900
- Description
-
Azure 900
- Value
#132377ff
- Computed value
#132377ff
-
jh-color-azure-950
- Description
-
Azure 950; Brand color: Legacy navy
- Value
#06185fff
- Computed value
#06185fff
-
jh-color-blue-50
- Description
-
Blue 50
- Value
#f3f3fcff
- Computed value
#f3f3fcff
-
jh-color-blue-100
- Description
-
Blue 100
- Value
#e9eafbff
- Computed value
#e9eafbff
-
jh-color-blue-150
- Description
-
Blue 150
- Value
#d4d6f6ff
- Computed value
#d4d6f6ff
-
jh-color-blue-200
- Description
-
Blue 200
- Value
#c7cbf9ff
- Computed value
#c7cbf9ff
-
jh-color-blue-250
- Description
-
Blue 250
- Value
#b1b7f3ff
- Computed value
#b1b7f3ff
-
jh-color-blue-300
- Description
-
Blue 300
- Value
#a2abf4ff
- Computed value
#a2abf4ff
-
jh-color-blue-350
- Description
-
Blue 350
- Value
#989bf5ff
- Computed value
#989bf5ff
-
jh-color-blue-400
- Description
-
Blue 400
- Value
#8a8ef8ff
- Computed value
#8a8ef8ff
-
jh-color-blue-450
- Description
-
Blue 450
- Value
#7d7ffcff
- Computed value
#7d7ffcff
-
jh-color-blue-500
- Description
-
Blue 500
- Value
#6c60efff
- Computed value
#6c60efff
-
jh-color-blue-550
- Description
-
Blue 550
- Value
#6854ebff
- Computed value
#6854ebff
-
jh-color-blue-600
- Description
-
Blue 600
- Value
#5f4de3ff
- Computed value
#5f4de3ff
-
jh-color-blue-650
- Description
-
Blue 650
- Value
#5545d1ff
- Computed value
#5545d1ff
-
jh-color-blue-700
- Description
-
Blue 700
- Value
#4c3dbeff
- Computed value
#4c3dbeff
-
jh-color-blue-750
- Description
-
Blue 750
- Value
#4235adff
- Computed value
#4235adff
-
jh-color-blue-800
- Description
-
Blue 800
- Value
#372c9aff
- Computed value
#372c9aff
-
jh-color-blue-850
- Description
-
Blue 850
- Value
#2d2489ff
- Computed value
#2d2489ff
-
jh-color-blue-900
- Description
-
Blue 900
- Value
#241d79ff
- Computed value
#241d79ff
-
jh-color-blue-950
- Description
-
Blue 950
- Value
#141265ff
- Computed value
#141265ff
-
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
-
jh-color-rose-50
- Description
-
Rose 50
- Value
#fdf1f2ff
- Computed value
#fdf1f2ff
-
jh-color-rose-100
- Description
-
Rose 100
- Value
#f5e8e9ff
- Computed value
#f5e8e9ff
-
jh-color-rose-150
- Description
-
Rose 150
- Value
#f0cfd2ff
- Computed value
#f0cfd2ff
-
jh-color-rose-200
- Description
-
Rose 200
- Value
#f7bec5ff
- Computed value
#f7bec5ff
-
jh-color-rose-250
- Description
-
Rose 250
- Value
#f5a3aeff
- Computed value
#f5a3aeff
-
jh-color-rose-300
- Description
-
Rose 300
- Value
#f98e9eff
- Computed value
#f98e9eff
-
jh-color-rose-350
- Description
-
Rose 350
- Value
#f8788fff
- Computed value
#f8788fff
-
jh-color-rose-400
- Description
-
Rose 400
- Value
#fa6182ff
- Computed value
#fa6182ff
-
jh-color-rose-450
- Description
-
Rose 450
- Value
#f24973ff
- Computed value
#f24973ff
-
jh-color-rose-500
- Description
-
Rose 500
- Value
#dc2b5fff
- Computed value
#dc2b5fff
-
jh-color-rose-550
- Description
-
Rose 550
- Value
#cc1354ff
- Computed value
#cc1354ff
-
jh-color-rose-600
- Description
-
Rose 600
- Value
#bf144eff
- Computed value
#bf144eff
-
jh-color-rose-650
- Description
-
Rose 650
- Value
#ab1947ff
- Computed value
#ab1947ff
-
jh-color-rose-700
- Description
-
Rose 700
- Value
#991a40ff
- Computed value
#991a40ff
-
jh-color-rose-750
- Description
-
Rose 750
- Value
#861a39ff
- Computed value
#861a39ff
-
jh-color-rose-800
- Description
-
Rose 800
- Value
#761631ff
- Computed value
#761631ff
-
jh-color-rose-850
- Description
-
Rose 850
- Value
#631329ff
- Computed value
#631329ff
-
jh-color-rose-900
- Description
-
Rose 900
- Value
#550f22ff
- Computed value
#550f22ff
-
jh-color-rose-950
- Description
-
Rose 950
- Value
#430517ff
- Computed value
#430517ff
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
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
- Computed value
'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
#1e2021ff
-
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
#2a2c2eff
-
jh-color-container-primary-hover
- Description
-
Hover color for primary container
- Value
jh-color-gray-850
- Computed value
#313437ff
-
jh-color-container-primary-active
- Description
-
Active color for primary container
- Value
jh-color-gray-800
- Computed value
#3b3e41ff
-
jh-color-container-primary-selected
- Description
-
Selected color for primary container
- Value
jh-color-azure-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
#313437ff
-
jh-color-container-secondary-hover
- Description
-
Hover color for secondary container
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
jh-color-container-secondary-active
- Description
-
Active color for secondary container
- Value
jh-color-gray-800
- Computed value
#3b3e41ff
-
jh-color-container-secondary-selected
- Description
-
Selected color for secondary container
- Value
jh-color-azure-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
#3b3e41ff
-
jh-color-container-neutral-hover
- Description
-
Hover color for neutral container
- Value
jh-color-gray-750
- Computed value
#44484bff
-
jh-color-container-neutral-active
- Description
-
Active color for neutral container
- Value
jh-color-gray-700
- Computed value
#4e5155ff
-
jh-color-container-brand-enabled
- Description
-
Used on containers that have a branded context
- Value
jh-color-azure-800
- Computed value
#23339eff
-
jh-color-container-brand-hover
- Description
-
Hover color for branded container
- Value
jh-color-azure-750
- Computed value
#2a3bb1ff
-
jh-color-container-brand-active
- Description
-
Active color for branded container
- Value
jh-color-azure-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
#44484bff
-
jh-color-control-hover
- Description
-
Hover color for control
- Value
jh-color-gray-700
- Computed value
#4e5155ff
-
jh-color-control-active
- Description
-
Active color for control
- Value
jh-color-gray-650
- Computed value
#575a5dff
-
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
#93999fff
-
jh-color-divider-secondary
- Description
-
Used on subtle border elements such as dividers and table borders
- Value
jh-color-gray-800
- Computed value
#3b3e41ff
-
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
#2a2c2eff
-
jh-color-brand-primary
- Description
-
Used to emphasize areas of importance such as feature areas or primary calls-to-action
- Value
jh-color-azure-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-azure-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-azure-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-azure-600 0%, jh-color-azure-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-azure-950
- Computed value
#06185fff
-
jh-color-brand-on-gradient-light
- Description
-
Used for content that sits on the light brand gradient
- Value
jh-color-azure-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-azure-300
- Computed value
#76b4f8ff
-
jh-color-content-brand-hover
- Description
-
Hover color for branded content
- Value
jh-color-azure-250
- Computed value
#86c1f8ff
-
jh-color-content-brand-active
- Description
-
Active color for branded content
- Value
jh-color-azure-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
#e7ecf0ff
-
jh-color-content-primary-hover
- Description
-
Hover color for primary content
- Value
jh-color-gray-50
- Computed value
#f0f5f9ff
-
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
#a9b0b6ff
-
jh-color-content-secondary-hover
- Description
-
Hover color for secondary content
- Value
jh-color-gray-250
- Computed value
#b6bbc0ff
-
jh-color-content-secondary-active
- Description
-
Active color for secondary content
- Value
jh-color-gray-200
- Computed value
#c9ced3ff
-
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
#2a2c2eff
-
jh-color-content-inverse-hover
- Description
-
Hover color for inverse content
- Value
jh-color-gray-850
- Computed value
#313437ff
-
jh-color-content-inverse-active
- Description
-
Active color for inverse content
- Value
jh-color-gray-800
- Computed value
#3b3e41ff
-
jh-color-content-on-brand-enabled
- Description
-
Used for content that sits on the content brand color
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
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
#2a2c2eff
-
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
#2a2c2eff
-
jh-color-content-on-primary-enabled
- Description
-
Used for content that sits on the content primary color
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
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
#2a2c2eff
-
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
#2a2c2eff
-
jh-color-content-on-secondary-enabled
- Description
-
Used for content that sits on the content secondary color
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
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
#2a2c2eff
-
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
#2a2c2eff
-
jh-color-content-on-positive-enabled
- Description
-
Used for content that sits on the content positive color
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
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
#2a2c2eff
-
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
#2a2c2eff
-
jh-color-content-on-negative-enabled
- Description
-
Used for content that sits on the content negative color
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
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
#2a2c2eff
-
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
#2a2c2eff
-
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-outer
- Description
-
Used for the outermost part of the focus ring
- Value
jh-color-azure-300
- Computed value
#76b4f8ff
-
jh-color-interactive-focus-inner
- Description
-
Used to provide contrast against the outer focus color
- Value
jh-color-gray-900
- Computed value
#2a2c2eff
-
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
#3b3e41ff
-
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
#93999fff
-
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-content-brand-enabled
- 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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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-body-regular-italic-1-font-family
- Description
-
Used for blocks of text and most content displayed within components
- Value
jh-font-family-primary
- Computed value
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
jh-font-body-regular-italic-1-font-style
- Description
-
Used for blocks of text and most content displayed within components
- Value
italic
- Computed value
italic
-
jh-font-body-regular-italic-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-italic-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-italic-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-italic-2-font-family
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-family-primary
- Computed value
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
jh-font-body-regular-italic-2-font-style
- Description
-
Used for intro or leading blocks of text
- Value
italic
- Computed value
italic
-
jh-font-body-regular-italic-2-font-size
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-size-400
- Computed value
16px
-
jh-font-body-regular-italic-2-font-weight
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-weight-400
- Computed value
400
-
jh-font-body-regular-italic-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-italic-1-font-family
- Description
-
Used for blocks of text and most content displayed within components
- Value
jh-font-family-primary
- Computed value
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
jh-font-body-medium-italic-1-font-style
- Description
-
Used for blocks of text and most content displayed within components
- Value
italic
- Computed value
italic
-
jh-font-body-medium-italic-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-italic-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-italic-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-italic-2-font-family
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-family-primary
- Computed value
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
jh-font-body-medium-italic-2-font-style
- Description
-
Used for intro or leading blocks of text
- Value
italic
- Computed value
italic
-
jh-font-body-medium-italic-2-font-size
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-size-400
- Computed value
16px
-
jh-font-body-medium-italic-2-font-weight
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-weight-500
- Computed value
500
-
jh-font-body-medium-italic-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-italic-1-font-family
- Description
-
Used for blocks of text and most content displayed within components
- Value
jh-font-family-primary
- Computed value
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
jh-font-body-bold-italic-1-font-style
- Description
-
Used for blocks of text and most content displayed within components
- Value
italic
- Computed value
italic
-
jh-font-body-bold-italic-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-italic-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-italic-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-italic-2-font-family
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-family-primary
- Computed value
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
jh-font-body-bold-italic-2-font-style
- Description
-
Used for intro or leading blocks of text
- Value
italic
- Computed value
italic
-
jh-font-body-bold-italic-2-font-size
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-size-400
- Computed value
16px
-
jh-font-body-bold-italic-2-font-weight
- Description
-
Used for intro or leading blocks of text
- Value
jh-font-weight-700
- Computed value
700
-
jh-font-body-bold-italic-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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
'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
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
-
jh-shadow-focus
- Description
-
Used to style the focus ring on interactive elements
- Value
0px 0px 0px 1px jh-color-interactive-focus-inner, 0px 0px 0px 3px jh-color-interactive-focus-outer
- Computed value
0px 0px 0px 1px #2a2c2eff, 0px 0px 0px 3px #76b4f8ff