Skip to main content

Light theme

Global tokens

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

Color

  • jh-color-gray-0
    Deprecated
    Description
    Gray 0
    This token will be replaced with --jh-color-white-alpha-100 in v2.
    Value
    rgb(255, 255, 255)
    Computed value
    rgb(255, 255, 255)
  • jh-color-gray-50
    Description
    Gray 50
    Value
    rgb(240, 245, 249)
    Computed value
    rgb(240, 245, 249)
  • jh-color-gray-100
    Description
    Gray 100; Brand color: Light cool gray
    Value
    rgb(231, 236, 240)
    Computed value
    rgb(231, 236, 240)
  • jh-color-gray-150
    Description
    Gray 150
    Value
    rgb(211, 216, 220)
    Computed value
    rgb(211, 216, 220)
  • jh-color-gray-200
    Description
    Gray 200
    Value
    rgb(201, 206, 211)
    Computed value
    rgb(201, 206, 211)
  • jh-color-gray-250
    Description
    Gray 250; Brand color: Medium cool gray
    Value
    rgb(182, 187, 192)
    Computed value
    rgb(182, 187, 192)
  • jh-color-gray-300
    Description
    Gray 300
    Value
    rgb(169, 176, 182)
    Computed value
    rgb(169, 176, 182)
  • jh-color-gray-350
    Description
    Gray 350
    Value
    rgb(156, 163, 170)
    Computed value
    rgb(156, 163, 170)
  • jh-color-gray-400
    Description
    Gray 400
    Value
    rgb(147, 153, 159)
    Computed value
    rgb(147, 153, 159)
  • jh-color-gray-450
    Description
    Gray 450
    Value
    rgb(134, 139, 145)
    Computed value
    rgb(134, 139, 145)
  • jh-color-gray-500
    Description
    Gray 500
    Value
    rgb(112, 117, 122)
    Computed value
    rgb(112, 117, 122)
  • jh-color-gray-550
    Description
    Gray 550
    Value
    rgb(102, 107, 111)
    Computed value
    rgb(102, 107, 111)
  • jh-color-gray-600
    Description
    Gray 600
    Value
    rgb(95, 100, 104)
    Computed value
    rgb(95, 100, 104)
  • jh-color-gray-650
    Description
    Gray 650; Brand color: Dark cool gray
    Value
    rgb(87, 90, 93)
    Computed value
    rgb(87, 90, 93)
  • jh-color-gray-700
    Description
    Gray 700
    Value
    rgb(78, 81, 85)
    Computed value
    rgb(78, 81, 85)
  • jh-color-gray-750
    Description
    Gray 750
    Value
    rgb(68, 72, 75)
    Computed value
    rgb(68, 72, 75)
  • jh-color-gray-800
    Description
    Gray 800
    Value
    rgb(59, 62, 65)
    Computed value
    rgb(59, 62, 65)
  • jh-color-gray-850
    Description
    Gray 850
    Value
    rgb(49, 52, 55)
    Computed value
    rgb(49, 52, 55)
  • jh-color-gray-900
    Description
    Gray 900
    Value
    rgb(42, 44, 46)
    Computed value
    rgb(42, 44, 46)
  • jh-color-gray-950
    Description
    Gray 950
    Value
    rgb(30, 32, 33)
    Computed value
    rgb(30, 32, 33)
  • jh-color-gray-1000
    Deprecated
    Description
    Gray 1000
    This token will be replaced with --jh-color-black-alpha-100 in v2.
    Value
    rgb(0, 0, 0)
    Computed value
    rgb(0, 0, 0)
  • jh-color-red-50
    Description
    Red 50
    Value
    rgb(253, 241, 238)
    Computed value
    rgb(253, 241, 238)
  • jh-color-red-100
    Description
    Red 100
    Value
    rgb(250, 231, 226)
    Computed value
    rgb(250, 231, 226)
  • jh-color-red-150
    Description
    Red 150
    Value
    rgb(245, 207, 196)
    Computed value
    rgb(245, 207, 196)
  • jh-color-red-200
    Description
    Red 200
    Value
    rgb(251, 191, 174)
    Computed value
    rgb(251, 191, 174)
  • jh-color-red-250
    Description
    Red 250
    Value
    rgb(248, 164, 142)
    Computed value
    rgb(248, 164, 142)
  • jh-color-red-300
    Description
    Red 300
    Value
    rgb(250, 145, 118)
    Computed value
    rgb(250, 145, 118)
  • jh-color-red-350
    Description
    Red 350
    Value
    rgb(249, 123, 94)
    Computed value
    rgb(249, 123, 94)
  • jh-color-red-400
    Description
    Red 400
    Value
    rgb(249, 103, 73)
    Computed value
    rgb(249, 103, 73)
  • jh-color-red-450
    Description
    Red 450
    Value
    rgb(241, 81, 53)
    Computed value
    rgb(241, 81, 53)
  • jh-color-red-500
    Description
    Red 500
    Value
    rgb(219, 53, 32)
    Computed value
    rgb(219, 53, 32)
  • jh-color-red-550
    Description
    Red 550
    Value
    rgb(202, 37, 21)
    Computed value
    rgb(202, 37, 21)
  • jh-color-red-600
    Description
    Red 600
    Value
    rgb(189, 33, 19)
    Computed value
    rgb(189, 33, 19)
  • jh-color-red-650
    Description
    Red 650
    Value
    rgb(174, 24, 13)
    Computed value
    rgb(174, 24, 13)
  • jh-color-red-700
    Description
    Red 700
    Value
    rgb(158, 21, 11)
    Computed value
    rgb(158, 21, 11)
  • jh-color-red-750
    Description
    Red 750
    Value
    rgb(139, 21, 10)
    Computed value
    rgb(139, 21, 10)
  • jh-color-red-800
    Description
    Red 800
    Value
    rgb(119, 25, 13)
    Computed value
    rgb(119, 25, 13)
  • jh-color-red-850
    Description
    Red 850
    Value
    rgb(96, 27, 14)
    Computed value
    rgb(96, 27, 14)
  • jh-color-red-900
    Description
    Red 900
    Value
    rgb(78, 26, 15)
    Computed value
    rgb(78, 26, 15)
  • jh-color-red-950
    Description
    Red 950
    Value
    rgb(57, 19, 7)
    Computed value
    rgb(57, 19, 7)
  • jh-color-orange-50
    Description
    Orange 50
    Value
    rgb(250, 242, 235)
    Computed value
    rgb(250, 242, 235)
  • jh-color-orange-100
    Description
    Orange 100
    Value
    rgb(251, 232, 213)
    Computed value
    rgb(251, 232, 213)
  • jh-color-orange-150
    Description
    Orange 150
    Value
    rgb(245, 208, 169)
    Computed value
    rgb(245, 208, 169)
  • jh-color-orange-200
    Description
    Orange 200
    Value
    rgb(252, 193, 127)
    Computed value
    rgb(252, 193, 127)
  • jh-color-orange-250
    Description
    Orange 250
    Value
    rgb(240, 171, 88)
    Computed value
    rgb(240, 171, 88)
  • jh-color-orange-300
    Description
    Orange 300
    Value
    rgb(232, 158, 62)
    Computed value
    rgb(232, 158, 62)
  • jh-color-orange-350
    Description
    Orange 350
    Value
    rgb(219, 145, 44)
    Computed value
    rgb(219, 145, 44)
  • jh-color-orange-400
    Description
    Orange 400
    Value
    rgb(207, 135, 34)
    Computed value
    rgb(207, 135, 34)
  • jh-color-orange-450
    Description
    Orange 450
    Value
    rgb(191, 122, 23)
    Computed value
    rgb(191, 122, 23)
  • jh-color-orange-500
    Description
    Orange 500
    Value
    rgb(164, 103, 12)
    Computed value
    rgb(164, 103, 12)
  • jh-color-orange-550
    Description
    Orange 550
    Value
    rgb(147, 93, 17)
    Computed value
    rgb(147, 93, 17)
  • jh-color-orange-600
    Description
    Orange 600
    Value
    rgb(136, 88, 24)
    Computed value
    rgb(136, 88, 24)
  • jh-color-orange-650
    Description
    Orange 650
    Value
    rgb(122, 80, 25)
    Computed value
    rgb(122, 80, 25)
  • jh-color-orange-700
    Description
    Orange 700
    Value
    rgb(110, 72, 24)
    Computed value
    rgb(110, 72, 24)
  • jh-color-orange-750
    Description
    Orange 750
    Value
    rgb(96, 64, 24)
    Computed value
    rgb(96, 64, 24)
  • jh-color-orange-800
    Description
    Orange 800
    Value
    rgb(82, 55, 20)
    Computed value
    rgb(82, 55, 20)
  • jh-color-orange-850
    Description
    Orange 850
    Value
    rgb(70, 46, 17)
    Computed value
    rgb(70, 46, 17)
  • jh-color-orange-900
    Description
    Orange 900
    Value
    rgb(59, 39, 15)
    Computed value
    rgb(59, 39, 15)
  • jh-color-orange-950
    Description
    Orange 950
    Value
    rgb(44, 28, 4)
    Computed value
    rgb(44, 28, 4)
  • jh-color-yellow-50
    Description
    Yellow 50
    Value
    rgb(249, 243, 231)
    Computed value
    rgb(249, 243, 231)
  • jh-color-yellow-100
    Description
    Yellow 100
    Value
    rgb(248, 234, 199)
    Computed value
    rgb(248, 234, 199)
  • jh-color-yellow-150
    Description
    Yellow 150
    Value
    rgb(236, 213, 149)
    Computed value
    rgb(236, 213, 149)
  • jh-color-yellow-200
    Description
    Yellow 200
    Value
    rgb(233, 202, 101)
    Computed value
    rgb(233, 202, 101)
  • jh-color-yellow-250
    Description
    Yellow 250
    Value
    rgb(216, 182, 59)
    Computed value
    rgb(216, 182, 59)
  • jh-color-yellow-300
    Description
    Yellow 300
    Value
    rgb(204, 171, 40)
    Computed value
    rgb(204, 171, 40)
  • jh-color-yellow-350
    Description
    Yellow 350
    Value
    rgb(190, 158, 31)
    Computed value
    rgb(190, 158, 31)
  • jh-color-yellow-400
    Description
    Yellow 400
    Value
    rgb(177, 149, 36)
    Computed value
    rgb(177, 149, 36)
  • jh-color-yellow-450
    Description
    Yellow 450
    Value
    rgb(162, 136, 35)
    Computed value
    rgb(162, 136, 35)
  • jh-color-yellow-500
    Description
    Yellow 500
    Value
    rgb(138, 115, 24)
    Computed value
    rgb(138, 115, 24)
  • jh-color-yellow-550
    Description
    Yellow 550
    Value
    rgb(125, 104, 21)
    Computed value
    rgb(125, 104, 21)
  • jh-color-yellow-600
    Description
    Yellow 600
    Value
    rgb(116, 97, 24)
    Computed value
    rgb(116, 97, 24)
  • jh-color-yellow-650
    Description
    Yellow 650
    Value
    rgb(105, 87, 22)
    Computed value
    rgb(105, 87, 22)
  • jh-color-yellow-700
    Description
    Yellow 700
    Value
    rgb(95, 79, 19)
    Computed value
    rgb(95, 79, 19)
  • jh-color-yellow-750
    Description
    Yellow 750
    Value
    rgb(84, 69, 17)
    Computed value
    rgb(84, 69, 17)
  • jh-color-yellow-800
    Description
    Yellow 800
    Value
    rgb(72, 59, 15)
    Computed value
    rgb(72, 59, 15)
  • jh-color-yellow-850
    Description
    Yellow 850
    Value
    rgb(61, 50, 12)
    Computed value
    rgb(61, 50, 12)
  • jh-color-yellow-900
    Description
    Yellow 900
    Value
    rgb(51, 42, 13)
    Computed value
    rgb(51, 42, 13)
  • jh-color-yellow-950
    Description
    Yellow 950
    Value
    rgb(38, 31, 4)
    Computed value
    rgb(38, 31, 4)
  • jh-color-lime-50
    Deprecated
    Description
    Lime 50
    This token will be removed in v2.
    Value
    rgb(241, 246, 229)
    Computed value
    rgb(241, 246, 229)
  • jh-color-lime-100
    Deprecated
    Description
    Lime 100
    This token will be removed in v2.
    Value
    rgb(226, 241, 190)
    Computed value
    rgb(226, 241, 190)
  • jh-color-lime-150
    Deprecated
    Description
    Lime 150
    This token will be removed in v2.
    Value
    rgb(199, 225, 139)
    Computed value
    rgb(199, 225, 139)
  • jh-color-lime-200
    Deprecated
    Description
    Lime 200
    This token will be removed in v2.
    Value
    rgb(179, 218, 95)
    Computed value
    rgb(179, 218, 95)
  • jh-color-lime-250
    Deprecated
    Description
    Lime 250
    This token will be removed in v2.
    Value
    rgb(154, 201, 55)
    Computed value
    rgb(154, 201, 55)
  • jh-color-lime-300
    Deprecated
    Description
    Lime 300
    This token will be removed in v2.
    Value
    rgb(142, 189, 38)
    Computed value
    rgb(142, 189, 38)
  • jh-color-lime-350
    Deprecated
    Description
    Lime 350
    This token will be removed in v2.
    Value
    rgb(131, 176, 31)
    Computed value
    rgb(131, 176, 31)
  • jh-color-lime-400
    Deprecated
    Description
    Lime 400
    This token will be removed in v2.
    Value
    rgb(123, 165, 33)
    Computed value
    rgb(123, 165, 33)
  • jh-color-lime-450
    Deprecated
    Description
    Lime 450
    This token will be removed in v2.
    Value
    rgb(113, 150, 33)
    Computed value
    rgb(113, 150, 33)
  • jh-color-lime-500
    Deprecated
    Description
    Lime 500
    This token will be removed in v2.
    Value
    rgb(95, 127, 28)
    Computed value
    rgb(95, 127, 28)
  • jh-color-lime-550
    Deprecated
    Description
    Lime 550
    This token will be removed in v2.
    Value
    rgb(88, 115, 31)
    Computed value
    rgb(88, 115, 31)
  • jh-color-lime-600
    Deprecated
    Description
    Lime 600
    This token will be removed in v2.
    Value
    rgb(84, 106, 36)
    Computed value
    rgb(84, 106, 36)
  • jh-color-lime-650
    Deprecated
    Description
    Lime 650
    This token will be removed in v2.
    Value
    rgb(76, 96, 33)
    Computed value
    rgb(76, 96, 33)
  • jh-color-lime-700
    Deprecated
    Description
    Lime 700
    This token will be removed in v2.
    Value
    rgb(69, 87, 30)
    Computed value
    rgb(69, 87, 30)
  • jh-color-lime-750
    Deprecated
    Description
    Lime 750
    This token will be removed in v2.
    Value
    rgb(61, 76, 28)
    Computed value
    rgb(61, 76, 28)
  • jh-color-lime-800
    Deprecated
    Description
    Lime 800
    This token will be removed in v2.
    Value
    rgb(54, 67, 26)
    Computed value
    rgb(54, 67, 26)
  • jh-color-lime-850
    Deprecated
    Description
    Lime 850
    This token will be removed in v2.
    Value
    rgb(44, 55, 20)
    Computed value
    rgb(44, 55, 20)
  • jh-color-lime-900
    Deprecated
    Description
    Lime 900
    This token will be removed in v2.
    Value
    rgb(37, 47, 17)
    Computed value
    rgb(37, 47, 17)
  • jh-color-lime-950
    Deprecated
    Description
    Lime 950
    This token will be removed in v2.
    Value
    rgb(27, 34, 8)
    Computed value
    rgb(27, 34, 8)
  • jh-color-green-50
    Description
    Green 50
    Value
    rgb(236, 247, 231)
    Computed value
    rgb(236, 247, 231)
  • jh-color-green-100
    Description
    Green 100
    Value
    rgb(209, 245, 195)
    Computed value
    rgb(209, 245, 195)
  • jh-color-green-150
    Description
    Green 150
    Value
    rgb(169, 231, 148)
    Computed value
    rgb(169, 231, 148)
  • jh-color-green-200
    Description
    Green 200
    Value
    rgb(136, 226, 110)
    Computed value
    rgb(136, 226, 110)
  • jh-color-green-250
    Description
    Green 250
    Value
    rgb(106, 209, 80)
    Computed value
    rgb(106, 209, 80)
  • jh-color-green-300
    Description
    Green 300
    Value
    rgb(95, 196, 69)
    Computed value
    rgb(95, 196, 69)
  • jh-color-green-350
    Description
    Green 350
    Value
    rgb(87, 182, 64)
    Computed value
    rgb(87, 182, 64)
  • jh-color-green-400
    Description
    Green 400
    Value
    rgb(86, 170, 65)
    Computed value
    rgb(86, 170, 65)
  • jh-color-green-450
    Description
    Green 450
    Value
    rgb(83, 155, 64)
    Computed value
    rgb(83, 155, 64)
  • jh-color-green-500
    Description
    Green 500
    Value
    rgb(67, 131, 50)
    Computed value
    rgb(67, 131, 50)
  • jh-color-green-550
    Description
    Green 550
    Value
    rgb(62, 119, 47)
    Computed value
    rgb(62, 119, 47)
  • jh-color-green-600
    Description
    Green 600
    Value
    rgb(59, 111, 45)
    Computed value
    rgb(59, 111, 45)
  • jh-color-green-650
    Description
    Green 650
    Value
    rgb(54, 100, 41)
    Computed value
    rgb(54, 100, 41)
  • jh-color-green-700
    Description
    Green 700
    Value
    rgb(50, 90, 38)
    Computed value
    rgb(50, 90, 38)
  • jh-color-green-750
    Description
    Green 750
    Value
    rgb(45, 79, 35)
    Computed value
    rgb(45, 79, 35)
  • jh-color-green-800
    Description
    Green 800
    Value
    rgb(40, 69, 31)
    Computed value
    rgb(40, 69, 31)
  • jh-color-green-850
    Description
    Green 850
    Value
    rgb(34, 57, 26)
    Computed value
    rgb(34, 57, 26)
  • jh-color-green-900
    Description
    Green 900
    Value
    rgb(29, 48, 23)
    Computed value
    rgb(29, 48, 23)
  • jh-color-green-950
    Description
    Green 950
    Value
    rgb(18, 36, 10)
    Computed value
    rgb(18, 36, 10)
  • jh-color-mint-50
    Description
    Mint 50
    Value
    rgb(231, 248, 238)
    Computed value
    rgb(231, 248, 238)
  • jh-color-mint-100
    Description
    Mint 100
    Value
    rgb(192, 248, 219)
    Computed value
    rgb(192, 248, 219)
  • jh-color-mint-150
    Description
    Mint 150
    Value
    rgb(144, 234, 190)
    Computed value
    rgb(144, 234, 190)
  • jh-color-mint-200
    Description
    Mint 200
    Value
    rgb(101, 228, 172)
    Computed value
    rgb(101, 228, 172)
  • jh-color-mint-250
    Description
    Mint 250
    Value
    rgb(52, 211, 149)
    Computed value
    rgb(52, 211, 149)
  • jh-color-mint-300
    Description
    Mint 300
    Value
    rgb(24, 199, 137)
    Computed value
    rgb(24, 199, 137)
  • jh-color-mint-350
    Description
    Mint 350
    Value
    rgb(2, 185, 126)
    Computed value
    rgb(2, 185, 126)
  • jh-color-mint-400
    Description
    Mint 400
    Value
    rgb(20, 173, 119)
    Computed value
    rgb(20, 173, 119)
  • jh-color-mint-450
    Description
    Mint 450
    Value
    rgb(26, 158, 109)
    Computed value
    rgb(26, 158, 109)
  • jh-color-mint-500
    Description
    Mint 500
    Value
    rgb(7, 134, 91)
    Computed value
    rgb(7, 134, 91)
  • jh-color-mint-550
    Description
    Mint 550
    Value
    rgb(23, 121, 84)
    Computed value
    rgb(23, 121, 84)
  • jh-color-mint-600
    Description
    Mint 600
    Value
    rgb(35, 112, 80)
    Computed value
    rgb(35, 112, 80)
  • jh-color-mint-650
    Description
    Mint 650
    Value
    rgb(35, 101, 72)
    Computed value
    rgb(35, 101, 72)
  • jh-color-mint-700
    Description
    Mint 700
    Value
    rgb(32, 91, 65)
    Computed value
    rgb(32, 91, 65)
  • jh-color-mint-750
    Description
    Mint 750
    Value
    rgb(31, 80, 58)
    Computed value
    rgb(31, 80, 58)
  • jh-color-mint-800
    Description
    Mint 800
    Value
    rgb(28, 70, 51)
    Computed value
    rgb(28, 70, 51)
  • jh-color-mint-850
    Description
    Mint 850
    Value
    rgb(23, 58, 42)
    Computed value
    rgb(23, 58, 42)
  • jh-color-mint-900
    Description
    Mint 900
    Value
    rgb(22, 49, 36)
    Computed value
    rgb(22, 49, 36)
  • jh-color-mint-950
    Description
    Mint 950
    Value
    rgb(14, 35, 25)
    Computed value
    rgb(14, 35, 25)
  • jh-color-cyan-50
    Description
    Cyan 50; Brand color: Open sky
    Value
    rgb(232, 247, 247)
    Computed value
    rgb(232, 247, 247)
  • jh-color-cyan-100
    Description
    Cyan 100
    Value
    rgb(204, 242, 251)
    Computed value
    rgb(204, 242, 251)
  • jh-color-cyan-150
    Description
    Cyan 150
    Value
    rgb(156, 227, 252)
    Computed value
    rgb(156, 227, 252)
  • jh-color-cyan-200
    Description
    Cyan 200; Brand color: Tech blue
    Value
    rgb(118, 220, 253)
    Computed value
    rgb(118, 220, 253)
  • jh-color-cyan-250
    Description
    Cyan 250
    Value
    rgb(72, 202, 240)
    Computed value
    rgb(72, 202, 240)
  • jh-color-cyan-300
    Description
    Cyan 300
    Value
    rgb(41, 191, 230)
    Computed value
    rgb(41, 191, 230)
  • jh-color-cyan-350
    Description
    Cyan 350
    Value
    rgb(24, 178, 215)
    Computed value
    rgb(24, 178, 215)
  • jh-color-cyan-400
    Description
    Cyan 400
    Value
    rgb(26, 167, 201)
    Computed value
    rgb(26, 167, 201)
  • jh-color-cyan-450
    Description
    Cyan 450
    Value
    rgb(32, 152, 183)
    Computed value
    rgb(32, 152, 183)
  • jh-color-cyan-500
    Description
    Cyan 500
    Value
    rgb(27, 128, 154)
    Computed value
    rgb(27, 128, 154)
  • jh-color-cyan-550
    Description
    Cyan 550
    Value
    rgb(37, 116, 139)
    Computed value
    rgb(37, 116, 139)
  • jh-color-cyan-600
    Description
    Cyan 600
    Value
    rgb(38, 108, 129)
    Computed value
    rgb(38, 108, 129)
  • jh-color-cyan-650
    Description
    Cyan 650
    Value
    rgb(36, 97, 116)
    Computed value
    rgb(36, 97, 116)
  • jh-color-cyan-700
    Description
    Cyan 700
    Value
    rgb(32, 88, 105)
    Computed value
    rgb(32, 88, 105)
  • jh-color-cyan-750
    Description
    Cyan 750
    Value
    rgb(30, 77, 92)
    Computed value
    rgb(30, 77, 92)
  • jh-color-cyan-800
    Description
    Cyan 800
    Value
    rgb(27, 67, 80)
    Computed value
    rgb(27, 67, 80)
  • jh-color-cyan-850
    Description
    Cyan 850
    Value
    rgb(21, 56, 67)
    Computed value
    rgb(21, 56, 67)
  • jh-color-cyan-900
    Description
    Cyan 900
    Value
    rgb(13, 48, 58)
    Computed value
    rgb(13, 48, 58)
  • jh-color-cyan-950
    Description
    Cyan 950
    Value
    rgb(3, 35, 44)
    Computed value
    rgb(3, 35, 44)
  • jh-color-azure-50
    Deprecated
    Description
    Azure 50
    This token will be replaced with --jh-color-blue-50 in v2.
    Value
    rgb(236, 245, 254)
    Computed value
    rgb(236, 245, 254)
  • jh-color-azure-100
    Deprecated
    Description
    Azure 100
    This token will be replaced with --jh-color-blue-100 in v2.
    Value
    rgb(218, 238, 255)
    Computed value
    rgb(218, 238, 255)
  • jh-color-azure-150
    Deprecated
    Description
    Azure 150
    This token will be replaced with --jh-color-blue-150 in v2.
    Value
    rgb(186, 220, 251)
    Computed value
    rgb(186, 220, 251)
  • jh-color-azure-200
    Deprecated
    Description
    Azure 200
    This token will be replaced with --jh-color-blue-200 in v2.
    Value
    rgb(163, 212, 255)
    Computed value
    rgb(163, 212, 255)
  • jh-color-azure-250
    Deprecated
    Description
    Azure 250
    This token will be replaced with --jh-color-blue-250 in v2.
    Value
    rgb(134, 193, 248)
    Computed value
    rgb(134, 193, 248)
  • jh-color-azure-300
    Deprecated
    Description
    Azure 300
    This token will be replaced with --jh-color-blue-300 in v2.
    Value
    rgb(118, 180, 248)
    Computed value
    rgb(118, 180, 248)
  • jh-color-azure-350
    Deprecated
    Description
    Azure 350
    This token will be replaced with --jh-color-blue-350 in v2.
    Value
    rgb(103, 166, 248)
    Computed value
    rgb(103, 166, 248)
  • jh-color-azure-400
    Deprecated
    Description
    Azure 400
    This token will be replaced with --jh-color-blue-400 in v2.
    Value
    rgb(92, 154, 252)
    Computed value
    rgb(92, 154, 252)
  • jh-color-azure-450
    Deprecated
    Description
    Azure 450
    This token will be replaced with --jh-color-blue-450 in v2.
    Value
    rgb(74, 138, 251)
    Computed value
    rgb(74, 138, 251)
  • jh-color-azure-500
    Deprecated
    Description
    Azure 500
    This token will be replaced with --jh-color-blue-500 in v2.
    Value
    rgb(20, 112, 235)
    Computed value
    rgb(20, 112, 235)
  • jh-color-azure-550
    Deprecated
    Description
    Azure 550
    This token will be replaced with --jh-color-blue-550 in v2.
    Value
    rgb(22, 101, 235)
    Computed value
    rgb(22, 101, 235)
  • jh-color-azure-600
    Deprecated
    Description
    Azure 600; Brand color: Vibrant cobalt
    This token will be replaced with --jh-color-blue-600 in v2.
    Value
    rgb(8, 92, 229)
    Computed value
    rgb(8, 92, 229)
  • jh-color-azure-650
    Deprecated
    Description
    Azure 650
    This token will be replaced with --jh-color-blue-650 in v2.
    Value
    rgb(38, 79, 213)
    Computed value
    rgb(38, 79, 213)
  • jh-color-azure-700
    Deprecated
    Description
    Azure 700
    This token will be replaced with --jh-color-blue-700 in v2.
    Value
    rgb(51, 67, 196)
    Computed value
    rgb(51, 67, 196)
  • jh-color-azure-750
    Deprecated
    Description
    Azure 750
    This token will be replaced with --jh-color-blue-750 in v2.
    Value
    rgb(42, 59, 177)
    Computed value
    rgb(42, 59, 177)
  • jh-color-azure-800
    Deprecated
    Description
    Azure 800
    This token will be replaced with --jh-color-blue-800 in v2.
    Value
    rgb(35, 51, 158)
    Computed value
    rgb(35, 51, 158)
  • jh-color-azure-850
    Deprecated
    Description
    Azure 850
    This token will be replaced with --jh-color-blue-850 in v2.
    Value
    rgb(25, 42, 137)
    Computed value
    rgb(25, 42, 137)
  • jh-color-azure-900
    Deprecated
    Description
    Azure 900
    This token will be replaced with --jh-color-blue-900 in v2.
    Value
    rgb(19, 35, 119)
    Computed value
    rgb(19, 35, 119)
  • jh-color-azure-950
    Deprecated
    Description
    Azure 950; Brand color: Legacy navy
    This token will be replaced with --jh-color-blue-950 in v2.
    Value
    rgb(6, 24, 95)
    Computed value
    rgb(6, 24, 95)
  • jh-color-blue-50
    Deprecated
    Description
    Blue 50
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(243, 243, 252)
    Computed value
    rgb(243, 243, 252)
  • jh-color-blue-100
    Deprecated
    Description
    Blue 100
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(233, 234, 251)
    Computed value
    rgb(233, 234, 251)
  • jh-color-blue-150
    Deprecated
    Description
    Blue 150
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(212, 214, 246)
    Computed value
    rgb(212, 214, 246)
  • jh-color-blue-200
    Deprecated
    Description
    Blue 200
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(199, 203, 249)
    Computed value
    rgb(199, 203, 249)
  • jh-color-blue-250
    Deprecated
    Description
    Blue 250
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(177, 183, 243)
    Computed value
    rgb(177, 183, 243)
  • jh-color-blue-300
    Deprecated
    Description
    Blue 300
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(162, 171, 244)
    Computed value
    rgb(162, 171, 244)
  • jh-color-blue-350
    Deprecated
    Description
    Blue 350
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(152, 155, 245)
    Computed value
    rgb(152, 155, 245)
  • jh-color-blue-400
    Deprecated
    Description
    Blue 400
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(138, 142, 248)
    Computed value
    rgb(138, 142, 248)
  • jh-color-blue-450
    Deprecated
    Description
    Blue 450
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(125, 127, 252)
    Computed value
    rgb(125, 127, 252)
  • jh-color-blue-500
    Deprecated
    Description
    Blue 500
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(108, 96, 239)
    Computed value
    rgb(108, 96, 239)
  • jh-color-blue-550
    Deprecated
    Description
    Blue 550
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(104, 84, 235)
    Computed value
    rgb(104, 84, 235)
  • jh-color-blue-600
    Deprecated
    Description
    Blue 600
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(95, 77, 227)
    Computed value
    rgb(95, 77, 227)
  • jh-color-blue-650
    Deprecated
    Description
    Blue 650
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(85, 69, 209)
    Computed value
    rgb(85, 69, 209)
  • jh-color-blue-700
    Deprecated
    Description
    Blue 700
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(76, 61, 190)
    Computed value
    rgb(76, 61, 190)
  • jh-color-blue-750
    Deprecated
    Description
    Blue 750
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(66, 53, 173)
    Computed value
    rgb(66, 53, 173)
  • jh-color-blue-800
    Deprecated
    Description
    Blue 800
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(55, 44, 154)
    Computed value
    rgb(55, 44, 154)
  • jh-color-blue-850
    Deprecated
    Description
    Blue 850
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(45, 36, 137)
    Computed value
    rgb(45, 36, 137)
  • jh-color-blue-900
    Deprecated
    Description
    Blue 900
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(36, 29, 121)
    Computed value
    rgb(36, 29, 121)
  • jh-color-blue-950
    Deprecated
    Description
    Blue 950
    This token will be updated with the comparable color value from the azure color family in v2.
    Value
    rgb(20, 18, 101)
    Computed value
    rgb(20, 18, 101)
  • jh-color-violet-50
    Description
    Violet 50
    Value
    rgb(247, 242, 250)
    Computed value
    rgb(247, 242, 250)
  • jh-color-violet-100
    Description
    Violet 100
    Value
    rgb(244, 231, 250)
    Computed value
    rgb(244, 231, 250)
  • jh-color-violet-150
    Description
    Violet 150
    Value
    rgb(232, 207, 246)
    Computed value
    rgb(232, 207, 246)
  • jh-color-violet-200
    Description
    Violet 200
    Value
    rgb(229, 192, 250)
    Computed value
    rgb(229, 192, 250)
  • jh-color-violet-250
    Description
    Violet 250
    Value
    rgb(216, 169, 244)
    Computed value
    rgb(216, 169, 244)
  • jh-color-violet-300
    Description
    Violet 300
    Value
    rgb(210, 152, 246)
    Computed value
    rgb(210, 152, 246)
  • jh-color-violet-350
    Description
    Violet 350
    Value
    rgb(202, 135, 245)
    Computed value
    rgb(202, 135, 245)
  • jh-color-violet-400
    Description
    Violet 400
    Value
    rgb(198, 118, 252)
    Computed value
    rgb(198, 118, 252)
  • jh-color-violet-450
    Description
    Violet 450
    Value
    rgb(189, 95, 254)
    Computed value
    rgb(189, 95, 254)
  • jh-color-violet-500
    Description
    Violet 500
    Value
    rgb(168, 61, 243)
    Computed value
    rgb(168, 61, 243)
  • jh-color-violet-550
    Description
    Violet 550
    Value
    rgb(158, 42, 239)
    Computed value
    rgb(158, 42, 239)
  • jh-color-violet-600
    Description
    Violet 600
    Value
    rgb(150, 30, 231)
    Computed value
    rgb(150, 30, 231)
  • jh-color-violet-650
    Description
    Violet 650
    Value
    rgb(136, 24, 211)
    Computed value
    rgb(136, 24, 211)
  • jh-color-violet-700
    Description
    Violet 700
    Value
    rgb(123, 23, 191)
    Computed value
    rgb(123, 23, 191)
  • jh-color-violet-750
    Description
    Violet 750
    Value
    rgb(109, 20, 170)
    Computed value
    rgb(109, 20, 170)
  • jh-color-violet-800
    Description
    Violet 800
    Value
    rgb(94, 12, 150)
    Computed value
    rgb(94, 12, 150)
  • jh-color-violet-850
    Description
    Violet 850
    Value
    rgb(81, 9, 129)
    Computed value
    rgb(81, 9, 129)
  • jh-color-violet-900
    Description
    Violet 900
    Value
    rgb(69, 8, 110)
    Computed value
    rgb(69, 8, 110)
  • jh-color-violet-950
    Description
    Violet 950
    Value
    rgb(52, 2, 87)
    Computed value
    rgb(52, 2, 87)
  • jh-color-magenta-50
    Description
    Magenta 50
    Value
    rgb(255, 239, 251)
    Computed value
    rgb(255, 239, 251)
  • jh-color-magenta-100
    Description
    Magenta 100
    Value
    rgb(255, 227, 248)
    Computed value
    rgb(255, 227, 248)
  • jh-color-magenta-150
    Description
    Magenta 150
    Value
    rgb(250, 201, 239)
    Computed value
    rgb(250, 201, 239)
  • jh-color-magenta-200
    Description
    Magenta 200
    Value
    rgb(253, 184, 237)
    Computed value
    rgb(253, 184, 237)
  • jh-color-magenta-250
    Description
    Magenta 250
    Value
    rgb(251, 153, 232)
    Computed value
    rgb(251, 153, 232)
  • jh-color-magenta-300
    Description
    Magenta 300
    Value
    rgb(252, 130, 230)
    Computed value
    rgb(252, 130, 230)
  • jh-color-magenta-350
    Description
    Magenta 350
    Value
    rgb(247, 109, 223)
    Computed value
    rgb(247, 109, 223)
  • jh-color-magenta-400
    Description
    Magenta 400
    Value
    rgb(243, 89, 218)
    Computed value
    rgb(243, 89, 218)
  • jh-color-magenta-450
    Description
    Magenta 450
    Value
    rgb(229, 71, 205)
    Computed value
    rgb(229, 71, 205)
  • jh-color-magenta-500
    Description
    Magenta 500
    Value
    rgb(202, 42, 180)
    Computed value
    rgb(202, 42, 180)
  • jh-color-magenta-550
    Description
    Magenta 550
    Value
    rgb(189, 28, 168)
    Computed value
    rgb(189, 28, 168)
  • jh-color-magenta-600
    Description
    Magenta 600
    Value
    rgb(177, 26, 157)
    Computed value
    rgb(177, 26, 157)
  • jh-color-magenta-650
    Description
    Magenta 650
    Value
    rgb(160, 24, 142)
    Computed value
    rgb(160, 24, 142)
  • jh-color-magenta-700
    Description
    Magenta 700
    Value
    rgb(143, 26, 127)
    Computed value
    rgb(143, 26, 127)
  • jh-color-magenta-750
    Description
    Magenta 750
    Value
    rgb(127, 23, 113)
    Computed value
    rgb(127, 23, 113)
  • jh-color-magenta-800
    Description
    Magenta 800
    Value
    rgb(110, 22, 98)
    Computed value
    rgb(110, 22, 98)
  • jh-color-magenta-850
    Description
    Magenta 850
    Value
    rgb(93, 17, 83)
    Computed value
    rgb(93, 17, 83)
  • jh-color-magenta-900
    Description
    Magenta 900
    Value
    rgb(80, 14, 70)
    Computed value
    rgb(80, 14, 70)
  • jh-color-magenta-950
    Description
    Magenta 950
    Value
    rgb(63, 2, 55)
    Computed value
    rgb(63, 2, 55)
  • jh-color-rose-50
    Deprecated
    Description
    Rose 50
    This token will be removed in v2.
    Value
    rgb(253, 241, 242)
    Computed value
    rgb(253, 241, 242)
  • jh-color-rose-100
    Deprecated
    Description
    Rose 100
    This token will be removed in v2.
    Value
    rgb(245, 232, 233)
    Computed value
    rgb(245, 232, 233)
  • jh-color-rose-150
    Deprecated
    Description
    Rose 150
    This token will be removed in v2.
    Value
    rgb(240, 207, 210)
    Computed value
    rgb(240, 207, 210)
  • jh-color-rose-200
    Deprecated
    Description
    Rose 200
    This token will be removed in v2.
    Value
    rgb(247, 190, 197)
    Computed value
    rgb(247, 190, 197)
  • jh-color-rose-250
    Deprecated
    Description
    Rose 250
    This token will be removed in v2.
    Value
    rgb(245, 163, 174)
    Computed value
    rgb(245, 163, 174)
  • jh-color-rose-300
    Deprecated
    Description
    Rose 300
    This token will be removed in v2.
    Value
    rgb(249, 142, 158)
    Computed value
    rgb(249, 142, 158)
  • jh-color-rose-350
    Deprecated
    Description
    Rose 350
    This token will be removed in v2.
    Value
    rgb(248, 120, 143)
    Computed value
    rgb(248, 120, 143)
  • jh-color-rose-400
    Deprecated
    Description
    Rose 400
    This token will be removed in v2.
    Value
    rgb(250, 97, 130)
    Computed value
    rgb(250, 97, 130)
  • jh-color-rose-450
    Deprecated
    Description
    Rose 450
    This token will be removed in v2.
    Value
    rgb(242, 73, 115)
    Computed value
    rgb(242, 73, 115)
  • jh-color-rose-500
    Deprecated
    Description
    Rose 500
    This token will be removed in v2.
    Value
    rgb(220, 43, 95)
    Computed value
    rgb(220, 43, 95)
  • jh-color-rose-550
    Deprecated
    Description
    Rose 550
    This token will be removed in v2.
    Value
    rgb(204, 19, 84)
    Computed value
    rgb(204, 19, 84)
  • jh-color-rose-600
    Deprecated
    Description
    Rose 600
    This token will be removed in v2.
    Value
    rgb(191, 20, 78)
    Computed value
    rgb(191, 20, 78)
  • jh-color-rose-650
    Deprecated
    Description
    Rose 650
    This token will be removed in v2.
    Value
    rgb(171, 25, 71)
    Computed value
    rgb(171, 25, 71)
  • jh-color-rose-700
    Deprecated
    Description
    Rose 700
    This token will be removed in v2.
    Value
    rgb(153, 26, 64)
    Computed value
    rgb(153, 26, 64)
  • jh-color-rose-750
    Deprecated
    Description
    Rose 750
    This token will be removed in v2.
    Value
    rgb(134, 26, 57)
    Computed value
    rgb(134, 26, 57)
  • jh-color-rose-800
    Deprecated
    Description
    Rose 800
    This token will be removed in v2.
    Value
    rgb(118, 22, 49)
    Computed value
    rgb(118, 22, 49)
  • jh-color-rose-850
    Deprecated
    Description
    Rose 850
    This token will be removed in v2.
    Value
    rgb(99, 19, 41)
    Computed value
    rgb(99, 19, 41)
  • jh-color-rose-900
    Deprecated
    Description
    Rose 900
    This token will be removed in v2.
    Value
    rgb(85, 15, 34)
    Computed value
    rgb(85, 15, 34)
  • jh-color-rose-950
    Deprecated
    Description
    Rose 950
    This token will be removed in v2.
    Value
    rgb(67, 5, 23)
    Computed value
    rgb(67, 5, 23)

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

