Design Handoff + Tokens Cheatsheet

Bridge design and engineering with clear specs, tokens, assets, and component states.

Treat this as a shared checklist so design intent ships intact.

Handoff Basics

Single source of truth
Link to the final design file and mark the shipped frame.
Versioned changes
Log what changed since the last handoff.
Naming conventions
Use consistent component, variant, and layer naming.

Design Tokens

--color-brand-600
Core brand color for buttons, links, and highlights.
--space-4: 16px
Spacing scale for padding, gaps, and margins.
--radius-2: 12px
Border radius scale for cards and inputs.
--shadow-2: 0 8px 16px rgba(0,0,0,0.2)
Elevation token for floating surfaces.
--font-size-3: 1.125rem
Typography scale mapped to headings and body.

Components and States

Default / Hover / Focus / Active
Document interaction states for buttons, tabs, and links.
Disabled / Loading / Error
Show how components behave under stress.
Empty / Partial / Filled
Provide examples for tables, lists, cards, and charts.

Layout and Breakpoints

Grid: 12 columns, 24px gutters
Specify grid and spacing rules for page layouts.
Content max width: 1200px
Prevent ultra-wide layouts from stretching UI.
Breakpoints: 1280 / 1024 / 768 / 480
Define layout shifts and component stacking rules.

Assets and Export

SVG for icons, PNG/WebP for raster
Keep vector assets crisp and lightweight.
1x / 2x export sizes
Ensure assets look sharp on high-DPI screens.
Include transparent padding rules
Avoid inconsistent spacing when placing icons.
Optimized file names
Use predictable names like icon-search-16.svg.

Content and Microcopy

Final strings, not placeholder
Ship the actual copy for buttons, errors, and empty states.
Length rules and truncation
Note max characters and wrapping behavior.
Localization flags
Call out strings that may expand by 30-40%.

Interaction and Motion

Duration: 150-250ms
Keep transitions snappy and predictable.
Easing: ease-out or cubic-bezier
Define curves for UI surfaces and panels.
Reduced motion fallback
Provide static alternatives when motion is disabled.

QA Checklist

Pixel check against key screens
Spot spacing or typography drift early.
Verify responsive breakpoints
Confirm layouts hold up on tablet and mobile.
Validate tokens in code
Ensure the design system naming matches implementation.

Need other references? Visit the Cheatsheets index or open CSS Layout + UI and Web Performance.