Spacing, Grids & the 8-point System

By the end of this lesson you will be able to space any screen using an 8-point scale, set up a column grid with margins and gutters, and explain why consistent spacing makes a design look professional.

Spacing is the quiet hero of interface design. Two screens can use the same colours, fonts and buttons, yet one looks polished and the other looks amateur. Very often the difference is only spacing.

Why a spacing system?

Without a system, designers choose gaps by eye: 13px here, 18px there, 22px somewhere else. Each choice looks fine alone. Together they create a slightly shaky, uneven page. Developers also have to copy dozens of odd numbers.

A spacing system is a short list of allowed spacing values. Everyone uses only those values. Think of a ruler marked only in centimetres: you lose a little freedom, but every measurement lines up and anyone can repeat it.

The 8-point system

The 8-point system says: use multiples of 8 for spacing and sizes. A common scale looks like this:

Why 8? It divides evenly by 2 and 4, so values stay whole numbers on screens with different pixel densities. Many common screen widths also divide well by 8. And 8px steps are big enough that the difference between two steps is easy to see. The 4px half step exists for small details, which is why some teams call this a 4-point system with 8 as the main step.

A token here is just a named value, like space-3. You will meet tokens properly in Figma Styles & Variables.

Run this example. It compares a card spaced by eye with the same card on the 8-point scale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Random vs 8-point spacing</title>
  <style>
    :root { --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; }
    body { font-family: system-ui, sans-serif; background: #f4f4f7; padding: 16px; display: grid; gap: 24px; max-width: 340px; color: #1a1a2e; }
    .card { background: #fff; border-radius: 8px; }
    h2, p { margin: 0; }
    h2 { font-size: 18px; }
    p { color: #4b5563; }
    button { border: 0; border-radius: 8px; background: #5b21b6; color: #fff; font-size: 15px; }
    /* By eye */
    .random { padding: 13px 19px 21px; }
    .random p { margin: 7px 0 11px; }
    .random button { padding: 9px 22px; }
    /* 8-point scale */
    .system { padding: var(--s3); }
    .system p { margin: var(--s1) 0 var(--s3); }
    .system button { padding: var(--s2) var(--s4); }
  </style>
</head>
<body>
  <div class="card random">
    <h2>Dr Kabir Anand</h2>
    <p>Dentist · Next slot 4:30 pm</p>
    <button type="button">Book</button>
  </div>
  <div class="card system">
    <h2>Dr Kabir Anand</h2>
    <p>Dentist · Next slot 4:30 pm</p>
    <button type="button">Book</button>
  </div>
</body>
</html>

You should see two similar cards. The second has even padding on all sides and a clear rhythm. The first looks slightly off, even if you cannot say why at first glance. Set your browser zoom to 200% and the difference becomes obvious.

The internal and external rule

A simple rule makes grouping work: space inside a group should be smaller than space between groups. Designers say "internal less than or equal to external".

1. A card's internal padding: 16px.
2. The gap between two cards: 24px.
3. The gap between two sections of cards: 48px.

Each level of grouping gets more space than the level inside it. This is the proximity principle from Visual Design Principles, turned into numbers.

Layout grids: columns, gutters and margins

A layout grid is a set of invisible vertical columns that you place content on. It keeps edges aligned across a whole screen.

Think of a cricket ground's pitch markings: the creases are always in the same place, so every player and umpire works from the same lines. A grid gives every designer and developer the same lines.

A column grid has three parts:

• Columns: the vertical strips that hold content.
• Gutters: the gaps between columns.
• Margins: the space between the outer columns and the screen edge.

Common starting points:

Twelve columns are popular on desktop because 12 divides into 2, 3, 4 and 6 equal parts. That gives you halves, thirds, quarters and sixths without breaking the grid.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>12-column grid</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a2e; }
    .page { position: relative; max-width: 960px; margin: 0 auto; padding: 32px; }
    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; position: relative; z-index: 1; }
    .overlay { position: absolute; inset: 32px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; pointer-events: none; }
    .overlay div { background: rgb(162 89 255 / 0.12); }
    .box { background: #fff; border: 1px solid #5b21b6; border-radius: 8px; padding: 16px; }
    .hero { grid-column: 1 / -1; }
    .main { grid-column: span 8; }
    .side { grid-column: span 4; }
    .third { grid-column: span 4; }
    @media (max-width: 640px) {
      .grid, .overlay { grid-template-columns: repeat(4, 1fr); gap: 16px; }
      .page { padding: 16px; }
      .overlay { inset: 16px; }
      .main, .side, .third { grid-column: 1 / -1; }
      .overlay div:nth-child(n+5) { display: none; }
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="overlay" aria-hidden="true"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    <div class="grid">
      <div class="box hero">Header: spans all 12 columns</div>
      <div class="box main">Doctor list: 8 columns</div>
      <div class="box side">Filters: 4 columns</div>
      <div class="box third">Card: 4</div>
      <div class="box third">Card: 4</div>
      <div class="box third">Card: 4</div>
    </div>
  </div>
</body>
</html>

You should see light purple column stripes behind white boxes. Every box edge lines up with a column edge. Make the preview narrow: the grid switches to four columns and the boxes stack to full width.

Sizes on the grid too

The 8-point idea applies to component sizes as well: buttons 40 or 48px tall, icons 16 or 24px, avatars 32, 40 or 48px. Text line heights are often set to multiples of 4 (for example 24px for 16px text), so text also sits on the rhythm.

Common mistakes

• Odd values like 13px or 27px without a reason.
• Same gap everywhere. Groups disappear when inner and outer spacing are equal.
• Ignoring margins on phones. Text touching the screen edge is hard to read and looks broken.
• Treating the grid as a cage. Images and backgrounds may bleed to the edge; text and controls should align.

Key points

• A spacing system is a short list of allowed values that everyone shares.
• The 8-point system uses multiples of 8, with 4 for fine details.
• Space inside a group should be smaller than space between groups.
• Column grids have columns, gutters and margins; 4 columns on phones and 12 on desktops are common.
• Use the same scale for component sizes so the whole interface keeps one rhythm.

<p style="margin-top: var(--s2)">Fees: ₹600, pay at clinic</p>

body { gap: var(--s5); }          /* 32px between cards */
.half { grid-column: span 6; }    /* use class="box half" on two cards */