Colours - Overview

Colours

Design Note: As a default we use a 20% tint from the regular swatch to create dark counterparts. More detailed adjustments might be necessary depending on the individual colour and its purpose.

Text

These are specific, reserved solid colours that should only be used for the purpose indicated by their names.

Primary

There are three primary colours for use within UI design.

Reserved

These are specific, reserved solid colours that should only be used for the purpose indicated by their names.

Greyscale

White to black greyscale tones.
Please consider accessibility when selecting a tone.

Products

Solid colours for the promotion of Sky Products.
Note: do not use a product colour outside of the context indicated by its name.

Loyalty

Solid colours for use across loyalty.
When used in text, loyalty-two and three are only accessible for large fonts (24px and above).

Surfaces

Additional surface colours to add depth.

Figma Component Colours

Colours used in the design of components, to ensure consistency across states.

Regional variants

Certain Foundation Styles are required to have regional variations and indicate the region within folder and style name, i.e. Regional-Germany/Colours-DE.

Colours

Fallback for product gradients.