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

Link

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

Border

#ffffff

Fill

Invert / Action / Secondary / Hover

#ffffff

Text

#072150

#ffffff

Border

#ffffff

Fill

Invert / Action / Secondary / Active

#ffffff

Text

#051a3f

#ffffff

Border

#ffffff

Fill

Invert / Action / Disabled / Solid

#082862

Text

#536d9d

#ffffff

Border

#082862

Fill

Invert / Action / Disabled / Outline

#536d9d

Text

#ffffff

#536d9d

Border

#536d9d

Fill

Invert / Action / Tertiary

#ffffff

Text

#ffffff

Border

#ffffff

Fill

Invert / Action / Tertiary / Active

#ffffff

Text

#051a3f

#ffffff

Border

#ffffff

Fill

Invert / Action / Tertiary / Hover

#ffffff

Text

#072150

#ffffff

Border

#ffffff

Fill

Invert / Action / Selected

#ffffff

Text

#072150

#116998

Border

#ffffff

Fill

Invert / Action / Selected / Hover

#ffffff

Text

#051a3f

#116998

Border

#ffffff

Fill

Invert / Action / Selected / Active

#ffffff

Text

#04132e

#116998

Border

#ffffff

Fill

Invert / Action / Primary

#072150

Text

#ffc526

#ffffff

Border

#072150

Fill

Invert / Action / Primary / Hover

#072150

Text

#ffbb00

#ffffff

Border

#072150

Fill

Invert / Action / Primary / Active

#072150

Text

#d99f00

#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

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

Token set

Semantic

#ffffff

Fill

Token set

Semantic

Invert / Nav / Active

#ffffff

Text

Token set

Semantic

#051a3f

Token set

Semantic

#536d9d

Border

Token set

Semantic

#ffffff

Fill

Token set

Semantic

Invert / Nav / Selected

#ffffff

Text

Token set

Semantic

#072150

Token set

Semantic

#ffcf4d

Border

Token set

Semantic

#ffffff

Fill

Token set

Semantic