design-tokenslisted

# Design tokens A measured value is a symptom; the token is the fix. `font-size: 18px` tells an implementer what you saw, `text-lg where the spec is text-xl` tells them what to change. Report both. ## Where the table lives Read the token table **once per run**, from source — not per element (`context-discipline`). - **CSS custom properties** — `:root {}` in a global stylesheet, or Tailwind v4's `@theme`. The only kind readable at runtime: `getComputedStyle(el).getPropertyValue('--space-3')` resolves them, and `getComputedStyle(document.documentElement)` enumerates the whole table. - **Tailwind (v3)** — `tailwind.config.*` under `theme` / `theme.extend`. Utility classes compile to literal values, so the class list on the element is the token: `p-4` *is* the finding, and the class attribute is worth reading alongside the computed style. - **SCSS / Less variables** — `$spacing-md`, `@brand-primary`. Compiled away entirely; nothing in the browser knows they existed. Grep the source for the declarations and match numerically. - **A tokens file** — `tokens.json`, Style Dictionary output, a `design-tokens` package. The most authoritative source when present; prefer it over inferring the scale from usage. - **Figma variables / styles** — the reference side of the comparison. A Figma value bound to a named variable is the spec's token; an unbound raw value in Figma is a design-side smell worth one line in the report. ## Mapping a measured value back Match the mea