Colour in Interfaces and Design Systems

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

Tools

Palette Checker

Structuring colour

Tokens, scales and semantic roles.

How should colour design tokens be structured?In layers.How do you build a colour scale where every step has predictable contrast?Define each step by lightness in a space where lightness tracks luminance — CIELAB L*, or OKLCH as a close proxy — rather than by…What semantic colour roles does a design system need?Fewer than most systems start with: surfaces (default, raised, sunken, inverse), content on those surfaces (primary, secondary an…How do you use a brand colour in a UI when it fails contrast?Keep the brand colour for large areas, illustration and moments of identity, and derive darker (or lighter) variants of the same…

States and feedback

Success, warning, error, focus and disabled.

How should a design system choose its error, warning and success colours?Give each status a family, not a single colour: a strong variant for text and icons that meets 4.What colour should a design system's focus ring be?One that works on every surface in the system, not just the page background.How should hover, pressed and disabled states change a component's colour?Derive them from the rest colour by small, consistent lightness steps — typically darker on hover and darker again when pressed o…

Themes and modes

Dark mode, brand theming and platforms.

How do you build a dark mode palette rather than just inverting colours?Remap semantic tokens, don't invert values.How can one design system support several brands' colours?Keep components on semantic tokens and let each brand supply only its base palette plus a small mapping.Why do design-system colours look different on web, iOS and Android?Because each platform defaults to different colour handling.