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.

Color

Global

Gray

Token Value Example
jh-color-gray-0
Gray 0
rgb(255, 255, 255)
jh-color-gray-50
Gray 50
rgb(241, 244, 246)
jh-color-gray-100
Gray 100; Jack Henry brand color
rgb(231, 236, 240)
jh-color-gray-150
Gray 150
rgb(217, 223, 228)
jh-color-gray-200
Gray 200
rgb(202, 208, 214)
jh-color-gray-250
Gray 250; Jack Henry brand color
rgb(182, 187, 192)
jh-color-gray-300
Gray 300
rgb(166, 170, 175)
jh-color-gray-350
Gray 350
rgb(153, 158, 163)
jh-color-gray-400
Gray 400
rgb(140, 144, 148)
jh-color-gray-450
Gray 450
rgb(129, 133, 138)
jh-color-gray-500
Gray 500
rgb(115, 118, 121)
jh-color-gray-550
Gray 550
rgb(108, 111, 113)
jh-color-gray-600
Gray 600
rgb(100, 103, 105)
jh-color-gray-650
Gray 650; Jack Henry brand color
rgb(87, 90, 93)
jh-color-gray-700
Gray 700
rgb(80, 83, 85)
jh-color-gray-750
Gray 750
rgb(71, 74, 76)
jh-color-gray-800
Gray 800
rgb(60, 62, 63)
jh-color-gray-850
Gray 850
rgb(52, 53, 54)
jh-color-gray-900
Gray 900
rgb(39, 40, 41)
jh-color-gray-950
Gray 950
rgb(27, 28, 28)
jh-color-gray-1000
Gray 1000
rgb(0, 0, 0)

Red

Token Value Example
jh-color-red-50
Red 50
rgb(254, 241, 239)
jh-color-red-100
Red 100
rgb(251, 225, 221)
jh-color-red-150
Red 150
rgb(249, 211, 205)
jh-color-red-200
Red 200
rgb(248, 194, 187)
jh-color-red-250
Red 250
rgb(245, 171, 161)
jh-color-red-300
Red 300
rgb(242, 143, 130)
jh-color-red-350
Red 350
rgb(240, 124, 109)
jh-color-red-400
Red 400
rgb(237, 99, 82)
jh-color-red-450
Red 450
rgb(234, 77, 58)
jh-color-red-500
Red 500
rgb(229, 35, 10)
jh-color-red-550
Red 550
rgb(216, 33, 9)
jh-color-red-600
Red 600
rgb(201, 29, 7)
jh-color-red-650
Red 650
rgb(184, 27, 6)
jh-color-red-700
Red 700
rgb(164, 24, 6)
jh-color-red-750
Red 750
rgb(147, 21, 5)
jh-color-red-800
Red 800
rgb(124, 18, 4)
jh-color-red-850
Red 850
rgb(108, 16, 3)
jh-color-red-900
Red 900
rgb(83, 12, 3)
jh-color-red-950
Red 950
rgb(60, 9, 2)

Orange

Token Value Example
jh-color-orange-50
Orange 50
rgb(252, 242, 227)
jh-color-orange-100
Orange 100
rgb(249, 228, 195)
jh-color-orange-150
Orange 150
rgb(246, 215, 166)
jh-color-orange-200
Orange 200
rgb(242, 200, 134)
jh-color-orange-250
Orange 250
rgb(237, 179, 88)
jh-color-orange-300
Orange 300
rgb(231, 153, 29)
jh-color-orange-350
Orange 350
rgb(216, 141, 23)
jh-color-orange-400
Orange 400
rgb(201, 127, 7)
jh-color-orange-450
Orange 450
rgb(185, 117, 6)
jh-color-orange-500
Orange 500
rgb(165, 104, 6)
jh-color-orange-550
Orange 550
rgb(155, 98, 6)
jh-color-orange-600
Orange 600
rgb(144, 91, 5)
jh-color-orange-650
Orange 650
rgb(131, 83, 5)
jh-color-orange-700
Orange 700
rgb(116, 73, 4)
jh-color-orange-750
Orange 750
rgb(104, 65, 4)
jh-color-orange-800
Orange 800
rgb(87, 55, 3)
jh-color-orange-850
Orange 850
rgb(74, 47, 3)
jh-color-orange-900
Orange 900
rgb(57, 36, 2)
jh-color-orange-950
Orange 950
rgb(39, 25, 1)

