# Design System

## Color Palette

| Token | Value | Usage |
|-------|-------|-------|
| primary-500 | _#..._ | Primary actions, links |
| secondary-500 | _#..._ | Secondary actions |
| neutral-100 | _#..._ | Backgrounds |
| neutral-900 | _#..._ | Body text |
| success | _#..._ | Success states |
| error | _#..._ | Error states |
| warning | _#..._ | Warning states |

## Typography

| Token | Font | Size | Weight | Usage |
|-------|------|------|--------|-------|
| heading-1 | _..._ | _..._ | _..._ | Page titles |
| heading-2 | _..._ | _..._ | _..._ | Section titles |
| body | _..._ | _..._ | _..._ | Body text |
| caption | _..._ | _..._ | _..._ | Labels, captions |

## Spacing Scale

Base unit: _4px_

| Token | Value | Usage |
|-------|-------|-------|
| xs | _4px_ | _..._ |
| sm | _8px_ | _..._ |
| md | _16px_ | _..._ |
| lg | _24px_ | _..._ |
| xl | _32px_ | _..._ |
| 2xl | _48px_ | _..._ |

## Component Patterns

### Buttons
_Variants, sizes, states_

### Inputs
_Text, select, checkbox, radio — states and validation_

### Cards
_Layout, elevation, content structure_

## Brand Guidelines

_Logo usage, iconography, visual tone_

## Responsive Breakpoints

| Name | Min width | Notes |
|------|-----------|-------|
| mobile | _0px_ | _..._ |
| tablet | _768px_ | _..._ |
| desktop | _1024px_ | _..._ |

---
_Generated by Clipper. Fill in during design-system task._