DEV Community

INTFRAME
INTFRAME

Posted on • Originally published at intframe.com

Design QA at 1:1

#webdev #playwright #testing #css

Two screens can look identical at a glance and be twenty percent apart in every measurement that matters. Font size, line height, spacing rhythm, contrast. The glance is the least reliable instrument in the building, and for months it was the only one we used.

Measure the original, not your memory of it

When the brief is "make it feel like this reference", the first step is no longer a mood board. It is a probe run in both pages' consoles:

const probe = (sel) => {
  const cs = getComputedStyle(document.querySelector(sel));
  return [sel, cs.fontSize, cs.lineHeight, cs.letterSpacing,
          cs.fontWeight, cs.color].join('  ');
};
['h1', 'h2', 'p', 'nav a', 'button'].map(probe).join('\n');
Enter fullscreen mode Exit fullscreen mode

Run it on the reference, run it on ours, diff the two tables. Design conversations change completely when both sides are looking at numbers. "It feels lighter" becomes "their h1 is 88/0.94 at weight 900, ours is 72/1.1 at 800", which is a ticket, not a debate.

Compare crops, not impressions

  • Crop the same region from ours and theirs, stack them at 1:1, and look at the pair. Differences that vanish in side-by-side thumbnails become obvious.
  • Do it on mobile first. Desktop hides crimes that a 390-pixel viewport confesses immediately.
  • Automate the mechanical half: a script walks the page and flags text overflow, unexpected horizontal scroll and elements taller than their containers, before a human spends taste on it.
  • Record scroll behavior too. Easing curves and pin durations are design decisions, and they are measurable in the performance timeline, not just feelable.

Taste still decides

None of this replaces judgment. It feeds judgment with facts. The measurements tell you where you diverge from the reference. Whether the divergence is a bug or a choice is still a human call, and making that call consciously is the entire difference between a site that is almost right and one that is right.

Originally published on the INTFRAME engineering blog. The companion code lives at github.com/intframe/scroll-qa.

Top comments (0)