Skip to main content

Light theme

Global tokens

Border

  • Token name
    jh-border-radius-0
    Description
    No border radius
    Value
    0px
  • Token name
    jh-border-radius-50
    Description
    Border radius 50
    Value
    2px
  • Token name
    jh-border-radius-100
    Description
    Border radius 100
    Value
    4px
  • Token name
    jh-border-radius-200
    Description
    Border radius 200
    Value
    8px
  • Token name
    jh-border-radius-300
    Description
    Border radius 300
    Value
    12px
  • Token name
    jh-border-radius-400
    Description
    Border radius 400
    Value
    16px
  • Token name
    jh-border-radius-circle
    Description
    Circular border radius
    Value
    50%
  • Token name
    jh-border-radius-pill
    Description
    Pill border radius
    Value
    9999px

Color

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

Font

  • Aa
    Token name
    jh-font-family-sans
    Description
    Sans-serif font family
    Value
    'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    Token name
    jh-font-family-mono
    Description
    Monospace font family
    Value
    'Roboto Mono', monospace
  • Aa
    Token name
    jh-font-line-height-300
    Description
    Line-height 300
    Value
    12px
  • Aa
    Token name
    jh-font-line-height-400
    Description
    Line-height 400
    Value
    16px
  • Aa
    Token name
    jh-font-line-height-500
    Description
    Line-height 500
    Value
    20px
  • Aa
    Token name
    jh-font-line-height-600
    Description
    Line-height 600
    Value
    24px
  • Aa
    Token name
    jh-font-line-height-700
    Description
    Line-height 700
    Value
    28px
  • Aa
    Token name
    jh-font-line-height-800
    Description
    Line-height 800
    Value
    32px
  • Aa
    Token name
    jh-font-line-height-900
    Description
    Line-height 900
    Value
    36px
  • Aa
    Token name
    jh-font-line-height-1000
    Description
    Line-height 1000
    Value
    40px
  • Aa
    Token name
    jh-font-line-height-1100
    Description
    Line-height 1100
    Value
    44px
  • Aa
    Token name
    jh-font-line-height-1300
    Description
    Line-height 1300
    Value
    52px
  • Aa
    Token name
    jh-font-line-height-1500
    Description
    Line-height 1500
    Value
    60px
  • Aa
    Token name
    jh-font-line-height-1600
    Description
    Line-height 1600
    Value
    64px
  • Aa
    Token name
    jh-font-line-height-1800
    Description
    Line-height 1800
    Value
    72px
  • Aa
    Token name
    jh-font-line-height-2000
    Description
    Line-height 2000
    Value
    80px
  • Aa
    Token name
    jh-font-line-height-2300
    Description
    Line-height 2300
    Value
    92px
  • Aa
    Token name
    jh-font-line-height-2500
    Description
    Line-height 2500
    Value
    100px
  • Aa
    Token name
    jh-font-line-height-2700
    Description
    Line-height 2700
    Value
    108px
  • Aa
    Token name
    jh-font-weight-300
    Description
    Font weight 300
    Value
    300
  • Aa
    Token name
    jh-font-weight-400
    Description
    Font weight 400
    Value
    400
  • Aa
    Token name
    jh-font-weight-500
    Description
    Font weight 500
    Value
    500
  • Aa
    Token name
    jh-font-weight-700
    Description
    Font weight 700
    Value
    700
  • Aa
    Token name
    jh-font-size-250
    Description
    Font size 250
    Value
    10px
  • Aa
    Token name
    jh-font-size-300
    Description
    Font size 300
    Value
    12px
  • Aa
    Token name
    jh-font-size-350
    Description
    Font size 350
    Value
    14px
  • Aa
    Token name
    jh-font-size-400
    Description
    Font size 400
    Value
    16px
  • Aa
    Token name
    jh-font-size-450
    Description
    Font size 450
    Value
    18px
  • Aa
    Token name
    jh-font-size-500
    Description
    Font size 500
    Value
    20px
  • Aa
    Token name
    jh-font-size-600
    Description
    Font size 600
    Value
    24px
  • Aa
    Token name
    jh-font-size-700
    Description
    Font size 700
    Value
    28px
  • Aa
    Token name
    jh-font-size-800
    Description
    Font size 800
    Value
    32px
  • Aa
    Token name
    jh-font-size-900
    Description
    Font size 900
    Value
    36px
  • Aa
    Token name
    jh-font-size-1050
    Description
    Font size 1050
    Value
    42px
  • Aa
    Token name
    jh-font-size-1200
    Description
    Font size 1200
    Value
    48px
  • Aa
    Token name
    jh-font-size-1350
    Description
    Font size 1350
    Value
    54px
  • Aa
    Token name
    jh-font-size-1500
    Description
    Font size 1500
    Value
    60px
  • Aa
    Token name
    jh-font-size-1700
    Description
    Font size 1700
    Value
    68px
  • Aa
    Token name
    jh-font-size-1900
    Description
    Font size 1900
    Value
    76px
  • Aa
    Token name
    jh-font-size-2100
    Description
    Font size 2100
    Value
    84px
  • Aa
    Token name
    jh-font-size-2300
    Description
    Font size 2300
    Value
    92px

