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) |
|