Semantic colours

Semantic roles that map to primitives per mode

Each colour here has a role, like "page background" or "error border", and maps to a different primitive value depending on whether the UI is in light or dark mode. Components only reference these roles, so switching themes is just swapping which primitives each role points to. The shipped theme presets work the same way one level up: each is a generated stylesheet re-pointing these roles, applied by one data-brand attribute, with light and dark carried inside it. Each chip paints the live token, so it follows whichever theme is applied; the primitive and hex printed beside it are the base theme’s wiring. Toggle the mode above to see the values change. All 161 colour tokens are below, grouped by the role they play.