Handoff checklist
This page is for theme designers handing a design to the developers who will build the theme, or to themselves in a later role. A complete handoff means templates and stylesheets can be written without guessing, and reviews can check against something written down. Each line names the page that explains the item.
Contents
- Before you hand off
- Content
- Foundations
- Components
- Pages and views
- Images, blocks and behavior
- Quality targets
- Where it all lives
Before you hand off
- To do: The inventory and foundations are signed off (Working with clients and reviews).
- To do: The developer has seen the inventory and flagged anything costly (Working with developers).
- To do: Every mockup uses real content, including extremes (Designing with real content).
Content
- To do: Mapping sheet: every visible element to a class, field, datatype, views and empty design (Mapping a design to content classes).
- To do: Requests for new fields written, with reasons (Working with developers).
- To do: Field guidance text for editors, where it helps (Designing for editors).
- To do: Interface texts listed for translation (buttons, labels, messages).
Foundations
- To do: Token table: name, light value, dark value, use (From design tool variables to CSS custom properties).
- To do: Palette sheet with measured contrast ratios in both themes (Color palettes and ramps).
- To do: Type scale with line heights and measure (Type scale).
- To do: Spacing scale, inside and between rules, page layouts by intent (Spacing and grid).
- To do: Fonts: files, licenses, weights, fallback stack (Fonts in a design).
- To do: Motion tokens (durations, easing) (Motion and interaction).
Components
- To do: Component inventory with variants, tokens, class names (Component inventory).
- To do: State matrix per component, light and dark (Designing interactive states).
- To do: Icons as SVG files with names (Icons in a design).
Pages and views
- To do: Frame: header and footer at three widths, signed in and out, small-screen menu open (Designing headers and footers).
- To do: Navigation: sources, depth, current state (Designing navigation and menus).
- To do: View matrix: every class against every view mode (Designing view modes).
- To do: One mockup per "yes" in the matrix, with shortest and longest content.
- To do: Lists and pagination (Designing content listings and cards).
- To do: Search with results and none (Designing search results).
- To do: Error pages, empty states (Designing empty and error states).
- To do: Forms and account pages (Designing forms, Designing login and user pages).
- To do: Right-to-left versions of key screens, if needed (Designing for many languages).
Images, blocks and behavior
- To do: Image sheet: slot, alias, filter, ratio and crop, srcset partners, empty design (Designing image crops and art direction).
- To do: Share image and default share image (Social share and metadata images).
- To do: Block design sheet per block and view type, if the site uses layouts (Designing layout blocks).
- To do: Motion table with reduced-motion versions (Motion and interaction).
- To do: Brand matrix, for multi-brand installations (Designing for several brands in multisite).
- To do: Newsletter skin design, if the site sends newsletters (Designing newsletter emails).
Quality targets
- To do: Performance budget agreed (Designing for performance budgets).
- To do: Accessibility target stated (contrast, keyboard, zoom).
- To do: Widths and themes to test: 1440 px, 960 px at 200% zoom, 375 px; light and dark.
- To do: The rules restated: no inline CSS or scripts, tokens only, dark values, no
?v=on links (Working with developers).
Where it all lives
All written items go into the theme's repository (or a folder it links to), so the developer, reviewers and the next designer find them. Mockup files may live in the design tool; link each from the theme's documentation.
Related pages
- From mockup to theme
- Design QA checklist
- Checklist: the theme extension is ready
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.