Design systemColour
A blue for action, greys for structure, and three status colours. Every value here is read from tokens.css.
Colour tokens are defined once, in src/ui/tokens/tokens.css. The swatches on this page are read from that file, so they always show what ships.
Name tokens by role first and shade second: --color-<group>-<step>. Use the variable, never the hex.
Primary
The brand blue. Use it for the main action, links, focus rings and selected states. --color-primary-500 is the brand colour; 50 and 100 are for tinted backgrounds such as a selected row or a hover.
Grey
Surfaces, borders, dividers, placeholder text and icons. Page backgrounds use 50, borders 100 or 200, and secondary text 500.
Text
Use these for type rather than picking a grey by eye. --color-text-secondary is #757A97, the same as --color-grey-500.
src/index.css also defines older aliases such as --text-secondary, which resolves to #383B55, a darker grey. New code should use --color-text-secondary.
Status
Each status has a solid colour for icons, dots and strong text, and a soft background for fills. Do not use status colours for decoration.
| Status | Use for |
|---|---|
| Green | Success, published, on track, positive change |
| Red | Errors, destructive actions, at risk, negative change |
| Orange | Warnings and anything that needs attention this week |
Purple
Reserved. It marks components in the Library and the Creative agent family. Do not use it as a general accent or for charts.
Icon
Icons take one of three greys by state, or the primary blue when they belong to an active or selected item.
In use
A typical card: primary blue for the eyebrow and the link, text-primary for the title, text-secondary for the description, and a status pill.
.pipeline-card__eyebrow { color: var(--color-primary-500); }
.pipeline-card__title { color: var(--color-text-primary); }
.pipeline-card__text { color: var(--color-text-secondary); }
.pipeline-card__status { background: var(--color-green-bg); color: var(--color-green); }Contrast
- Body text on white uses
--color-text-primary(#232532). --color-text-secondary(#757A97) is for supporting text at 12px or larger, never for long paragraphs.- Do not put white text on
--color-orange; use dark text on the soft background instead.