Skip to main content
Colour System is the third standard section. It contains every approved colour in the brand: primary, secondary, accent, and neutral, with the full set of values for screen and print, plus the accessibility pairings that have been pre-checked against WCAG 2.2 AA.

​
What lives here

A complete Colour System section has five block groups:
  1. The palette. Every colour as a swatch with its hex value, RGB, CMYK, and Pantone (where assigned). Includes the colour’s role (primary, secondary, accent, neutral) and its name in the brand’s vocabulary.
  2. Accessibility pairings. A matrix showing which foreground-on-background combinations pass WCAG 2.2 AA (4.5:1 for body text, 3:1 for large text and graphics). Pre-checked, with the contrast ratio shown.
  3. Use guidance. Per-colour notes: where the colour is used, where it is not used, and any reserved usage. The “this red is for errors only” rule.
  4. Tints and shades. If the brand uses tinted or shaded variants of palette colours, the approved tints are listed with their values. Improvised tints are not approved.
  5. Code values for handoff. CSS custom properties, design-token names, the Tailwind/Figma configuration the team’s tooling uses. Copyable as code.

​
Who edits this section

The brand owner. Editors with Colour System edit rights. MadeBy_ during a maintenance or evolution engagement. Team members raise Update Requests when a new use case needs a colour the palette does not currently cover, when an accessibility pairing fails in production, or when a print partner reports a colour drift.

​
What team members see

The palette is rendered as colour swatches at usable size, each labelled with its name and primary use. Hex, RGB, CMYK, and Pantone values copy with one click. The accessibility matrix is rendered as a table; pairings that pass are marked clearly. Where a pairing fails, the team sees an alternative recommended pairing instead.

​
How this section changes

Three common change patterns:
  1. A new accent is added. A campaign or sub-brand needs a colour the palette does not cover. The brand owner decides whether the new colour is permanent (added to the palette) or temporary (lives in a Horizon).
  2. An existing colour is retired. A colour falls out of use. It is marked deprecated; new uses are blocked; existing uses are migrated over a period. Once the migration is complete, the colour is moved to history.
  3. Pantone alignment is added. The brand has been digital-only; print becomes a use case. The team back-fills Pantone values across the palette.
Major changes (a palette overhaul, a primary colour change) are brand evolution work and run as projects, not edits.

​
Common mistakes

Five mistakes show up repeatedly in Colour System sections:
  1. Hex without Pantone, when print is in use. The team prints; the printer interprets the hex; the colour drifts. Provide Pantone (or a CMYK match the printer has confirmed) for every colour the brand prints.
  2. Accessibility pairings not pre-checked. The matrix is missing or incomplete. The team has to check pairings themselves on every new screen. Pre-check every plausible pairing.
  3. No reserved-usage rules. Red is the brand colour; red is also used for errors. The team is left guessing which red to use. State the rule.
  4. Improvised tints accumulating. The team adds a 60% tint of the primary because a layout needed lightness. Six months later there are five different tints. Approve and document the tints the brand uses; reject improvisation by surfacing the approved alternative in search.
  5. Code values out of sync with the palette. The CSS custom properties say one hex; the swatch in the atlas says another. The atlas wins; the code needs updating. Run the check.

Typography

The second section.

Applications

Colour in context.

Accessibility statement

The accessibility target.