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-10 | #FFEAD4, rgb(255,234,212) |
| $color-orange-30 | #FF8000, rgb(255,128,0) |
| $color-orange | #F36805, rgb(243,104,5) |
| $color-orange-55 | #F75E28, rgb(247,94,40) |
| $color-orange-90 | #41301F, rgb(65,48,31) |
| $color-blue-10 | #EBF6FA, rgb(235,246,250) |
| $color-blue-25 | #C1DADE, rgb(193,218,222) |
| $color-blue-30 | #4996FD, rgb(73,150,253) |
| $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 | #FFE9EA, rgb(255,233,234) |
| $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 | #E5FAEF, rgb(229,250,239) |
| $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-80 | #452844, rgb(69,40,68) |
| $color-berry-10 | #FFE7EB, rgb(255,231,235) |
| $color-berry-90 | #622D35, rgb(98,45,53) |
| $color-cupcake-10 | #E7F4F6, rgb(231,244,246) |
| $color-cupcake-90 | #254043, rgb(37,64,67) |
| $color-tomato-5 | #FFD3BF, rgb(255,211,191) |
| $color-tomato-90 | #622B18, rgb(98,43,24) |
| $color-turmeric-5 | #FFF9DE, rgb(255,249,222) |
| $color-turmeric-60 | #BF8B09, rgb(191, 139, 9) |
| $color-turmeric-80 | #745300, rgb(116,83,0) |
| $color-system-purple | #800080, rgb(128,0,128) |
| $color-system-purple-10 | #C58AF9, rgb(197,138,249) |
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) |