Whitespace First

Try removing dividers and borders first. Use spacing to separate.

When you need to separate two blocks, first try pulling them apart. Only when distance isn't enough should you reach for a line. Dividers and borders are "drawn separation"; spacing is "given separation." Both achieve the same effect, but the former adds visual elements and the latter doesn't. If grouping can be expressed either way, why draw a pile of extra lines? ws-wiki

More importantly, lines lose their power when overused. Once every module on the page has a border, the border no longer signals "this is a group"—it's just background noise.

Why does spacing express grouping at all? Because of a human instinct: things that sit close together read as one group, whether or not a frame or a line is there. Borders and rules are only helpers that reinforce grouping—and they're expensive, because every line you add is one more visual element that has to stay consistent with all the others. The delete-first-then-add-back order is, at bottom, trusting spacing first and treating lines as a supplement.

What you'll run into:

• The page is boxes inside boxes, with more lines than content
• Every new module gets a card, until the screen is nothing but cards
• AI-generated interfaces put a divider between every two rows

When you still need lines

Whitespace-first doesn't mean no lines at all—it means spending them where they earn their place. These five cases still need lines:

• Rows in a table. When people scan horizontally to compare, lines keep the eye on the same row.
• Not enough room to pull apart. A crowded mobile screen doesn't have space for the spacing you'd want.
• A clear tappable boundary. Inputs and buttons need users to know where to click.
• Content floating above other content. Modals, drawers, and dropdown menus need to separate from what's underneath.
• Parallel cards in quantity. When many cards must be told apart, borders use less space than gaps.

When you do use a line, make it as faint as possible. A divider in a light gray close to the background is enough. Its job is to hint at a boundary, not to become a visual element itself.

Before you commit to a line, ask yourself one counter-question: if I delete the line between these two blocks and pull them apart instead, would users still be able to tell they're separate groups? If the answer is no—then yes, consider a line, and start with a fainter one than you have now. If the answer is yes, delete the line and open up the gap.

How to separate with whitespace

• 8 within a group, 24 between groups. A three-to-one ratio is a safe starting point. Elements in the same group sit tight; different groups get pulled apart (see One Spacing Scale).
• A heading sits close to its own body text and far from the group above. Get this wrong and the grouping reads in reverse—if a heading is closer to the paragraph above than to its own body, users attribute it to the wrong group.
• Delete first, add back later. When a screen is done, strip all borders and dividers and check whether the structure still reads. Restore only where it blurs—you'll usually find 30% is enough.
• Give major blocks real room. 40 to 64px is not excessive on desktop. When a page feels cramped, it's usually not too much content—it's too little whitespace.

Whitespace isn't empty space doing nothing; it expresses relationships. A stretch of blank tells the user "this section ends, and a new one starts below"—that message is content in itself. ws-wiki

How to verify when you're done: shrink the screen to 50% and look. Shrinking strips away text and thin-line detail, leaving structure behind—if the grouping still reads at that size, spacing is doing its job. If everything blurs together, the problem usually isn't too few lines; the gaps aren't wide enough. Whitespace is sufficient when the layout survives being shrunk.