Global palette
The Global palette establishes the complete set of raw colour values available throughout the design system.
Summary
The Global palette includes neutral greys for structure and balance, a primary brand colour, three supporting accent colours, and a range of status-based colours such as danger, caution, valid, and information. Each colour in the global set is distinct and purposefully defined, serving as the core source from which all functional and component-level tokens are derived. This palette ensures visual consistency and provides the flexibility needed to build cohesive, accessible interfaces.
Base
17.4 AAA
Black
#1a1a1a
17.4 AAA
White
#ffffff
Transparent
Neutral
16.8 AAA
1
Neutral 10
#f6f6f6
16.2 AAA
1
Neutral 20
#e6e6e6
15.1 AAA
1.1
Neutral 30
#c3c3c3
12.4 AAA
1.4
Neutral 40
#a7a7a7
8.9 AAA
1.9
Neutral 50
#919191
5.5 AA
3.1
Neutral 60
#757575
3.5
4.9 AA
Neutral 70
#606060
2.4
7 AAA
Neutral 80
#434343
1.8
9.5 AAA
Neutral 90
#323232
1.2
13.9 AAA
Neutral 100
#252525
Primary
14.5 AAA
1.1
Primary 10
#eaeffe
10 AAA
1.7
Primary 20
#d0d7fc
6.7 AA
2.5
Primary 30
#9da5f5
4.7 AA
3.7
Primary 40
#545aeb
3.3
5.2 AA
Primary 50
#2527e3
2.3
7.3 AAA
Primary 60
#0000cf
2.1
8.2 AAA
Primary 70
#0000b0
1.6
10 AAA
Primary 80
#000090
1.2
13.5 AAA
Primary 90
#000070
1
18 AAA
Primary 100
#00003f
Accent 01
14.7 AAA
1.1
Accent 01 10
#eeeafb
10 AAA
1.6
Accent 01 20
#cdc1f1
6.9 AA
2.5
Accent 01 30
#ab98ea
4.8 AA
3.6
Accent 01 40
#8f71f0
2.8
6 AA
Accent 01 50
#6846d9
2.3
7.4 AAA
Accent 01 60
#5731d6
2
8.6 AAA
Accent 01 70
#4e2cbe
1.5
11.2 AAA
Accent 01 80
#3d2295
1.2
14.4 AAA
Accent 01 90
#2c196b
1
17.6 AAA
Accent 01 100
#1b0f41
Accent 02
14.8 AAA
1.1
Accent 02 10
#fbe8ee
10 AAA
1.6
Accent 02 20
#f3b8cc
7.2 AAA AAA
2.4
Accent 02 30
#ed89ab
6 AA AA
2.9
Accent 02 40
#e97099
4.7 AA AA
3.6
Accent 02 50
#e84a7f
3.5
4.9 AA AA
Accent 02 60
#db1256
2.4
7 AAA AAA
Accent 02 70
#af0e44
1.7
10 AAA
Accent 02 80
#830a33
1.2
14.4 AAA
Accent 02 90
#570722
1
18.6 AAA
Accent 02 100
#2c0311
Accent 03
15.2 AAA
1.1
Accent 03 10
#e7f2f6
11.6 AAA
1.4
Accent 03 20
#b7d9e3
8.6 AAA
2
Accent 03 30
#87c0d1
4.7 AA
3.7
Accent 03 50
#2490ae
6.3 AA
2.7
Accent 03 40
#56a6bf
3.8
4.5 AA
Accent 03 60
#0e80a4
2.6
6.4 AA
Accent 03 70
#0b6683
1.8
9.3 AAA
Accent 03 80
#094d62
1.2
13.4 AAA
Accent 03 90
#053342
1
17.9 AAA
Accent 03 100
#031a20
System colours
Colours to be used to highlight and grab attention in the UI, such as different alert states.
Danger
14.6 AAA
1.1
Danger 10
#fbe7e8
10 AAA
1.7
Danger 20
#f4b6b7
8.4 AAA
2
Danger 30
#f09f9e
5.7 AA
3
Danger 40
#e86e6d
4.7 AA
3.6
Danger 50
#ee4949
3.2
5.3 AA
Danger 60
#d7050c
2.3
7.3 AAA
Danger 70
#ae0a09
1.6
10 AAA
Danger 80
#820807
1.2
14.5 AAA
Danger 90
#590407
1
18.9 AAA
Danger 100
#2a0202
Caution
15.9 AAA
1
Caution 10
#fff3e7
12.9 AAA
1.3
Caution 20
#ffd7b3
10 AAA
1.6
Caution 30
#ffbd80
8.6 AAA AAA
2
Caution 40
#fea24d
7.9 AAA AAA
2.1
Caution 50
#ff9533
6.6 AA AA
2.6
Caution 60
#ff7a00
5.4 AA AA
3.1
Caution 70
#E66E00
3.4
5 AA AA
Caution 80
#b35400
2.1
8.1 AAA AAA
Caution 90
#7f3d00
1.2
13.4 AAA
Caution 100
#4c2400
Valid
15.2 AAA
1.1
Valid 10
#e7f3e7
11.6 AAA
1.4
Valid 20
#b9ddb9
8.5 AAA AAA
2
Valid 30
#8ac48a
6.2 AA AA
2.7
Valid 40
#5dac5b
5.3 AA AA
3.2
Valid 50
#46a144
3.8
4.5 AA AA
Valid 60
#168914
2.7
6.4 AA AA
Valid 70
#136e11
1.8
9.4 AAA AAA
Valid 80
#0c520c
1.2
13.4 AAA
Valid 90
#093708
1
18 AAA
Valid 100
#041b04
Info
14.5 AAA
1.1
Info 10
#e7ecf9
10 AAA
1.7
Info 20
#b7c6ee
6.7 AA
2.5
Info 30
#87a0e2
4.7 AA
3.7
Info 40
#5f81dd
3.3
5.2 AA
Info 50
#3f66d1
2.3
7.3 AAA
Info 60
#1748d0
2.1
8.2 AAA
Info 70
#0f40c5
1.6
10 AAA
Info 80
#0c339e
1.2
13.5 AAA
Info 90
#092676
1
18 AAA
Info 100
#04133b
Black tint
Black tint 10
#1a1a1a 4%
Black tint 20
#1a1a1a 11%
Black tint 30
#1a1a1a 26%
Black tint 40
#1a1a1a 39%
Black tint 50
#1a1a1a 48.5%
Black tint 60
#1a1a1a 60.25%
Black tint 70
#1a1a1a 69.5%
Black tint 80
#1a1a1a 82%
Black tint 90
#1a1a1a 89.5%
Black tint 100
#1a1a1a 95%
White tint
White tint 10
#ffffff 8%
White tint 20
#ffffff 18.5%
White tint 30
#ffffff 27.5%
White tint 40
#ffffff 37.5%
White tint 50
#ffffff 53%
White tint 60
#ffffff 70%
White tint 70
#ffffff 84%
White tint 80
#ffffff 93%
White tint 90
#ffffff 97%
White tint 100
#ffffff 99%