NewMCP Apps — interactive section cards now render inside your AI chatRead the changelog
Craft

Shipping 2,400 sections without visual drift

Consistency at this scale is not a review problem. It is a constraint problem — you have to make the wrong thing hard to build.

IM2 min readUpdated
On this page 3 sections

In short

Preventing visual drift across thousands of components requires constraints enforced at build time rather than caught in review. Restrict the available values (spacing steps, type sizes, radii) so that off-system work fails to compile, and reserve human review for judgement rather than measurement.

Key takeaways

  • Review does not scale past a few hundred components; constraints do.
  • A closed set of spacing and type values makes most drift literally unbuildable.
  • Automate measurement, reserve humans for taste.
  • Visual regression snapshots catch the drift that constraints cannot.

At two hundred sections you can hold the system in your head. At six hundred you need a checklist. At two thousand four hundred the checklist is a fiction — nobody is measuring padding on the four hundredth review of the month, and everyone involved knows it.

Why does review stop working?#

Because it depends on attention, and attention is the resource that runs out first. A reviewer who has looked at nine sections today will catch a broken layout and miss a 20px gap where the system says 24px. That is not carelessness; it is what sustained visual comparison actually costs.

Make the wrong value unavailable#

The fix is to shrink the space of possible mistakes. If spacing can only be one of seven values, a 20px gap is not a thing a contributor can accidentally produce — the token does not exist and the build fails.

PropertyOpen systemClosed system
SpacingAny px value7 steps
Type sizeAny px value9 steps
RadiusAny px value6 steps
ColourAny hexSemantic tokens only
ShadowAny value4 elevations

Nobody has asked for an eighth spacing step in fourteen months. When someone does, that is a design conversation worth having — which is exactly the conversation an open system never surfaces, because the deviation just ships.

What constraints cannot catch#

Composition. Every value can be on-system and the section can still be ugly, unbalanced or wrong for its slot. That is where human review earns its cost, and it is the only thing our review checklist covers now.

Related questions

What causes visual drift in a large component library?

Drift comes from off-system values entering through routes review does not reliably catch — deadline work, one-off overrides, and shared token changes with unintended downstream effects.

How do you enforce spacing consistency at scale?

Restrict spacing to a closed set of tokens and fail the build on raw values. When the wrong value cannot be expressed, most drift becomes unbuildable rather than merely discouraged.

Are visual regression tests worth it for a component library?

Yes, specifically for shared-token changes. Constraints prevent new off-system values, but only snapshots reveal that a radius change quietly altered four hundred cards.

Comments

No comments yet — be the first to share a thought.

Leave a comment

Your email is never shown. Comments are reviewed before they appear.

Links in comments are marked ugc nofollow.

Keep reading

All articles