design-design-systemlisted

# Design System / Tokens A design system is decisions recorded once and referenced everywhere. Start with the smallest set that kills inconsistency — not a component library for its own sake. ## Token layers (keep them strictly ordered) 1. **Primitive** — raw values, no meaning: `gray-50…900`, `blue-500`, `space-4`. Never used directly in components. 2. **Semantic** — meaning-bound: `bg-surface`, `text-primary`, `border-subtle`, `accent-default`, `space-section`. Dark mode swaps *only* this layer. 3. **Component** — `button-primary-bg`, `card-padding`. Thin layer; most systems don't need it until component count > ~20. ## Minimal token set - **Color**: neutral scale 9 steps + accent 1–2 + status 4 (success/warning/error/info) + each semantic role mapped. Near-black is `neutral-900`, not a random #0B0B0B per component. - **Type**: display/h1–h4/body/small/caption; fluid clamp() where marketing meets product; ≤ 2 families, weights ≤ 4 per family. - **Space**: 4pt base (4/8/12/16/24/32/48/64). Radius: 3 steps max. Shadow: 3 elevations max. - **Motion**: duration tokens (fast/base/slow ≈ 150/250/400ms) + one easing family; reduced-motion flips durations to ~0. - **z-index**: documented scale (sticky < overlay < modal < toast), no magic numbers. ## Migration rule (greenfield is easy; the real job is legacy) New tokens don't replace old values by grep alone. Build a mapping table first: every legacy value → nearest token → delta (exact / visual match / deliberate change). Delib