Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Color Systems

A structured palette of ramps and semantic aliases, so colour decisions are made once rather than per screen.

Definition

A colour system organises raw colour values into ramps, then maps those ramps to semantic roles through tokens. Designers and engineers consume the roles, not the raw values.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Building one
  3. Three-layer token structure
  4. In practice
  5. Continue from here

Building one

  1. 1

    Choose hues

    One neutral, one accent, four semantic. Add more only when a real need appears.

  2. 2

    Generate ramps

    Nine to twelve steps per hue, stepping perceptual lightness at consistent chroma.

  3. 3

    Verify contrast

    Produce a matrix of every foreground and background pair, and mark which combinations are permitted.

  4. 4

    Define semantic tokens

    Map roles such as surface, surface-raised, text-primary, border-subtle and action-primary onto ramp steps.

  5. 5

    Define the dark theme

    Remap the same semantic tokens to different ramp steps. Never invert values arithmetically.

  6. 6

    Document usage

    State which token to use in which situation, with examples of the wrong choice.

Three-layer token structure

css
:root {
  /* 1. Primitives: raw values, never used directly in components */
  --neutral-50:  oklch(0.985 0.002 90);
  --neutral-600: oklch(0.505 0.010 90);
  --neutral-900: oklch(0.215 0.012 90);
  --accent-600:  oklch(0.560 0.170 38);

  /* 2. Semantics: meaning, remapped per theme */
  --surface:        var(--neutral-50);
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --action:         var(--accent-600);
}

[data-theme="dark"] {
  --surface:        oklch(0.180 0.008 90);
  --text-primary:   oklch(0.960 0.003 90);
  --text-secondary: oklch(0.720 0.010 90);
  --action:         oklch(0.700 0.150 38);
}

/* 3. Components consume semantics only */
.button-primary { background: var(--action); }

Primitives hold values, semantics hold meaning, components consume semantics. Only the middle layer changes between themes.

In practice

Themes as token remapping

Multi-brand products

A product supporting several brands changes only the semantic layer per brand. Component code never changes, which is what makes multi-brand maintainable at all.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Often used with

These usually appear in the same screen or the same decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.