---
title: "Designing on an 8px grid"
description: "Why every size on this site is a multiple of eight, and what that one rule buys a client at handover."
canonical: "https://goodtogrid.com/blog/eight-pixel-grid"
updated: "2026-09-22"
---

# Designing on an 8px grid

> Why every size on this site is a multiple of eight, and what that one rule buys a client at handover.

URL: https://goodtogrid.com/blog/eight-pixel-grid · Published: 2026-09-22 · Topic: Design · 5 min read · By goodtogrid studio

## Key takeaways

- Every size is a multiple of eight, or a clean half of one, so hundreds of small decisions are made once.
- Type bends the rule: line heights follow the grid, font sizes follow the eye.
- A 1px border belongs to the element it outlines; count the box, not the stroke.
- The payoff is handover, with fewer one-off values, fewer rounding bugs and spacing that explains itself.

## Why eight
Every measurement on goodtogrid.com — padding, gaps, the height of a button, the space between a heading and its paragraph — is a multiple of eight, or a clean half of one. It isn’t a religion. It’s a way of making hundreds of small decisions once, so we can spend our attention on the decisions that matter.

Eight divides cleanly into the screen widths people actually use. It scales to half and one-and-a-half without landing on blurry half-pixels. And it gives a team a shared vocabulary: nobody debates 13px against 14px. The answer is 8, 16 or 24.

## Where the grid bends
Type is the first exception. Line heights follow the grid; font sizes follow the eye. A 15px body set on a 24px line still sits on the grid, even though 15 doesn’t divide by anything useful.

Borders are the second. A 1px hairline belongs to the element it outlines, so a 40px button with a border is still a 40px button. Count the box, not the stroke.

> “The grid doesn’t make a design good. It makes a design easy to keep good.”
>
> — Studio rule, pinned above every file

## What it buys a client
Handover. When a developer, another designer, or future-you opens the file six months later, the spacing already explains itself. Fewer one-off values means fewer bugs that are really just rounding, and fewer meetings about why two cards don’t quite line up.

That’s the whole idea behind our name: work is ready when it sits right on the grid.

Keywords: 8px grid, spacing system, design systems, interface design, design handover

## Related notes

- [Dark interfaces without the mud](https://goodtogrid.com/blog/dark-without-mud) — Design · 4 min read. Three surface steps, one accent, and borders that do the work: the rules we follow for dark UI.
- [Prototype in the medium you ship](https://goodtogrid.com/blog/prototype-in-the-medium) — Engineering · 5 min read. When a static mockup hides too much, and what we build in code before we build for real.
- [From slide deck to website](https://goodtogrid.com/blog/deck-to-website) — Studio · 6 min read. What we learned turning a preschool’s curriculum presentation into a site parents actually browse.

More notes: [all notes](https://goodtogrid.com/blog) · [RSS](https://goodtogrid.com/rss.xml)