Shadow

  • jh-shadow-0
    Deprecated
    Description
    Shadow 0; used on content and containers that need to sit flush with the underlying surface; also used for removing a previously defined shadow
    Avoid using this token. Use box-shadow: none; when needing to remove a shadow.
    Value
    none
    Computed value
    none
  • jh-shadow-100
    Deprecated
    Description
    Shadow 100; used on surface-level content and components such as cards and control thumbs
    This token will be replaced with --jh-shadow-low in v2.
    Value
    0 4px 6px 0 rgba(0, 0, 0, jh-opacity-300), 0 2px 2px 0 rgba(0, 0, 0, jh-opacity-100)
    Computed value
    0 4px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.1)
  • jh-shadow-200
    Deprecated
    Description
    Shadow 200; used on components that overlay a portion of the UI such as FABs and toasts
    This token will be replaced with --jh-shadow-mid in v2.
    Value
    0 8px 12px 0 rgba(0, 0, 0, jh-opacity-300), 0 4px 4px 0 rgba(0, 0, 0, jh-opacity-100)
    Computed value
    0 8px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 4px 0 rgba(0, 0, 0, 0.1)
  • jh-shadow-300
    Deprecated
    Description
    Shadow 300; used on major sections of the UI such as menus
    This token will be replaced with --jh-shadow-high in v2.
    Value
    0 12px 18px 0 rgba(0, 0, 0, jh-opacity-300), 0 6px 6px 0 rgba(0, 0, 0, jh-opacity-100)
    Computed value
    0 12px 18px 0 rgba(0, 0, 0, 0.3), 0 6px 6px 0 rgba(0, 0, 0, 0.1)
  • jh-shadow-400
    Deprecated
    Description
    Shadow 400; used on components that should overlay the entire UI such as dialogs
    This token will be replaced with --jh-shadow-overlay in v2.
    Value
    0 16px 24px 0 rgba(0, 0, 0, jh-opacity-300), 0 8px 8px 0 rgba(0, 0, 0, jh-opacity-100)
    Computed value
    0 16px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 8px 0 rgba(0, 0, 0, 0.1)