Yellow

Token Value Example
jh-color-yellow-50
Yellow 50
rgb(243, 248, 191)
jh-color-yellow-100
Yellow 100
rgb(232, 238, 110)
jh-color-yellow-150
Yellow 150
rgb(219, 229, 30)
jh-color-yellow-200
Yellow 200
rgb(207, 216, 0)
jh-color-yellow-250
Yellow 250
rgb(190, 198, 0)
jh-color-yellow-300
Yellow 300
rgb(174, 176, 0)
jh-color-yellow-350
Yellow 350
rgb(161, 163, 0)
jh-color-yellow-400
Yellow 400
rgb(150, 148, 0)
jh-color-yellow-450
Yellow 450
rgb(138, 136, 0)
jh-color-yellow-500
Yellow 500
rgb(125, 121, 0)
jh-color-yellow-550
Yellow 550
rgb(117, 114, 0)
jh-color-yellow-600
Yellow 600
rgb(111, 104, 0)
jh-color-yellow-650
Yellow 650
rgb(101, 95, 0)
jh-color-yellow-700
Yellow 700
rgb(91, 83, 0)
jh-color-yellow-750
Yellow 750
rgb(82, 74, 0)
jh-color-yellow-800
Yellow 800
rgb(70, 62, 0)
jh-color-yellow-850
Yellow 850
rgb(60, 53, 0)
jh-color-yellow-900
Yellow 900
rgb(46, 40, 0)
jh-color-yellow-950
Yellow 950
rgb(32, 28, 0)

Lime

Token Value Example
jh-color-lime-50
Lime 50
rgb(228, 250, 213)
jh-color-lime-100
Lime 100
rgb(197, 245, 161)
jh-color-lime-150
Lime 150
rgb(165, 239, 108)
jh-color-lime-200
Lime 200
rgb(129, 231, 33)
jh-color-lime-250
Lime 250
rgb(115, 213, 23)
jh-color-lime-300
Lime 300
rgb(95, 192, 0)
jh-color-lime-350
Lime 350
rgb(88, 178, 0)
jh-color-lime-400
Lime 400
rgb(83, 162, 0)
jh-color-lime-450
Lime 450
rgb(76, 149, 0)
jh-color-lime-500
Lime 500
rgb(70, 132, 0)
jh-color-lime-550
Lime 550
rgb(66, 124, 0)
jh-color-lime-600
Lime 600
rgb(63, 115, 0)
jh-color-lime-650
Lime 650
rgb(58, 105, 0)
jh-color-lime-700
Lime 700
rgb(53, 93, 0)
jh-color-lime-750
Lime 750
rgb(47, 83, 0)
jh-color-lime-800
Lime 800
rgb(41, 69, 0)
jh-color-lime-850
Lime 850
rgb(35, 59, 0)
jh-color-lime-900
Lime 900
rgb(28, 45, 0)
jh-color-lime-950
Lime 950
rgb(19, 31, 0)

Green

Token Value Example
jh-color-green-50
Green 50
rgb(221, 251, 224)
jh-color-green-100
Green 100
rgb(179, 247, 187)
jh-color-green-150
Green 150
rgb(135, 242, 148)
jh-color-green-200
Green 200
rgb(74, 236, 93)
jh-color-green-250
Green 250
rgb(23, 219, 46)
jh-color-green-300
Green 300
rgb(7, 197, 29)
jh-color-green-350
Green 350
rgb(7, 183, 27)
jh-color-green-400
Green 400
rgb(6, 167, 25)
jh-color-green-450
Green 450
rgb(5, 154, 23)
jh-color-green-500
Green 500
rgb(5, 137, 20)
jh-color-green-550
Green 550
rgb(5, 129, 19)
jh-color-green-600
Green 600
rgb(4, 119, 18)
jh-color-green-650
Green 650
rgb(4, 109, 16)
jh-color-green-700
Green 700
rgb(3, 96, 14)
jh-color-green-750
Green 750
rgb(3, 86, 13)
jh-color-green-800
Green 800
rgb(3, 73, 11)
jh-color-green-850
Green 850
rgb(3, 62, 9)
jh-color-green-900
Green 900
rgb(2, 48, 7)
jh-color-green-950
Green 950
rgb(1, 33, 5)

Mint

