Semantic Colors
Semantic colors are base colors that have been given a role, or meaning. They will be the colors we use throughout our site. Semantic colors help us know when and where to use certain colors, rather than guessing what shade of grey you should use. They drastically improve consistency and infinitely simplify the building process for you and other designers/devs.
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