Colours

Each tab displays and explains how design tokens are used across the system. Further examples can be found in the Style Blocks documentation.

Base

Invert / Base
#f7f8fa
Heading
Default Heading Styles
#c2cbdc
Subheading
Default subheading styles
#d9dbdd
Body
Default body styles
#73dfd6
Focus Outer
Outer Ring Focus States
#ffffff
Focus Inner
Inner Ring Focus States
#5ba3ca
Border
Base Border Colour
#0a2f73
Surface
#051a3f
On Light
#ffffff
On Dark

Type

Invert / Type
#c2cbdc
Strong
Darker than body text
Collection
-
Syntax: Web
-
#c2c4c8
Subtle
Lighter than body text
Collection
-
Syntax: Web
-

Surfaces

Invert / Surface
#072150
Alt 1
#051a3f
Alt 2
#04132e
Alt 3
#147cb3
Brand 1
Alternate Brand Colour
#4d2668
Brand 2
Alternate Brand Colour
#008075
Brand 3
Alternate Brand Colour
#993357
Brand 4
Alternate Colour
#0a2f73
Brand 5
Alternate brand colour
Invert / Link
#ffbb00
Default
#FFBB00 Yellow 700
#ffcf4d
Hover
#FFCF4D Yellow 500
#dbcde4
Visited
#DBCDE4 Purple 200
#fff7e0
Active
#FFF7E0 Yellow 100

Actions

Invert / Action / Secondary
#ffffff
Text
#ffffff
Bg
#ffffff
Border
#ffffff
Fill
Invert / Action / Secondary / Hover
#ffffff
Text
#072150
Bg
#ffffff
Border
#ffffff
Fill
Invert / Action / Secondary / Active
#ffffff
Text
#051a3f
Bg
#ffffff
Border
#ffffff
Fill
Invert / Action / Disabled / Solid
#082862
Text
#536d9d
Bg
#ffffff
Border
#082862
Fill
Invert / Action / Disabled / Outline
#536d9d
Text
#ffffff
Bg
#536d9d
Border
#536d9d
Fill
Invert / Action / Tertiary
#ffffff
Text
#ffffff
Bg
#ffffff
Border
#ffffff
Fill
Invert / Action / Tertiary / Active
#ffffff
Text
#051a3f
Bg
#ffffff
Border
#ffffff
Fill
Invert / Action / Tertiary / Hover
#ffffff
Text
#072150
Bg
#ffffff
Border
#ffffff
Fill
Invert / Action / Selected
#ffffff
Text
#072150
Bg
#116998
Border
#ffffff
Fill
Invert / Action / Selected / Hover
#ffffff
Text
#051a3f
Bg
#116998
Border
#ffffff
Fill
Invert / Action / Selected / Active
#ffffff
Text
#04132e
Bg
#116998
Border
#ffffff
Fill
Invert / Action / Primary
#072150
Text
#ffc526
Bg
#ffffff
Border
#072150
Fill
Invert / Action / Primary / Hover
#072150
Text
#ffbb00
Bg
#ffffff
Border
#072150
Fill
Invert / Action / Primary / Active
#072150
Text
#d99f00
Bg
#ffffff
Border
#072150
Fill

Status

Invert / Status
#f1f3f7
Base
Collection
-
Syntax: Web
-
#00a799
Highlight
#008075 Aqua 900
Collection
-
Syntax: Web
-
#ffcf4d
Accent
#FFBB00 Yellow 700
Collection
-
Syntax: Web
-
#73bc7f
Positive
Collection
-
Syntax: Web
-
#ea6f68
Negative
Collection
-
Syntax: Web
-

Icon

#ffffff
Fill
Collection
-
Syntax: Web
-
Token set
Semantic

Nav

Invert / Nav
#ffffff
Text
Token set
Semantic
#0a2f73
Bg
Token set
Semantic
#536d9d
Border
Token set
Semantic
#ffffff
Fill
Token set
Semantic
Invert / Nav / Hover
#ffffff
Text
Token set
Semantic
#072150
Border
Token set
Semantic
#536d9d
Bg
Token set
Semantic
#ffffff
Fill
Token set
Semantic
Invert / Nav / Active
#ffffff
Text
Token set
Semantic
#051a3f
Bg
Token set
Semantic
#536d9d
Border
Token set
Semantic
#ffffff
Fill
Token set
Semantic
Invert / Nav / Selected
#ffffff
Text
Token set
Semantic
#072150
Bg
Token set
Semantic
#ffcf4d
Border
Token set
Semantic
#ffffff
Fill
Token set
Semantic