Design review checklist
Run this against a built UI before you sign off. Work through each section, check the box, and capture anything that's off so it gets fixed before it ships.
A design review is the sign-off before a UI ships: the moment to catch where the build drifted from the design, where real content breaks the layout, and which states never got designed. This is the complete list to run against the real interface. Work top to bottom, check each box, and capture anything that's off so it gets fixed before it ships.
Visual and brand
- Spacing, alignment, and padding are consistent with the design system
- Typography matches the type scale — sizes, weights, and line-height
- Colors come from the palette; no off-brand or hard-coded one-off values
- Components match their canonical versions (buttons, inputs, cards)
- Icons are from one set, at a consistent size and weight
Real content
- The UI uses real content, including long and empty cases — not lorem ipsum A layout that only looks right with perfect placeholder text breaks on real data.
- Headings, labels, and microcopy read clearly and match the product voice
- No truncated or overflowing text at realistic content lengths
Interaction states
- Hover, focus, active, and disabled states exist for every interactive element
- Empty, loading, and error states are designed — not just the happy path The states users hit when something is missing or slow are the ones most often skipped.
- Form validation messages are clear and sit near the field they refer to
Responsive
- Layout holds at mobile, tablet, and desktop widths
- Touch targets are large enough to tap on mobile
- Images and media scale without distortion or awkward cropping
Accessibility quick pass
- Text contrast meets WCAG AA against its background
- Focus is clearly visible when tabbing through the page
- Images have alt text and controls have accessible labels
Sign-off
- Click through the real build as a user would, at more than one screen size Capture each discrepancy as a screenshot and note so the fix list is unambiguous.
Frequently asked questions
When should I run a design review?
Run it on the built UI — staging or a preview deploy — before it ships, not on the mockup. The point is to catch where the implementation drifted from the design and where real content or real states break the layout.
What's the difference between a design review and a QA pass?
A design review checks whether the interface looks and behaves as designed — spacing, states, responsiveness, accessibility. A QA pass checks whether it works — flows, forms, edge cases, regressions. They overlap at the edges and are strongest run back to back.
Capture your first review.
About a minute from open tab to a shareable URL your agent can ingest.
Start capturing