Opacity

  • Token name
    jh-opacity-0
    Description
    Transparent
    Value
    0
  • Token name
    jh-opacity-100
    Description
    Opacity 100
    Value
    0.1
  • Token name
    jh-opacity-200
    Description
    Opacity 200
    Value
    0.2
  • Token name
    jh-opacity-300
    Description
    Opacity 300
    Value
    0.3
  • Token name
    jh-opacity-400
    Description
    Opacity 400
    Value
    0.4
  • Token name
    jh-opacity-500
    Description
    Opacity 500
    Value
    0.5
  • Token name
    jh-opacity-600
    Description
    Opacity 600
    Value
    0.6
  • Token name
    jh-opacity-700
    Description
    Opacity 700
    Value
    0.7
  • Token name
    jh-opacity-800
    Description
    Opacity 800
    Value
    0.8
  • Token name
    jh-opacity-900
    Description
    Opacity 900
    Value
    0.9
  • Token name
    jh-opacity-1000
    Description
    Fully opaque
    Value
    1.0

Shadow

  • Token name
    jh-shadow-0
    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
    Value
    none
  • Token name
    jh-shadow-100
    Description
    Shadow 100; used on surface-level content and components such as cards and control thumbs
    Value
    0 4px 6px 0 rgba(0, 0, 0, jh-opacity-300), 0 2px 2px 0 rgba(0, 0, 0, jh-opacity-100)
  • Token name
    jh-shadow-200
    Description
    Shadow 200; used on components that overlay a portion of the UI such as FABs and toasts
    Value
    0 8px 12px 0 rgba(0, 0, 0, jh-opacity-300), 0 4px 4px 0 rgba(0, 0, 0, jh-opacity-100)
  • Token name
    jh-shadow-300
    Description
    Shadow 300; used on major sections of the UI such as menus
    Value
    0 12px 18px 0 rgba(0, 0, 0, jh-opacity-300), 0 6px 6px 0 rgba(0, 0, 0, jh-opacity-100)
  • Token name
    jh-shadow-400
    Description
    Shadow 400; used on components that should overlay the entire UI such as dialogs
    Value
    0 16px 24px 0 rgba(0, 0, 0, jh-opacity-300), 0 8px 8px 0 rgba(0, 0, 0, jh-opacity-100)

Size

  • Token name
    jh-size-0
    Description
    Size 0
    Value
    0px
  • Token name
    jh-size-50
    Description
    Size 50
    Value
    2px
  • Token name
    jh-size-100
    Description
    Size 100
    Value
    4px
  • Token name
    jh-size-200
    Description
    Size 200
    Value
    8px
  • Token name
    jh-size-300
    Description
    Size 300
    Value
    12px
  • Token name
    jh-size-400
    Description
    Size 400
    Value
    16px
  • Token name
    jh-size-500
    Description
    Size 500
    Value
    20px
  • Token name
    jh-size-600
    Description
    Size 600
    Value
    24px
  • Token name
    jh-size-700
    Description
    Size 700
    Value
    28px
  • Token name
    jh-size-800
    Description
    Size 800
    Value
    32px
  • Token name
    jh-size-900
    Description
    Size 900
    Value
    36px
  • Token name
    jh-size-1000
    Description
    Size 1000
    Value
    40px
  • Token name
    jh-size-1100
    Description
    Size 1100
    Value
    44px
  • Token name
    jh-size-1200
    Description
    Size 1200
    Value
    48px
  • Token name
    jh-size-1300
    Description
    Size 1300
    Value
    52px
  • Token name
    jh-size-1400
    Description
    Size 1400
    Value
    56px
  • Token name
    jh-size-1500
    Description
    Size 1500
    Value
    60px
  • Token name
    jh-size-1600
    Description
    Size 1600
    Value
    64px
  • Token name
    jh-size-1700
    Description
    Size 1700
    Value
    68px
  • Token name
    jh-size-1800
    Description
    Size 1800
    Value
    72px
  • Token name
    jh-size-1900
    Description
    Size 1900
    Value
    76px
  • Token name
    jh-size-2000
    Description
    Size 2000
    Value
    80px
  • Token name
    jh-size-2100
    Description
    Size 2100
    Value
    84px
  • Token name
    jh-size-2200
    Description
    Size 2200
    Value
    88px
  • Token name
    jh-size-2300
    Description
    Size 2300
    Value
    92px
  • Token name
    jh-size-2400
    Description
    Size 2400
    Value
    96px

