design-systems

# Design Systems (Deep Workflow) A design system is **shared UI infrastructure**: tokens, components, patterns, and governance so products feel cohesive without freezing innovation. ## When to Offer This Workflow **Trigger conditions:** - Multiple apps diverging visually; mounting accessibility debt - Launching or rebooting a component library; token refresh - Figma and production code drifting apart **Initial offer:** Use **six stages**: (1) strategy & principles, (2) design tokens, (3) components & API, (4) accessibility & content, (5) docs & tooling, (6) governance & adoption). Confirm framework (React/Vue/Svelte) and design tooling. --- ## Stage 1: Strategy & Principles **Goal:** Why the system exists (speed, a11y, brand); explicit non-goals (not every pixel must be centralized). **Exit condition:** One-page principles: density, tone, motion philosophy. --- ## Stage 2: Design Tokens **Goal:** Semantic color, type, space, radius, motion—names like `surface.default` instead of raw hex everywhere. ### Practices - Plan light/dark and density themes early --- ## Stage 3: Components & API **Goal:** Composable primitives vs bloated “kitchen sink” widgets; stable props API with semver discipline. ### Practices - Prefer composition / slots over prop explosion --- ## Stage 4: Accessibility & Content **Goal:** WCAG baseline per component: focus rings, labels, error patterns, live regions where needed. --- ## Stage 5: Docs & Tooling **Goal:** Storybook or equivalent; usage guidelines; code snippets; do/don’t examples. --- ## Stage 6: Governance & Adoption **Goal:** Contribution guide; deprecation policy; champions or office hours per product line. --- ## Final Review Checklist - [ ] Strategy and principles agreed - [ ] Token layer semantic and themeable - [ ] Component APIs stable and composable - [ ] Accessibility baseline per component - [ ] Documentation and live examples - [ ] Contribution and deprecation governance ## Tips for Effective Guidance - Figma ↔ code parity needs owners and a sync cadence. - Do not ship a component without keyboard and screen-reader checks. ## Handling Deviations - Small teams: start with tokens + a few primitives—defer full catalog.