Colour palette

All the colours of the rainbow. And a few others besides.

How we use colours

• Yellow is reserved for primary actions (buttons) only
• Red is reserved for alerts and destructive actions (buttons) only
• Colour combinations for text, icons and other important elements must meet the AA accessibility level. So your contrast ratio must be at least 4.5:1
• Decorative imagery does not have to meet the contrast ratio, but you should still get pretty close, so make sure your images are completely distinguishable

How they look

The below text colour/background combinations all pass our accessibility standards.

Core

• black #000000 rgb(0, 0, 0)
• white #FFFFFF rgb(255, 255, 255)

Primary

• light-pink #EB5F8E rgb(235, 95, 142)
• light-green #72B72A rgb(114, 183, 42)
• yellow #FCC31E rgb(252, 195, 30)
• light-blue #35ADCE rgb(53, 173, 206)

Neutrals

• graphite #2F2E31 rgb(47, 46, 49)
• dove-grey #666666 rgb(102, 102, 102)
• alto #D0D0D0 rgb(208, 208, 208)
• gallery #ECECEC rgb(236, 236, 236)
• wild-sand #F5F5F5 rgb(245, 245, 245)

Secondary

These colours should be used sparingly.

• red #d60000 rgb(214, 0, 0)
• dark-blue #00528A rgb(0, 82, 138)
• olive #B9CC3F rgb(185, 204, 63)
• turquoise #00CEB3 rgb(0, 206, 179)
• light-orange #F39722 rgb(243, 151, 34)
• lavender #C380BB rgb(195, 128, 187)
• bright-orange #F76908 rgb(247, 105, 8)

Pastels

Pastel colours are to be used sparingly in certain UI components - please see minor alerts.

• pastel-blue #D7EFF5 rgb(215,239,245)
• pastel-green #E3F1D4 rgb(227,241,212)
• pastel-red #FBE6E6 rgb(251,230,230)
• pastel-yellow #FEF3D2 rgb(254,243,210)

How to use colours

Colour values can be obtained by using the getColour($colour) function, where $colour is the English term for the colour required.

Examples:

light-blue background colour

.el {
	background-color: getColour(light-blue);
}

white text:

.el {
	color: getColour(white);
}

Design Tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.