Space

  • Token name
    jh-space-0
    Description
    Space 0
    Value
    0px
  • Token name
    jh-space-50
    Description
    Space 50
    Value
    2px
  • Token name
    jh-space-100
    Description
    Space 100
    Value
    4px
  • Token name
    jh-space-200
    Description
    Space 200
    Value
    8px
  • Token name
    jh-space-300
    Description
    Space 300
    Value
    12px
  • Token name
    jh-space-400
    Description
    Space 400
    Value
    16px
  • Token name
    jh-space-500
    Description
    Space 500
    Value
    20px
  • Token name
    jh-space-600
    Description
    Space 600
    Value
    24px
  • Token name
    jh-space-700
    Description
    Space 700
    Value
    28px
  • Token name
    jh-space-800
    Description
    Space 800
    Value
    32px
  • Token name
    jh-space-900
    Description
    Space 900
    Value
    36px
  • Token name
    jh-space-1000
    Description
    Space 1000
    Value
    40px
  • Token name
    jh-space-1100
    Description
    Space 1100
    Value
    44px
  • Token name
    jh-space-1200
    Description
    Space 1200
    Value
    48px
  • Token name
    jh-space-1300
    Description
    Space 1300
    Value
    52px
  • Token name
    jh-space-1400
    Description
    Space 1400
    Value
    56px
  • Token name
    jh-space-1500
    Description
    Space 1500
    Value
    60px
  • Token name
    jh-space-1600
    Description
    Space 1600
    Value
    64px
  • Token name
    jh-space-1700
    Description
    Space 1700
    Value
    68px
  • Token name
    jh-space-1800
    Description
    Space 1800
    Value
    72px
  • Token name
    jh-space-1900
    Description
    Space 1900
    Value
    76px
  • Token name
    jh-space-2000
    Description
    Space 2000
    Value
    80px
  • Token name
    jh-space-2100
    Description
    Space 2100
    Value
    84px
  • Token name
    jh-space-2200
    Description
    Space 2200
    Value
    88px
  • Token name
    jh-space-2300
    Description
    Space 2300
    Value
    92px
  • Token name
    jh-space-2400
    Description
    Space 2400
    Value
    96px

Z-index

  • Token name
    jh-z-index-0
    Description
    Z-index 0
    Value
    0
  • Token name
    jh-z-index-negative-100
    Description
    Z-index -100
    Value
    -100
  • Token name
    jh-z-index-positive-100
    Description
    Z-index 100
    Value
    100
  • Token name
    jh-z-index-positive-200
    Description
    Z-index 200
    Value
    200
  • Token name
    jh-z-index-positive-300
    Description
    Z-index 300
    Value
    300
  • Token name
    jh-z-index-positive-400
    Description
    Z-index 400
    Value
    400
  • Token name
    jh-z-index-positive-500
    Description
    Z-index 500
    Value
    500
  • Token name
    jh-z-index-positive-600
    Description
    Z-index 600
    Value
    600
  • Token name
    jh-z-index-positive-700
    Description
    Z-index 700
    Value
    700
  • Token name
    jh-z-index-positive-800
    Description
    Z-index 800
    Value
    800
  • Token name
    jh-z-index-positive-900
    Description
    Z-index 900
    Value
    900
  • Token name
    jh-z-index-positive-1000
    Description
    Z-index 1000
    Value
    1000

Alias tokens

