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

#c2cbdc

Subheading

#d9dbdd

Body

#73dfd6

Focus Outer

#ffffff

Focus Inner

#5ba3ca

Border

#0a2f73

Surface

#051a3f

On Light

#ffffff

On Dark

#5ba3ca

Track Bg

Type

Invert / Type

#c2cbdc

Strong

#c2c4c8

Subtle

Surfaces

Invert / Surface

#072150

Alt 1

#051a3f

Alt 2

#04132e

Alt 3

Link

Invert / Link

#ffbb00

Default

#ffcf4d

Hover

#dbcde4

Visited

#fff7e0

Active

Actions

Invert / Action / --Disabled / Solid

#082862

Text

#536d9d

#ffffff

Border

#082862

Fill

Invert / Action / --Disabled / Outline

#536d9d

Text

#082862

#536d9d

Border

#536d9d

Fill

Invert / Action / Primary

#051a3f

Text

#ffbb00

#ffffff

Border

#051a3f

Fill

Invert / Action / Primary / Hover

#051a3f

Text

#ffcf4d

#ffffff

Border

#051a3f

Fill

Invert / Action / Selected

#051a3f

Text

#ffc526

#ffffff

Border

#051a3f

Fill

Invert / Action / Selected / Hover

#051a3f

Text

#ffcf4d

#ffffff

Border

#051a3f

Fill

Invert / Action / Secondary

#ffffff

Text

#ffffff

Border

#ffffff

Fill

Invert / Action / Secondary / Hover

#ffffff

Text

#072150

#ffffff

Border

#ffffff

Fill

Invert / Action / Tertiary

#ffffff

Text

#ffffff

Border

#ffffff

Fill

Invert / Action / Tertiary / Hover

#ffffff

Text

#072150

#ffffff

Border

#ffffff

Fill

Invert / Action / --Active

#ffffff

Text

#4396c2

#ffffff

Border

#ffffff

Fill

Status

Invert / Status

#f1f3f7

Base

#00a799

Highlight

#ffcf4d

Accent

#73bc7f

Positive

#ea6f68

Negative

Icon

#ffffff

Fill

Token set

Semantic