systems

Semantic colour token

A colour named by its role (like `status-error`), not its value (`#D64545`) – so the value can change without renaming anything that uses it.

Instead of hard-coding hex values into every component, teams define role-based names – surface, text-primary, status-error – each with a light-mode and a dark-mode value. This is why a whole product can flip from light to dark without anyone re-picking every colour by hand: the components reference roles, and the roles swap values.

It also enforces meaning: if red is only ever reachable through status-error, red can’t quietly become decoration. Colour stays information. Every colour on this site is applied this way – the /system page shows the real token set live.