Token Value Example
jh-color-mint-50
Mint 50
rgb(217, 251, 238)
jh-color-mint-100
Mint 100
rgb(170, 246, 217)
jh-color-mint-150
Mint 150
rgb(122, 241, 196)
jh-color-mint-200
Mint 200
rgb(53, 234, 164)
jh-color-mint-250
Mint 250
rgb(22, 216, 141)
jh-color-mint-300
Mint 300
rgb(7, 194, 122)
jh-color-mint-350
Mint 350
rgb(7, 180, 113)
jh-color-mint-400
Mint 400
rgb(6, 164, 103)
jh-color-mint-450
Mint 450
rgb(6, 152, 95)
jh-color-mint-500
Mint 500
rgb(5, 135, 85)
jh-color-mint-550
Mint 550
rgb(5, 127, 80)
jh-color-mint-600
Mint 600
rgb(4, 118, 74)
jh-color-mint-650
Mint 650
rgb(4, 107, 67)
jh-color-mint-700
Mint 700
rgb(3, 95, 60)
jh-color-mint-750
Mint 750
rgb(3, 85, 53)
jh-color-mint-800
Mint 800
rgb(2, 71, 45)
jh-color-mint-850
Mint 850
rgb(2, 62, 39)
jh-color-mint-900
Mint 900
rgb(2, 47, 29)
jh-color-mint-950
Mint 950
rgb(1, 33, 20)

Cyan

Token Value Example
jh-color-cyan-50
Cyan 50; Jack Henry brand color
rgb(232, 247, 247)
jh-color-cyan-100
Cyan 100
rgb(197, 235, 247)
jh-color-cyan-150
Cyan 150
rgb(164, 228, 249)
jh-color-cyan-200
Cyan 200; Jack Henry brand color
rgb(118, 220, 253)
jh-color-cyan-250
Cyan 250
rgb(56, 204, 252)
jh-color-cyan-300
Cyan 300
rgb(4, 183, 241)
jh-color-cyan-350
Cyan 350
rgb(4, 169, 223)
jh-color-cyan-400
Cyan 400
rgb(3, 155, 204)
jh-color-cyan-450
Cyan 450
rgb(3, 143, 187)
jh-color-cyan-500
Cyan 500
rgb(2, 127, 167)
jh-color-cyan-550
Cyan 550
rgb(2, 119, 157)
jh-color-cyan-600
Cyan 600
rgb(2, 110, 145)
jh-color-cyan-650
Cyan 650
rgb(2, 101, 133)
jh-color-cyan-700
Cyan 700
rgb(2, 89, 118)
jh-color-cyan-750
Cyan 750
rgb(2, 79, 105)
jh-color-cyan-800
Cyan 800
rgb(1, 67, 89)
jh-color-cyan-850
Cyan 850
rgb(1, 58, 77)
jh-color-cyan-900
Cyan 900
rgb(1, 44, 58)
jh-color-cyan-950
Cyan 950
rgb(1, 31, 41)

Azure

Token Value Example
jh-color-azure-50
Azure 50
rgb(238, 244, 253)
jh-color-azure-100
Azure 100
rgb(219, 232, 251)
jh-color-azure-150
Azure 150
rgb(201, 221, 249)
jh-color-azure-200
Azure 200
rgb(184, 208, 248)
jh-color-azure-250
Azure 250
rgb(158, 191, 246)
jh-color-azure-300
Azure 300
rgb(128, 171, 242)
jh-color-azure-350
Azure 350
rgb(108, 158, 240)
jh-color-azure-400
Azure 400
rgb(85, 143, 237)
jh-color-azure-450
Azure 450
rgb(65, 130, 235)
jh-color-azure-500
Azure 500
rgb(39, 112, 232)
jh-color-azure-550
Azure 550
rgb(26, 103, 231)
jh-color-azure-600
Azure 600; Jack Henry brand color
rgb(8, 92, 229)
jh-color-azure-650
Azure 650
rgb(7, 84, 209)
jh-color-azure-700
Azure 700
rgb(6, 74, 185)
jh-color-azure-750
Azure 750
rgb(5, 66, 166)
jh-color-azure-800
Azure 800
rgb(5, 56, 140)
jh-color-azure-850
Azure 850
rgb(4, 48, 121)
jh-color-azure-900
Azure 900; Jack Henry brand color
rgb(6, 24, 95)
jh-color-azure-950
Azure 950
rgb(5, 20, 81)

Blue

