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.
