Foundation colours

The Foundation layer is where global colour values are given purposeful, functional roles within the design system.

Summary

The Foundation layer is where raw colour swatches are transformed into tokens like text-primary, action-01, and success-01, each assigned to communicate specific states or functions. These tokens provide consistency and clarity across interfaces by expressing things like primary text, interactive elements, feedback states, and component surfaces. The Foundation layer acts as a vital bridge between raw colour values and practical application, allowing for scalable, themeable design across the system.

Text colours

Text primary Black
Text secondary Neutral 80
Text muted Black tint 60
Text active Info 60
Text light White

UI colours

UI background 01 White
UI background 02 Neutral 10
UI background 03 Neutral 20
UI background 04 Neutral 30
UI overlay 01 Black tint 10
UI overlay 02 Black tint 20
UI overlay 03 Black tint 30
UI overlay 04 Black tint 60
UI border 01 Neutral 60
UI border 02 Neutral 20
UI border 03 Black tint 30
UI border 04 White

Action colours

Action 01 Primary 60
Action 02 Primary 40
Action 03 Primary 80
Action 04 Primary tint 10
Action 05 Black tint 30
Action 06 Neutral 60
Action 07 White
Action 08 Primary 100
Action text 01 Primary 60
Action text 02 White
Action text 03 Black tint 70
Action text 04 Neutral 80
Action text 05 Neutral 90

Action danger colours

Action danger 01 Danger 60
Action danger 02 Danger 70
Action danger 03 Danger 90
Action danger 04 Danger tint 10
Action text danger 01 Danger 60

State colours

Disabled 01 Neutral 30
Disabled 02 Neutral 40
Disabled 03 Neutral 50
Disabled 04 White
Disabled overlay 01 Black tint 30
Disabled overlay 02 Black tint 40
Disabled overlay 03 Black tint 50
Focus 01 Info 60
Success 01 Valid 60
Error 01 Danger 60

Feedback colours

Feedback background info Info 10
Feedback background success Valid 10
Feedback background warning Caution 10
Feedback background error Danger 10
Feedback overlay info Info tint 10
Feedback overlay success Valid tint 10
Feedback overlay warning Caution tint 10
Feedback overlay error Danger tint 10
Feedback border info Info 50
Feedback border success Valid 60
Feedback border warning Caution 80
Feedback border error Danger 60
Feedback message info Info 60
Feedback message success Valid 70
Feedback message warning Caution 80
Feedback message error Danger 60
Feedback body info Info 100
Feedback body success Valid 100
Feedback body warning Caution 100
Feedback body error Danger 100
Feedback shadow info Info 100
Feedback shadow success Valid 100
Feedback shadow warning Caution 100
Feedback shadow error Danger 100

Expressive colours

Expressive pale Primary 10
Expressive pale overlay Primary tint 10
Expressive soft Primary 20
Expressive soft overlay Primary tint 20
Expressive deep Primary 60
Expressive rich Primary 90
Expressive secondary pale Accent 01 10
Expressive secondary pale overlay Accent 01 tint 10
Expressive secondary soft Accent 01 20
Expressive secondary soft overlay Accent 01 tint 20
Expressive secondary deep Accent 01 60
Expressive secondary rich Accent 01 90
Expressive tertiary pale Accent 02 10
Expressive tertiary pale overlay Accent 02 tint 10
Expressive tertiary soft Accent 02 20
Expressive tertiary soft overlay Accent 02 tint 20
Expressive tertiary deep Accent 02 60
Expressive tertiary rich Accent 02 90
Expressive quaternary pale Accent 03 10
Expressive quaternary pale overlay Accent 03 tint 10
Expressive quaternary soft Accent 03 20
Expressive quaternary soft overlay Accent 03 tint 20
Expressive quaternary deep Accent 03 60
Expressive quaternary rich Accent 03 90