Gallery
Base Design System
Share
Explore
Gallery
Base Design System
Design tokens

Colours

These represent the raw values of our colour palette.

Primary colour

Reserved for interactive elements.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Name
HEX
Values
primary-50
#F5F9FA
primary-100
#EBF4F5
primary-150
#E0EEF0
primary-200
#C9E4E8
primary-250
#ACD7DD
primary-300
#9DC7CC
primary-400
#81A6AB
primary-500
#68878B
primary-600
#50686C
primary-700
#394B4E
primary-750
#2E3E40
primary-800
#243033
primary-850
#1C2629
primary-900
#151F21
primary-950
#101719
There are no rows in this table
⁠

Secondary colour

Used on secondary elements.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Name
HEX
Values
secondary-50
#FAF7FA
secondary-100
#F5F0F5
secondary-150
#F0E8F0
secondary-200
#E8D8E7
secondary-250
#DEC4DD
secondary-300
#D4B0D3
secondary-400
#C088C0
secondary-500
#9D6C9E
secondary-600
#7A547B
secondary-700
#593C59
secondary-750
#493149
secondary-800
#39263B
secondary-850
#2C1E32
secondary-900
#241729
secondary-950
#1D111D
There are no rows in this table
⁠

Neutral colour

Used on text, backgrounds...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Name
HEX
Values
neutral-50
#F8F8F8
neutral-100
#F2F2F2
neutral-150
#EBEBEB
neutral-200
#DEDEDE
neutral-250
#CECECE
neutral-300
#BEBEBE
neutral-400
#9E9E9E
neutral-500
#808080
neutral-600
#636363
neutral-700
#484848
neutral-750
#3A3A3A
neutral-800
#2E2E2E
neutral-850
#242424
neutral-900
#1D1D1D
neutral-950
#161616
There are no rows in this table
⁠


System colours

System colours are reserved for systems-related elements (i.e. a system message to show app outage, or validation on a form).

Success

Used to communicate something positive.
1
2
3
4
5
6
7
8
9
Name
HEX
Values
success-100
#eeffec
success-200
#dffdd6
success-300
#c1f2b2
success-400
#92d17e
success-500
#4fba2e
success-600
#3b8524
success-700
#32701e
success-800
#204814
success-900
#123109
There are no rows in this table
⁠

Warning

Used to communicate a warning.
1
2
3
4
5
6
7
8
9
Name
HEX
Values
warning-100
#fff1d6
warning-200
#ffedca
warning-300
#ffe0a2
warning-400
#ffde9e
warning-500
#ffd585
warning-600
#ffc453
warning-700
#da942c
warning-800
#aa6804
warning-900
#845104
There are no rows in this table
⁠

Error

Used to communicate an error.
1
2
3
4
5
6
7
8
9
Name
HEX
Values
error-100
#fff8f8
error-200
#ffebeb
error-300
#fddcdc
error-400
#f9b6b6
error-500
#d55453
error-600
#af2c2b
error-700
#a12221
error-800
#862120
error-900
#430e0c
There are no rows in this table
⁠





Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.