Check a build against the design
QA and design

Check a build against the design

Compare the live page with the design using real values, then hand developers a list they can fix in one pass.

Traceo showing the typography used on a live page

Steps

  1. Start with the whole page

    Open Colors, type and contrast. Off-palette colors and type sizes that are not in your scale are the fastest wins.

  2. Then check components

    Use the inspector on each component: padding, gaps, radius, font size and line height. Turn on the outline debugger when alignment looks off.

  3. Check every breakpoint

    Open the responsive preview to see phone, tablet and desktop at once. Spacing problems often show at one size.

  4. Report with evidence

    Take a region screenshot of each issue, mark it up, and add the value you saw next to the value you expected.

Checklist

CheckWhere in Traceo
Colors match the paletteColors view
Headings and body follow the type scaleTypography view
Text passes contrast (AA)Contrast scanner
Padding, gaps and radius matchElement inspector
Nothing overflows or misalignsOutline debugger
Layout holds at each breakpointResponsive preview
Something wrong on this page?Tell us