Token Value Example
jh-color-blue-50
Blue 50
rgb(244, 242, 254)
jh-color-blue-100
Blue 100
rgb(231, 228, 252)
jh-color-blue-150
Blue 150
rgb(220, 216, 251)
jh-color-blue-200
Blue 200
rgb(207, 202, 249)
jh-color-blue-250
Blue 250
rgb(189, 182, 247)
jh-color-blue-300
Blue 300
rgb(170, 160, 245)
jh-color-blue-350
Blue 350
rgb(157, 145, 243)
jh-color-blue-400
Blue 400
rgb(142, 128, 242)
jh-color-blue-450
Blue 450
rgb(130, 114, 241)
jh-color-blue-500
Blue 500
rgb(112, 95, 238)
jh-color-blue-550
Blue 550
rgb(104, 86, 237)
jh-color-blue-600
Blue 600
rgb(93, 74, 236)
jh-color-blue-650
Blue 650
rgb(81, 61, 235)
jh-color-blue-700
Blue 700
rgb(63, 41, 232)
jh-color-blue-750
Blue 750
rgb(47, 24, 226)
jh-color-blue-800
Blue 800
rgb(30, 7, 203)
jh-color-blue-850
Blue 850
rgb(26, 6, 177)
jh-color-blue-900
Blue 900
rgb(21, 5, 138)
jh-color-blue-950
Blue 950
rgb(15, 4, 102)

Violet

Token Value Example
jh-color-violet-50
Violet 50
rgb(248, 241, 254)
jh-color-violet-100
Violet 100
rgb(241, 225, 252)
jh-color-violet-150
Violet 150
rgb(234, 211, 251)
jh-color-violet-200
Violet 200
rgb(228, 195, 249)
jh-color-violet-250
Violet 250
rgb(218, 172, 247)
jh-color-violet-300
Violet 300
rgb(206, 146, 243)
jh-color-violet-350
Violet 350
rgb(198, 129, 241)
jh-color-violet-400
Violet 400
rgb(189, 107, 239)
jh-color-violet-450
Violet 450
rgb(181, 89, 237)
jh-color-violet-500
Violet 500
rgb(169, 63, 235)
jh-color-violet-550
Violet 550
rgb(162, 48, 233)
jh-color-violet-600
Violet 600
rgb(153, 28, 231)
jh-color-violet-650
Violet 650
rgb(140, 23, 214)
jh-color-violet-700
Violet 700
rgb(124, 7, 197)
jh-color-violet-750
Violet 750
rgb(111, 6, 177)
jh-color-violet-800
Violet 800
rgb(95, 5, 151)
jh-color-violet-850
Violet 850
rgb(82, 4, 131)
jh-color-violet-900
Violet 900
rgb(64, 4, 101)
jh-color-violet-950
Violet 950
rgb(47, 3, 74)

Magenta

Token Value Example
jh-color-magenta-50
Magenta 50
rgb(254, 239, 252)
jh-color-magenta-100
Magenta 100
rgb(252, 222, 248)
jh-color-magenta-150
Magenta 150
rgb(250, 205, 244)
jh-color-magenta-200
Magenta 200
rgb(248, 188, 241)
jh-color-magenta-250
Magenta 250
rgb(245, 161, 235)
jh-color-magenta-300
Magenta 300
rgb(242, 128, 229)
jh-color-magenta-350
Magenta 350
rgb(240, 105, 224)
jh-color-magenta-400
Magenta 400
rgb(236, 73, 217)
jh-color-magenta-450
Magenta 450
rgb(232, 37, 209)
jh-color-magenta-500
Magenta 500
rgb(212, 7, 189)
jh-color-magenta-550
Magenta 550
rgb(200, 7, 179)
jh-color-magenta-600
Magenta 600
rgb(186, 7, 166)
jh-color-magenta-650
Magenta 650
rgb(171, 6, 152)
jh-color-magenta-700
Magenta 700
rgb(152, 5, 135)
jh-color-magenta-750
Magenta 750
rgb(136, 5, 121)
jh-color-magenta-800
Magenta 800
rgb(116, 4, 103)
jh-color-magenta-850
Magenta 850
rgb(101, 3, 89)
jh-color-magenta-900
Magenta 900
rgb(78, 3, 69)
jh-color-magenta-950
Magenta 950
rgb(56, 2, 50)

Rose

