jh-border-radius-0 |
No border radius |
border |
0px |
0px |
jh-border-radius-50 |
Border radius 50 |
border |
2px |
2px |
jh-border-radius-100 |
Border radius 100 |
border |
4px |
4px |
jh-border-radius-200 |
Border radius 200 |
border |
8px |
8px |
jh-border-radius-300 |
Border radius 300 |
border |
12px |
12px |
jh-border-radius-400 |
Border radius 400 |
border |
16px |
16px |
jh-border-radius-circle |
Circular border radius |
border |
50% |
50% |
jh-border-radius-pill |
Pill-shaped border radius |
border |
9999px |
9999px |
jh-color-gray-0 |
Gray 0 |
color |
rgb(255, 255, 255) |
rgb(255, 255, 255) |
jh-color-gray-50 |
Gray 50 |
color |
rgb(240, 245, 249) |
rgb(240, 245, 249) |
jh-color-gray-100 |
Gray 100; Brand color: Light cool gray |
color |
rgb(231, 236, 240) |
rgb(231, 236, 240) |
jh-color-gray-150 |
Gray 150 |
color |
rgb(211, 216, 220) |
rgb(211, 216, 220) |
jh-color-gray-200 |
Gray 200 |
color |
rgb(201, 206, 211) |
rgb(201, 206, 211) |
jh-color-gray-250 |
Gray 250; Brand color: Medium cool gray |
color |
rgb(182, 187, 192) |
rgb(182, 187, 192) |
jh-color-gray-300 |
Gray 300 |
color |
rgb(169, 176, 182) |
rgb(169, 176, 182) |
jh-color-gray-350 |
Gray 350 |
color |
rgb(156, 163, 170) |
rgb(156, 163, 170) |
jh-color-gray-400 |
Gray 400 |
color |
rgb(147, 153, 159) |
rgb(147, 153, 159) |
jh-color-gray-450 |
Gray 450 |
color |
rgb(134, 139, 145) |
rgb(134, 139, 145) |
jh-color-gray-500 |
Gray 500 |
color |
rgb(112, 117, 122) |
rgb(112, 117, 122) |
jh-color-gray-550 |
Gray 550 |
color |
rgb(102, 107, 111) |
rgb(102, 107, 111) |
jh-color-gray-600 |
Gray 600 |
color |
rgb(95, 100, 104) |
rgb(95, 100, 104) |
jh-color-gray-650 |
Gray 650; Brand color: Dark cool gray |
color |
rgb(87, 90, 93) |
rgb(87, 90, 93) |
jh-color-gray-700 |
Gray 700 |
color |
rgb(78, 81, 85) |
rgb(78, 81, 85) |
jh-color-gray-750 |
Gray 750 |
color |
rgb(68, 72, 75) |
rgb(68, 72, 75) |
jh-color-gray-800 |
Gray 800 |
color |
rgb(59, 62, 65) |
rgb(59, 62, 65) |
jh-color-gray-850 |
Gray 850 |
color |
rgb(49, 52, 55) |
rgb(49, 52, 55) |
jh-color-gray-900 |
Gray 900 |
color |
rgb(42, 44, 46) |
rgb(42, 44, 46) |
jh-color-gray-950 |
Gray 950 |
color |
rgb(30, 32, 33) |
rgb(30, 32, 33) |
jh-color-gray-1000 |
Gray 1000 |
color |
rgb(0, 0, 0) |
rgb(0, 0, 0) |
jh-color-red-50 |
Red 50 |
color |
rgb(253, 241, 238) |
rgb(253, 241, 238) |
jh-color-red-100 |
Red 100 |
color |
rgb(250, 231, 226) |
rgb(250, 231, 226) |
jh-color-red-150 |
Red 150 |
color |
rgb(245, 207, 196) |
rgb(245, 207, 196) |
jh-color-red-200 |
Red 200 |
color |
rgb(251, 191, 174) |
rgb(251, 191, 174) |
jh-color-red-250 |
Red 250 |
color |
rgb(248, 164, 142) |
rgb(248, 164, 142) |
jh-color-red-300 |
Red 300 |
color |
rgb(250, 145, 118) |
rgb(250, 145, 118) |
jh-color-red-350 |
Red 350 |
color |
rgb(249, 123, 94) |
rgb(249, 123, 94) |
jh-color-red-400 |
Red 400 |
color |
rgb(249, 103, 73) |
rgb(249, 103, 73) |
jh-color-red-450 |
Red 450 |
color |
rgb(241, 81, 53) |
rgb(241, 81, 53) |
jh-color-red-500 |
Red 500 |
color |
rgb(219, 53, 32) |
rgb(219, 53, 32) |
jh-color-red-550 |
Red 550 |
color |
rgb(202, 37, 21) |
rgb(202, 37, 21) |
jh-color-red-600 |
Red 600 |
color |
rgb(189, 33, 19) |
rgb(189, 33, 19) |
jh-color-red-650 |
Red 650 |
color |
rgb(174, 24, 13) |
rgb(174, 24, 13) |
jh-color-red-700 |
Red 700 |
color |
rgb(158, 21, 11) |
rgb(158, 21, 11) |
jh-color-red-750 |
Red 750 |
color |
rgb(139, 21, 10) |
rgb(139, 21, 10) |
jh-color-red-800 |
Red 800 |
color |
rgb(119, 25, 13) |
rgb(119, 25, 13) |
jh-color-red-850 |
Red 850 |
color |
rgb(96, 27, 14) |
rgb(96, 27, 14) |
jh-color-red-900 |
Red 900 |
color |
rgb(78, 26, 15) |
rgb(78, 26, 15) |
jh-color-red-950 |
Red 950 |
color |
rgb(57, 19, 7) |
rgb(57, 19, 7) |
jh-color-orange-50 |
Orange 50 |
color |
rgb(250, 242, 235) |
rgb(250, 242, 235) |
jh-color-orange-100 |
Orange 100 |
color |
rgb(251, 232, 213) |
rgb(251, 232, 213) |
jh-color-orange-150 |
Orange 150 |
color |
rgb(245, 208, 169) |
rgb(245, 208, 169) |
jh-color-orange-200 |
Orange 200 |
color |
rgb(252, 193, 127) |
rgb(252, 193, 127) |
jh-color-orange-250 |
Orange 250 |
color |
rgb(240, 171, 88) |
rgb(240, 171, 88) |
jh-color-orange-300 |
Orange 300 |
color |
rgb(232, 158, 62) |
rgb(232, 158, 62) |
jh-color-orange-350 |
Orange 350 |
color |
rgb(219, 145, 44) |
rgb(219, 145, 44) |
jh-color-orange-400 |
Orange 400 |
color |
rgb(207, 135, 34) |
rgb(207, 135, 34) |
jh-color-orange-450 |
Orange 450 |
color |
rgb(191, 122, 23) |
rgb(191, 122, 23) |
jh-color-orange-500 |
Orange 500 |
color |
rgb(164, 103, 12) |
rgb(164, 103, 12) |
jh-color-orange-550 |
Orange 550 |
color |
rgb(147, 93, 17) |
rgb(147, 93, 17) |
jh-color-orange-600 |
Orange 600 |
color |
rgb(136, 88, 24) |
rgb(136, 88, 24) |
jh-color-orange-650 |
Orange 650 |
color |
rgb(122, 80, 25) |
rgb(122, 80, 25) |
jh-color-orange-700 |
Orange 700 |
color |
rgb(110, 72, 24) |
rgb(110, 72, 24) |
jh-color-orange-750 |
Orange 750 |
color |
rgb(96, 64, 24) |
rgb(96, 64, 24) |
jh-color-orange-800 |
Orange 800 |
color |
rgb(82, 55, 20) |
rgb(82, 55, 20) |
jh-color-orange-850 |
Orange 850 |
color |
rgb(70, 46, 17) |
rgb(70, 46, 17) |
jh-color-orange-900 |
Orange 900 |
color |
rgb(59, 39, 15) |
rgb(59, 39, 15) |
jh-color-orange-950 |
Orange 950 |
color |
rgb(44, 28, 4) |
rgb(44, 28, 4) |
jh-color-yellow-50 |
Yellow 50 |
color |
rgb(249, 243, 231) |
rgb(249, 243, 231) |
jh-color-yellow-100 |
Yellow 100 |
color |
rgb(248, 234, 199) |
rgb(248, 234, 199) |
jh-color-yellow-150 |
Yellow 150 |
color |
rgb(236, 213, 149) |
rgb(236, 213, 149) |
jh-color-yellow-200 |
Yellow 200 |
color |
rgb(233, 202, 101) |
rgb(233, 202, 101) |
jh-color-yellow-250 |
Yellow 250 |
color |
rgb(216, 182, 59) |
rgb(216, 182, 59) |
jh-color-yellow-300 |
Yellow 300 |
color |
rgb(204, 171, 40) |
rgb(204, 171, 40) |
jh-color-yellow-350 |
Yellow 350 |
color |
rgb(190, 158, 31) |
rgb(190, 158, 31) |
jh-color-yellow-400 |
Yellow 400 |
color |
rgb(177, 149, 36) |
rgb(177, 149, 36) |
jh-color-yellow-450 |
Yellow 450 |
color |
rgb(162, 136, 35) |
rgb(162, 136, 35) |
jh-color-yellow-500 |
Yellow 500 |
color |
rgb(138, 115, 24) |
rgb(138, 115, 24) |
jh-color-yellow-550 |
Yellow 550 |
color |
rgb(125, 104, 21) |
rgb(125, 104, 21) |
jh-color-yellow-600 |
Yellow 600 |
color |
rgb(116, 97, 24) |
rgb(116, 97, 24) |
jh-color-yellow-650 |
Yellow 650 |
color |
rgb(105, 87, 22) |
rgb(105, 87, 22) |
jh-color-yellow-700 |
Yellow 700 |
color |
rgb(95, 79, 19) |
rgb(95, 79, 19) |
jh-color-yellow-750 |
Yellow 750 |
color |
rgb(84, 69, 17) |
rgb(84, 69, 17) |
jh-color-yellow-800 |
Yellow 800 |
color |
rgb(72, 59, 15) |
rgb(72, 59, 15) |
jh-color-yellow-850 |
Yellow 850 |
color |
rgb(61, 50, 12) |
rgb(61, 50, 12) |
jh-color-yellow-900 |
Yellow 900 |
color |
rgb(51, 42, 13) |
rgb(51, 42, 13) |
jh-color-yellow-950 |
Yellow 950 |
color |
rgb(38, 31, 4) |
rgb(38, 31, 4) |
jh-color-lime-50 |
Yellow 50 |
color |
rgb(241, 246, 229) |
rgb(241, 246, 229) |
jh-color-lime-100 |
Yellow 100 |
color |
rgb(226, 241, 190) |
rgb(226, 241, 190) |
jh-color-lime-150 |
Yellow 150 |
color |
rgb(199, 225, 139) |
rgb(199, 225, 139) |
jh-color-lime-200 |
Yellow 200 |
color |
rgb(179, 218, 95) |
rgb(179, 218, 95) |
jh-color-lime-250 |
Yellow 250 |
color |
rgb(154, 201, 55) |
rgb(154, 201, 55) |
jh-color-lime-300 |
Yellow 300 |
color |
rgb(142, 189, 38) |
rgb(142, 189, 38) |
jh-color-lime-350 |
Yellow 350 |
color |
rgb(131, 176, 31) |
rgb(131, 176, 31) |
jh-color-lime-400 |
Yellow 400 |
color |
rgb(123, 165, 33) |
rgb(123, 165, 33) |
jh-color-lime-450 |
Yellow 450 |
color |
rgb(113, 150, 33) |
rgb(113, 150, 33) |
jh-color-lime-500 |
Yellow 500 |
color |
rgb(95, 127, 28) |
rgb(95, 127, 28) |
jh-color-lime-550 |
Yellow 550 |
color |
rgb(88, 115, 31) |
rgb(88, 115, 31) |
jh-color-lime-600 |
Yellow 600 |
color |
rgb(84, 106, 36) |
rgb(84, 106, 36) |
jh-color-lime-650 |
Yellow 650 |
color |
rgb(76, 96, 33) |
rgb(76, 96, 33) |
jh-color-lime-700 |
Yellow 700 |
color |
rgb(69, 87, 30) |
rgb(69, 87, 30) |
jh-color-lime-750 |
Yellow 750 |
color |
rgb(61, 76, 28) |
rgb(61, 76, 28) |
jh-color-lime-800 |
Yellow 800 |
color |
rgb(54, 67, 26) |
rgb(54, 67, 26) |
jh-color-lime-850 |
Yellow 850 |
color |
rgb(44, 55, 20) |
rgb(44, 55, 20) |
jh-color-lime-900 |
Yellow 900 |
color |
rgb(37, 47, 17) |
rgb(37, 47, 17) |
jh-color-lime-950 |
Yellow 950 |
color |
rgb(27, 34, 8) |
rgb(27, 34, 8) |
jh-color-green-50 |
Green 50 |
color |
rgb(236, 247, 231) |
rgb(236, 247, 231) |
jh-color-green-100 |
Green 100 |
color |
rgb(209, 245, 195) |
rgb(209, 245, 195) |
jh-color-green-150 |
Green 150 |
color |
rgb(169, 231, 148) |
rgb(169, 231, 148) |
jh-color-green-200 |
Green 200 |
color |
rgb(136, 226, 110) |
rgb(136, 226, 110) |
jh-color-green-250 |
Green 250 |
color |
rgb(106, 209, 80) |
rgb(106, 209, 80) |
jh-color-green-300 |
Green 300 |
color |
rgb(95, 196, 69) |
rgb(95, 196, 69) |
jh-color-green-350 |
Green 350 |
color |
rgb(87, 182, 64) |
rgb(87, 182, 64) |
jh-color-green-400 |
Green 400 |
color |
rgb(86, 170, 65) |
rgb(86, 170, 65) |
jh-color-green-450 |
Green 450 |
color |
rgb(83, 155, 64) |
rgb(83, 155, 64) |
jh-color-green-500 |
Green 500 |
color |
rgb(67, 131, 50) |
rgb(67, 131, 50) |
jh-color-green-550 |
Green 550 |
color |
rgb(62, 119, 47) |
rgb(62, 119, 47) |
jh-color-green-600 |
Green 600 |
color |
rgb(59, 111, 45) |
rgb(59, 111, 45) |
jh-color-green-650 |
Green 650 |
color |
rgb(54, 100, 41) |
rgb(54, 100, 41) |
jh-color-green-700 |
Green 700 |
color |
rgb(50, 90, 38) |
rgb(50, 90, 38) |
jh-color-green-750 |
Green 750 |
color |
rgb(45, 79, 35) |
rgb(45, 79, 35) |
jh-color-green-800 |
Green 800 |
color |
rgb(40, 69, 31) |
rgb(40, 69, 31) |
jh-color-green-850 |
Green 850 |
color |
rgb(34, 57, 26) |
rgb(34, 57, 26) |
jh-color-green-900 |
Green 900 |
color |
rgb(29, 48, 23) |
rgb(29, 48, 23) |
jh-color-green-950 |
Green 950 |
color |
rgb(18, 36, 10) |
rgb(18, 36, 10) |
jh-color-mint-50 |
Mint 50 |
color |
rgb(231, 248, 238) |
rgb(231, 248, 238) |
jh-color-mint-100 |
Mint 100 |
color |
rgb(192, 248, 219) |
rgb(192, 248, 219) |
jh-color-mint-150 |
Mint 150 |
color |
rgb(144, 234, 190) |
rgb(144, 234, 190) |
jh-color-mint-200 |
Mint 200 |
color |
rgb(101, 228, 172) |
rgb(101, 228, 172) |
jh-color-mint-250 |
Mint 250 |
color |
rgb(52, 211, 149) |
rgb(52, 211, 149) |
jh-color-mint-300 |
Mint 300 |
color |
rgb(24, 199, 137) |
rgb(24, 199, 137) |
jh-color-mint-350 |
Mint 350 |
color |
rgb(2, 185, 126) |
rgb(2, 185, 126) |
jh-color-mint-400 |
Mint 400 |
color |
rgb(20, 173, 119) |
rgb(20, 173, 119) |
jh-color-mint-450 |
Mint 450 |
color |
rgb(26, 158, 109) |
rgb(26, 158, 109) |
jh-color-mint-500 |
Mint 500 |
color |
rgb(7, 134, 91) |
rgb(7, 134, 91) |
jh-color-mint-550 |
Mint 550 |
color |
rgb(23, 121, 84) |
rgb(23, 121, 84) |
jh-color-mint-600 |
Mint 600 |
color |
rgb(35, 112, 80) |
rgb(35, 112, 80) |
jh-color-mint-650 |
Mint 650 |
color |
rgb(35, 101, 72) |
rgb(35, 101, 72) |
jh-color-mint-700 |
Mint 700 |
color |
rgb(32, 91, 65) |
rgb(32, 91, 65) |
jh-color-mint-750 |
Mint 750 |
color |
rgb(31, 80, 58) |
rgb(31, 80, 58) |
jh-color-mint-800 |
Mint 800 |
color |
rgb(28, 70, 51) |
rgb(28, 70, 51) |
jh-color-mint-850 |
Mint 850 |
color |
rgb(23, 58, 42) |
rgb(23, 58, 42) |
jh-color-mint-900 |
Mint 900 |
color |
rgb(22, 49, 36) |
rgb(22, 49, 36) |
jh-color-mint-950 |
Mint 950 |
color |
rgb(14, 35, 25) |
rgb(14, 35, 25) |
jh-color-cyan-50 |
Cyan 50; Brand color: Open sky |
color |
rgb(232, 247, 247) |
rgb(232, 247, 247) |
jh-color-cyan-100 |
Cyan 100 |
color |
rgb(204, 242, 251) |
rgb(204, 242, 251) |
jh-color-cyan-150 |
Cyan 150 |
color |
rgb(156, 227, 252) |
rgb(156, 227, 252) |
jh-color-cyan-200 |
Cyan 200; Brand color: Tech blue |
color |
rgb(118, 220, 253) |
rgb(118, 220, 253) |
jh-color-cyan-250 |
Cyan 250 |
color |
rgb(72, 202, 240) |
rgb(72, 202, 240) |
jh-color-cyan-300 |
Cyan 300 |
color |
rgb(41, 191, 230) |
rgb(41, 191, 230) |
jh-color-cyan-350 |
Cyan 350 |
color |
rgb(24, 178, 215) |
rgb(24, 178, 215) |
jh-color-cyan-400 |
Cyan 400 |
color |
rgb(26, 167, 201) |
rgb(26, 167, 201) |
jh-color-cyan-450 |
Cyan 450 |
color |
rgb(32, 152, 183) |
rgb(32, 152, 183) |
jh-color-cyan-500 |
Cyan 500 |
color |
rgb(27, 128, 154) |
rgb(27, 128, 154) |
jh-color-cyan-550 |
Cyan 550 |
color |
rgb(37, 116, 139) |
rgb(37, 116, 139) |
jh-color-cyan-600 |
Cyan 600 |
color |
rgb(38, 108, 129) |
rgb(38, 108, 129) |
jh-color-cyan-650 |
Cyan 650 |
color |
rgb(36, 97, 116) |
rgb(36, 97, 116) |
jh-color-cyan-700 |
Cyan 700 |
color |
rgb(32, 88, 105) |
rgb(32, 88, 105) |
jh-color-cyan-750 |
Cyan 750 |
color |
rgb(30, 77, 92) |
rgb(30, 77, 92) |
jh-color-cyan-800 |
Cyan 800 |
color |
rgb(27, 67, 80) |
rgb(27, 67, 80) |
jh-color-cyan-850 |
Cyan 850 |
color |
rgb(21, 56, 67) |
rgb(21, 56, 67) |
jh-color-cyan-900 |
Cyan 900 |
color |
rgb(13, 48, 58) |
rgb(13, 48, 58) |
jh-color-cyan-950 |
Cyan 950 |
color |
rgb(3, 35, 44) |
rgb(3, 35, 44) |
jh-color-azure-50 |
Azure 50 |
color |
rgb(236, 245, 254) |
rgb(236, 245, 254) |
jh-color-azure-100 |
Azure 100 |
color |
rgb(218, 238, 255) |
rgb(218, 238, 255) |
jh-color-azure-150 |
Azure 150 |
color |
rgb(186, 220, 251) |
rgb(186, 220, 251) |
jh-color-azure-200 |
Azure 200 |
color |
rgb(163, 212, 255) |
rgb(163, 212, 255) |
jh-color-azure-250 |
Azure 250 |
color |
rgb(134, 193, 248) |
rgb(134, 193, 248) |
jh-color-azure-300 |
Azure 300 |
color |
rgb(118, 180, 248) |
rgb(118, 180, 248) |
jh-color-azure-350 |
Azure 350 |
color |
rgb(103, 166, 248) |
rgb(103, 166, 248) |
jh-color-azure-400 |
Azure 400 |
color |
rgb(92, 154, 252) |
rgb(92, 154, 252) |
jh-color-azure-450 |
Azure 450 |
color |
rgb(74, 138, 251) |
rgb(74, 138, 251) |
jh-color-azure-500 |
Azure 500 |
color |
rgb(20, 112, 235) |
rgb(20, 112, 235) |
jh-color-azure-550 |
Azure 550 |
color |
rgb(22, 101, 235) |
rgb(22, 101, 235) |
jh-color-azure-600 |
Azure 600; Brand color: Vibrant cobalt |
color |
rgb(8, 92, 229) |
rgb(8, 92, 229) |
jh-color-azure-650 |
Azure 650 |
color |
rgb(38, 79, 213) |
rgb(38, 79, 213) |
jh-color-azure-700 |
Azure 700 |
color |
rgb(51, 67, 196) |
rgb(51, 67, 196) |
jh-color-azure-750 |
Azure 750 |
color |
rgb(42, 59, 177) |
rgb(42, 59, 177) |
jh-color-azure-800 |
Azure 800 |
color |
rgb(35, 51, 158) |
rgb(35, 51, 158) |
jh-color-azure-850 |
Azure 850 |
color |
rgb(25, 42, 137) |
rgb(25, 42, 137) |
jh-color-azure-900 |
Azure 900 |
color |
rgb(19, 35, 119) |
rgb(19, 35, 119) |
jh-color-azure-950 |
Azure 950; Brand color: Legacy navy |
color |
rgb(6, 24, 95) |
rgb(6, 24, 95) |
jh-color-blue-50 |
Blue 50 |
color |
rgb(243, 243, 252) |
rgb(243, 243, 252) |
jh-color-blue-100 |
Blue 100 |
color |
rgb(233, 234, 251) |
rgb(233, 234, 251) |
jh-color-blue-150 |
Blue 150 |
color |
rgb(212, 214, 246) |
rgb(212, 214, 246) |
jh-color-blue-200 |
Blue 200 |
color |
rgb(199, 203, 249) |
rgb(199, 203, 249) |
jh-color-blue-250 |
Blue 250 |
color |
rgb(177, 183, 243) |
rgb(177, 183, 243) |
jh-color-blue-300 |
Blue 300 |
color |
rgb(162, 171, 244) |
rgb(162, 171, 244) |
jh-color-blue-350 |
Blue 350 |
color |
rgb(152, 155, 245) |
rgb(152, 155, 245) |
jh-color-blue-400 |
Blue 400 |
color |
rgb(138, 142, 248) |
rgb(138, 142, 248) |
jh-color-blue-450 |
Blue 450 |
color |
rgb(125, 127, 252) |
rgb(125, 127, 252) |
jh-color-blue-500 |
Blue 500 |
color |
rgb(108, 96, 239) |
rgb(108, 96, 239) |
jh-color-blue-550 |
Blue 550 |
color |
rgb(104, 84, 235) |
rgb(104, 84, 235) |
jh-color-blue-600 |
Blue 600 |
color |
rgb(95, 77, 227) |
rgb(95, 77, 227) |
jh-color-blue-650 |
Blue 650 |
color |
rgb(85, 69, 209) |
rgb(85, 69, 209) |
jh-color-blue-700 |
Blue 700 |
color |
rgb(76, 61, 190) |
rgb(76, 61, 190) |
jh-color-blue-750 |
Blue 750 |
color |
rgb(66, 53, 173) |
rgb(66, 53, 173) |
jh-color-blue-800 |
Blue 800 |
color |
rgb(55, 44, 154) |
rgb(55, 44, 154) |
jh-color-blue-850 |
Blue 850 |
color |
rgb(45, 36, 137) |
rgb(45, 36, 137) |
jh-color-blue-900 |
Blue 900 |
color |
rgb(36, 29, 121) |
rgb(36, 29, 121) |
jh-color-blue-950 |
Blue 950 |
color |
rgb(20, 18, 101) |
rgb(20, 18, 101) |
jh-color-violet-50 |
Violet 50 |
color |
rgb(247, 242, 250) |
rgb(247, 242, 250) |
jh-color-violet-100 |
Violet 100 |
color |
rgb(244, 231, 250) |
rgb(244, 231, 250) |
jh-color-violet-150 |
Violet 150 |
color |
rgb(232, 207, 246) |
rgb(232, 207, 246) |
jh-color-violet-200 |
Violet 200 |
color |
rgb(229, 192, 250) |
rgb(229, 192, 250) |
jh-color-violet-250 |
Violet 250 |
color |
rgb(216, 169, 244) |
rgb(216, 169, 244) |
jh-color-violet-300 |
Violet 300 |
color |
rgb(210, 152, 246) |
rgb(210, 152, 246) |
jh-color-violet-350 |
Violet 350 |
color |
rgb(202, 135, 245) |
rgb(202, 135, 245) |
jh-color-violet-400 |
Violet 400 |
color |
rgb(198, 118, 252) |
rgb(198, 118, 252) |
jh-color-violet-450 |
Violet 450 |
color |
rgb(189, 95, 254) |
rgb(189, 95, 254) |
jh-color-violet-500 |
Violet 500 |
color |
rgb(168, 61, 243) |
rgb(168, 61, 243) |
jh-color-violet-550 |
Violet 550 |
color |
rgb(158, 42, 239) |
rgb(158, 42, 239) |
jh-color-violet-600 |
Violet 600 |
color |
rgb(150, 30, 231) |
rgb(150, 30, 231) |
jh-color-violet-650 |
Violet 650 |
color |
rgb(136, 24, 211) |
rgb(136, 24, 211) |
jh-color-violet-700 |
Violet 700 |
color |
rgb(123, 23, 191) |
rgb(123, 23, 191) |
jh-color-violet-750 |
Violet 750 |
color |
rgb(109, 20, 170) |
rgb(109, 20, 170) |
jh-color-violet-800 |
Violet 800 |
color |
rgb(94, 12, 150) |
rgb(94, 12, 150) |
jh-color-violet-850 |
Violet 850 |
color |
rgb(81, 9, 129) |
rgb(81, 9, 129) |
jh-color-violet-900 |
Violet 900 |
color |
rgb(69, 8, 110) |
rgb(69, 8, 110) |
jh-color-violet-950 |
Violet 950 |
color |
rgb(52, 2, 87) |
rgb(52, 2, 87) |
jh-color-magenta-50 |
Magenta 50 |
color |
rgb(255, 239, 251) |
rgb(255, 239, 251) |
jh-color-magenta-100 |
Magenta 100 |
color |
rgb(255, 227, 248) |
rgb(255, 227, 248) |
jh-color-magenta-150 |
Magenta 150 |
color |
rgb(250, 201, 239) |
rgb(250, 201, 239) |
jh-color-magenta-200 |
Magenta 200 |
color |
rgb(253, 184, 237) |
rgb(253, 184, 237) |
jh-color-magenta-250 |
Magenta 250 |
color |
rgb(251, 153, 232) |
rgb(251, 153, 232) |
jh-color-magenta-300 |
Magenta 300 |
color |
rgb(252, 130, 230) |
rgb(252, 130, 230) |
jh-color-magenta-350 |
Magenta 350 |
color |
rgb(247, 109, 223) |
rgb(247, 109, 223) |
jh-color-magenta-400 |
Magenta 400 |
color |
rgb(243, 89, 218) |
rgb(243, 89, 218) |
jh-color-magenta-450 |
Magenta 450 |
color |
rgb(229, 71, 205) |
rgb(229, 71, 205) |
jh-color-magenta-500 |
Magenta 500 |
color |
rgb(202, 42, 180) |
rgb(202, 42, 180) |
jh-color-magenta-550 |
Magenta 550 |
color |
rgb(189, 28, 168) |
rgb(189, 28, 168) |
jh-color-magenta-600 |
Magenta 600 |
color |
rgb(177, 26, 157) |
rgb(177, 26, 157) |
jh-color-magenta-650 |
Magenta 650 |
color |
rgb(160, 24, 142) |
rgb(160, 24, 142) |
jh-color-magenta-700 |
Magenta 700 |
color |
rgb(143, 26, 127) |
rgb(143, 26, 127) |
jh-color-magenta-750 |
Magenta 750 |
color |
rgb(127, 23, 113) |
rgb(127, 23, 113) |
jh-color-magenta-800 |
Magenta 800 |
color |
rgb(110, 22, 98) |
rgb(110, 22, 98) |
jh-color-magenta-850 |
Magenta 850 |
color |
rgb(93, 17, 83) |
rgb(93, 17, 83) |
jh-color-magenta-900 |
Magenta 900 |
color |
rgb(80, 14, 70) |
rgb(80, 14, 70) |
jh-color-magenta-950 |
Magenta 950 |
color |
rgb(63, 2, 55) |
rgb(63, 2, 55) |
jh-color-rose-50 |
Rose 50 |
color |
rgb(253, 241, 242) |
rgb(253, 241, 242) |
jh-color-rose-100 |
Rose 100 |
color |
rgb(245, 232, 233) |
rgb(245, 232, 233) |
jh-color-rose-150 |
Rose 150 |
color |
rgb(240, 207, 210) |
rgb(240, 207, 210) |
jh-color-rose-200 |
Rose 200 |
color |
rgb(247, 190, 197) |
rgb(247, 190, 197) |
jh-color-rose-250 |
Rose 250 |
color |
rgb(245, 163, 174) |
rgb(245, 163, 174) |
jh-color-rose-300 |
Rose 300 |
color |
rgb(249, 142, 158) |
rgb(249, 142, 158) |
jh-color-rose-350 |
Rose 350 |
color |
rgb(248, 120, 143) |
rgb(248, 120, 143) |
jh-color-rose-400 |
Rose 400 |
color |
rgb(250, 97, 130) |
rgb(250, 97, 130) |
jh-color-rose-450 |
Rose 450 |
color |
rgb(242, 73, 115) |
rgb(242, 73, 115) |
jh-color-rose-500 |
Rose 500 |
color |
rgb(220, 43, 95) |
rgb(220, 43, 95) |
jh-color-rose-550 |
Rose 550 |
color |
rgb(204, 19, 84) |
rgb(204, 19, 84) |
jh-color-rose-600 |
Rose 600 |
color |
rgb(191, 20, 78) |
rgb(191, 20, 78) |
jh-color-rose-650 |
Rose 650 |
color |
rgb(171, 25, 71) |
rgb(171, 25, 71) |
jh-color-rose-700 |
Rose 700 |
color |
rgb(153, 26, 64) |
rgb(153, 26, 64) |
jh-color-rose-750 |
Rose 750 |
color |
rgb(134, 26, 57) |
rgb(134, 26, 57) |
jh-color-rose-800 |
Rose 800 |
color |
rgb(118, 22, 49) |
rgb(118, 22, 49) |
jh-color-rose-850 |
Rose 850 |
color |
rgb(99, 19, 41) |
rgb(99, 19, 41) |
jh-color-rose-900 |
Rose 900 |
color |
rgb(85, 15, 34) |
rgb(85, 15, 34) |
jh-color-rose-950 |
Rose 950 |
color |
rgb(67, 5, 23) |
rgb(67, 5, 23) |
jh-font-family-sans |
Sans-serif font family |
font |
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-family-mono |
Monospace font family |
font |
'Roboto Mono', monospace |
'Roboto Mono', monospace |
jh-font-line-height-300 |
Line-height 300 |
font |
12px |
12px |
jh-font-line-height-400 |
Line-height 400 |
font |
16px |
16px |
jh-font-line-height-500 |
Line-height 500 |
font |
20px |
20px |
jh-font-line-height-600 |
Line-height 600 |
font |
24px |
24px |
jh-font-line-height-700 |
Line-height 700 |
font |
28px |
28px |
jh-font-line-height-800 |
Line-height 800 |
font |
32px |
32px |
jh-font-line-height-900 |
Line-height 900 |
font |
36px |
36px |
jh-font-line-height-1000 |
Line-height 1000 |
font |
40px |
40px |
jh-font-line-height-1100 |
Line-height 1100 |
font |
44px |
44px |
jh-font-line-height-1300 |
Line-height 1300 |
font |
52px |
52px |
jh-font-line-height-1500 |
Line-height 1500 |
font |
60px |
60px |
jh-font-line-height-1600 |
Line-height 1600 |
font |
64px |
64px |
jh-font-line-height-1800 |
Line-height 1800 |
font |
72px |
72px |
jh-font-line-height-2000 |
Line-height 2000 |
font |
80px |
80px |
jh-font-line-height-2300 |
Line-height 2300 |
font |
92px |
92px |
jh-font-line-height-2500 |
Line-height 2500 |
font |
100px |
100px |
jh-font-line-height-2700 |
Line-height 2700 |
font |
108px |
108px |
jh-font-weight-300 |
Font weight 300 |
font |
300 |
300 |
jh-font-weight-400 |
Font weight 400 |
font |
400 |
400 |
jh-font-weight-500 |
Font weight 500 |
font |
500 |
500 |
jh-font-weight-700 |
Font weight 700 |
font |
700 |
700 |
jh-font-size-250 |
Font size 250 |
font |
10px |
10px |
jh-font-size-300 |
Font size 300 |
font |
12px |
12px |
jh-font-size-350 |
Font size 350 |
font |
14px |
14px |
jh-font-size-400 |
Font size 400 |
font |
16px |
16px |
jh-font-size-450 |
Font size 450 |
font |
18px |
18px |
jh-font-size-500 |
Font size 500 |
font |
20px |
20px |
jh-font-size-600 |
Font size 600 |
font |
24px |
24px |
jh-font-size-700 |
Font size 700 |
font |
28px |
28px |
jh-font-size-800 |
Font size 800 |
font |
32px |
32px |
jh-font-size-900 |
Font size 900 |
font |
36px |
36px |
jh-font-size-1050 |
Font size 1050 |
font |
42px |
42px |
jh-font-size-1200 |
Font size 1200 |
font |
48px |
48px |
jh-font-size-1350 |
Font size 1350 |
font |
54px |
54px |
jh-font-size-1500 |
Font size 1500 |
font |
60px |
60px |
jh-font-size-1700 |
Font size 1700 |
font |
68px |
68px |
jh-font-size-1900 |
Font size 1900 |
font |
76px |
76px |
jh-font-size-2100 |
Font size 2100 |
font |
84px |
84px |
jh-font-size-2300 |
Font size 2300 |
font |
92px |
92px |
jh-opacity-0 |
Transparent |
opacity |
0 |
0 |
jh-opacity-100 |
Opacity 100 |
opacity |
0.1 |
0.1 |
jh-opacity-200 |
Opacity 200 |
opacity |
0.2 |
0.2 |
jh-opacity-300 |
Opacity 300 |
opacity |
0.3 |
0.3 |
jh-opacity-400 |
Opacity 400 |
opacity |
0.4 |
0.4 |
jh-opacity-500 |
Opacity 500 |
opacity |
0.5 |
0.5 |
jh-opacity-600 |
Opacity 600 |
opacity |
0.6 |
0.6 |
jh-opacity-700 |
Opacity 700 |
opacity |
0.7 |
0.7 |
jh-opacity-800 |
Opacity 800 |
opacity |
0.8 |
0.8 |
jh-opacity-900 |
Opacity 900 |
opacity |
0.9 |
0.9 |
jh-opacity-1000 |
Fully opaque |
opacity |
1.0 |
1.0 |
jh-shadow-0 |
Shadow 0; used on content and containers that need to sit flush with the underlying surface; also used for removing a previously defined shadow |
shadow |
none |
none |
jh-shadow-100 |
Shadow 100; used on surface-level content and components such as cards and control thumbs |
shadow |
0 4px 6px 0 rgba(0, 0, 0, jh-opacity-300), 0 2px 2px 0 rgba(0, 0, 0, jh-opacity-100) |
0 4px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.1) |
jh-shadow-200 |
Shadow 200; used on components that overlay a portion of the UI such as FABs and toasts |
shadow |
0 8px 12px 0 rgba(0, 0, 0, jh-opacity-300), 0 4px 4px 0 rgba(0, 0, 0, jh-opacity-100) |
0 8px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 4px 0 rgba(0, 0, 0, 0.1) |
jh-shadow-300 |
Shadow 300; used on major sections of the UI such as menus |
shadow |
0 12px 18px 0 rgba(0, 0, 0, jh-opacity-300), 0 6px 6px 0 rgba(0, 0, 0, jh-opacity-100) |
0 12px 18px 0 rgba(0, 0, 0, 0.3), 0 6px 6px 0 rgba(0, 0, 0, 0.1) |
jh-shadow-400 |
Shadow 400; used on components that should overlay the entire UI such as dialogs |
shadow |
0 16px 24px 0 rgba(0, 0, 0, jh-opacity-300), 0 8px 8px 0 rgba(0, 0, 0, jh-opacity-100) |
0 16px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 8px 0 rgba(0, 0, 0, 0.1) |
jh-size-0 |
Size 0 |
size |
0px |
0px |
jh-size-50 |
Size 50 |
size |
2px |
2px |
jh-size-100 |
Size 100 |
size |
4px |
4px |
jh-size-200 |
Size 200 |
size |
8px |
8px |
jh-size-300 |
Size 300 |
size |
12px |
12px |
jh-size-400 |
Size 400 |
size |
16px |
16px |
jh-size-500 |
Size 500 |
size |
20px |
20px |
jh-size-600 |
Size 600 |
size |
24px |
24px |
jh-size-700 |
Size 700 |
size |
28px |
28px |
jh-size-800 |
Size 800 |
size |
32px |
32px |
jh-size-900 |
Size 900 |
size |
36px |
36px |
jh-size-1000 |
Size 1000 |
size |
40px |
40px |
jh-size-1100 |
Size 1100 |
size |
44px |
44px |
jh-size-1200 |
Size 1200 |
size |
48px |
48px |
jh-size-1300 |
Size 1300 |
size |
52px |
52px |
jh-size-1400 |
Size 1400 |
size |
56px |
56px |
jh-size-1500 |
Size 1500 |
size |
60px |
60px |
jh-size-1600 |
Size 1600 |
size |
64px |
64px |
jh-size-1700 |
Size 1700 |
size |
68px |
68px |
jh-size-1800 |
Size 1800 |
size |
72px |
72px |
jh-size-1900 |
Size 1900 |
size |
76px |
76px |
jh-size-2000 |
Size 2000 |
size |
80px |
80px |
jh-size-2100 |
Size 2100 |
size |
84px |
84px |
jh-size-2200 |
Size 2200 |
size |
88px |
88px |
jh-size-2300 |
Size 2300 |
size |
92px |
92px |
jh-size-2400 |
Size 2400 |
size |
96px |
96px |
jh-space-0 |
Space 0 |
space |
0px |
0px |
jh-space-50 |
Space 50 |
space |
2px |
2px |
jh-space-100 |
Space 100 |
space |
4px |
4px |
jh-space-200 |
Space 200 |
space |
8px |
8px |
jh-space-300 |
Space 300 |
space |
12px |
12px |
jh-space-400 |
Space 400 |
space |
16px |
16px |
jh-space-500 |
Space 500 |
space |
20px |
20px |
jh-space-600 |
Space 600 |
space |
24px |
24px |
jh-space-700 |
Space 700 |
space |
28px |
28px |
jh-space-800 |
Space 800 |
space |
32px |
32px |
jh-space-900 |
Space 900 |
space |
36px |
36px |
jh-space-1000 |
Space 1000 |
space |
40px |
40px |
jh-space-1100 |
Space 1100 |
space |
44px |
44px |
jh-space-1200 |
Space 1200 |
space |
48px |
48px |
jh-space-1300 |
Space 1300 |
space |
52px |
52px |
jh-space-1400 |
Space 1400 |
space |
56px |
56px |
jh-space-1500 |
Space 1500 |
space |
60px |
60px |
jh-space-1600 |
Space 1600 |
space |
64px |
64px |
jh-space-1700 |
Space 1700 |
space |
68px |
68px |
jh-space-1800 |
Space 1800 |
space |
72px |
72px |
jh-space-1900 |
Space 1900 |
space |
76px |
76px |
jh-space-2000 |
Space 2000 |
space |
80px |
80px |
jh-space-2100 |
Space 2100 |
space |
84px |
84px |
jh-space-2200 |
Space 2200 |
space |
88px |
88px |
jh-space-2300 |
Space 2300 |
space |
92px |
92px |
jh-space-2400 |
Space 2400 |
space |
96px |
96px |
jh-z-index-0 |
Z-index 0 |
z-index |
0 |
0 |
jh-z-index-negative-100 |
Z-index -100 |
z-index |
-100 |
-100 |
jh-z-index-positive-100 |
Z-index 100 |
z-index |
100 |
100 |
jh-z-index-positive-200 |
Z-index 200 |
z-index |
200 |
200 |
jh-z-index-positive-300 |
Z-index 300 |
z-index |
300 |
300 |
jh-z-index-positive-400 |
Z-index 400 |
z-index |
400 |
400 |
jh-z-index-positive-500 |
Z-index 500 |
z-index |
500 |
500 |
jh-z-index-positive-600 |
Z-index 600 |
z-index |
600 |
600 |
jh-z-index-positive-700 |
Z-index 700 |
z-index |
700 |
700 |
jh-z-index-positive-800 |
Z-index 800 |
z-index |
800 |
800 |
jh-z-index-positive-900 |
Z-index 900 |
z-index |
900 |
900 |
jh-z-index-positive-1000 |
Z-index 1000 |
z-index |
1000 |
1000 |