Colour system
A colour system defines a brand’s colours bindingly — primary and secondary colours with exact values for print and screen, plus rules for when each colour is used.
Colours are among the strongest recognition features. For them to look the same everywhere, each colour needs values for different media: CMYK for print, RGB and HEX for screens, and if needed spot colours such as Pantone and film colours for signage.
A good colour system includes more than the brand colour: neutral tones for backgrounds and text, accent colours for buttons and notices, colours for success and error — and it ensures sufficient contrast.
In digital products the colour system is implemented as design tokens; a change then adapts the whole website. Well planned, it also works in light and dark mode.
What to look out for
- Define values for print, screen and signage for each colour.
- Check contrast between text and background.
- Add neutral tones and accent colours, not just the brand colour.
- Maintain colours centrally as design tokens.
- Test the effect on different materials — paper, film, screen.
Common mistakes
- The brand colour looks different on flyer, website and vehicle.
- Text in the brand colour has too little contrast and is hard to read.
- Every department introduces its own shades.
Frequently asked questions
Screens mix colours from light (RGB), printing presses from ink on paper (CMYK). Not every screen colour can be printed exactly; that is why each colour needs matching values for both worlds.
Usually one or two brand colours, complemented by neutral tones and a few accent colours. Fewer are easier to recognise.