This is the long version of the [design-system distillation](/knowledge/articles/iart-1):
every token, why it exists, and how the layers compose.

## Three layers

The system is deliberately thin — three layers, each mapping onto the next:

1. **Primitives** — the raw `oklch` values, defined once.
2. **Semantic roles** — `--background`, `--foreground`, `--accent`, and friends.
3. **The theme map** — `@theme inline` binding roles to Tailwind utilities.

Only the semantic layer is used in components. Nothing references a primitive
directly, which is what makes a re-theme a single edit.

## The one accent rule

There is exactly one accent hue. Everything expressive routes through it, so the
brand reads as one voice:

```css
--accent: oklch(0.72 0.13 250);
```

Use it for the thing you want the eye to land on — a primary action, a live
badge — and nowhere else. Restraint is the feature.