design-tokens-pipelinelisted

<!-- last-verified: 2026-07 --> # Design tokens pipeline One source of truth for every design value. Author once in DTCG, build once with Style Dictionary, consume everywhere as CSS custom properties. Never hand-write a hex or spacing value into a component — it belongs in a token. ## 1. DTCG format (stable since 2025.10) The W3C Design Tokens Community Group format reached its first stable version on **2025-10-28**. Author every token as an object with two required keys: - **`$value`** — the raw value (or an alias). - **`$type`** — one of the standard types below. ```json { "color": { "brand": { "500": { "$value": "#3B5BFF", "$type": "color" } } }, "space": { "md": { "$value": "16px", "$type": "dimension" } } } ``` **Aliasing** references another token by dotted path in curly braces — the way you avoid duplicating a value: ```json { "button": { "bg": { "$value": "{color.brand.500}", "$type": "color" } } } ``` Types you will use: `color`, `dimension`, `fontFamily`, `duration`, `cubicBezier`, `shadow`, and the composite `typography` (bundles fontFamily, fontSize, fontWeight, lineHeight, letterSpacing into one token). **`duration` and `cubicBezier` are shared with animation work** — the same tokens that feed transitions are consumed by `motion-design-principles` and the motion libraries. Author easing curves and timing bands here once; don't let motion code invent its own. ## 2. The pipeline ``` DTCG tokens (.json) → Style Dictionary v4 (DTCG-aware build)