We use colour to capture the full tonal range of the world of travel. Aligning our helpful, playful character with a palette that we can truly own.


Skyscanner has two colour libraries; Brand and Product. We have dedicated Figma libraries for each. The Brand palette uses a wide range of colours we don't use in Product.

  1. Product Colour Library
  2. Brand Colour Library

Tokens explained

Tokens start as primitive values, that only contain a name and hex code. The primitive tokens are not publicly available 🔐. The Product library uses semantic tokens that derive from the primitives. The name of the colour describes how to use it. We have specific rules on how to use these colours in our usage section.

Product Colour Tokens

Primitive colours 🔐

You can't access these colours, this is just for reference.

Product Primitive Colours

Product colours 🔓

You can access these colours. Turn on the Product Colour Library in Figma.

Product Semantic Colours

🌛 Night mode

There is a 1:1 mapping when moving from Day Mode → Night Mode. These are shown lined up horizontally above in the palette. Each token has been assigned a variable so this happens automatically.

Simply choose Layer → Semantic → Night in Figma.

Light mode to dark mode diagram


The exception to the standard 1:1 mapping is if you're designing a new component. Primitive tokens may be chosen, creating a dedicated private semantic token 🔒 for that component.

Backpack are here to help with this. Please reach out to #backpack-design-chat for more information.

Light mode to dark tokens