The 8-Point Grid System: A Practical Guide

Let’s talk about one of the simplest tricks in design. The kind of thing that, once you see it, you’ll start spotting everywhere: the 8-point grid.

1. The rule in one sentence

The 8-point rule is one sentence: every measurable value on your site is a multiple of 8.

8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 128.

Padding, margin, gap, width, height, icon size, button height, border radius. Anything you can set a pixel value for, you pick from that list.

2. Why 8 specifically

Not arbitrary. Three reasons.

Pixel density math

Many devices render at 1.5x or 2x pixel density. Odd values like 5px or 25px become half-pixel offsets at 1.5x, which render slightly blurry along their edges. Even values like 8 and 24 scale cleanly to every common density. The visual difference is small on any one element, but it adds up across a page full of components.

Common screen sizes are divisible by 8

Viewport widths you’ll actually design for (320, 360, 768, 1024, 1280, 1440, 1920) all divide cleanly by 8. The grid lines up with the actual physical layouts your site renders into.

Coarse enough to feel different

Steps of 2 or 4 are too subtle. Steps of 16 are too jumpy. 8 is the goldilocks zone: visible separation between values, but enough resolution to handle every common spacing need.

3. Where the rule applies

Most people first encounter the 8-point rule as a spacing rule. It’s broader than that.

Spacing: padding, margin, gap between elements. The most common application. A section with 96px top padding, a card with 32px internal padding, a 24px gap between cards.

Element sizes: button heights (40, 48, 56), input heights (40, 48), icon sizes (16, 24, 32, 48). The button heights you’d actually use in production all come from the same list as your spacing values.

Component dimensions: card widths, modal widths, container max-widths, image dimensions where possible. A 1280px container max-width, a 480px modal width, a 320px card width.

Border radius: 4, 8, 16, 24. Border radius often uses the 4-point variant (see Section 4) for finer control on smaller elements.

Type-related values: body and heading sizes usually follow a separate type scale (the 1.250 ratio covered in the typography post), but heading paddings, line heights set in pixels, and section padding around headings all stay on the 8-point grid.

If you can set a pixel value for it, it should come from the 8-point list.

4. The 4-point variant

For fine-grained UI, jumping in 8s is too coarse. A badge with 8px horizontal padding looks fine. An icon button with 8px around the icon is too generous. A small chip with 4px padding around its text reads better than 8px.

The 4-point variant: 4, 8, 12, 16, 20, 24. Same idea, smaller steps.

The rule of thumb: use 4-point for spacing INSIDE small components (button padding, badge spacing, chip padding, small icon margins). Use 8-point for spacing BETWEEN components and for component-level dimensions.

Both grids share the same multiples. Every 8-point value is also a 4-point value. The systems coexist without conflict.

5. How major design systems use it

The 8-point rule isn’t a niche idea. It’s the convention every major design system runs on.

• Material Design (Google). Built entirely on an 8dp grid. Every spec, from spacing to sizes to typography rhythm, sits on multiples of 8.
• IBM Carbon Design System. Uses 8px increments for spacing, with 4px steps for fine adjustments.
• Atlassian Design System. 8px base unit for all spacing decisions.
• Adobe Spectrum. Same 8-point base.

If you’ve used Figma, Sketch, or recent versions of Adobe XD, you’ve been working on an 8-point grid by default. Their nudge increments, snap-to-grid settings, and default spacing presets all assume 8.

For developers: Tailwind CSS’s default spacing scale uses multiples of 4, which aligns with the 4-point variant. Bootstrap doesn’t enforce 8-point strictly, which is part of why Bootstrap sites can feel slightly inconsistent at component boundaries when teams don’t add their own discipline on top.

The rule isn’t a constraint your tools impose. It’s a convention your tools already assume.

6. How Breakdance keeps the rule applied

Checking every value against the 8-point list during a build is impractical. The trick: bake the rule into the small set of named styles you reuse everywhere. Apply by name, and the rule travels with the system.