Size

  • jh-size-0
    Deprecated
    Description
    Size 0
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    0px
    Computed value
    0px
  • jh-size-50
    Deprecated
    Description
    Size 50
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    2px
    Computed value
    2px
  • jh-size-100
    Deprecated
    Description
    Size 100
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    4px
    Computed value
    4px
  • jh-size-200
    Deprecated
    Description
    Size 200
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    8px
    Computed value
    8px
  • jh-size-300
    Deprecated
    Description
    Size 300
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    12px
    Computed value
    12px
  • jh-size-400
    Deprecated
    Description
    Size 400
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    16px
    Computed value
    16px
  • jh-size-500
    Deprecated
    Description
    Size 500
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    20px
    Computed value
    20px
  • jh-size-600
    Deprecated
    Description
    Size 600
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    24px
    Computed value
    24px
  • jh-size-700
    Deprecated
    Description
    Size 700
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    28px
    Computed value
    28px
  • jh-size-800
    Deprecated
    Description
    Size 800
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    32px
    Computed value
    32px
  • jh-size-900
    Deprecated
    Description
    Size 900
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    36px
    Computed value
    36px
  • jh-size-1000
    Deprecated
    Description
    Size 1000
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    40px
    Computed value
    40px
  • jh-size-1100
    Deprecated
    Description
    Size 1100
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    44px
    Computed value
    44px
  • jh-size-1200
    Deprecated
    Description
    Size 1200
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    48px
    Computed value
    48px
  • jh-size-1300
    Deprecated
    Description
    Size 1300
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    52px
    Computed value
    52px
  • jh-size-1400
    Deprecated
    Description
    Size 1400
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    56px
    Computed value
    56px
  • jh-size-1500
    Deprecated
    Description
    Size 1500
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    60px
    Computed value
    60px
  • jh-size-1600
    Deprecated
    Description
    Size 1600
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    64px
    Computed value
    64px
  • jh-size-1700
    Deprecated
    Description
    Size 1700
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    68px
    Computed value
    68px
  • jh-size-1800
    Deprecated
    Description
    Size 1800
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    72px
    Computed value
    72px
  • jh-size-1900
    Deprecated
    Description
    Size 1900
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    76px
    Computed value
    76px
  • jh-size-2000
    Deprecated
    Description
    Size 2000
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    80px
    Computed value
    80px
  • jh-size-2100
    Deprecated
    Description
    Size 2100
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    84px
    Computed value
    84px
  • jh-size-2200
    Deprecated
    Description
    Size 2200
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    88px
    Computed value
    88px
  • jh-size-2300
    Deprecated
    Description
    Size 2300
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    92px
    Computed value
    92px
  • jh-size-2400
    Deprecated
    Description
    Size 2400
    Size tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    96px
    Computed value
    96px

