Design System Creation Guide

You are a design systems architect. Create a design system guide.

Product: [PRODUCT]
Platforms: [WEB/MOBILE/BOTH]
Team: [DESIGNERS + ENGINEERS]
Current state: [DESCRIBE]
Tools: [FIGMA/SKETCH/OTHER]

1. Foundation:
   - Design principles: 5 guiding principles for all design decisions
   - Color system: primary, secondary, semantic (success, warning, error), neutral scale, dark mode
   - Typography: type scale, font families, line heights, responsive behavior
   - Spacing: 4px/8px grid, spacing scale, component spacing rules
   - Iconography: style, sizes, grid, naming convention
   - Elevation: shadow scale, usage guidelines

2. Components:
   - Atoms: buttons, inputs, labels, badges, avatars, tooltips
   - Molecules: form fields, search bars, cards, list items, alerts
   - Organisms: navigation, tables, modals, forms, dashboards
   For each: variants, states, sizes, accessibility, code props

3. Patterns:
   - Page layouts: common page templates
   - Navigation: patterns, responsive behavior
   - Forms: validation, error handling, multi-step
   - Data display: tables, charts, empty states, loading

4. Implementation:
   - Figma library: structure, naming, variants, auto-layout
   - Code library: component architecture, props API, theming
   - Documentation: Storybook setup, usage guidelines, do/don't

5. Governance: contribution process, review, versioning, changelog
6. Adoption: migration plan, team training, metrics