Libraries
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.
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.
Primitive colours 🔐
You can't access these colours, this is just for reference.
Product colours 🔓
You can access these colours. Turn on the Product Colour Library in Figma.
🌛 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.
Exceptions
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.
