# TASK-{ID}: {Title}

> **Template**: Design
> **Created**: YYYY-MM-DD
> **Last Updated**: YYYY-MM-DD

---

## Status

| Field | Value |
|-------|-------|
| **State** | `pending` |
| **Priority** | P{0-3} |
| **Cell** | ux_ui |
| **Assigned To** | {agent-id or "unassigned"} |
| **Requested By** | {agent-id} |
| **For Initiative** | {initiative-id or "standalone"} |

## Timeline

| Milestone | Date |
|-----------|------|
| Requested | YYYY-MM-DD |
| Started | - |
| First Draft | - |
| QA Review | - |
| Revisions Complete | - |
| Handed Off | - |

---

## Overview

{What needs to be designed and why?}

## User Problem

{What user problem does this design solve?}

## Context

{Business context, previous attempts, constraints}

---

## Requirements

### Functional Requirements
- {Requirement 1}
- {Requirement 2}
- {Requirement 3}

### User Flows
{What user actions need to be supported?}
1. {Flow 1}
2. {Flow 2}

### Constraints
- {Technical constraint}
- {Brand constraint}
- {Platform constraint}

---

## Deliverables

### Required
- [ ] Mobile design (320-480px)
- [ ] Desktop design (1280px+)
- [ ] All interaction states
- [ ] Component specifications
- [ ] Handoff documentation

### Optional
- [ ] Tablet design (768-1024px)
- [ ] Interactive prototype
- [ ] Animation specifications
- [ ] Micro-interactions

---

## Design Assets

### Figma Links
| Asset | Link | Status |
|-------|------|--------|
| Main Design | {link} | {in progress / complete} |
| Prototype | {link} | {in progress / complete / N/A} |
| Component Specs | {link} | {in progress / complete} |

### States Checklist

| Component | Default | Hover | Active | Focus | Disabled | Loading | Error | Empty |
|-----------|---------|-------|--------|-------|----------|---------|-------|-------|
| {component} | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ |
| {component} | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ |

---

## Design System

### Existing Patterns to Use
- {Pattern 1}
- {Pattern 2}

### New Patterns Introduced
- {New pattern - document in design system}

### Design Tokens Used
| Category | Tokens |
|----------|--------|
| Colors | {list} |
| Spacing | {list} |
| Typography | {list} |

---

## Accessibility

- [ ] Color contrast verified (4.5:1 text, 3:1 large)
- [ ] Focus states designed
- [ ] Touch targets adequate (44px min)
- [ ] Color not sole indicator
- [ ] Keyboard flow considered

---

## Responsive Behavior

| Breakpoint | Behavior |
|------------|----------|
| Mobile (<768px) | {description} |
| Tablet (768-1024px) | {description} |
| Desktop (>1024px) | {description} |

---

## Design Decisions

### Decision 1: {Title}
- **Options**: {what was considered}
- **Decision**: {what was chosen}
- **Rationale**: {why}

---

## Frontend Handoff

### Handoff Checklist
- [ ] All states complete
- [ ] All breakpoints complete
- [ ] Specs documented in Figma
- [ ] Interactions documented
- [ ] Assets exportable
- [ ] Design tokens referenced (not hardcoded values)

### Implementation Notes
{Specific notes for frontend developers}

### Animations/Transitions
{Any animation specifications}

---

## QA Review

### Design QA Checklist
- [ ] Design system compliance
- [ ] All states present
- [ ] Accessibility requirements met
- [ ] Responsive designs complete
- [ ] Handoff documentation complete

### QA Notes
{Filled in by UX-QA}

---

## Quick Context Restore

**Current state**: Not started
**Design progress**: 0%
**States complete**: 0/X
**Breakpoints complete**: 0/3

---

## Notes

{Additional context, inspiration, user research insights}

---

## Changelog

| Date | Agent | Change |
|------|-------|--------|
| YYYY-MM-DD | {agent} | Design requested |