Skip to main content

Light 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-100
    Computed value
    #e7ecf0ff
  • jh-color-container-primary-enabled
    Description
    Used on the major containers throughout the user interface such as cards and dialogs
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-container-primary-hover
    Description
    Hover color for primary container
    Value
    jh-color-gray-50
    Computed value
    #f0f5f9ff
  • jh-color-container-primary-active
    Description
    Active color for primary container
    Value
    jh-color-gray-100
    Computed value
    #e7ecf0ff
  • jh-color-container-primary-selected
    Description
    Selected color for primary container
    Value
    jh-color-azure-50
    Computed value
    #ecf5feff
  • 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-50
    Computed value
    #f0f5f9ff
  • jh-color-container-secondary-hover
    Description
    Hover color for secondary container
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-container-secondary-active
    Description
    Active color for secondary container
    Value
    jh-color-gray-100
    Computed value
    #e7ecf0ff
  • jh-color-container-secondary-selected
    Description
    Selected color for secondary container
    Value
    jh-color-azure-100
    Computed value
    #daeeffff
  • jh-color-container-neutral-enabled
    Description
    Used on containers that have a neutral context
    Value
    jh-color-gray-100
    Computed value
    #e7ecf0ff
  • jh-color-container-neutral-hover
    Description
    Hover color for neutral container
    Value
    jh-color-gray-150
    Computed value
    #d3d8dcff
  • jh-color-container-neutral-active
    Description
    Active color for neutral container
    Value
    jh-color-gray-200
    Computed value
    #c9ced3ff
  • jh-color-container-brand-enabled
    Description
    Used on containers that have a branded context
    Value
    jh-color-azure-100
    Computed value
    #daeeffff
  • jh-color-container-brand-hover
    Description
    Hover color for branded container
    Value
    jh-color-azure-150
    Computed value
    #badcfbff
  • jh-color-container-brand-active
    Description
    Active color for branded container
    Value
    jh-color-azure-200
    Computed value
    #a3d4ffff
  • jh-color-container-positive-enabled
    Description
    Used on containers that have a positive context
    Value
    jh-color-green-100
    Computed value
    #d1f5c3ff
  • jh-color-container-positive-hover
    Description
    Hover color for positive container
    Value
    jh-color-green-150
    Computed value
    #a9e794ff
  • jh-color-container-positive-active
    Description
    Active color for positive container
    Value
    jh-color-green-200
    Computed value
    #88e26eff
  • jh-color-container-negative-enabled
    Description
    Used on containers that have a negative context
    Value
    jh-color-red-100
    Computed value
    #fae7e2ff
  • jh-color-container-negative-hover
    Description
    Hover color for negative container
    Value
    jh-color-red-150
    Computed value
    #f5cfc4ff
  • jh-color-container-negative-active
    Description
    Active color for negative container
    Value
    jh-color-red-200
    Computed value
    #fbbfaeff
  • jh-color-overlay
    Description
    Used to distinguish the modal layer from the layer underneath
    Value
    jh-color-black-alpha-50
    Computed value
    #00000080
  • jh-color-control-enabled
    Description
    Used on the containers of interactive elements such as slider and switch tracks
    Value
    jh-color-gray-150
    Computed value
    #d3d8dcff
  • jh-color-control-hover
    Description
    Hover color for control
    Value
    jh-color-gray-200
    Computed value
    #c9ced3ff
  • jh-color-control-active
    Description
    Active color for control
    Value
    jh-color-gray-250
    Computed value
    #b6bbc0ff
  • jh-color-divider-primary
    Description
    Used on border elements that require more visual emphasis such as input fields
    Value
    jh-color-gray-500
    Computed value
    #70757aff
  • jh-color-divider-secondary
    Description
    Used on subtle border elements such as dividers and table borders
    Value
    jh-color-gray-100
    Computed value
    #e7ecf0ff
  • jh-color-divider-inverse
    Description
    Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • 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-600
    Computed value
    #085ce5ff
  • jh-color-content-brand-hover
    Description
    Hover color for branded content
    Value
    jh-color-azure-650
    Computed value
    #264fd5ff
  • jh-color-content-brand-active
    Description
    Active color for branded content
    Value
    jh-color-azure-700
    Computed value
    #3343c4ff
  • 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-900
    Computed value
    #2a2c2eff
  • jh-color-content-primary-hover
    Description
    Hover color for primary content
    Value
    jh-color-gray-950
    Computed value
    #1e2021ff
  • jh-color-content-primary-active
    Description
    Active color for primary content
    Value
    jh-color-black-alpha-100
    Computed value
    #000000ff
  • jh-color-content-secondary-enabled
    Description
    Used for supportive content such as labels, subtitles, and placeholder text
    Value
    jh-color-gray-600
    Computed value
    #5f6468ff
  • jh-color-content-secondary-hover
    Description
    Hover color for secondary content
    Value
    jh-color-gray-650
    Computed value
    #575a5dff
  • jh-color-content-secondary-active
    Description
    Active color for secondary content
    Value
    jh-color-gray-700
    Computed value
    #4e5155ff
  • jh-color-content-positive-enabled
    Description
    Used for content that conveys a positive response such as a deposit
    Value
    jh-color-green-600
    Computed value
    #3b6f2dff
  • jh-color-content-positive-hover
    Description
    Hover color for positive content
    Value
    jh-color-green-650
    Computed value
    #366429ff
  • jh-color-content-positive-active
    Description
    Active color for positive content
    Value
    jh-color-green-700
    Computed value
    #325a26ff
  • jh-color-content-negative-enabled
    Description
    Used for content that conveys a negative response such as an error message
    Value
    jh-color-red-600
    Computed value
    #bd2113ff
  • jh-color-content-negative-hover
    Description
    Hover color for negative content
    Value
    jh-color-red-650
    Computed value
    #ae180dff
  • jh-color-content-negative-active
    Description
    Active color for negative content
    Value
    jh-color-red-700
    Computed value
    #9e150bff
  • jh-color-content-inverse-enabled
    Description
    Used on backgrounds that don't provide sufficient contrast with other content colors
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-inverse-hover
    Description
    Hover color for inverse content
    Value
    jh-color-gray-50
    Computed value
    #f0f5f9ff
  • jh-color-content-inverse-active
    Description
    Active color for inverse content
    Value
    jh-color-gray-100
    Computed value
    #e7ecf0ff
  • jh-color-content-on-brand-enabled
    Description
    Used for content that sits on the content brand color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-brand-hover
    Description
    Used for content that sits on the content brand hover color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-brand-active
    Description
    Used for content that sits on the content brand active color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-primary-enabled
    Description
    Used for content that sits on the content primary color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-primary-hover
    Description
    Used for content that sits on the content primary hover color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-primary-active
    Description
    Used for content that sits on the content primary active color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-secondary-enabled
    Description
    Used for content that sits on the content secondary color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-secondary-hover
    Description
    Used for content that sits on the content secondary hover color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-secondary-active
    Description
    Used for content that sits on the content secondary active color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-positive-enabled
    Description
    Used for content that sits on the content positive color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-positive-hover
    Description
    Used for content that sits on the content positive hover color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-positive-active
    Description
    Used for content that sits on the content positive active color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-negative-enabled
    Description
    Used for content that sits on the content negative color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-negative-hover
    Description
    Used for content that sits on the content negative hover color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-negative-active
    Description
    Used for content that sits on the content negative active color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-content-on-inverse-enabled
    Description
    Used for content that sits on the content inverse color
    Value
    jh-color-black-alpha-100
    Computed value
    #000000ff
  • jh-color-content-on-inverse-hover
    Description
    Used for content that sits on the content inverse hover color
    Value
    jh-color-black-alpha-100
    Computed value
    #000000ff
  • jh-color-content-on-inverse-active
    Description
    Used for content that sits on the content inverse active color
    Value
    jh-color-black-alpha-100
    Computed value
    #000000ff
  • jh-color-interactive-focus-outer
    Description
    Used for the outermost part of the focus ring
    Value
    jh-color-azure-600
    Computed value
    #085ce5ff
  • jh-color-interactive-focus-inner
    Description
    Used to provide contrast against the outer focus color
    Value
    jh-color-white-alpha-100
    Computed value
    #ffffffff
  • jh-color-interactive-highlight
    Description
    Used for highlighting content on the page
    Value
    jh-color-cyan-100
    Computed value
    #ccf2fbff
  • jh-color-interactive-visited
    Description
    Used for visited links
    Value
    jh-color-violet-600
    Computed value
    #961ee7ff
  • jh-color-shadow-primary
    Description
    Used for the innermost part of the shadow
    Value
    jh-color-black-alpha-30
    Computed value
    #0000004d
  • jh-color-shadow-secondary
    Description
    Used for the outer part of the shadow
    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
    #e7ecf0ff
  • 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
    #70757aff
  • 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
    #085ce5ff
  • 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
    #085ce5ff
  • 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
    #085ce5ff
  • 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
    #bd2113ff
  • 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 #ffffffff, 0px 0px 0px 3px #085ce5ff