systems

Semantic token

A token named by purpose – `color-status-error` – that references a primitive, so the underlying value can change without renaming anything that uses it.

The middle layer of the three-layer token architecture, and the one components actually consume. A semantic token answers “what is this for” (bg-raised, text-secondary, accent-solid) and delegates “what colour is that exactly” to the primitive it points at.

This is the layer that survives a palette swap – repoint the alias, every component follows – and it’s why the same components can render a light theme and a dark theme without a single component edit. A third, optional layer (component tokens, like button-primary-background) exists for the rare case where one component must diverge; most systems add those only when a real divergence appears. Semantic colour tokens are this idea applied to colour specifically.