Skip to main content

The 8-Point Grid: Spacing Rules for UI Design

By · · 5 min read

ui designlayout
On this page

Look at a polished interface and a rough one side by side, and the difference often isn't color or typography. It's spacing. Polished interfaces have rhythm: consistent gaps, aligned edges, clear grouping. Rough ones have spacing that was eyeballed screen by screen.

The 8-point grid is the simplest way to get that rhythm. It's not a strict law, but a set of constraints that make spacing decisions faster and more consistent.

What is the 8-point grid?#

The idea is simple: use multiples of 8 for spacing and sizing. Padding, margins, gaps, component heights, and layout dimensions all come from a scale like:

4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96

Strictly speaking, 4 and 12 are half-steps, but most teams include them for small, tight spacing like the gap between an icon and its label.

Why 8?#

  • It scales cleanly across screen densities. Most device pixel ratios multiply 8 into whole numbers, avoiding blurry half-pixel rendering.
  • It's divisible. 8 halves to 4 and 2, giving you flexibility for fine details.
  • It limits choices. Choosing between 16 and 24 is faster than choosing between 15, 17, 19, and 21.
  • It's shared language. Developers and designers can agree on "space 16" without debate.

Rule 1: Pick a scale and stick to it#

Define your spacing scale once and use only those values. In Figma, store them as number variables and bind auto layout padding and gaps to them. In code, the same scale becomes spacing tokens. If a value isn't on the scale, it shouldn't be in the design.

Rule 2: Internal spacing is less than or equal to external spacing#

This is the most useful spacing rule in UI design. The space inside an element should be equal to or smaller than the space around it.

A card with 16px internal padding should sit at least 16px away from neighboring cards. If the outside spacing is smaller than the inside spacing, elements visually merge, and the grouping becomes unclear.

Rule 3: Use spacing to show relationships#

Spacing communicates structure. Related items sit closer together; unrelated items sit farther apart. This is the Gestalt principle of proximity, and it does a lot of work without any extra visual elements.

A practical approach:

  • 4–8px between tightly related elements, like an icon and its label or a label and its input.
  • 12–16px between items in a group, like fields in a form section or items in a list.
  • 24–32px between groups, like form sections or card groups.
  • 48–96px between major page sections.

With clear spacing tiers, you often don't need dividers or boxes at all.

Rule 4: Align to a layout grid#

Spacing isn't just between elements; it also applies to the overall layout. Use a column grid with gutters and margins on the same scale:

  • Mobile — 4 columns, 16px margins, 16px gutters.
  • Tablet — 8 columns, 24–32px margins, 24px gutters.
  • Desktop — 12 columns, a max content width, 24–32px gutters.

Elements should align to the columns. This creates a consistent structure across screens and makes responsive behavior predictable.

Rule 5: Size components on the grid#

Component heights benefit from the scale too. Common button and input heights are 32, 40, and 48px. Icons are often 16, 20, or 24px. Touch targets should be at least 44–48px for comfortable tapping.

When component sizes sit on the grid, they line up naturally with each other and with the spacing around them.

Rule 6: Let text use its own baseline#

Typography doesn't always fit neatly into multiples of 8. Line heights like 20, 24, and 28 work well; font sizes like 14, 15, or 17 are fine too. Don't distort type sizes to force them onto the grid. Instead, make line heights land on 4px increments so text blocks still align with the spacing rhythm.

Rule 7: Break the rule on purpose#

The grid is a tool, not a cage. Optical adjustments are sometimes necessary: an icon that looks off-center, a circular element that needs extra space to appear balanced, a 1px border that throws off alignment. Adjust deliberately when something looks wrong, but don't let exceptions become the default.

Applying it in Figma#

  • Set nudge amount to 8 in preferences so shift-arrow moves elements 8px at a time.
  • Use auto layout with gap and padding bound to spacing variables.
  • Add layout grids to frames for columns and baseline alignment.
  • Check spacing with the measurement overlay — hold Alt or Option and hover between elements.

The result#

An interface built on a consistent spacing system feels calm and intentional, even if users can't explain why. Designers make faster decisions, developers implement spacing without guessing, and the whole product gains a rhythm that ties every screen together.

Pick a scale, follow the internal-versus-external rule, use spacing to show relationships, and align to a grid. Those four habits alone will noticeably improve almost any interface.