Alignment Principle

Aligned elements feel intentional and reduce cognitive load. Stray edges feel sloppy.

How to apply it

Use flex/grid with consistent gaps; pin CTAs to card bottom with margin-top:auto.

Alignment Principle in practice: a concrete example

The invisible grid the eye still feels

Line up every label's left edge, every value's right edge, and every card's baseline, and a form looks considered before anyone reads a word. Let a few fields drift a couple of pixels and the same form feels amateur, even if users can't say why. This is why design tools ship alignment guides and why a strict column grid makes a page feel calm: the eye reads shared edges as order. Apple's and Stripe's marketing pages are ruthless about it.

Common Alignment Principle mistakes

Centring everything. Centred text and ragged blocks give the eye no shared edge to follow, so longer content gets harder to scan.
Mixing alignments without reason, so labels, values, and buttons each start from a different edge.
Eyeballing spacing by hand instead of leaning on a grid (or flexbox with consistent gaps), so “nearly aligned” edges wobble.

When Alignment Principle doesn't apply

Strict alignment serves scanning, but expressive layouts (an editorial hero, a poster, a landing splash) sometimes break the grid on purpose to create tension and pull the eye. The rule is a default for functional, content-dense screens, not a ban on deliberate asymmetry where the goal is feeling rather than fast reading.

Practise it on a real challenge

Card Grid — every card lands at a different height

A 3-column card grid has titles, prices, and buttons all landing at different heights, so the whole row looks broken even though each card is 'correct' on its own.

Alignment Principle

How to apply it