Color

  • Token name
    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)
  • Token name
    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)
  • Token name
    jh-color-container-primary-hover
    Description
    Hover color for primary container
    Value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • Token name
    jh-color-container-primary-active
    Description
    Active color for primary container
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • Token name
    jh-color-container-primary-selected
    Description
    Selected color for primary container
    Value
    jh-color-azure-50
    Computed value
    rgb(236, 245, 254)
  • Token name
    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)
  • Token name
    jh-color-container-secondary-hover
    Description
    Hover color for secondary container
    Value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • Token name
    jh-color-container-secondary-active
    Description
    Active color for secondary container
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • Token name
    jh-color-container-secondary-selected
    Description
    Selected color for secondary container
    Value
    jh-color-azure-100
    Computed value
    rgb(218, 238, 255)
  • Token name
    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)
  • Token name
    jh-color-container-neutral-hover
    Description
    Hover color for neutral container
    Value
    jh-color-gray-150
    Computed value
    rgb(211, 216, 220)
  • Token name
    jh-color-container-neutral-active
    Description
    Active color for neutral container
    Value
    jh-color-gray-200
    Computed value
    rgb(201, 206, 211)
  • Token name
    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)
  • Token name
    jh-color-container-brand-hover
    Description
    Hover color for branded container
    Value
    jh-color-azure-150
    Computed value
    rgb(186, 220, 251)
  • Token name
    jh-color-container-brand-active
    Description
    Active color for branded container
    Value
    jh-color-azure-200
    Computed value
    rgb(163, 212, 255)
  • Token name
    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)
  • Token name
    jh-color-container-positive-hover
    Description
    Hover color for positive container
    Value
    jh-color-green-150
    Computed value
    rgb(169, 231, 148)
  • Token name
    jh-color-container-positive-active
    Description
    Active color for positive container
    Value
    jh-color-green-200
    Computed value
    rgb(136, 226, 110)
  • Token name
    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)
  • Token name
    jh-color-container-negative-hover
    Description
    Hover color for negative container
    Value
    jh-color-red-150
    Computed value
    rgb(245, 207, 196)
  • Token name
    jh-color-container-negative-active
    Description
    Active color for negative container
    Value
    jh-color-red-200
    Computed value
    rgb(251, 191, 174)
  • Token name
    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)
  • Token name
    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)
  • Token name
    jh-color-control-hover
    Description
    Hover color for control
    Value
    jh-color-gray-200
    Computed value
    rgb(201, 206, 211)
  • Token name
    jh-color-control-active
    Description
    Active color for control
    Value
    jh-color-gray-250
    Computed value
    rgb(182, 187, 192)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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%)
  • Token name
    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%)
  • Token name
    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%)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    jh-color-content-brand-hover
    Description
    Hover color for branded content
    Value
    jh-color-azure-650
    Computed value
    rgb(38, 79, 213)
  • Token name
    jh-color-content-brand-active
    Description
    Active color for branded content
    Value
    jh-color-azure-700
    Computed value
    rgb(51, 67, 196)
  • Token name
    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)
  • Token name
    jh-color-content-primary-hover
    Description
    Hover color for primary content
    Value
    jh-color-gray-950
    Computed value
    rgb(30, 32, 33)
  • Token name
    jh-color-content-primary-active
    Description
    Active color for primary content
    Value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • Token name
    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)
  • Token name
    jh-color-content-secondary-hover
    Description
    Hover color for secondary content
    Value
    jh-color-gray-650
    Computed value
    rgb(87, 90, 93)
  • Token name
    jh-color-content-secondary-active
    Description
    Active color for secondary content
    Value
    jh-color-gray-700
    Computed value
    rgb(78, 81, 85)
  • Token name
    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)
  • Token name
    jh-color-content-positive-hover
    Description
    Hover color for positive content
    Value
    jh-color-green-650
    Computed value
    rgb(54, 100, 41)
  • Token name
    jh-color-content-positive-active
    Description
    Active color for positive content
    Value
    jh-color-green-700
    Computed value
    rgb(50, 90, 38)
  • Token name
    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)
  • Token name
    jh-color-content-negative-hover
    Description
    Hover color for negative content
    Value
    jh-color-red-650
    Computed value
    rgb(174, 24, 13)
  • Token name
    jh-color-content-negative-active
    Description
    Active color for negative content
    Value
    jh-color-red-700
    Computed value
    rgb(158, 21, 11)
  • Token name
    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)
  • Token name
    jh-color-content-inverse-hover
    Description
    Hover color for inverse content
    Value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • Token name
    jh-color-content-inverse-active
    Description
    Active color for inverse content
    Value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    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)
  • Token name
    jh-color-interactive-highlight
    Description
    Used for highlighting content on the page
    Value
    jh-color-cyan-100
    Computed value
    rgb(204, 242, 251)
  • Token name
    jh-color-interactive-visited
    Description
    Used for visited links
    Value
    jh-color-violet-600
    Computed value
    rgb(150, 30, 231)

Font

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

Opacity

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

Shadow

  • Token name
    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)