Open almost any interface you find easy to use and measure the gaps. The space under a heading, the padding inside a button, the distance between two cards: chances are they land on 8, 16, 24, or 32 pixels. That is not a coincidence. It is the 8-point grid system, the quiet convention that most modern design systems run on, and it is one of the fastest ways to make a screen feel considered instead of thrown together.
The idea is almost embarrassingly simple. You pick a base unit of 8 pixels, and every space in your layout becomes a multiple of it. Padding, margins, gaps between elements, even the height of components all get drawn from the same short list of numbers. In this guide we will cover why 8 works so well, how to actually apply the 8-point grid system in real screens, where a 4-point half step earns its place, and the mistakes that quietly undo the whole thing.
What the 8-point grid system actually is
An 8-point grid is a spacing scale, not a visual overlay you have to stare at. Instead of choosing spacing by eye and typing whatever number feels right, you commit to a fixed set: 8, 16, 24, 32, 40, 48, 64, and so on. When you need room between two things, you pick from that list. When you need padding inside a card, you pick from that list. The list becomes the vocabulary you design in.
People sometimes confuse this with a column grid, the twelve vertical columns used to align content across a page. They are different tools that happily coexist. Column grids handle horizontal structure at the page level. The 8-point grid handles the small, repeated spacing decisions inside and between components. You want both, but the 8-point grid is the one that touches almost every element you place.
Why 8 and not 10
Ten looks like the obvious round number, so why does the industry lean on 8? A few reasons stack up. Eight divides cleanly in half twice, giving you 8, 4, and 2 for fine adjustments without landing on awkward fractions. It also plays nicely with the range of screen densities on phones and laptops, where designs get scaled by factors like 1.5x and 2x. A value of 8 stays a whole number when doubled or halved across those densities, while a base of 10 can drift into blurry half pixels. The practical payoff is a scale that feels tight enough for small controls and roomy enough for whole sections, all from one rule.
How to apply it to a real screen
The clearest way to learn the 8-point grid system is to walk a single card through it. Say you are building a small product card with a label, a title, two lines of body text, and a button.
- Inside the button: 12px vertical padding and 16px horizontal padding. Text hugs the edges by a comfortable, repeatable amount.
- Between the title and the body text: 8px. They belong together, so the gap is small.
- Between the body text and the button: 24px. A larger gap signals a shift from reading to acting.
- Padding around the whole card: 24px on every side, so the content never touches the edge.
- Gap between cards in a row: 16px or 24px, depending on how much breathing room the layout wants.
Notice what happened. Every decision came from the same short list, and the differences in spacing now mean something. A small gap says these things are related. A large gap says a new idea starts here. Spacing stops being decoration and starts carrying information, which is the real reason grid-aligned screens feel calmer to use.
The internal versus external rule
One habit sharpens everything: the space inside a group should be smaller than the space around it. If the padding inside a card is 24px, the gap between cards should be equal or larger, never smaller. When inner spacing exceeds outer spacing, elements visually bleed into their neighbors and the eye cannot tell where one group ends and the next begins. Keeping internal spacing tighter than external spacing is what makes a busy screen still parse at a glance.
When to reach for a 4-point half step
A pure 8-only scale can feel blunt for tiny elements. The gap between an icon and its label, the padding inside a small chip, the space between a checkbox and its text: at that scale, jumping from 8 to 16 is often too much. This is where a 4-point half step earns its keep.
The common convention is to use 4px increments for spacing inside small components and reserve 8px increments for spacing between components and for component dimensions. So a chip might use 4px and 8px internally, while the layout that holds a dozen chips still moves in 8, 16, and 24. You are not abandoning the grid. You are giving it a finer setting for the smallest work, the same way a ruler has both centimeter and millimeter marks. If you want an icon set that already reads well at those small sizes, the ruler 3D icon and the rest of the Thridy icon library are drawn to sit cleanly on this kind of spacing.
Turning the scale into tokens
The 8-point grid system pays off most when the numbers stop living in your head and become named design tokens. Rather than remembering that a section gap is 32px, you define a small set of spacing tokens and reference those everywhere.
space-1: 4px
space-2: 8px
space-3: 12px
space-4: 16px
space-6: 24px
space-8: 32px
space-12: 48px
space-16: 64pxNow a designer in Figma and an engineer in CSS are pointing at the exact same value. When someone says space-6, everyone means 24px. Handoff gets faster because there is nothing to eyeball or translate, and if the scale ever changes, it changes in one place. This is the same logic behind treating spacing, color, and type as a shared system rather than a pile of one-off values. If you are organizing a library of visual assets to match, sorting them by use in the Thridy categories keeps the icon side of your system as tidy as the spacing side.
Let tools snap for you
You do not have to hold all of this in memory. Most design tools let you set the nudge distance, the amount an element moves when you press an arrow key, to 8px, and a larger nudge to a bigger multiple. Auto layout in Figma and the spacing utilities in CSS frameworks like Tailwind already expose spacing on an 8-based scale by default. Configure the environment once and staying on the grid becomes the path of least resistance instead of a discipline you have to enforce by hand.
Common mistakes that break the grid
The system is easy to describe and easy to quietly sabotage. A few patterns show up again and again.
- Sneaking in off-grid values. A stray 15px here, a 22px there, usually copied from a hasty mockup. Individually invisible, collectively they turn a clean layout into visual static.
- Fighting optical alignment. The grid is a strong default, not a religion. Icons, rounded shapes, and text with heavy descenders sometimes need a pixel or two of nudge to look centered even when they are not mathematically centered. Trust your eye for these; the grid handles the other 95 percent.
- Forgetting line height counts. Text sits in a box taller than the letters, so a heading's real footprint includes its line height. Add margins on top of that without thinking and your careful 24px gap becomes 34px in practice. Account for the box, not just the ink.
- Applying it only to new work. A grid is only as consistent as the least consistent screen. Retrofitting existing pages is tedious, but a half-migrated product looks worse than one that never tried, because the eye notices the inconsistency.
Why this small rule matters so much
Spacing is the most common decision in interface design and the one designers most often make on instinct. The 8-point grid system replaces a thousand tiny judgment calls with a single decision made once, which frees your attention for the problems that actually deserve it: hierarchy, flow, and how the whole thing feels to move through. It also gives a team a shared language, so a designer, an engineer, and a product manager can all say 16px and mean the same thing.
You do not need a heavyweight design system to start. Pick 8 as your base, write down the scale, set your tool's nudge distance, and apply it to the next screen you build. Within a few components the rhythm starts to feel obvious, and going back to guessing will feel like typing without spellcheck. Consistency, it turns out, is mostly a matter of choosing your numbers before you need them.
