Alignment

Every element starts somewhere, and the eye notices where. When a card's content starts at 14px, the list below it at 8px and the input text at 10px, nobody can say what is wrong, but the section looks unfinished.

Line things up to as few edges as possible. Every new left edge is one more thing the eye has to resolve.

Members

Invite people to this workspace.

Pro plan3 of 5 seats

ALAda LovelaceOwner

GHGrace HopperAdmin

ATAlan TuringMember

Invite by email

name@company.comInvite

6 left edges

Near missesAligned

Near missesAligned

NormalShow edges

NormalShow edges

Both versions use the same components. The near-miss one has 6 left edges, because each component brought its own padding: 14px in the card, 8px in the rows, 10px in the input. The aligned one has 3: the boxes at 0, everything else at 12px, and the text after an icon or avatar at 44px.

Text aligns to text

When a heading sits above a card, it can line up with the card's border or with the text inside it. Pick the text. We read down the left edge of the words, not the faint boxes around them. In the demo, Members, Invite by email and the placeholder all start at 12px.

Atlassian's grid aligns the containers and leaves what's inside to spacing tokens. That keeps the frame tidy, but the text inside can still drift. I'd give every box in a section the same inset, so the words line up too.

Within a column, keep one axis. The avatars and the card icon share a 24px slot, so the text after them shares an edge too. Apple's guidelines note that we read indented items as subordinate, so an accidental indent says something you didn't mean.

Hang the icons

Icon rows under a heading have the same choice.

What's included

Everything in Free, plus:

• Unlimited projects
• Version history
• Custom domains
• Priority support

$12 per month, billed yearly.

IndentedHanging

IndentedHanging

Indented, the icons sit on the heading's edge and the text starts 24px in, a second edge for the reader to find. Hanging, the icons move out into the margin and the text continues the heading's line. The icons work like bullets, which is what they are.

Hanging needs room on the left. Inside a card with 16px of padding there often isn't any, so indent there, the same way on every row.

Usage

Share one inset across the boxes in a section, and hang icons by their own width plus the gap.

Aligned by the numbers is not always aligned to the eye. A round icon or a capital T sits slightly inside its box and may need a nudge, which is what optical alignment is for. Alignment groups things across, the way whitespace groups them down.