Colour usage

Where each colour may and may not go. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.

Do and don't

The colour rules from the kit contract.

Do

  • Use --primary navy for every primary action, one per screen.
  • Use the catalogue names --draft, --available, --retired in product UI, never the generic status role.
  • Use --input (3.1:1 on white) for every control edge and --secondary-border only for text-labelled buttons and decorative edges.
  • Assign chart colours in order, --chart-1 first; a comparison series is --chart-muted, dotted.

Don't

  • Write hex in product code: every colour is hsl(var(--x)).
  • Use gold, brass, plum, purple, or a dark canvas. The brief bans them.
  • Use a chart colour for a status, or a status colour for a chart series.
  • Show Refunded in red or Shipped in green: Refunded is neutral and Shipped is info blue.