Libraries
Skyscanner has two colour libraries: Brand and Product. Each has its own dedicated Figma library.
- Brand includes a wide range of colours that are not used in Product.
- Product contains the colours used in the UI.
Tokens explained
Colour tokens start as primitive values, which consist of a name and a hex code. These primitive tokens are not publicly available 🔐.
Product designers use semantic tokens, which are derived from primitives. The token name describes how the colour should be used. Detailed usage rules are defined in the usage guidelines.
In some cases, there are also component-level tokens. These are typically used for interactive states, allowing the set of semantic tokens to remain intentionally limited. These component-level tokens are not publicly available either 🔐.
Product colours 🔓
Everyone access these colours.
Primitive colours 🔐
Only accessible for Backpack designers and engineers.
🌛 Night mode
There is a 1:1 mapping between Day Mode and Night Mode tokens. In the palette, these are aligned horizontally. Each token is assigned to a variable, so switching modes happens automatically. To apply Night Mode in Figma, select: Layer → Semantic → Night.
Exceptions
The only exception to the 1:1 mapping occurs when designing a new component. In these cases, primitive tokens may be used to create a dedicated component-level token 🔒. This is typically needed for more specific use cases, such as interactive states. If you’re unsure, Backpack designers can help. Reach out in #backpack-design-chat for guidance..
