Component Library Design System Creator

You are a design systems engineer who builds component libraries. Create a design system foundation for this project.

Project type: [WEB / MOBILE / BOTH]
Framework: [REACT / VUE / ANGULAR / REACT NATIVE]
Styling approach: [TAILWIND / CSS-IN-JS / SCSS / CSS MODULES]
Existing brand: [COLORS, FONTS IF KNOWN]
Accessibility target: [WCAG AA / AAA]

Provide:

**Design Tokens**
```javascript
const tokens = {
  colors: {
    primary: {
      50: '#...',
      // Full scale
    },
    semantic: {
      success: '...',
      error: '...',
      warning: '...',
      info: '...'
    }
  },
  spacing: {
    // 4px base scale
  },
  typography: {
    fontFamilies: {},
    fontSizes: {},
    lineHeights: {},
    fontWeights: {}
  },
  radii: {},
  shadows: {},
  breakpoints: {}
}
```

**Base Components**

1. **Button**
```[language]
// Full implementation with:
// - Variants (primary, secondary, ghost)
// - Sizes (sm, md, lg)
// - States (disabled, loading)
// - Icons
// - Full accessibility
```

2. **Input**
```[language]
// Full implementation
```

3. **Card**
```[language]
// Full implementation
```

**Component API Guidelines**
- Prop naming conventions
- Composition patterns
- Ref forwarding
- As prop for polymorphism

**Theming System**
```[language]
// Theme provider
// Theme switching
// Dark mode support
```

**Documentation Template**
- Component overview
- Props table
- Usage examples
- Do's and don'ts
- Accessibility notes

**Testing Setup**
- Unit tests
- Visual regression tests
- Accessibility tests
- Interaction tests

**Package Structure**
```
packages/
├── tokens/
├── primitives/
├── components/
└── hooks/
```

**Storybook Setup**
- Story format
- Args and controls
- Documentation addon

You are a design systems engineer who builds component libraries. Create a design system foundation for this project.

Project type: [WEB / MOBILE / BOTH]
Framework: [REACT / VUE / ANGULAR / REACT NATIVE]
Styling approach: [TAILWIND / CSS-IN-JS / SCSS / CSS MODULES]
Existing brand: [COLORS, FONTS IF KNOWN]
Accessibility target: [WCAG AA / AAA]

Provide:

**Design Tokens**
```javascript
const tokens = {
  colors: {
    primary: {
      50: '#...',
      // Full scale
    },
    semantic: {
      success: '...',
      error: '...',
      warning: '...',
      info: '...'
    }
  },
  spacing: {
    // 4px base scale
  },
  typography: {
    fontFamilies: {},
    fontSizes: {},
    lineHeights: {},
    fontWeights: {}
  },
  radii: {},
  shadows: {},
  breakpoints: {}
}
```

**Base Components**

1. **Button**
```[language]
// Full implementation with:
// - Variants (primary, secondary, ghost)
// - Sizes (sm, md, lg)
// - States (disabled, loading)
// - Icons
// - Full accessibility
```

2. **Input**
```[language]
// Full implementation
```

3. **Card**
```[language]
// Full implementation
```

**Component API Guidelines**
- Prop naming conventions
- Composition patterns
- Ref forwarding
- As prop for polymorphism

**Theming System**
```[language]
// Theme provider
// Theme switching
// Dark mode support
```

**Documentation Template**
- Component overview
- Props table
- Usage examples
- Do's and don'ts
- Accessibility notes

**Testing Setup**
- Unit tests
- Visual regression tests
- Accessibility tests
- Interaction tests

**Package Structure**
```
packages/
├── tokens/
├── primitives/
├── components/
└── hooks/
```

**Storybook Setup**
- Story format
- Args and controls
- Documentation addon