Skip to content
← 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

Want this applied to your product?