design-system

1# Design System
2 
3Build, 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.
4 
5This 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`.
6 
7---
8 
9## When to use
10 
11- Building a design system from scratch
12- Auditing an existing system for gaps or fragmentation
13- Defining design tokens at the system level
14- Structuring a component library
15- Establishing contribution and governance models
16- Migrating from ad-hoc components to a documented system
17 
18## When NOT to use
19 
20- Designing a single page or component (use `design-standards`)
21- Brand identity work (use `brand-identity`)
22- Component-level frontend implementation (use `frontend-component-build`)
23- Pure design documentation for marketing (use `brand-style-guide`)
24 
25---
26 
27## Required inputs
28 
29- The brand identity (tokens, voice, imagery direction)
30- The product surfaces the system needs to support (web, mobile, marketing, app, internal tools)
31- The team and its working tools (Figma, code framework, doc platform)
32- Existing components, even if undocumented
33- Constraints (accessibility requirements, performance targets, browser support)
34 
35If brand identity is undefined, run `brand-identity` first.
36 
37---
38 
39## The framework: 5 layers
40…