Colours & tokens

Every colour in the product resolves to a CSS custom property. No component hard-codes one.

When to use it

The brand block at the top of tokens.css is the only place to edit for a re-skin: eight values on :root and eight on .dark. Everything else refers to --accent-*, so buttons, links, focus rings, active navigation, selected rows, tags and charts all follow from that one edit. Status colours (won / lost / overdue) are deliberately independent of the brand, because in a CRM they carry more meaning than the brand does.

Surfaces and text

Background and text ramps, light and dark. Toggle the theme to see both.

--bg-primaryCards, tables, menus

--bg-secondaryThe page behind them

--bg-tertiaryHover, inset fields

--bg-quaternarySelection, not a surface

Tag palette

Eleven colours, each a background/foreground pair that holds contrast in both themes.

grayblueindigocyangreenjadeamberorangeredpurplepink