Skip to contentSkip to footer
Give feedbackv3.0.2

Colours

Colour contrast

The colour contrast ratio for text and interactive elements (for example buttons) should be as recommended by the W3C.

Brand

The colours are defined in the Brand Guidelines. Use them in these pairs.

Heritage Blue
@heritage-blue

Heritage Yellow
@heritage-yellow

Responsible Purple
@responsible-purple

Responsible Aqua
@responsible-aqua

Inventive Teal
@inventive-teal

Inventive Pink
@inventive-pink

Generous Green
@generous-green

Generous Mauve
@generous-mauve

Brand tints

Here are the brand colours in lighter tints.

Heritage Blue Lighter
@heritage-blue-lighter

Heritage Blue Lightest
@heritage-blue-lightest

Heritage Yellow Lighter
@heritage-yellow-lighter

Heritage Yellow Darker
@heritage-yellow-darker

Extended palette

These colours shouldn't be used as brand or decorative colours. They’re used for things which are more functional - for example in error notices and call outs. This is because of recognised user behaviour - such as seeing red as a warning.

Red
@red

Pink
@pink

Orange
@orange

Yellow
@yellow

Green
@green

Blue
@blue

Aqua
@aqua

Extended palette tints

Here are the tint variations of the extended colour palette.

Red Light
@red-light

Red Lighter
@red-lighter

Orange Light
@orange-light

Orange Lighter
@orange-lighter

Green Light
@green-light

Green Lighter
@green-lighter

Blue Light
@blue-light

Blue Lighter
@blue-lighter

Blue Darker
@blue-darker

Aqua Light
@aqua-light

Yellow Light
@yellow-light

Purple Dark
@purple-dark

Monochrome palette

This palette is mainly for text, but also for neutral colouring.

Gray 0
@gray-0

Gray 1
@gray-1

Gray 2
@gray-2

Gray 3
@gray-3

Gray 4
@gray-4

Gray 5
@gray-5

Gray 6
@gray-6

Gray 7
@gray-7

Gray 8
@gray-8