Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.
Digital Toolkit

Authentication Framework

Protect user data with OAuth 2.0 and OpenID Connect—both industry standards.

Consumer API

Build your own apps and services faster using the same API that Banno uses.

Plugin Framework

Extend the functionality of the Banno Digital Platform by building plugins.

Admin API

Manage and integrate the back office using the same API that Banno uses.
Enterprise & Payments

jXchange Developer Portal

Translate business information between Jack Henry and third-party software products.

Enterprise REST APIs

Build your Fintech innovation leveraging the JH Enterprise RESTFUL APIs.

Payments Developer Experience

Integrate with Jack Henry Payments platforms.
Digital Toolkit

Visual Language

Learn elements of our design language such as color, iconography, and typography that help create consistent products.

Design Tokens

Browse the collection of design tokens that enable the options and decisions of our visual language to be applied throughout the system.

Components

View the library of commonly used components across our applications and guidelines on their usage.

Global tokens

Border

  • jh-border-radius-0
    No border radius
    Default value
    0
  • jh-border-radius-50
    Border radius 50
    Default value
    2px
  • jh-border-radius-100
    Border radius 100
    Default value
    4px
  • jh-border-radius-200
    Border radius 200
    Default value
    8px
  • jh-border-radius-300
    Border radius 300
    Default value
    12px
  • jh-border-radius-400
    Border radius 400
    Default value
    16px
  • jh-border-radius-circle
    Circular border radius
    Default value
    50%

Color

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

Font

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

Opacity

  • jh-opacity-0
    Transparent
    Default value
    0
  • jh-opacity-100
    Opacity 100
    Default value
    0.1
  • jh-opacity-200
    Opacity 200
    Default value
    0.2
  • jh-opacity-300
    Opacity 300
    Default value
    0.3
  • jh-opacity-400
    Opacity 400
    Default value
    0.4
  • jh-opacity-500
    Opacity 500
    Default value
    0.5
  • jh-opacity-600
    Opacity 600
    Default value
    0.6
  • jh-opacity-700
    Opacity 700
    Default value
    0.7
  • jh-opacity-800
    Opacity 800
    Default value
    0.8
  • jh-opacity-900
    Opacity 900
    Default value
    0.9

Shadow

  • jh-shadow-100
    Shadow 100; used on surface-level content and components such as cards and control thumbs
    Default 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
    Default 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
    Default 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
    Default 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-50
    Size 50
    Default value
    2px
  • jh-size-100
    Size 100
    Default value
    4px
  • jh-size-200
    Size 200
    Default value
    8px
  • jh-size-300
    Size 300
    Default value
    12px
  • jh-size-400
    Size 400
    Default value
    16px
  • jh-size-500
    Size 500
    Default value
    20px
  • jh-size-600
    Size 600
    Default value
    24px
  • jh-size-700
    Size 700
    Default value
    28px
  • jh-size-800
    Size 800
    Default value
    32px
  • jh-size-900
    Size 900
    Default value
    36px
  • jh-size-1000
    Size 1000
    Default value
    40px
  • jh-size-1100
    Size 1100
    Default value
    44px
  • jh-size-1200
    Size 1200
    Default value
    48px
  • jh-size-1300
    Size 1300
    Default value
    52px
  • jh-size-1400
    Size 1400
    Default value
    56px
  • jh-size-1500
    Size 1500
    Default value
    60px
  • jh-size-1600
    Size 1600
    Default value
    64px
  • jh-size-1700
    Size 1700
    Default value
    68px
  • jh-size-1800
    Size 1800
    Default value
    72px
  • jh-size-1900
    Size 1900
    Default value
    76px
  • jh-size-2000
    Size 2000
    Default value
    80px
  • jh-size-2100
    Size 2100
    Default value
    84px
  • jh-size-2200
    Size 2200
    Default value
    88px
  • jh-size-2300
    Size 2300
    Default value
    92px
  • jh-size-2400
    Size 2400
    Default value
    96px

Space

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

Z-index

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