# UI Design System: {{titleCase FEATURE_NAME}}

| Field | Value |
|-------|-------|
| **Feature** | {{FEATURE_NAME}} |
| **Created** | {{DATE}} |
| **Project** | {{PROJECT_NAME}} |

---

## Color Palette

### Primary Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--color-primary` | #0078D4 | Primary actions, links |
| `--color-primary-hover` | #106EBE | Hover states |

### Semantic Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--color-success` | #107C10 | Success states |
| `--color-warning` | #F7630C | Warnings |
| `--color-error` | #D13438 | Errors |

---

## Typography

| Token | Size | Weight | Usage |
|-------|------|--------|-------|
| `--text-h1` | 24px | 600 | Section headers |
| `--text-body` | 14px | 400 | Body text |
| `--text-caption` | 12px | 400 | Labels |

---

## Spacing

| Token | Value | Usage |
|-------|-------|-------|
| `--space-sm` | 8px | Compact spacing |
| `--space-md` | 16px | Standard spacing |
| `--space-lg` | 24px | Wide spacing |

---

## Components

### Buttons
- **Primary**: `--color-primary` background, white text
- **Secondary**: Transparent, `--color-primary` border
- **Sizes**: Small (24px), Medium (32px), Large (40px)

### Forms
- **Input height**: 32px
- **Focus**: 2px solid `--color-primary`
- **Error**: 1px solid `--color-error`

---

## Accessibility
- [ ] 4.5:1 contrast ratio (WCAG AA)
- [ ] Touch targets minimum 44x44px
- [ ] Keyboard navigation supported

---

## Responsive Breakpoints
- **Mobile**: < 768px
- **Tablet**: 768px - 1199px
- **Desktop**: ≥ 1200px

---

*Generated with MORPH Framework*