System Specification

Create a design system specification for: {{project_name}}

Brand: {{brand_style}}
Platform: {{platform}}
Framework: {{framework}}
Existing brand assets: {{existing_assets}}

Specify:

1. **Design tokens**:
   - Color palette: primary, secondary, neutral, semantic (success, warning, error, info)
   - Each with: hex value, usage guideline, accessibility note
   - Typography scale: font families, sizes (8 steps), weights, line heights
   - Spacing scale: 4px base unit, named tokens (xs through 3xl)
   - Border radius: small, medium, large, full
   - Shadow/elevation: 3-4 levels with values

2. **Component inventory** (for each):
   - Button (primary, secondary, ghost, destructive; sizes S/M/L; states)
   - Input (text, number, search, textarea; states: default, focus, error, disabled)
   - Select/Dropdown
   - Checkbox, Radio, Toggle
   - Card
   - Modal/Dialog
   - Toast/Notification
   - Badge/Tag
   - Avatar
   - Navigation (tabs, breadcrumbs)

3. **Layout patterns**:
   - Grid system (12-col, responsive breakpoints)
   - Container widths
   - Common page layouts (sidebar + content, full-width, centered)

4. **Interaction patterns**:
   - Animation/transition timing (duration, easing curves)
   - Loading states (skeleton, spinner, progress)
   - Empty states
   - Error states

5. **Accessibility requirements**: WCAG 2.1 AA compliance checklist