← All notes

Grid and spacing: the invisible math of premium layout

Rhythm is the premium signal

Users cannot name spacing, but they feel it instantly. A page where padding jumps between 8 and 23 pixels reads as cheap regardless of the design; one where everything lands on a 4 or 8px grid reads as deliberate. Consistency is the entire trick.

Define five spacing steps (4, 8, 12, 16, 24) and refuse to invent new ones. Every gap, padding, and margin picks from the set.

Columns are for meaning

A two-column grid is not a layout, it is a constraint. Assign the columns meaning: primary content at 2/3, meta at 1/3, or a 12-column grid for cards. The rule that matters is that nothing straddles columns unless it is a section break.

The practical test: vertical rules are invisible, horizontal rules are everywhere. Align baselines, not just edges.

The hover one-pixel

Card hovers translate one pixel and lift a shadow. That one pixel is the difference between a page that feels alive and one that feels static, and it costs nothing.

Pair it with border-color shift on hover. Two state changes, both cheap, both expected.

Keep reading

Have a live URL?

Run the free audit, then email the score and the URL. If the brand and the page both need work, the Brand + Homepage Sprint is $8,500 / 14 days.

Free audit