Breakdance gives you four places to bake it in.

Global Colors

Set your palette once with named tokens (Primary, Secondary, Surface, Text, and so on). Every text element, heading, link, and button references these tokens by default. Colors aren’t a pixel value, but the principle is the same: define once, apply by name, change everywhere at once.

→ Full setup in the color palette post.

Global Typography

Set body and heading defaults (font, size, weight, line height) that follow your type scale. Body 16px, H1 at 61px, H2 at 49px, and so on, all derived from a single ratio. Then add Design Presets for typography combinations the defaults don’t cover (eyebrow text, oversized hero headings, pull quotes). Every preset internally uses 8-point or 4-point values for its padding and dimensions.

→ Full setup in the typography post.

Global Settings > Containers

Open the three-dot menu at the top right of the Breakdance builder and pick Global Settings > Containers. Set defaults for:

• Section vertical padding. A multiple of 8.
• Section horizontal padding. A multiple of 8.
• Container width. A multiple of 8 (1200 and 1280 are common).
• Column Gap. A multiple of 8 (24 and 32 are common).

Every new section starts at those values. You don’t choose padding for each section separately. (learn more about Global Spacing in Breakdance)

Design Presets

For element-level styles (cards, buttons, callouts, hero blocks), save Design Presets that bundle padding, dimensions, typography, and spacing into a named style. Apply the preset to any element. Change the preset once, every instance updates.

A “Card” preset with 32px internal padding, 24px gap between elements, and 16px border radius means every card on your site has the same 8-point internal rhythm. You don’t apply the rule per card. You apply the preset, and the rule comes with it.

(We cover Design Presets in detail in the next email.)

The bigger picture

The 8-point rule isn’t enforced by remembering to type “24” instead of “22” every time you set padding. It’s enforced by building a small set of named styles (colors, typography defaults, spacing defaults, presets) and reusing those names everywhere instead of typing pixel values directly.

Your discipline goes into setting up the system once, not into checking every value during every build.

7. When to break the rule

The rule is a default, not a law. Some legitimate exceptions:

• Aligning to an image. A hero photo at 720px or 850px isn’t an 8-point value. Align the surrounding spacing to the image, not the grid.
• Matching fixed-width design elements. A logo lockup, a stamp, a partner badge that comes in at an arbitrary width. Align to it.
• Optical adjustments. Sometimes a value needs to look right at the cost of being technically off-grid. A heading that’s centered mathematically can look off-center to the eye because of letter shapes. Nudge it 1-2px until it looks balanced.
• Grid columns. A 12-column grid in a 1280px container with 32px gutters has column widths that aren’t multiples of 8. Use the grid’s column widths, not the 8-point list.

The exceptions are where your eye still has to do work. Most of your spacing and sizing decisions are already made for you by the rule. The small share that aren’t is where the interesting design judgment happens.

8. A simple decision checklist

1. Open Global Settings > Containers in Breakdance. Set Section vertical padding, horizontal padding, container width, and Column Gap to multiples of 8.
2. Make sure your typography scale’s resulting paddings and section spacings line up with multiples of 8.
3. Save Design Presets for the components you reuse most (cards, buttons, callouts, hero sections). Use only 8-point values for their padding and dimensions.
4. When building new elements, pick from the list: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128.
5. For fine-grained UI inside components, drop to the 4-point variant: 4, 8, 12, 16, 20, 24.
6. When an exception is needed (image alignment, grid columns), accept it. Don’t force the rule.
7. Once the system is in place, stop thinking about pixel values. Apply named styles. Let the system enforce the rule.

What’s next

Three things hold a design system together: a locked palette, a locked typography scale, and a locked spacing system. Get those three sitting cleanly on top of each other and the design starts holding itself together.

The next move is to bake the 8-point rule into reusable Presets so it travels with every component you build. Design Presets are the Breakdance feature that handles that.

Until then, get the 8-point list memorized and the Global Settings > Containers defaults in place. The rule starts paying off the first day you stop typing pixel values by hand.