The Idea
Pixel-perfect in Figma, pixel-off in production.
A designer hands over a spec with exact spacing, corner radii, and type sizes. An engineer implements it, but side by side, the two never quite match. Padding shifts by a few pixels. Fonts render with slightly different weights. Shadows feel heavier or lighter depending on the platform.
This experiment places the intended design next to the actual code so you can see where quality breaks down. Dragging the slider toward broken introduces tiny errors in alignment, spacing, and typography.
Individually, a 2px padding error or a slightly wrong font weight seems harmless. Together, these minor differences accumulate into a high Design Diff percentage and turn a polished product into a broken experience.
Behind the Experience
Design drift rarely happens all at once. It accumulates across dozens of minor technical compromises and approximations during development. We built this interactive simulation to make design drift visually quantifiable through a live Design Diff metric. By linking a fidelity slider directly to compounding CSS properties, it demonstrates how unmonitored handoffs gradually degrade product quality.
Keep Exploring
More experiments from the Lab
Dragging frame rates down to feel the difference between 10fps and 60fps.
play →Comparing native physics and unoptimized scrolling side by side.
play →Testing physical touch target dimensions against finger sizes and tap heatmaps.
play →