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
