We are an 8px grid studio. Every component, every layout, every handoff – it's 8s all the way. Some teams have moved on to 4px or ditched the grid entirely, and that's their call. But we think the 8px grid is one of the best decisions a design team can make, and we've never once regretted committing to it. It didn't come from nowhere, though. It took centuries of gridded thinking, a few retina screens, and some very opinionated blog posts to arrive at this beautifully simple number. Here's the history we're standing on.
1. Scribes draw lines on parchment (c. 800 AD)
The oldest grid is a horizontal one
Before pixels existed, medieval scribes solved the same problem we solve today: how do you keep things aligned? They ruled faint horizontal lines onto vellum so their lettering stayed straight and evenly spaced. It was a baseline grid, plain and simple. The idea that invisible structure makes visible things better has been with us for over a thousand years. We just didn't call it a "system" yet.
2. Müller-Brockmann writes the book (1961)
Grid Systems in Graphic Design becomes the bible
Swiss designer Josef Müller-Brockmann didn't invent the grid, but he codified it. His 1961 book, Grid Systems in Graphic Design, gave designers a shared vocabulary for modular layouts – columns, gutters, baselines, the works. The International Typographic Style he championed treated the grid not as a constraint but as a liberation: once the structure is decided, every decision that follows gets easier. That principle hasn't aged a day.
3. The web arrives with no grid at all (1995 – 2005)
Tables, spacer GIFs, and vibes
Early web design was gorgeous chaos. Designers hacked HTML tables into layout grids, dropped in transparent 1x1 pixel GIFs to force spacing, and prayed it looked the same in Netscape and IE. There was no shared spatial system because there was barely a shared rendering engine. The pixel existed, sure, but nobody had agreed on what to do with it yet. Every site was a bespoke disaster.
4. Apple ships the Retina display (2010)
One pixel is no longer one pixel
When Apple doubled the pixel density on the iPhone 4, it broke a fundamental assumption: that a pixel on screen was the smallest unit you'd ever need to think about. Suddenly designers had to consider @2x and @3x scaling. Assets that worked at 1x fell apart at higher densities. Odd numbers became a problem – 5px doesn't divide cleanly into a 2x grid. Even numbers, especially multiples of 8, divided beautifully every time. The seed was planted.
5. Google launches Material Design on an 8dp grid (2014)
The biggest design system in the world picks a number
At Google I/O in June 2014, Matías Duarte unveiled Material Design – and baked an 8dp baseline grid right into the spec. Components snapped to 8-pixel increments. Typography aligned to a 4dp sub-grid. Touch targets landed on 48dp (that's 8 × 6, for those keeping score). It was the first time a major platform said, publicly and loudly, "this is the number." Millions of Android developers started spacing in 8s whether they knew the theory or not.
6. Bryn Jackson and Elliot Dahl write the manifestos (2016)
The community gets its playbook
Google made the 8px grid official, but two designers made it accessible. Bryn Jackson's guide on Spec.fm defined the concepts of "hard grid" (every element snaps to an 8px canvas grid) and "soft grid" (elements are sized in multiples of 8 but placed freely). Elliot Dahl's "Intro to the 8-Point Grid System" on Medium broke down why 8 works – most screen sizes are divisible by it, it scales cleanly, and it eliminates half-pixel rendering. These weren't academic papers. They were practical, opinionated, and shareable. The 8px grid went from a Google spec to a community movement.
7. Figma makes the grid feel automatic (2019 – 2022)
Auto layout, variables, and design tokens do the enforcing
Tools shape habits. When Figma shipped auto layout, designers could set padding and gap values once and let the system maintain them. Set your spacing tokens to 8, 16, 24, 32 and suddenly the grid isn't a discipline – it's a default. Design tokens and variables turned the 8px grid from a convention you had to remember into infrastructure you could encode. Nudge settings got updated. Plugins generated spacing scales. The grid stopped being a philosophy and started being a feature.
8. The 4px grid enters the chat – and we respectfully decline (2022 – present)
We heard the argument. We're staying put.
The 4px grid has its fans, and we get it. Designers working on dense enterprise dashboards and data-heavy interfaces wanted more stops between "tight" and "roomy." Webflow adopted 4px. Material Design technically uses 4dp as its atomic unit. But here's why we stick with 8: fewer choices means faster choices. When your spacing scale is 8, 16, 24, 32, there's almost never a debate about which value to pick. The constraint is the feature. We've shipped dozens of projects on the 8px grid and it has never been the bottleneck – it's always been the thing that kept us moving.
