Colour

Our colour system builds on the recognition of the JET brand colours to make the product interface more usable.

Global tokens

Example Description Token name
  • Black
    $color-black
  • Blue
    $color-blue
  • Blue 10
    $color-blue-10
  • Blue 25
    $color-blue-25
  • Blue 30
    $color-blue-30
  • Blue 60
    $color-blue-60
  • Blue 90
    $color-blue-90
  • Charcoal 30
    $color-charcoal-30
  • Charcoal 50
    $color-charcoal-50
  • Charcoal 70
    $color-charcoal-70
  • Charcoal 75
    $color-charcoal-75
  • Charcoal 80
    $color-charcoal-80
  • Green
    $color-green
  • Green 10
    $color-green-10
  • Green 30
    $color-green-30
  • Green 60
    $color-green-60
  • Green 90
    $color-green-90
  • Mozzarella 10
    $color-mozzarella-10
  • Mozzarella 100
    $color-mozzarella-100
  • Mozzarella 20
    $color-mozzarella-20
  • Mozzarella 30
    $color-mozzarella-30
  • Mozzarella 5
    $color-mozzarella-5
  • Mozzarella 50
    $color-mozzarella-50
  • Mozzarella 60
    $color-mozzarella-60
  • Mozzarella 70
    $color-mozzarella-70
  • Mozzarella 75
    $color-mozzarella-75
  • Mozzarella 80
    $color-mozzarella-80
  • Mozzarella 90
    $color-mozzarella-90
  • Orange
    $color-orange
  • Orange 10
    $color-orange-10
  • Orange 30
    $color-orange-30
  • Orange 55
    $color-orange-55
  • Orange 90
    $color-orange-90
  • Purple
    $color-purple
  • Purple 10
    $color-purple-10
  • Red
    $color-red
  • Red 10
    $color-red-10
  • Red 25
    $color-red-25
  • Red 30
    $color-red-30
  • Red 60
    $color-red-60
  • Red 90
    $color-red-90
  • System Purple
    $color-system-purple
  • System Purple 10
    $color-system-purple-10
  • White
    $color-white
  • Yellow
    $color-yellow
  • Yellow 10
    $color-yellow-10
  • Yellow 30
    $color-yellow-30
  • Yellow 90
    $color-yellow-90