A spacing system that makes interfaces easier to understand

A page can use beautiful colours and type yet still feel tiring to browse. Often the problem is not a missing decoration. It is that the spaces do not explain what belongs to what. An article summary sits as close to the next card as to its own title; the gap between two sections is barely larger than a paragraph break. The reader has to reconstruct the layout’s relationships on every scan.

Spacing explains relationships#

Think of a page as groups inside larger groups. A category label, title, summary, and reading time form one article card. Several cards form a topic shelf. Several shelves form a browse page. The gap should generally grow as you move outward: the label stays near its title, the next card gets more separation, and the next shelf gets more again.

This is more useful than applying the same 24-pixel gap everywhere. Equal gaps imply equal relationships. They can make a byline look attached to the next article or make two separate topics seem like one uninterrupted list. When the grouping is especially complex, a border or surface can reinforce it, but adding a box around every element creates visual noise of its own.

Start with a small scale#

Pick a handful of values before tuning individual components. For example, an interface might start with 4, 8, 16, 24, 40, and 64 pixels. These are starting points, not a universal formula. Give each value a role: a small gap for a label and title, a medium gap for card padding, a larger gap between cards, and the largest gap between page sections. Revisit the values after seeing real content on narrow and wide screens.

Name tokens by purpose where the purpose is stable. A token called –space-card-padding communicates more than a mysterious margin: 27px copied across six components. The underlying scale can still have numeric steps. What matters is that a later change to card padding has one place to live and one reason to exist.

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
}

.article-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.article-list {
  display: grid;
  gap: var(--space-4);
}

.topic-shelf + .topic-shelf {
  margin-block-start: var(--space-6);
}

The exact values above are an example, not a prescription for an existing site. If the type is larger or summaries run longer, the card may need more room. A compact sidebar can use smaller steps than an editorial landing page while still following the same relationship rule.

Apply the scale to article cards#

Imagine a card for an article called “How a B-tree split works.” It has a Data label, a title, a two-line summary, and a reading-time note. Keep the label and title close enough to read as one introduction. Give the summary a slightly clearer break so it reads as the explanation of that title. Keep the reading-time note within the card, but avoid leaving it stranded halfway toward the next article.

Next, compare the gap inside a card with the gap between cards. If the two are nearly equal and the cards have no other boundary, scanning becomes uncertain. Increase the outer gap or provide a subtle card surface. Do the same at the shelf level: the heading “Data structures” should clearly own the cards beneath it, while the next shelf heading should feel like a new chapter.

Real content is the test. A design made with three identical placeholder cards can look disciplined while failing with one long title, one short title, and a card with no summary. Check those variations before treating a spacing decision as a system rule.

Spacing makes groups visible; specific article titles and link text make the choices inside each group understandable. See also visual hierarchy for article indexes for deciding which card detail should speak first.

Test whether the groups are clear#

Blur or squint at the page. You should still be able to pick out each card and each section without reading a word. Then restore the page and ask someone to identify which summary belongs to which title. If they hesitate, inspect the nearby gaps before adding another border, icon, or colour.

Finally, check the narrow layout. A desktop section gap can consume most of a phone screen, while a desktop card gap may become too tight after the cards stack. Preserve the ordering of relationships even when the values change. Space is a visual cue; headings, lists, and links must still carry the structure for readers who do not see that cue.

Then apply the same relationships to the article itself: set a comfortable reading rhythm for headings, paragraphs and wider figures.

Questions people also ask

3 QUESTIONS

▸ Should every gap in an interface use the spacing scale?

Use the scale for recurring relationships such as text inside a card, card padding, gaps between cards, and section spacing. Adjust exceptional layouts deliberately rather than adding a new token for every one-off measurement.

▸ Is an eight-point grid required?

No. An eight-point grid is one workable convention. The useful property is a small, repeatable set of values that fits the product's typography and density.

▸ Can whitespace replace headings and semantic structure?

No. Space helps sighted readers see groups, but the same relationships should also make sense in the document structure, headings, and link text.