Skip to main content

Global tokens

Border

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

Color

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

Font

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

Opacity

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

Shadow

  • jh-shadow-0
    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
  • jh-shadow-100
    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)
  • jh-shadow-200
    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)
  • jh-shadow-300
    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)
  • jh-shadow-400
    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

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

Space

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

Z-index

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