Colour
Our colour system builds on the recognition of the JET brand colours to make the product interface more usable.
Global colour tokens
These are the original values in our design language, represented by context-agnostic names. They define the values that can be assigned to our alias tokens, which are the ones used in GUIs while designing and developing our products.
| $color-white | #FFFFFF, rgb(255,255,255) |
| $color-black | #000000, rgb(0,0,0) |
| $color-orange-0 | #FFF2E5, rgb(255,242,229) |
| $color-orange-10 | #FDDFC3, rgb(253 223 195) |
| $color-orange-20 | #FBC592, rgb(251 197 146) |
| $color-orange-25 | #FF9933, rgb(255,153,51) |
| $color-orange-30 | #FF8000, rgb(255,128,0) |
| $color-orange | #F36805, rgb(243,104,5) |
| $color-orange-70 | #B45512, rgb(180,85,18) |
| $color-orange-75 | #944600, rgb(148 70 0) |
| $color-orange-90 | #613105, rgb(97 49 5) |
| $color-blue-5 | #E4E9FB, rgb(228,233,251) |
| $color-blue-10 | #CED7F8, rgb(206,215,248) |
| $color-blue-30 | #9EAEF0, rgb(158,174,240) |
| $color-blue | #3147AD, rgb(49,71,173) |
| $color-blue-75 | #2B3E97, rgb(43,62,151) |
| $color-blue-80 | #1E2C6B, rgb(30,44,107) |
| $color-blue-90 | #17214F, rgb(23,33,79) |
| $color-red-5 | #FFD2D1, rgb(255,210,209) |
| $color-red-10 | #FFBBBA, rgb(255,187,186) |
| $color-red-30 | #F85C59, rgb(248,92,89) |
| $color-red-50 | #D60E0A, rgb(214,14,10) |
| $color-red | #CC0300, rgb(204,3,0) |
| $color-red-90 | #5C0200, rgb(92,2,0) |
| $color-red-100 | #47121B, rgb(71,18,27) |
| $color-yellow-10 | #FFF8D6, rgb(255,248,214) |
| $color-yellow-30 | #FFEB80, rgb(255,235,128) |
| $color-yellow-40 | #FFDE33, rgb(255,222,51) |
| $color-yellow | #FFD600, rgb(255,214,0) |
| $color-yellow-75 | #A38900, rgb(163,137,0) |
| $color-yellow-80 | #6B5A00, rgb(107,90,0) |
| $color-yellow-90 | #574A00, rgb(87,74,0) |
| $color-green-5 | #CEEED3, rgb(206,238,211) |
| $color-green-10 | #B4E4BB, rgb(180,228,187) |
| $color-green-30 | #68CA77, rgb(104,202,119) |
| $color-green | #2B7836, rgb(43,120,54) |
| $color-green-80 | #024C23, rgb(2,76,35) |
| $color-green-90 | #023D1C, rgb(2,61,28) |
| $color-truffle-5 | #FDFDFB, rgb(253,253,251) |
| $color-truffle-10 | #F6F3EF, rgb(246,243,239) |
| $color-truffle-20 | #F0ECE6, rgb(240,236,230) |
| $color-truffle-30 | #E7E2DA, rgb(231,226,218) |
| $color-truffle-55 | #BEB7AC, rgb(190,183,172) |
| $color-truffle-65 | #8C867E, rgb(140,134,126) |
| $color-truffle-70 | #59564F, rgb(89,86,79) |
| $color-truffle-75 | #4C4843, rgb(76,72,67) |
| $color-truffle-80 | #3F3D39, rgb(63,61,57) |
| $color-truffle-85 | #353431, rgb(53,52,49) |
| $color-truffle-90 | #2B2A28, rgb(43,42,40) |
| $color-truffle-100 | #1C1A17, rgb(28,26,23) |
| $color-charcoal-30 | #D7D9DA, rgb(215,217,218) |
| $color-charcoal-40 | #B7BDBE, rgb(183,189,190) |
| $color-charcoal-50 | #8C999B, rgb(140,153,155) |
| $color-charcoal-57 | #68797D, rgb(104,121,125); |
| $color-charcoal-60 | #5D7074, rgb(93,112,116) |
| $color-charcoal-70 | #3C4C4F, rgb(60,76,79) |
| $color-charcoal-75 | #303D3F, rgb(48,61,63) |
| $color-charcoal-80 | #242E30, rgb(36,46,48) |
| $color-aubergine-5 | #F3E7F3, rgb(243,231,243) |
| $color-aubergine-10 | #E3CFE3, rgb(227 207 227) |
| $color-aubergine-20 | #D0B2D0, rgb(208 178 208) |
| $color-aubergine-30 | #B993B8, rgb(185 147 184) |
| $color-aubergine-70 | #5B3D5B, rgb(91 61 91) |
| $color-aubergine-75 | #493949, rgb(73 57 73) |
| $color-aubergine-80 | #3C313C, rgb(60 49 60) |
| $color-berry-10 | #FBDFE3, rgb(251 223 227) |
| $color-berry-20 | #F9D2D7, rgb(249 210 215) |
| $color-berry-40 | #F2A6B0, rgb(242 166 176) |
| $color-berry-70 | #98696F, rgb(152 105 111) |
| $color-berry-80 | #795358, rgb(121 83 88) |
| $color-berry-90 | #4C3437, rgb(76 52 55) |
| $color-cupcake-10 | #E0ECEE, rgb(224 236 238) |
| $color-cupcake-20 | #D0E3E6, rgb(208 227 230) |
| $color-cupcake-30 | #C1DADE, rgb(193 218 222) |
| $color-cupcake-40 | #B1CACE, rgb(177 202 206) |
| $color-cupcake-70 | #6A787A, rgb(106 120 122) |
| $color-cupcake-80 | #4C5657, rgb(76 86 87) |
| $color-cupcake-90 | #2F3637, rgb(47 54 55) |
| $color-turmeric-10 | #FCEAC0, rgb(252 234 192) |
| $color-turmeric-20 | #FAE0A1, rgb(250 224 161) |
| $color-turmeric-40 | #F6C243, rgb(246 194 67) |
| $color-turmeric-70 | #917228, rgb(145 114 40) |
| $color-turmeric-80 | #644F1C, rgb(100 79 28) |
| $color-turmeric-90 | #443613, rgb(68 54 19) |
| $color-latte-10 | #F2E6CE, rgb(242 230 206) |
| $color-latte-20 | #EDDBBA, rgb(237 219 186) |
| $color-latte-30 | #E7CDA2, rgb(231 205 162) |
| $color-latte-70 | #81735B, rgb(129 115 91) |
| $color-latte-80 | #5A503F, rgb(90 80 63) |
| $color-latte-90 | #3C352A, rgb(60 53 42) |
| $color-system-purple | #800080, rgb(128,0,128) |
| $color-system-purple-10 | #C58AF9, rgb(197,138,249) |
| $color-tomato-5 | #FFD3BF, rgb(255,211,191) |
| $color-tomato-30 | #FF966D, rgb(255,150,109) |
| $color-tomato-50 | #F75E28, rgb(247,94,40) |
| $color-tomato-90 | #622B18, rgb(98,43,24) |
| $color-tomato-100 | #31160D, rgb(49,22,13) |
| $color-blue-25 | #C1DADE, rgb(193,218,222) |
| $color-blue-70 | #094DAC, rgb(9,77,172) |
| $color-red-25 | #F2A6B0, rgb(242,166,176) |
| $color-red-40 | #E22C3E, rgb(226, 44, 62) |
| $color-purple | #5B3D5B, rgb(91,61,91) |
| $color-mozzarella-5 | #FCFCFC, rgb(252,252,252) |
| $color-mozzarella-10 | #F5F3F1, rgb(245,243,241) |
| $color-mozzarella-20 | #EFEDEA, rgb(239,237,234) |
| $color-mozzarella-30 | #DBD9D7, rgb(219,217,215) |
| $color-mozzarella-50 | #9E9C9A, rgb(158,156,154) |
| $color-mozzarella-55 | #8B8A88, rgb(139,138,136) |
| $color-mozzarella-60 | #797876, rgb(121,120,118) |
| $color-mozzarella-70 | #575655, rgb(87,86,85) |
| $color-mozzarella-75 | #494847, rgb(73,72,71) |
| $color-mozzarella-80 | #3B3A39, rgb(59,58,57) |
| $color-mozzarella-90 | #262626, rgb(38,38,38) |
| $color-mozzarella-100 | #1A1A19, rgb(26,26,25) |
| $color-turmeric-5 | #FDF2D8, rgb(253 242 216) |
| $color-turmeric-60 | #B48C32, rgb(180 140 50) |
High contrast
These colours are only to be used in the high contrast theme, and should not be used elsewhere.
| $color-orange-dark-hc | #A33100, rgb(163,49,0) |
| $color-red-dark-hc | #A4041F, rgb(164,4,31) |
| $color-red-light-hc | #FF7A80, rgb(255,122,128) |
| $color-yellow-dark-hc | #685731, rgb(104,87,49) |
| $color-green-dark-hc | #196634, rgb(25,102,52) |
| $color-green-light-hc | #26D46E, rgb(38,212,110) |
| $color-blue-dark-hc | #1054B4, rgb(16,84,180) |
| $color-blue-light-hc | #8BBCFE, rgb(139,188,254) |
| $color-purple-light-hc | #BA98BA, rgb(186,152,186) |