Colours

Usage

Legibility

Website elements like text and icons should meet accesibility standards when used against colored backgrounds. The following swatches contain a sample of each of the primary palette colors, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.

Primary Colours

The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.

A
A
A
A
A
A
A
A
A
A
Name
Brand
Variable
--color-brand
Class Name
bg-brand
RGB
224, 78, 57
HEX
#E04E39
A
A
A
A
A
A
A
A
A
A
Name
White
Variable
--color-white
RGB
255, 255, 255
HEX
#FFFFFF
A
A
A
A
A
A
A
A
A
A
Name
Gray 100
Variable
--color-gray-100
RGB
244, 246, 248
HEX
#F4F6F8
A
A
A
A
A
A
A
A
A
A
Name
Gray 200
Variable
--color-gray-200
RGB
235, 238, 242
HEX
#EBEEF2
A
A
A
A
A
A
A
A
A
A
Name
Gray 300
Variable
--color-gray-300
RGB
220, 224, 230
HEX
#DCE0E6
A
A
A
A
A
A
A
A
A
A
Name
Gray 400
Variable
--color-gray-400
RGB
190, 196, 204
HEX
#BEC4CC
A
A
A
A
A
A
A
A
A
A
Name
Gray 500
Variable
--color-gray-500
RGB
143, 148, 159
HEX
#8F949F
A
A
A
A
A
A
A
A
A
A
Name
Gray 600
Variable
--color-gray-600
RGB
106, 112, 122
HEX
#6A707A
A
A
A
A
A
A
A
A
A
A
Name
Gray 700
Variable
--color-gray-700
RGB
66, 71, 79
HEX
#42474F
A
A
A
A
A
A
A
A
A
A
Name
Gray 800
Variable
--color-gray-800
RGB
43, 45, 52
HEX
#2B2D34
A
A
A
A
A
A
A
A
A
A
Name
Gray 900
Variable
--color-gray-900
RGB
28, 30, 36
HEX
#1C1E24
A
A
A
A
A
A
A
A
A
A
Name
Black
Variable
--color-black
RGB
0, 0, 0
HEX
#000000

Secondary Colors

The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.

The secondary palette is yet to be defined.