Learning on Web Dev Open is free for all.

Design Craft > Colour with a point of viewSemantic, not decorative
Phase 02Colour with a point of view102 of 434

Semantic, not decorative

A token called --green-500 will outlive its usefulness the first time the brand changes. One called --colour-success will not.

Concept12 minAI pair

There are two layers and they answer different questions. Primitives name what a colour is: --pine-600, --gold-400. Semantics name what it does: --surface, --text-muted, --border-strong, --accent. Components only ever refer to the second layer, which is what makes a rebrand a change to one file.

The failure mode is a one-to-one mapping where every primitive gets exactly one semantic alias, which achieves nothing but a longer file. Real systems reuse the same primitive for several roles and split one role across themes, and that asymmetry is the point of having two layers at all.

You should now be able to

  • Name colour tokens by role rather than appearance
  • Explain why a value-named token blocks theming
  • Map primitives to semantics without a one-to-one collapse
Ask the community

Loading…