Skip to main content

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