Colours - Usage

Basic Guidelines

We generally recommend checking colour descriptions in the Figma style for any notes on specific usage restrictions and contrast requirements.

Text smaller than 24px should generally use the colour text-grey (or white on dark backgrounds), but can also use the dark variant of solid colours.
Only Display-5 or larger styles can use the regular variant of solid colours.

HeadlineBody copy

Small text styles (e.g. Display-6 and body) should generally use text-grey.

HeadlineBody copy

Small text is not accessible in certain solid colours (e.g. mobile).

Apple iPhone 165G ready

Only the dark variants of solid colours are accessible for small text.

Apple iPhone 165G ready

Certain solid colours (e.g. attention-orange) are not accessible for small text.

Body text

Don't use primary blue for text that's not interactive.

Figma Component Colours

These colours are only used in the creation of components to ensure consistency across different states and appearances. They are not to be used as background colours or highlights.

Sky Glass Air

£XXfor 48 months 0% APR or £XX upfront

Sky Glass Gen 2

£XXfor 48 months 0% APR or £XX upfront

Use a percentage of the product specific colour as a background

Sky Glass Air

£XXfor 48 months 0% APR or £XX upfront

Sky Glass Gen 2

£XXfor 48 months 0% APR or £XX upfront

System colours such as hover-fill-opaque are reserved for component states only.

Hover state colours

Style	Usage	Style in Figma	Usage Example
Outline	Used to create a halo effect around a selectable object.	Hover-outline	RadioCheckboxSwatch
Fill semi-transparent	A transparent background fill behind a free floating element.	Hover-fill-transparent
Fill opaque	A solid background fill for when the component needs to stand out against a busy background.	Hover-fill-opaque
Light Fill semi-transparent	A transparent background fill behind elements for the Light appearance.	Hover-light-fill-transparent