Space

  • jh-space-0
    Deprecated
    Description
    Space 0
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    0px
    Computed value
    0px
  • jh-space-50
    Deprecated
    Description
    Space 50
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    2px
    Computed value
    2px
  • jh-space-100
    Deprecated
    Description
    Space 100
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    4px
    Computed value
    4px
  • jh-space-200
    Deprecated
    Description
    Space 200
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    8px
    Computed value
    8px
  • jh-space-300
    Deprecated
    Description
    Space 300
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    12px
    Computed value
    12px
  • jh-space-400
    Deprecated
    Description
    Space 400
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    16px
    Computed value
    16px
  • jh-space-500
    Deprecated
    Description
    Space 500
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    20px
    Computed value
    20px
  • jh-space-600
    Deprecated
    Description
    Space 600
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    24px
    Computed value
    24px
  • jh-space-700
    Deprecated
    Description
    Space 700
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    28px
    Computed value
    28px
  • jh-space-800
    Deprecated
    Description
    Space 800
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    32px
    Computed value
    32px
  • jh-space-900
    Deprecated
    Description
    Space 900
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    36px
    Computed value
    36px
  • jh-space-1000
    Deprecated
    Description
    Space 1000
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    40px
    Computed value
    40px
  • jh-space-1100
    Deprecated
    Description
    Space 1100
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    44px
    Computed value
    44px
  • jh-space-1200
    Deprecated
    Description
    Space 1200
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    48px
    Computed value
    48px
  • jh-space-1300
    Deprecated
    Description
    Space 1300
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    52px
    Computed value
    52px
  • jh-space-1400
    Deprecated
    Description
    Space 1400
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    56px
    Computed value
    56px
  • jh-space-1500
    Deprecated
    Description
    Space 1500
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    60px
    Computed value
    60px
  • jh-space-1600
    Deprecated
    Description
    Space 1600
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    64px
    Computed value
    64px
  • jh-space-1700
    Deprecated
    Description
    Space 1700
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    68px
    Computed value
    68px
  • jh-space-1800
    Deprecated
    Description
    Space 1800
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    72px
    Computed value
    72px
  • jh-space-1900
    Deprecated
    Description
    Space 1900
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    76px
    Computed value
    76px
  • jh-space-2000
    Deprecated
    Description
    Space 2000
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    80px
    Computed value
    80px
  • jh-space-2100
    Deprecated
    Description
    Space 2100
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    84px
    Computed value
    84px
  • jh-space-2200
    Deprecated
    Description
    Space 2200
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    88px
    Computed value
    88px
  • jh-space-2300
    Deprecated
    Description
    Space 2300
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    Value
    92px
    Computed value
    92px
  • jh-space-2400
    Deprecated
    Description
    Space 2400
    Space tokens will be replaced with similarly-scaled dimension tokens in v2.
    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
    rgb(231, 236, 240)
  • jh-color-container-primary-enabled
    Description
    Used on the major containers throughout the user interface such as cards and dialogs
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-container-primary-hover
    Description
    Hover color for primary container
    Value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • jh-color-container-primary-active
    Description
    Active color for primary container
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-container-primary-selected
    Description
    Selected color for primary container
    Value
    jh-color-azure-50
    Computed value
    rgb(236, 245, 254)
  • 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
    rgb(240, 245, 249)
  • jh-color-container-secondary-hover
    Description
    Hover color for secondary container
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-container-secondary-active
    Description
    Active color for secondary container
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-container-secondary-selected
    Description
    Selected color for secondary container
    Value
    jh-color-azure-100
    Computed value
    rgb(218, 238, 255)
  • jh-color-container-neutral-enabled
    Description
    Used on containers that have a neutral context
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-container-neutral-hover
    Description
    Hover color for neutral container
    Value
    jh-color-gray-150
    Computed value
    rgb(211, 216, 220)
  • jh-color-container-neutral-active
    Description
    Active color for neutral container
    Value
    jh-color-gray-200
    Computed value
    rgb(201, 206, 211)
  • jh-color-container-brand-enabled
    Description
    Used on containers that have a branded context
    Value
    jh-color-azure-100
    Computed value
    rgb(218, 238, 255)
  • jh-color-container-brand-hover
    Description
    Hover color for branded container
    Value
    jh-color-azure-150
    Computed value
    rgb(186, 220, 251)
  • jh-color-container-brand-active
    Description
    Active color for branded container
    Value
    jh-color-azure-200
    Computed value
    rgb(163, 212, 255)
  • jh-color-container-positive-enabled
    Description
    Used on containers that have a positive context
    Value
    jh-color-green-100
    Computed value
    rgb(209, 245, 195)
  • jh-color-container-positive-hover
    Description
    Hover color for positive container
    Value
    jh-color-green-150
    Computed value
    rgb(169, 231, 148)
  • jh-color-container-positive-active
    Description
    Active color for positive container
    Value
    jh-color-green-200
    Computed value
    rgb(136, 226, 110)
  • jh-color-container-negative-enabled
    Description
    Used on containers that have a negative context
    Value
    jh-color-red-100
    Computed value
    rgb(250, 231, 226)
  • jh-color-container-negative-hover
    Description
    Hover color for negative container
    Value
    jh-color-red-150
    Computed value
    rgb(245, 207, 196)
  • jh-color-container-negative-active
    Description
    Active color for negative container
    Value
    jh-color-red-200
    Computed value
    rgb(251, 191, 174)
  • jh-color-overlay
    Description
    Used to distinguish the modal layer from the layer underneath
    Value
    rgba(42, 44, 46, jh-opacity-600)
    Computed value
    rgba(42, 44, 46, 0.6)
  • 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
    rgb(211, 216, 220)
  • jh-color-control-hover
    Description
    Hover color for control
    Value
    jh-color-gray-200
    Computed value
    rgb(201, 206, 211)
  • jh-color-control-active
    Description
    Active color for control
    Value
    jh-color-gray-250
    Computed value
    rgb(182, 187, 192)
  • 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
    rgb(112, 117, 122)
  • jh-color-divider-secondary
    Description
    Used on subtle border elements such as dividers and table borders
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-divider-inverse
    Description
    Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • 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
    rgb(6, 24, 95)
  • 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
    rgb(8, 92, 229)
  • jh-color-brand-tertiary
    Description
    Used to add thoughtful branded touches to components such as accent bars
    Value
    jh-color-cyan-200
    Computed value
    rgb(118, 220, 253)
  • 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, rgb(232, 247, 247) 0%, rgb(118, 220, 253) 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, rgb(118, 220, 253) 0%, rgb(8, 92, 229) 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, rgb(8, 92, 229) 0%, rgb(6, 24, 95) 100%)
  • jh-color-brand-on-primary
    Description
    Used for content that sits on the primary brand color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-brand-on-secondary
    Description
    Used for content that sits on the secondary brand color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-brand-on-tertiary
    Description
    Used for content that sits on the tertiary brand color
    Value
    jh-color-azure-950
    Computed value
    rgb(6, 24, 95)
  • jh-color-brand-on-gradient-light
    Description
    Used for content that sits on the light brand gradient
    Value
    jh-color-azure-950
    Computed value
    rgb(6, 24, 95)
  • jh-color-brand-on-gradient-dark
    Description
    Used for content that sits on the dark brand gradient
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-brand-enabled
    Description
    Used for content that needs to have a strong branded presence
    Value
    jh-color-azure-600
    Computed value
    rgb(8, 92, 229)
  • jh-color-content-brand-hover
    Description
    Hover color for branded content
    Value
    jh-color-azure-650
    Computed value
    rgb(38, 79, 213)
  • jh-color-content-brand-active
    Description
    Active color for branded content
    Value
    jh-color-azure-700
    Computed value
    rgb(51, 67, 196)
  • 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
    rgb(42, 44, 46)
  • jh-color-content-primary-hover
    Description
    Hover color for primary content
    Value
    jh-color-gray-950
    Computed value
    rgb(30, 32, 33)
  • jh-color-content-primary-active
    Description
    Active color for primary content
    Value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-content-secondary-enabled
    Description
    Used for supportive content such as labels, subtitles, and placeholder text
    Value
    jh-color-gray-600
    Computed value
    rgb(95, 100, 104)
  • jh-color-content-secondary-hover
    Description
    Hover color for secondary content
    Value
    jh-color-gray-650
    Computed value
    rgb(87, 90, 93)
  • jh-color-content-secondary-active
    Description
    Active color for secondary content
    Value
    jh-color-gray-700
    Computed value
    rgb(78, 81, 85)
  • 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
    rgb(59, 111, 45)
  • jh-color-content-positive-hover
    Description
    Hover color for positive content
    Value
    jh-color-green-650
    Computed value
    rgb(54, 100, 41)
  • jh-color-content-positive-active
    Description
    Active color for positive content
    Value
    jh-color-green-700
    Computed value
    rgb(50, 90, 38)
  • 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
    rgb(189, 33, 19)
  • jh-color-content-negative-hover
    Description
    Hover color for negative content
    Value
    jh-color-red-650
    Computed value
    rgb(174, 24, 13)
  • jh-color-content-negative-active
    Description
    Active color for negative content
    Value
    jh-color-red-700
    Computed value
    rgb(158, 21, 11)
  • jh-color-content-inverse-enabled
    Description
    Used on backgrounds that don't provide sufficient contrast with other content colors
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-inverse-hover
    Description
    Hover color for inverse content
    Value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • jh-color-content-inverse-active
    Description
    Active color for inverse content
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-content-on-brand-enabled
    Description
    Used for content that sits on the content brand color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-brand-hover
    Description
    Used for content that sits on the content brand hover color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-brand-active
    Description
    Used for content that sits on the content brand active color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-primary-enabled
    Description
    Used for content that sits on the content primary color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-primary-hover
    Description
    Used for content that sits on the content primary hover color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-primary-active
    Description
    Used for content that sits on the content primary active color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-secondary-enabled
    Description
    Used for content that sits on the content secondary color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-secondary-hover
    Description
    Used for content that sits on the content secondary hover color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-secondary-active
    Description
    Used for content that sits on the content secondary active color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-positive-enabled
    Description
    Used for content that sits on the content positive color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-positive-hover
    Description
    Used for content that sits on the content positive hover color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-positive-active
    Description
    Used for content that sits on the content positive active color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-negative-enabled
    Description
    Used for content that sits on the content negative color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-negative-hover
    Description
    Used for content that sits on the content negative hover color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-negative-active
    Description
    Used for content that sits on the content negative active color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-inverse-enabled
    Description
    Used for content that sits on the content inverse color
    Value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-content-on-inverse-hover
    Description
    Used for content that sits on the content inverse hover color
    Value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-content-on-inverse-active
    Description
    Used for content that sits on the content inverse active color
    Value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-interactive-focus-outer
    Description
    Used for the outermost part of the focus ring
    Value
    jh-color-azure-600
    Computed value
    rgb(8, 92, 229)
  • jh-color-interactive-focus-inner
    Description
    Used to provide contrast against the outer focus color
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-interactive-highlight
    Description
    Used for highlighting content on the page
    Value
    jh-color-cyan-100
    Computed value
    rgb(204, 242, 251)
  • jh-color-interactive-visited
    Description
    Used for visited links
    Value
    jh-color-violet-600
    Computed value
    rgb(150, 30, 231)

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
    Deprecated
    Description
    Used for fine-print text and small snippets of text with limited space within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
    Computed value
    400 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-micro-medium
    Deprecated
    Description
    Used for fine-print text and small snippets of text with limited space within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
    Computed value
    500 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-micro-bold
    Deprecated
    Description
    Used for fine-print text and small snippets of text with limited space within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
    Computed value
    700 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-helper-regular
    Deprecated
    Description
    Used for secondary or explanatory text as well as field labels
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
    Computed value
    400 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-helper-medium
    Deprecated
    Description
    Used for secondary or explanatory text as well as field labels
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
    Computed value
    500 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-helper-bold
    Deprecated
    Description
    Used for secondary or explanatory text as well as field labels.
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
    Computed value
    700 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-regular-1
    Deprecated
    Description
    Used for blocks of text and most content displayed within components
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-regular-2
    Deprecated
    Description
    Used for intro or leading blocks of text
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    400 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-medium-1
    Deprecated
    Description
    Used for blocks of text and most content displayed within components
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-medium-2
    Deprecated
    Description
    Used for intro or leading blocks of text
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    500 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-bold-1
    Deprecated
    Description
    Used for blocks of text and most content displayed within components
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-bold-2
    Deprecated
    Description
    Used for intro or leading blocks of text
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    700 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-regular-italic-1
    Deprecated
    Description
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-400 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    400 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-regular-italic-2
    Deprecated
    Description
    Used for intro or leading blocks of text
    Value
    jh-font-weight-400 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    400 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-medium-italic-1
    Deprecated
    Description
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-500 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    500 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-medium-italic-2
    Deprecated
    Description
    Used for intro or leading blocks of text
    Value
    jh-font-weight-500 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    500 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-bold-italic-1
    Deprecated
    Description
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-700 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    700 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-body-bold-italic-2
    Deprecated
    Description
    Used for intro or leading blocks of text
    Value
    jh-font-weight-700 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    700 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-code-regular-1
    Deprecated
    Description
    Used for code references in standard blocks of text
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-mono
    Computed value
    400 14px/20px 'Roboto Mono', monospace
  • jh-font-code-regular-2
    Deprecated
    Description
    Used for code references in intro or leading blocks of text
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-mono
    Computed value
    400 16px/24px 'Roboto Mono', monospace
  • jh-font-display-light-1
    Deprecated
    Description
    Used to create visual emphasis through size without being misconstrued as a heading
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-300 jh-font-size-1050/jh-font-line-height-1300 jh-font-family-primary
    Computed value
    300 42px/52px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-display-light-2
    Deprecated
    Description
    Used to create visual emphasis through size without being misconstrued as a heading
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-300 jh-font-size-1350/jh-font-line-height-1600 jh-font-family-primary
    Computed value
    300 54px/64px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-display-light-3
    Deprecated
    Description
    Used to create visual emphasis through size without being misconstrued as a heading
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-300 jh-font-size-2300/jh-font-line-height-2700 jh-font-family-primary
    Computed value
    300 92px/108px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-regular-1
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-regular-2
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    400 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-regular-3
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
    Computed value
    400 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-regular-4
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
    Computed value
    400 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-regular-5
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
    Computed value
    400 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-regular-6
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-400 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
    Computed value
    400 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-medium-1
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-medium-2
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    500 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-medium-3
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
    Computed value
    500 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-medium-4
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
    Computed value
    500 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-medium-5
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
    Computed value
    500 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-medium-6
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-500 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
    Computed value
    500 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-bold-1
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-bold-2
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    700 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-bold-3
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
    Computed value
    700 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-bold-4
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
    Computed value
    700 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-bold-5
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
    Computed value
    700 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • jh-font-heading-bold-6
    Deprecated
    Description
    Used to create visual hierarchy on a page and within a component
    This token will be replaced in v2 with a series of W3C-aligned tokens that make up the composite typography.
    Value
    jh-font-weight-700 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
    Computed value
    700 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif

Opacity

  • jh-opacity-disabled
    Description
    Used on interactive elements to denote when they are disabled
    Value
    jh-opacity-300
    Computed value
    0.3

Shadow

  • jh-shadow-focus
    Description
    Used to style the focus ring on interactive elements
    Value
    0 0 0 1px jh-color-interactive-focus-inner, 0 0 0 3px jh-color-interactive-focus-outer
    Computed value
    0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(8, 92, 229)