Token Value Example
jh-color-rose-50
Rose 50
rgb(254, 240, 245)
jh-color-rose-100
Rose 100
rgb(252, 223, 234)
jh-color-rose-150
Rose 150
rgb(251, 208, 224)
jh-color-rose-200
Rose 200
rgb(248, 191, 213)
jh-color-rose-250
Rose 250
rgb(245, 167, 197)
jh-color-rose-300
Rose 300
rgb(243, 137, 178)
jh-color-rose-350
Rose 350
rgb(241, 116, 164)
jh-color-rose-400
Rose 400
rgb(238, 90, 147)
jh-color-rose-450
Rose 450
rgb(235, 65, 131)
jh-color-rose-500
Rose 500
rgb(230, 14, 97)
jh-color-rose-550
Rose 550
rgb(216, 13, 91)
jh-color-rose-600
Rose 600
rgb(202, 7, 82)
jh-color-rose-650
Rose 650
rgb(185, 6, 75)
jh-color-rose-700
Rose 700
rgb(165, 6, 67)
jh-color-rose-750
Rose 750
rgb(148, 5, 60)
jh-color-rose-800
Rose 800
rgb(126, 4, 51)
jh-color-rose-850
Rose 850
rgb(109, 3, 44)
jh-color-rose-900
Rose 900
rgb(85, 3, 34)
jh-color-rose-950
Rose 950
rgb(62, 2, 25)

Decisions

Container

Token Value Example
jh-color-container-page
Used on page-level containers that make up large portions of the overall background
rgb(231, 236, 240)
jh-color-container-primary-enabled
Used on the major containers throughout the user interface such as cards and dialogs
rgb(255, 255, 255)
jh-color-container-primary-hover
Hover color for primary container
rgb(241, 244, 246)
jh-color-container-primary-active
Active color for primary container
rgb(231, 236, 240)
jh-color-container-primary-selected
Selected color for primary container
rgb(238, 244, 253)
jh-color-container-secondary-enabled
Used on containers and sections that will sit on top of or within a primary container
rgb(241, 244, 246)
jh-color-container-secondary-hover
Hover color for secondary container
rgb(255, 255, 255)
jh-color-container-secondary-active
Active color for secondary container
rgb(231, 236, 240)
jh-color-container-secondary-selected
Selected color for secondary container
rgb(219, 232, 251)

Overlay

Token Value Example
jh-color-overlay
Used to distinguish the modal layer from the layer underneath
rgba(39, 40, 41, 0.6)

Control

Token Value Example
jh-color-control-enabled
Used on the containers of interactive elements such as slider and switch tracks
rgb(217, 223, 228)
jh-color-control-hover
Hover color for control
rgb(202, 208, 214)
jh-color-control-active
Active color for control
rgb(182, 187, 192)

Brand

Token Value Example
jh-color-brand-primary
Used to emphasize areas of importance such as feature areas or primary calls-to-action
rgb(6, 24, 95)
jh-color-brand-secondary
Used when another layer of visual hierarchy is needed within feature areas or on secondary calls-to-action
rgb(8, 92, 229)
jh-color-brand-tertiary
Used to add thoughtful branded touches to components such as accent bars
rgb(118, 220, 253)
jh-color-brand-gradient-light
Used to accent branded elements with content such as ads or other calls-to-action
linear-gradient(135deg, rgb(232, 247, 247) 0%, rgb(118, 220, 253) 100%)
jh-color-brand-gradient-medium
Used to accents branded elements without content
linear-gradient(135deg, rgb(118, 220, 253) 0%, rgb(8, 92, 229) 100%)
jh-color-brand-gradient-dark
Used to accent branded elements with content such as ads or other calls-to-action
linear-gradient(135deg, rgb(8, 92, 229) 0%, rgb(6, 24, 95) 100%)
jh-color-brand-on-primary
Used for content that sits on the primary brand color
rgb(255, 255, 255)
jh-color-brand-on-secondary
Used for content that sits on the secondary brand color
rgb(255, 255, 255)
jh-color-brand-on-tertiary
Used for content that sits on the tertiary brand color
rgb(6, 74, 185)
jh-color-brand-on-gradient-light
Used for content that sits on the light brand gradient
rgb(6, 24, 95)
jh-color-brand-on-gradient-dark
Used for content that sits on the dark brand gradient
rgb(255, 255, 255)

Divider

