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 | #A04C00, rgb(160 76 0) |
| $color-orange-90 | #613105, rgb(97 49 5) |
| $color-blue-10 | #DBEAFF, rgb(219 234 255) |
| $color-blue-25 | #C1DADE, rgb(193,218,222) |
| $color-blue-30 | #7aadf6, rgb(122 173 246) |
| $color-blue | #125FCA, rgb(18,95,202) |
| $color-blue-70 | #094DAC, rgb(9,77,172) |
| $color-blue-90 | #083343, rgb(8,51,67) |
| $color-red-10 | #FFD3CC, rgb(255 211 204) |
| $color-red-25 | #F2A6B0, rgb(242,166,176) |
| $color-red-30 | #F68179, rgb(246, 129, 121) |
| $color-red-40 | #E22C3E, rgb(226, 44, 62) |
| $color-red | #D50525, rgb(213,5,37) |
| $color-red-90 | #491E24, rgb(73,30,36) |
| $color-yellow-10 | #FFF9DF, rgb(255,249,223) |
| $color-yellow | #F6C243, rgb(246,194,67) |
| $color-yellow-90 | #474630, rgb(71,70,48) |
| $color-green-10 | #CFF7E1, rgb(207 247 225) |
| $color-green-30 | #22BF65, rgb(34,191,101) |
| $color-green | #017A39, rgb(1,122,57) |
| $color-green-90 | #273F33, rgb(39,63,51) |
| $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-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-10 | #E7D6E7, rgb(231,214,231) |
| $color-aubergine-75 | #493949, rgb(73 57 73) |
| $color-aubergine-80 | #3C313C, rgb(60 49 60) |
| $color-berry-10 | #FADBDF, rgb(250 219 223) |
| $color-berry-20 | #F9D2D7, rgb(249 210 215) |
| $color-berry-70 | #98696F, rgb(152 105 111) |
| $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-70 | #6A787A, rgb(106 120 122) |
| $color-cupcake-90 | #254043, rgb(37,64,67) |
| $color-turmeric-5 | #FDF2D8, rgb(253 242 216) |
| $color-turmeric-10 | #FCEAC0, rgb(252 234 192) |
| $color-turmeric-20 | #FAE0A1, rgb(250 224 161) |
| $color-turmeric-60 | #B48C32, rgb(180 140 50) |
| $color-turmeric-70 | #917228, rgb(145 114 40) |
| $color-turmeric-80 | #644F1C, rgb(100 79 28) |
| $color-latte-10 | #F1E3C9, rgb(241 227 201) |
| $color-latte-30 | #E7CDA2, rgb(231 205 162) |
| $color-latte-70 | #81735B, rgb(129 115 91) |
| $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) |
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) |