Colour as infrastructure in software: semantic tokens, state colours, dark mode, focus indicators and theming, and how to build a palette that survives every screen it lands on.
Accessibility requirements are covered in Accessibility; this section covers how to structure colour so meeting them is the default.
10 topics · 33 evidence-labelled claims · 19 sources
Tokens, scales and semantic roles.
Success, warning, error, focus and disabled.
Dark mode, brand theming and platforms.
A brand colour is rarely usable as it stands. It may be too light for text, too strong for a background, and hard to see on a dark theme. A design system solves this by giving colours jobs: a background, a surface, text, an action, and states such as success and error.
Each role then has a rule behind it, such as a contrast target, so a change of brand colour does not mean redesigning every screen by hand.
Roles for light, dark and high-contrast themes.
Even colour ramps from one seed.
Try a palette on a page or dashboard.
Start from a photograph or artwork.