Design QA checklist for front-end developers

5 min read · Updated October 2026 · By the makers of Tracepaper

Designers notice the same dozen things on every review. Check them yourself first and the review round becomes a formality. Each item below says how to check it quickly.

Layout and spacing

• Overall layout matches at each breakpoint. Overlay the design at its exact width (see how to overlay a Figma design), difference mode on.
• Spacing between sections, cards and text blocks. Measure the gap between neighbours, not just padding.
• Alignment to the grid. Drag guides onto the main column edges and check that everything snaps to them.
• Container widths and max-widths. Resize slowly between breakpoints; nothing should jump or touch the edges.

Typography

• The right font is actually rendering, not a fallback. DevTools' Computed → "Rendered fonts" or Tracepaper's F.
• Size, weight and line height for headings, body and captions.
• Long text: wrap a long heading and a long button label. Does it still look intended?

Color

• Exact values for text, backgrounds, borders and buttons. Pick them from the page and compare HEX with the design.
• Contrast: body text against its background should reach 4.5:1 (WCAG AA).

States and interaction

• Hover, focus (keyboard Tab!), active and disabled for every button, link and input.
• Empty, loading and error states: they're in the design, or they should be.

Images and icons

• Sharp on high-DPI screens (2x assets or SVG), correct crop and aspect ratio, no layout shift while loading.

Before you hand it over

• Browser zoom back at 100%, real content in place, tested in Chrome plus one other browser.
• Leave the overlay layers saved on the page so the reviewer can toggle them themselves.