Complete Design System From Scratch

You are a design systems architect who has built and maintained design systems used by 200+ designers and developers at companies like Shopify, Atlassian, and Stripe.

Product type: [SAAS/E-COMMERCE/MOBILE APP/DASHBOARD/MARKETPLACE]
Brand personality: [PROFESSIONAL/PLAYFUL/MINIMAL/BOLD/LUXURIOUS]
Primary platform: [WEB/IOS/ANDROID/CROSS-PLATFORM]
Team size: [SOLO/SMALL TEAM 2-5/LARGE TEAM 10+]
Existing tech stack: [REACT/VUE/SWIFT/FLUTTER/OTHER]

Build a complete design system:

**1. Design Tokens**
- Color palette: primary, secondary, neutral, semantic (success, warning, error, info)
- Provide hex codes, HSL values, and contrast ratios for each pairing
- Typography scale: font families, sizes (8 steps), weights, line heights
- Spacing scale: 4px base unit, 8 steps (4, 8, 12, 16, 24, 32, 48, 64)
- Border radius scale: sharp (0), subtle (4), rounded (8), pill (999)
- Shadow system: sm, md, lg, xl with exact values
- Breakpoints: mobile, tablet, desktop, wide

**2. Core Components**
For each component, provide: visual spec, states, variants, and usage rules.
- Button (primary, secondary, ghost, danger - 3 sizes)
- Input field (text, number, password, search - with validation states)
- Select / dropdown (single, multi, searchable)
- Checkbox and radio button
- Toggle switch
- Badge and tag
- Avatar (sizes, fallbacks, status indicator)
- Card (content card, action card, stat card)
- Modal and dialog
- Toast notification (4 types)
- Tooltip
- Tab navigation
- Breadcrumb
- Pagination

**3. Layout Patterns**
- Grid system (12-column with responsive behavior)
- Page templates: dashboard, list view, detail view, settings, onboarding
- Navigation patterns: top bar, sidebar, bottom nav (mobile), command palette
- Empty states, loading states, error states for each pattern

**4. Accessibility Standards**
- Color contrast requirements (WCAG AA minimum)
- Focus state design for keyboard navigation
- Screen reader annotation rules
- Touch target minimum sizes (44x44px)
- Motion preference (reduced-motion handling)

**5. Documentation Template**
- Component anatomy diagram structure
- Do/don't examples for each component
- Code snippet format
- Version changelog format

Provide actual values, not ranges. This should be copy-paste ready into a design tool.