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
Colours for headings
#121f47
Subheading
Colours for Sub-headings
#3c4253
Body
Body copy
#d9dbdd
Border
Default border
#ffffff
Surface
Default surface
#051a3f
On-Light
Text and fills on a light background
#ffffff
On-Dark
Text and fills on a light background
#26cebf
Focus Outer
Focus outer ring for the default surface
#091024
Focus Inner
Colour for focus inner ring

Type

Type
#121f47
Strong
#656a76
Subtle

Surfaces

Surface
#f1f3f7
Alt 1
#e3eff6
Alt 2
#edf7ef
Alt 3
rgba(9,16,36,0.6)
Overlay
Neutral 1000 60%

Link

Link
#116998
Default
#FFBB00 Yellow 700
#0e577d
Hover
#FFCF4D Yellow 500
#8454a4
Visited
#DBCDE4 Purple 200
#4396c2
Active
#FFF7E0 Yellow 100

Actions

Action / Secondary
#116998
Text
#ffffff
Bg
#116998
Border
#116998
Fill
Action / Secondary / Hover
#0e577d
Text
#eff6fa
Bg
#0e577d
Border
#0e577d
Fill
Action / Secondary / Active
#0e577d
Text
#c4deec
Bg
#0e577d
Border
#0e577d
Fill
Action / Danger
#be1d13
Text
#fdf0ef
Bg
#be1d13
Border
#be1d13
Fill
Action / Danger / Active
#9c180f
Bg
#ffffff
Border
#ffffff
Fill
#ffffff
Text
Action / Danger / Hover
#9c180f
Text
#f7c8c5
Bg
#ffffff
Border
#9c180f
Fill
Action / Disabled / Solid
#f1f3f7
Text
#c2c4c8
Bg
#ffffff
Border
#f1f3f7
Fill
Action / Disabled / Outline
#c2c4c8
Text
#ffffff
Bg
#c2c4c8
Border
#c2c4c8
Fill
Action / Primary
#ffffff
Text
#147cb3
Bg
#ffffff
Border
#ffffff
Fill
Action / Primary / Hover
#ffffff
Text
#116998
Bg
#ffffff
Border
#ffffff
Fill
Action / Primary / Active
#ffffff
Text
#0e577d
Bg
#ffffff
Border
#ffffff
Fill
Action / Selected
#0b4462
Text
#a1cbe1
Bg
#147cb3
Border
#0e577d
Fill
Action / Selected / Hover
#0b4462
Text
#c4deec
Bg
#147cb3
Border
#0e577d
Fill
Action / Selected / Active
#a1cbe1
Bg
#147cb3
Border
#0e577d
Fill
#0b4462
Text
Action / Tertiary
#116998
Text
#ffffff
Bg
#ffffff
Border
#116998
Fill
Action / Tertiary / Active
#c4deec
Bg
#ffffff
Border
#116998
Fill
#0e577d
Text
Action / Tertiary / Hover
#0e577d
Text
#e3eff6
Bg
#ffffff
Border
#0e577d
Fill

Miscellaneous

Misc
#5ba3ca
Aside
Misc / Brand
#0a2f73
Primary
#ffbb00
Secondary
#147cb3
Tertiary
#ffffff
Neutral

Card

Card
#ffffff
Bg
Card default surfaces
Token set
Component
#051a3f
Heading
Token set
Component
#3c4253
Body
Token set
Component
#d9dbdd
Border
Token set
Component

Input

#ffffff
Bg
Default background colour
#8f939c
Border
#A8AAB1 Neutral 500
#3c4253
Text
Text body copy
#656a76
Placeholder
Placeholder text

Status

Status
#f1f3f7
Base
#F1F3F7 Neutral 200
#26cebf
Highlight
#008075 Aqua 900
#ffbb00
Accent
#FFBB00 Yellow 700
#008616
Positive
#be1d13
Negative

Feedback

Feedback
#116998
Information
#eff6fa
Information Bg
#EFF6FA Blue 000
#008616
Success
#008616 Green 700
#edf7ef
Success Bg
EDF7EF Green 000
#be1d13
Danger
#BE1D13 Red 800
#fdf0ef
Danger Bg
#FDF0EF Red 000
#d97500
Warning
#fff7ed
Warning Bg
#FFFAED YE 00
#008075
Highlight
Highlight for feedback
#edfbfa
Highlight Bg

Icon

#051a3f
Fill

Nav

Nav
#051a3f
Text
#ffffff
Bg