Colour system

A colour system is the organised palette of a design system — not just brand red and a stack of greys, but the full set of colours expressed as roles (color-action, color-feedback, color-surface), scales (50–900 by lightness) and theme variants. It's foundations work, expressed as design tokens.

A good colour system makes theming and dark mode tractable, ensures every combination passes WCAG contrast, and stops designers reaching for "another grey" when one of the eleven existing greys would do. Material 3, Polaris and Carbon all publish their colour systems openly — worth studying before designing your own.

Related: Foundations · Design tokens · Semantic tokens · Dark mode