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

Base
#051a3f

Heading

#121f47

Subheading

#3c4253

Body

#d9dbdd

Border

#ffffff

Surface

#051a3f

On-Light

#ffffff

On-Dark

#26cebf

Focus Outer

#091024

Focus Inner

#e2e6ee

Track Bg

Type

Type
#121f47

Strong

#656a76

Subtle

Surfaces

Surface
#f1f3f7

Alt 1

#e3eff6

Alt 2

#edf7ef

Alt 3

rgba(9,16,36,0.6)

Overlay

Link
#116998

Default

#0e577d

Hover

#8454a4

Visited

#4396c2

Active

Actions

Action / Primary
#ffffff

Text

#147cb3

Bg

#ffffff

Border

#ffffff

Fill

Action / Primary / Hover
#ffffff

Text

#116998

Bg

#ffffff

Border

#ffffff

Fill

Action / Tertiary
#116998

Text

#ffffff

Bg

#ffffff

Border

#116998

Fill

Action / Tertiary / Hover
#116998

Text

#eff6fa

Bg

#ffffff

Border

#116998

Fill

Action / --Disabled / Solid
#f1f3f7

Text

#c2c4c8

Bg

#ffffff

Border

#f1f3f7

Fill

Action / --Disabled / Outline
#c2c4c8

Text

#ffffff

Bg

#c2c4c8

Border

#c2c4c8

Fill

Action / Danger
#be1d13

Text

#fdf0ef

Bg

#be1d13

Border

#be1d13

Fill

Action / Danger / Hover
#ffffff

Text

#9c180f

Bg

#ffffff

Border

#ffffff

Fill

Action / --Active
#ffffff

Text

#4396c2

Bg

#ffffff

Border

#f1f3f7

Fill

Action / Selected
#ffffff

Text

#116998

Bg

#ffffff

Border

#116998

Fill

Action / Selected / Hover
#ffffff

Text

#0e577d

Bg

#ffffff

Border

#0e577d

Fill

Action / Secondary
#116998

Text

#ffffff

Bg

#116998

Border

#116998

Fill

Action / Secondary / Hover
#116998

Text

#eff6fa

Bg

#116998

Border

#116998

Fill

Miscellaneous

Misc
#5ba3ca

Aside

Misc / Brand
#0a2f73

Primary

#ffbb00

Secondary

#147cb3

Tertiary

#ffffff

Neutral

Card

Card
#ffffff

Bg

Token set
Component
#051a3f

Heading

Token set
Component
#3c4253

Body

Token set
Component
#d9dbdd

Border

Token set
Component

Input

#ffffff

Bg

#656a76

Border

#3c4253

Text

#656a76

Placeholder

Status

Status
#f1f3f7

Base

#26cebf

Highlight

#ffbb00

Accent

#008616

Positive

#be1d13

Negative

Feedback

Feedback
#116998

Information

#eff6fa

Information Bg

#008616

Success

#edf7ef

Success Bg

#be1d13

Danger

#fdf0ef

Danger Bg

#d97500

Warning

#fff7ed

Warning Bg

#008075

Highlight

#edfbfa

Highlight Bg

Icon

#051a3f

Fill