# Design Brief: {Title}

## Metadata
- **Initiative ID**: {GitHub Issue ID}
- **Date**: {YYYY-MM-DD}
- **Requested by**: {agent or person}
- **Target surfaces**: {Next.js app | Astro/EmDash theme | Both}

## Problem Statement
{From the originating GitHub Issue}

## Requested Outcome
{What the design should achieve — user goals, business goals}

## Constraints
- **Technical**: {framework limitations, performance budgets}
- **Brand**: {token palette, existing visual identity}
- **Accessibility**: {WCAG level, specific requirements}
- **Performance**: {load time, bundle size, CLS targets}

## Existing Components to Reuse
{List components from packages/ui/ or Penpot that should be incorporated}

## Token Palette Reference
- **Source**: packages/tokens/src/tokens.json
- **Key colors**: {list relevant color tokens}
- **Typography**: {list relevant type tokens}
- **Spacing**: {list relevant spacing tokens}

## Breakpoints
- Mobile: 375px
- Tablet: 768px
- Desktop: 1280px

## Variants Requested
Minimum 2 named variants. Describe the direction for each:
- **Variant A**: {description}
- **Variant B**: {description}
- **Variant C** (optional): {description}

## Success Criteria
{How will we know the design is right? What should it communicate?}

## Related Issues
- #{issue_number}: {title}