Semantic Colors
Neutral
Used across the entire design system and components for background fills, strokes and more. Inverse colors are useful for contrasting containers, like a dark container on top of a white page.
Surface Main
White
/
900
Surface Subtle
100
/
800
Surface Strong
200
/
700
[Inverse] Surface Main
900
/
White
[Inverse] Surface Subtle
800
/
100
[Inverse] Surface Strong
700
/
200
Stroke
200
/
700
[Inverse] Stroke
700
/
200
Primary / Brand
Used as the main salient color on your site for buttons, branded elements etc. By default it's using shades of grey, but you can change them to reflect your own brand colors.
Surface Subtle
50
/
950
Surface Strong
200
/
700
Main Default / Brand
500
/
400
Main Hover
600
/
300
Main Active
700
/
200
Main Strong
900
/
100
Secondary
Used as accents or additional colors if needed. They should be used sparingly. If you require secondary colours, choose from the base colours, or add your own colors.
Surface Subtle
50
/
950
Surface Strong
200
/
700
Main Default
500
/
400
Main Hover
600
/
300
Main Active
700
/
200
Main Strong
900
/
100
Tertiary
Used as additional accents or colors if needed. They should be used sparingly. If you require tertiary colours, choose from the base colours, or add your own colors.
Surface Subtle
50
/
950
Surface Strong
200
/
700
Main Default
500
/
400
Main Hover
600
/
300
Main Active
700
/
200
Main Strong
900
/
100
Success
Used to indicate a positive action, success or complete states.
Surface Subtle
50
/
950
Surface Strong
200
/
700
Main Default
500
/
400
Main Hover
600
/
300
Main Active
700
/
200
Main Strong
900
/
100
Warning
Used to indicate a warning or that an minor issue has occured.
Surface Subtle
50
/
950
Surface Strong
200
/
700
Main Default
500
/
400
Main Hover
600
/
300
Main Active
700
/
200
Main Strong
900
/
100
Danger
Used to indicate a negative / destructive action, an error or incomplete states.
Surface Subtle
50
/
950
Surface Strong
200
/
700
Main Default
500
/
400
Main Hover
600
/
300
Main Active
700
/
200
Main Strong
900
/
100
Text
Used for all text elements. Primary should be used on main with high contrast text like headings and text blocks, subtle can be used for longer paragraphs and subtlest can be used for lesser important text.
Main
950
/
White
Subtle
700
/
200
Subtlest
500
/
400
[Inverse] Main
White
/
950
[Inverse] Subtle
200
/
700
[Inverse] Subtlest
400
/
500
Alphas
Used for all text elements. Primary should be used on main with high contrast text like headings and text blocks, subtle can be used for longer paragraphs and subtlest can be used for lesser important text.
Default 60%
#FFFFFF
/
#0A0A0A
Inverse 60%
#0A0A0A
/
#FFFFFF
Default 0%
#0A0A0A
/
#FFFFFF
Inverse 0%
#0A0A0A
/
#FFFFFF
Base Colors
Neutral
50
100
200
300
400
500
600
700
800
900
950
Success
50
100
200
300
400
500
600
700
800
900
950
Warning
50
100
200
300
400
500
600
700
800
900
950
Danger
50
100
200
300
400
500
600
700
800
900
950
Slate
50
100
200
300
400
500
600
700
800
900
950
Grey
50
100
200
300
400
500
600
700
800
900
950
Zinc
50
100
200
300
400
500
600
700
800
900
950
Stone
50
100
200
300
400
500
600
700
800
900
950
Orange
50
100
200
300
400
500
600
700
800
900
950
Yellow
50
100
200
300
400
500
600
700
800
900
950
Lime
50
100
200
300
400
500
600
700
800
900
950
Emerald
50
100
200
300
400
500
600
700
800
900
950
Teal
50
100
200
300
400
500
600
700
800
900
950
Cyan
50
100
200
300
400
500
600
700
800
900
950
Sky
50
100
200
300
400
500
600
700
800
900
950
Blue
50
100
200
300
400
500
600
700
800
900
950
Indigo
50
100
200
300
400
500
600
700
800
900
950
Purple
50
100
200
300
400
500
600
700
800
900
950
Fuchsia
50
100
200
300
400
500
600
700
800
900
950
Pink
50
100
200
300
400
500
600
700
800
900
950
Rose
50
100
200
300
400
500
600
700
800
900
950