DESIGN TEMPLATE

Design Handoff Spec Template

Developer handoff: components, states, layout, interactions, accessibility, and copy.

Use this template

What's inside

Field	Details
Feature
Designer
Engineer	Who's building this
Design File	Link to designs (Figma, Sketch, InVision, etc.)
Status	Ready for Dev

What You're Building

What this feature does from the user's perspective. The engineer should understand the intent, not just the pixels.

User Flow

Entry point: how the user gets here
Happy path: steps from start to completion
Exit: where the user goes after

Components & States

Component	States	Notes
Component name	Default, hover, active, disabled, loading, error, empty

Layout & Spacing

Element	Value	Notes
Container padding	Xpx or token
Item spacing
Max width
Breakpoints	Mobile / Tablet / Desktop

Interactions

Trigger	Behavior	Duration
User action	What happens	Transition or instant

Responsive

Mobile: what changes (hidden elements, stacked layout, collapsed sections)
Touch targets: minimum 44x44px

Accessibility

Contrast meets WCAG AA (4.5:1 text, 3:1 large text)
Focus states on all interactive elements
Images have alt text
Form inputs have labels (not just placeholders)
Keyboard navigation works

Copy

Element	Copy	Notes
Heading	Exact text
Button		Verb-first
Empty state
Error message		What happened + what to do

Assets

Icons: from library or exported? Names
Images: source (uploaded, API, static)
Fonts: anything non-standard

Other Design templates