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)