Alignment

Putting edges, centers, or baselines on the same invisible line. Most 'this looks messy' complaints are really alignment.

line these upmake it flushalignementit looks messy but I can't say whyleft aligned vs centeredflush leftmake the edges eveneverything on the same line

See it

Live demo coming soon

What it is

Alignment is putting the edges, centers, or text baselines of different elements on the same invisible line. It is the cheapest polish in design and the single most common cause of 'this looks amateur' when it's missing: the eye reads a shared edge as intent and a nearly-shared edge as an accident.

The practical rule is fewer alignment lines, not more. Pick one strong left edge for a section and hang the headline, body, and button off it, instead of centering the headline, left-aligning the body, and right-aligning the button. Centering works for short hero text and single-column empty states; it fails for lists, forms, and anything over two lines, because every line starts at a different x position and the eye has to hunt.

Gotcha: measured alignment and optical alignment are not the same thing. A circular icon, a triangular play button, or an opening quotation mark set flush to a text edge will look inset or overhanging even when the box coordinates match perfectly, because the shape's visual mass sits elsewhere. Nudge by a pixel or two and trust the eye over the inspector.

Ask AI for it

Tighten the alignment in this section: pick one shared left edge and align the eyebrow, headline, body copy, and button to it, removing any mixed centering. Align the labels and inputs in the form on the same left edge too, and baseline-align the icon with the first line of its adjacent text rather than centering it against the whole block. Keep the number of distinct alignment lines in the section to two at most.

You might have meant

optical alignmentgrid systemvisual hierarchybaseline gridvertical rhythm