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.
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.
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.
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.
Success
Used to indicate a positive action, success or complete states.
Warning
Used to indicate a warning or that an minor issue has occured.
Danger
Used to indicate a negative / destructive action, an error or incomplete states.
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.
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.
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