Grid Systems and Layout Consistency Across a Growing Product

A client's product had grown across three years and several designer handoffs to the point where individual screens used inconsistent gutters — 16px on one page, 20px on another, 24px on a third — none of it intentional, all of it accumulated through screens designed in isolation without a shared spatial reference. Nothing was dramatically broken, but the product felt subtly uneven in a way that was hard for the client to articulate until we laid several screens side by side.

We rebuilt the grid as an explicit, enforced system: a 12-column layout with fixed gutter and margin values tied to breakpoints, published as Figma layout grids attached to every page template and as CSS grid utilities in the codebase, so designers and engineers were both pulling from the same numbers rather than eyeballing spacing independently. Consistency stopped depending on individual designer discipline and started being close to the default.

Vertical rhythm needed the same rigor as horizontal columns, and we'd initially only focused on the column grid. Inconsistent spacing between sections — sometimes 32px, sometimes 48px, chosen by feel — made scrolling through a long page feel uneven even when every individual section was well designed. We introduced an 8px baseline spacing scale (8, 16, 24, 32, 48, 64) and required every margin and padding value in new work to come from that scale, which eliminated the arbitrary in-between values that had crept in over time.

The grid system paid off most clearly during a later redesign of the product's marketing site, built by a different team entirely. Because the spacing and column tokens were documented and shared rather than living only in one team's muscle memory, the marketing site matched the product's spatial rhythm without anyone on that team needing a long onboarding conversation about it — they just used the existing tokens.