Token Value Example
jh-color-divider-primary
Used on subtle border elements such as dividers and table borders
rgb(115, 118, 121)
jh-color-divider-secondary
Used on border elements that require more visual emphasis such as input fields
rgb(231, 236, 240)
jh-color-divider-inverse
Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
rgb(255, 255, 255)

Content

Token Value Example
jh-color-content-brand-enabled
Used for content that needs to have a strong branded presence
rgb(8, 92, 229)
jh-color-content-brand-hover
Hover color for branded content
rgb(7, 84, 209)
jh-color-content-brand-active
Active color for branded content
rgb(6, 74, 185)
jh-color-content-primary-enabled
Used for the majority of fundamental content within a layout such as body copy and headers as well as neutral messages
rgb(39, 40, 41)
jh-color-content-primary-hover
Hover color for primary content
rgb(27, 28, 28)
jh-color-content-primary-active
Active color for primary content
rgb(0, 0, 0)
jh-color-content-secondary-enabled
Used for supportive content such as labels, subtitles, and placeholder text
rgb(100, 103, 105)
jh-color-content-secondary-hover
Hover color for secondary content
rgb(87, 90, 93)
jh-color-content-secondary-active
Active color for secondary content
rgb(80, 83, 85)
jh-color-content-positive-enabled
Used for content that conveys a positive response such as a deposit
rgb(4, 119, 18)
jh-color-content-positive-hover
Hover color for positive content
rgb(4, 109, 16)
jh-color-content-positive-active
Active color for positive content
rgb(3, 96, 14)
jh-color-content-negative-enabled
Used for content that conveys a negative response such as an error message
rgb(201, 29, 7)
jh-color-content-negative-hover
Hover color for negative content
rgb(184, 27, 6)
jh-color-content-negative-active
Active color for negative content
rgb(164, 24, 6)
jh-color-content-inverse-enabled
Used on backgrounds that don't provide sufficient contrast with other content colors
rgb(255, 255, 255)
jh-color-content-inverse-hover
Hover color for inverse content
rgb(241, 244, 246)
jh-color-content-inverse-active
Active color for inverse content
rgb(231, 236, 240)
jh-color-content-on-brand-enabled
Used for content that sits on the content brand color
rgb(255, 255, 255)
jh-color-content-on-brand-hover
Used for content that sits on the content brand hover color
rgb(255, 255, 255)
jh-color-content-on-brand-active
Used for content that sits on the content brand active color
rgb(255, 255, 255)
jh-color-content-on-primary-enabled
Used for content that sits on the content primary color
rgb(255, 255, 255)
jh-color-content-on-primary-hover
Used for content that sits on the content primary hover color
rgb(255, 255, 255)
jh-color-content-on-primary-active
Used for content that sits on the content primary active color
rgb(255, 255, 255)
jh-color-content-on-secondary-enabled
Used for content that sits on the content secondary color
rgb(255, 255, 255)
jh-color-content-on-secondary-hover
Used for content that sits on the content secondary hover color
rgb(255, 255, 255)
jh-color-content-on-secondary-active
Used for content that sits on the content secondary active color
rgb(255, 255, 255)
jh-color-content-on-positive-enabled
Used for content that sits on the content positive color
rgb(255, 255, 255)
jh-color-content-on-positive-hover
Used for content that sits on the content positive hover color
rgb(255, 255, 255)
jh-color-content-on-positive-active
Used for content that sits on the content positive active color
rgb(255, 255, 255)
jh-color-content-on-negative-enabled
Used for content that sits on the content negative color
rgb(255, 255, 255)
jh-color-content-on-negative-hover
Used for content that sits on the content negative hover color
rgb(255, 255, 255)
jh-color-content-on-negative-active
Used for content that sits on the content negative active color
rgb(255, 255, 255)
jh-color-content-on-inverse-enabled
Used for content that sits on the content inverse color
rgb(0, 0, 0)
jh-color-content-on-inverse-hover
Used for content that sits on the content inverse hover color
rgb(0, 0, 0)
jh-color-content-on-inverse-active
Used for content that sits on the content inverse active color
rgb(0, 0, 0)

Interactive

Token Value Example
jh-color-interactive-focus-outer
Used for the outermost part of the focus ring
rgb(8, 92, 229)
jh-color-interactive-focus-inner
Used to provide contrast against the outer focus color
rgb(255, 255, 255)
jh-color-interactive-highlight
Used for highlighting content on the page
rgb(197, 235, 247)
jh-color-interactive-visited
Used for visited links
rgb(153, 28, 231)