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	var(--jh-color-gray-100)
--jh-color-container-primary-enabled Used on the major containers throughout the user interface such as cards and dialogs	var(--jh-color-gray-0)
--jh-color-container-primary-hover Hover color for primary container	var(--jh-color-gray-50)
--jh-color-container-primary-active Active color for primary container	var(--jh-color-gray-100)
--jh-color-container-primary-selected Selected color for primary container	var(--jh-color-azure-50)
--jh-color-container-secondary-enabled Used on containers and sections that will sit on top of or within a primary container	var(--jh-color-gray-50)
--jh-color-container-secondary-hover Hover color for secondary container	var(--jh-color-gray-0)
--jh-color-container-secondary-active Active color for secondary container	var(--jh-color-gray-100)
--jh-color-container-secondary-selected Selected color for secondary container	var(--jh-color-azure-100)

Overlay

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

Control

Token	Value	Example
--jh-color-control-enabled Used on the containers of interactive elements such as slider and switch tracks	var(--jh-color-gray-150)
--jh-color-control-hover Hover color for control	var(--jh-color-gray-200)
--jh-color-control-active Active color for control	var(--jh-color-gray-250)

Brand

Token	Value	Example
--jh-color-brand-primary Used to emphasize areas of importance such as feature areas or primary calls-to-action	var(--jh-color-azure-900)
--jh-color-brand-secondary Used when another layer of visual hierarchy is needed within feature areas or on secondary calls-to-action	var(--jh-color-azure-600)
--jh-color-brand-tertiary Used to add thoughtful branded touches to components such as accent bars	var(--jh-color-cyan-200)
--jh-color-brand-gradient-light Used to accent branded elements with content such as ads or other calls-to-action	linear-gradient(135deg, var(--jh-color-cyan-50) 0%, var(--jh-color-cyan-200) 100%)
--jh-color-brand-gradient-medium Used to accents branded elements without content	linear-gradient(135deg, var(--jh-color-cyan-200) 0%, var(--jh-color-azure-600) 100%)
--jh-color-brand-gradient-dark Used to accent branded elements with content such as ads or other calls-to-action	linear-gradient(135deg, var(--jh-color-azure-600) 0%, var(--jh-color-azure-900) 100%)
--jh-color-brand-on-primary Used for content that sits on the primary brand color	var(--jh-color-gray-0)
--jh-color-brand-on-secondary Used for content that sits on the secondary brand color	var(--jh-color-gray-0)
--jh-color-brand-on-tertiary Used for content that sits on the tertiary brand color	var(--jh-color-azure-700)
--jh-color-brand-on-gradient-light Used for content that sits on the light brand gradient	var(--jh-color-azure-900)
--jh-color-brand-on-gradient-dark Used for content that sits on the dark brand gradient	var(--jh-color-gray-0)

Divider

Token	Value	Example
--jh-color-divider-primary Used on subtle border elements such as dividers and table borders	var(--jh-color-gray-500)
--jh-color-divider-secondary Used on border elements that require more visual emphasis such as input fields	var(--jh-color-gray-100)
--jh-color-divider-inverse Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers	var(--jh-color-gray-0)

Content

Token	Value	Example
--jh-color-content-brand-enabled Used for content that needs to have a strong branded presence	var(--jh-color-azure-600)
--jh-color-content-brand-hover Hover color for branded content	var(--jh-color-azure-650)
--jh-color-content-brand-active Active color for branded content	var(--jh-color-azure-700)
--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	var(--jh-color-gray-900)
--jh-color-content-primary-hover Hover color for primary content	var(--jh-color-gray-950)
--jh-color-content-primary-active Active color for primary content	var(--jh-color-gray-1000)
--jh-color-content-secondary-enabled Used for supportive content such as labels, subtitles, and placeholder text	var(--jh-color-gray-600)
--jh-color-content-secondary-hover Hover color for secondary content	var(--jh-color-gray-650)
--jh-color-content-secondary-active Active color for secondary content	var(--jh-color-gray-700)
--jh-color-content-positive-enabled Used for content that conveys a positive response such as a deposit	var(--jh-color-green-600)
--jh-color-content-positive-hover Hover color for positive content	var(--jh-color-green-650)
--jh-color-content-positive-active Active color for positive content	var(--jh-color-green-700)
--jh-color-content-negative-enabled Used for content that conveys a negative response such as an error message	var(--jh-color-red-600)
--jh-color-content-negative-hover Hover color for negative content	var(--jh-color-red-650)
--jh-color-content-negative-active Active color for negative content	var(--jh-color-red-700)
--jh-color-content-inverse-enabled Used on backgrounds that don't provide sufficient contrast with other content colors	var(--jh-color-gray-0)
--jh-color-content-inverse-hover Hover color for inverse content	var(--jh-color-gray-50)
--jh-color-content-inverse-active Active color for inverse content	var(--jh-color-gray-100)
--jh-color-content-on-brand-enabled Used for content that sits on the content brand color	var(--jh-color-gray-0)
--jh-color-content-on-brand-hover Used for content that sits on the content brand hover color	var(--jh-color-gray-0)
--jh-color-content-on-brand-active Used for content that sits on the content brand active color	var(--jh-color-gray-0)
--jh-color-content-on-primary-enabled Used for content that sits on the content primary color	var(--jh-color-gray-0)
--jh-color-content-on-primary-hover Used for content that sits on the content primary hover color	var(--jh-color-gray-0)
--jh-color-content-on-primary-active Used for content that sits on the content primary active color	var(--jh-color-gray-0)
--jh-color-content-on-secondary-enabled Used for content that sits on the content secondary color	var(--jh-color-gray-0)
--jh-color-content-on-secondary-hover Used for content that sits on the content secondary hover color	var(--jh-color-gray-0)
--jh-color-content-on-secondary-active Used for content that sits on the content secondary active color	var(--jh-color-gray-0)
--jh-color-content-on-positive-enabled Used for content that sits on the content positive color	var(--jh-color-gray-0)
--jh-color-content-on-positive-hover Used for content that sits on the content positive hover color	var(--jh-color-gray-0)
--jh-color-content-on-positive-active Used for content that sits on the content positive active color	var(--jh-color-gray-0)
--jh-color-content-on-negative-enabled Used for content that sits on the content negative color	var(--jh-color-gray-0)
--jh-color-content-on-negative-hover Used for content that sits on the content negative hover color	var(--jh-color-gray-0)
--jh-color-content-on-negative-active Used for content that sits on the content negative active color	var(--jh-color-gray-0)
--jh-color-content-on-inverse-enabled Used for content that sits on the content inverse color	var(--jh-color-gray-1000)
--jh-color-content-on-inverse-hover Used for content that sits on the content inverse hover color	var(--jh-color-gray-1000)
--jh-color-content-on-inverse-active Used for content that sits on the content inverse active color	var(--jh-color-gray-1000)

Interactive

Token	Value	Example
--jh-color-interactive-focus-outer Used for the outermost part of the focus ring	var(--jh-color-azure-600)
--jh-color-interactive-focus-inner Used to provide contrast against the outer focus color	var(--jh-color-gray-0)
--jh-color-interactive-highlight Used for highlighting content on the page	var(--jh-color-cyan-100)
--jh-color-interactive-visited Used for visited links	var(--jh-color-violet-600)