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.

White and black

Example Description Token name
  • White #FFFFFF
    rgb (255,255,255)
    $color-white
  • Black #000000
    rgb (0,0,0)
    $color-black

Orange

Example Description Token name
  • Orange 10 #FFEAD4
    rgb (255,234,212)
    $color-orange-10
  • Orange 30 #FF8000
    rgb (255,128,0)
    $color-orange-30
  • Orange #F36805
    rgb (243,104,5)
    $color-orange
  • Orange 55 #F75E28
    rgb (247,94,40)
    $color-orange-55
  • Orange 90 #41301F
    rgb (65,48,31)
    $color-orange-90

Blue

Example Description Token name
  • Blue 10 #EBF6FA
    rgb (235,246,250)
    $color-blue-10
  • Blue 25 #C1DADE
    rgb (193,218,222)
    $color-blue-25
  • Blue 30 #4996FD
    rgb (73,150,253)
    $color-blue-30
  • Blue #125FCA
    rgb (18,95,202)
    $color-blue
  • Blue 60 #0D4696
    rgb (13,70,150)
    $color-blue-60
  • Blue 90 #083343
    rgb (8,51,67)
    $color-blue-90

Red

Example Description Token name
  • Red 10 #FFE9EA
    rgb (255,233,234)
    $color-red-10
  • Red 25 #F2A6B0
    rgb (242,166,176)
    $color-red-25
  • Red 30 #EC556C
    rgb (236,85,108)
    $color-red-30
  • Red #D50525
    rgb (213,5,37)
    $color-red
  • Red 60 #9F041C
    rgb (159,4,28)
    $color-red-60
  • Red 90 #491E24
    rgb (73,30,36)
    $color-red-90

Yellow

Example Description Token name
  • Yellow 10 #FFF9DF
    rgb (255,249,223)
    $color-yellow-10
  • Yellow 30 #FFD97D
    rgb (255,217,125)
    $color-yellow-30
  • Yellow #F6C243
    rgb (246,194,67)
    $color-yellow
  • Yellow 90 #474630
    rgb (71,70,48)
    $color-yellow-90

Green

Example Description Token name
  • Green 10 #E5FAEF
    rgb (229,250,239)
    $color-green-10
  • Green 30 #22BF65
    rgb (34,191,101)
    $color-green-30
  • Green #017A39
    rgb (1,122,57)
    $color-green
  • Green 60 #006631
    rgb (0,102,49)
    $color-green-60
  • Green 90 #273F33
    rgb (39,63,51)
    $color-green-90

Purple

Example Description Token name
  • Purple 10 #EAD9F0
    rgb (234,217,240)
    $color-purple-10
  • Purple #5B3D5B
    rgb (91,61,91)
    $color-purple

Mozzarella

Example Description Token name
  • Mozzarella 5 #FCFCFC
    rgb (252,252,252)
    $color-mozzarella-5
  • Mozzarella 10 #F5F3F1
    rgb (245,243,241)
    $color-mozzarella-10
  • Mozzarella 20 #EFEDEA
    rgb (239,237,234)
    $color-mozzarella-20
  • Mozzarella 30 #DBD9D7
    rgb (219,217,215)
    $color-mozzarella-30
  • Mozzarella 50 #9E9C9A
    rgb (158,156,154)
    $color-mozzarella-50
  • Mozzarella 60 #797876
    rgb (121,120,118)
    $color-mozzarella-60
  • Mozzarella 70 #575655
    rgb (87,86,85)
    $color-mozzarella-70
  • Mozzarella 75 #494847
    rgb (73,72,71)
    $color-mozzarella-75
  • Mozzarella 80 #3B3A39
    rgb (59,58,57)
    $color-mozzarella-80
  • Mozzarella 90 #262626
    rgb (38,38,38)
    $color-mozzarella-90
  • Mozzarella 100 #1A1A19
    rgb (26,26,25)
    $color-mozzarella-100

Charcoal

Example Description Token name
  • Charcoal 30 #D7D9DA
    rgb (215,217,218)
    $color-charcoal-30
  • Charcoal 40 #B7BDBE
    rgb (183,189,190)
    $color-charcoal-40
  • Charcoal 50 #8C999B
    rgb (140,153,155)
    $color-charcoal-50
  • Charcoal 60 #5D7074
    rgb (93,112,116)
    $color-charcoal-60
  • Charcoal 70 #3C4C4F
    rgb (60,76,79)
    $color-charcoal-70
  • Charcoal 75 #303D3F
    rgb (48,61,63)
    $color-charcoal-75
  • Charcoal 80 #242E30
    rgb (36,46,48)
    $color-charcoal-80

System

Example Description Token name
  • System purple #800080
    rgb (128,0,128)
    $color-system-purple
  • System purple 10 #C58AF9
    rgb (197,138,249)
    $color-system-purple-10

High contrast

Example Description Token name
  • Orange dark (High Contrast) #A33100
    rgb (163,49,0)
    $color-orange-dark-hc
  • Orange light (High Contrast) #FFA514
    rgb (255,165,20)
    $color-orange-light-hc
  • Red dark (High Contrast) #A4041F
    rgb (239,237,234)
    $color-red-dark-hc
  • Red light (High Contrast) #FF7A80
    rgb (164,4,31)
    $color-red-light-hc
  • Red 30 (High Contrast) #F99FAC
    rgb (249,159,172)
    $color-red-30-hc
  • Yellow dark (High Contrast) #685731
    rgb (104,87,49)
    $color-yellow-dark-hc
  • Green dark (High Contrast) #196634
    rgb (25,102,52)
    $color-green-dark-hc
  • Green light (High Contrast) #26D46E
    rgb (38,212,110)
    $color-green-light-hc
  • Blue dark (High Contrast) #1054B4
    rgb (16,84,180)
    $color-blue-dark-hc
  • Blue light (High Contrast) #8BBCFE
    rgb (139,188,254)
    $color-blue-light-hc
  • Purple light (High Contrast) #BA98BA
    rgb (186,152,186)
    $color-purple-light-hc