design-system

# Design System Build, evolve, or audit a design system. Stack-agnostic in principle. Implementation is stack-specific (Figma, Storybook, code library, etc.) but the structure and governance principles transfer. This skill is for building the system. For applying a system to specific pages or components, use `design-standards`. For brand visual identity, use `brand-identity`. --- ## When to use - Building a design system from scratch - Auditing an existing system for gaps or fragmentation - Defining design tokens at the system level - Structuring a component library - Establishing contribution and governance models - Migrating from ad-hoc components to a documented system ## When NOT to use - Designing a single page or component (use `design-standards`) - Brand identity work (use `brand-identity`) - Component-level frontend implementation (use `frontend-component-build`) - Pure design documentation for marketing (use `brand-style-guide`) --- ## Required inputs - The brand identity (tokens, voice, imagery direction) - The product surfaces the system needs to support (web, mobile, marketing, app, internal tools) - The team and its working tools (Figma, code framework, doc platform) - Existing components, even if undocumented - Constraints (accessibility requirements, performance targets, browser support) If brand identity is undefined, run `brand-identity` first. --- ## The framework: 5 layers A complete design system has five layers, stacked. Each layer feeds the...