Material Design (2014–present)
The specification that formalised the convention. Material Design's adoption by Android, by Google's web products, and by hundreds of third-party apps propagated the 8pt grid to billions of users.
Typography Grids · UI spacing system · Material Design 2014 → present · Beginner
The 8pt Spacing Grid
The UI rhythm scale of modern product design. Margins, padding, gaps between elements, line-heights — all constrained to multiples of 8 pixels. The convention adopted by Google Material Design (2014), Apple iOS, Bootstrap, Ant Design, IBM Carbon, Microsoft Fluent, and every major design system shipped in the last decade. Replaces the unpredictable spacing of pre-system design with a clean integer scale of 8, 16, 24, 32, 40, 48, 56, 64 pixels — plus a 4pt sub-grid for finer spacing within components. The single most-distributed typography-grid principle of the modern era.
- Formalised
- 2014 (Material Design)
- Popularised by
- Bryn Jackson, Spec.fm 2014
- Scale
- 8, 16, 24, 32, 40, 48, 56, 64
- Difficulty
- Beginner
- Sub-grid
- 4pt for fine spacing
- Also known as
- 8-point grid, UI spacing system
See the 8pt grid on five UI contexts
‹›
On a mobile app screen, every spacing decision lands on the 8pt grid. Padding around the screen edge: 16. Spacing between cards: 16. Inset padding within cards: 16. Icon-to-text gap: 8 (4pt half-step). Status bar height: 24 (multiple of 8).
What the overlay shows
The 8pt spacing grid overlay draws a network of horizontal and vertical lines at 8-pixel intervals across the entire interface. Every component edge, every text baseline, every icon position must coincide with a grid line — that is the entire content of the design system convention. An optional 4pt sub-grid shows the half-step subdivisions for finer intra-component spacing.
The overlay is parameterised by base interval (8px is canonical, 4px for fine work, 16px for compressed display), grid colour, and optional sub-grid visibility. The grid extends in both directions to the canvas edges; UI elements snap to grid intersections for clean rendering at every device pixel-density.
The spacing scale arithmetic
The 8pt grid produces a small discrete set of valid spacing values:
8pt scale: 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96
4pt sub-grid: 4, 8, 12, 16, 20, 24, 28, 32
typical scale used per component:
· 4px — icon-text gap inside button
· 8px — padding inside small badge
· 16px — card body padding
· 24px — between sibling cards in list
· 32px — section margin in page
The discrete-scale constraint forces deliberate spacing decisions rather than the eyeballed values that produce unpredictable interfaces. 8pt subdivides evenly into the 1x, 1.5x, 2x, and 3x screen pixel densities used by Android and high-DPI displays, producing whole-pixel rendering on all common devices — the engineering rationale that gives the convention its real basis beyond mere aesthetic preference.1
History — from iOS pre-systematic spacing to Material Design
Verified history (with primary sources)
2007 — iOS Human Interface Guidelines. Apple's iPhone HIG documentation already specified 4pt and 8pt spacing values for iOS interface elements, but did not name the underlying system or explicitly require all spacing to be multiples of these values.2 The convention was implicit in Apple's own UIKit components but not codified as a design-system principle.
2011 onward — Twitter Bootstrap. Twitter Bootstrap uses consistent 5px and 10px spacing in its early versions; later versions move toward 4px and 8px multiples that align with the emerging convention.3 Bootstrap is the most-distributed CSS framework of the 2010s and propagates its spacing conventions to millions of websites.
June 2014 — Material Design. Google releases the Material Design specification at I/O 2014, explicitly defining an 8dp baseline grid for spacing in addition to the 4dp grid for finer subdivisions.1 The specification is the first widely-distributed design system to name the 8pt convention and require it as a principle. Material Design is published under permissive licensing and adopted by hundreds of major Android and web applications within a year.
December 2014 — Jackson on Spec.fm. Bryn Jackson publishes "The 8-Point Grid" on Spec.fm, the most-circulated single design-community article on the convention.4 Jackson articulates the engineering rationale (whole-pixel rendering at multiple screen densities) and the design rationale (consistency across components) in terms that designers without deep technical background can apply.
2015–2017 — design-system propagation. Major design systems adopt the 8pt convention in succession: IBM Carbon (8pt grid from launch in 2014), Microsoft Fluent (4pt and 8pt 2017), Atlassian Design System (8pt 2017), Ant Design (8pt from launch 2015), Shopify Polaris (8pt 2017), GitHub Primer (8pt 2017).5 Within three years of Material Design's release, the convention is the de-facto industry standard for product design.
2018 — Schoger and Wathan. Steve Schoger and Adam Wathan publish Refactoring UI, the most-distributed contemporary UI design teaching resource. The book explicitly teaches the 8pt convention as foundational practice.6 Tailwind CSS, also by Wathan, ships with the 8pt scale built into its default spacing utilities.
2020s — universal adoption. Figma, Sketch, and Adobe XD ship with 8pt grids as defaults in new file templates. Tailwind CSS spacing utilities use the 8pt scale (with 4pt subdivisions). All major mobile platforms, all major design systems, all major UI frameworks default to 8pt spacing as canonical.
Unverified claims that won't die
"Bryn Jackson invented the 8pt grid." Jackson popularised and articulated the convention but did not invent it. Material Design's specification predates Jackson's article by approximately six months; Apple's iOS used 4pt and 8pt spacing implicitly before either. Jackson's contribution was clear articulation rather than invention.
"The 8pt grid is universal across cultures and traditions." Print typography uses different spacing conventions (typically based on the body-text leading rather than a fixed pixel scale). The 8pt grid is specifically a screen-rendering convention motivated by pixel-density alignment; print typography uses related but distinct logic via the baseline grid.
When to use it (and when not)
| If you want to... | Use 8pt grid | Don't use it for... | Difficulty |
|---|---|---|---|
| Design a mobile app (iOS, Android) | Native platform convention; all standard components use 4pt/8pt spacing | Highly stylised one-off apps where the convention reads as generic | Beginner |
| Build a dashboard or admin interface | Every major dashboard design system uses 8pt; consistency across components | Display dashboards or kiosk screens where viewing distance changes the rules | Beginner |
| Design with a major design system (Material, Carbon, Fluent) | Required for component compatibility; mixing 8pt and non-8pt spacing breaks the system | Custom design systems with their own conventions | Beginner |
| Implement layout with Tailwind CSS or Bootstrap | Default spacing utilities use the 8pt scale; on-grid spacing requires no custom CSS | Frameworks with non-8pt defaults (rare; some specialised systems) | Beginner |
| Maintain spacing consistency across a multi-person product team | The discrete scale eliminates spacing debates; designers cannot choose 14 vs 16 when only 16 is valid | Single-designer projects with strong taste and short timelines | Beginner |
Famous applications
Six design systems where the 8pt grid is the foundational spacing convention.
Apple iOS Human Interface Guidelines
Apple's HIG used 4pt and 8pt spacing implicitly before Material Design formalised the convention. Contemporary iOS uses the convention universally across system apps and SDK component libraries.
IBM Carbon Design System
Enterprise design system with strict 8px grid throughout. Used across IBM Cloud, Watson, and most enterprise IBM software. The most-cited enterprise example of the convention.
Ant Design (2015–present)
One of the most-used enterprise UI frameworks globally. 8px base grid used consistently across hundreds of components. Documentation site itself uses the same grid as the components it documents.
Tailwind CSS
Default spacing utilities use the 8pt scale (with 4pt subdivisions). Tailwind ships with the convention built into its core spacing classes; developers using Tailwind defaults are already using the 8pt grid without explicit decision.
Schoger & Wathan, Refactoring UI (2018)
The most-distributed contemporary UI design teaching book. Explicitly teaches the 8pt convention as foundational practice; influences the working habits of millions of designers and developers worldwide.
Common mistakes
1
Using arbitrary spacing values
The single most common error. Designers reach for values like 14, 18, 22, 30, 50 because they "look right." These break the system, propagate to engineering, and produce inconsistent spacing across components. The fix is the discipline of the discrete scale.
Fix: if a spacing value isn't 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, or 64, ask why. Usually the answer is that the right value is the nearest multiple of 4 or 8 and the eyeball was wrong.
2
Mixing pixel-based and rem-based spacing
CSS rem units multiply by the user's root font size, so 1rem = 16px (default). Mixing 8px and 1rem in the same design produces unpredictable spacing when users adjust their text size. The 8pt grid works in absolute pixels (or dp on Android, pt on iOS), not in user-scalable units.
Fix: pick one unit system per design system. For pixel-based design systems use px throughout; for rem-based use 0.25rem (4px equivalent) and 0.5rem (8px) consistently. Don't mix.
3
Ignoring the grid for "art-directed" exceptions
Some designers maintain the 8pt grid for "normal" UI but break it for hero sections, marketing pages, or feature announcements. The result is jarring transitions between on-grid and off-grid regions of the same product.
Fix: maintain the grid even in art-directed contexts. Hero sections with 96px padding instead of 100px still feel premium and read on-system. The grid does not constrain creativity; off-grid exceptions do not improve aesthetics.
4
Forgetting the typography line-height multiplier
Body text with line-height 22px breaks the grid even if every padding value is 8-multiple. The text baseline drifts off-grid every line, breaking vertical rhythm. Typography must align to the spacing grid for the system to actually function.
Fix: body line-height must be 16, 20, 24, 28, or 32 px (multiples of 4). Adjust font size to fit the line-height rather than the other way around. The resulting text might be 13px or 15px instead of 14px — that is fine because the rhythm reads more strongly than the slightly-different font size.
How different disciplines use it
For product designers
The 8pt grid is foundational practice. Every major design tool (Figma, Sketch, Adobe XD) ships with 8pt grids in default templates. The discipline of the discrete scale eliminates spacing debates within multi-person product teams and produces interfaces that scan as professional rather than approximate.
For mobile designers
Native iOS and Android use 4pt and 8pt spacing universally. Working in 8pt aligns design with platform-native rendering at every device pixel density (1x to 4x). Material Design and Apple HIG both explicitly recommend the 8pt convention.
For web developers
Tailwind CSS, Bootstrap, Ant Design, IBM Carbon, and most major CSS frameworks ship 8pt-aligned spacing utilities by default. Using framework defaults produces 8pt-grid-aligned interfaces automatically; the convention requires no custom CSS to implement.
For design system maintainers
The 8pt grid is the single most important convention to enforce in a multi-team design system. Spacing tokens at 4, 8, 12, 16, 24, 32, 48, 64 in the design system give designers and engineers a fixed vocabulary; arbitrary spacing requests should be rejected back to the system. IBM Carbon, Microsoft Fluent, and Shopify Polaris all enforce strict 8pt-token-only policies.
"Spacing is often considered the last thing to think about, but it's the first thing the eye notices. Get the spacing right with a strict 8pt grid, and the rest of the design has somewhere to live. Get it wrong, and no amount of beautiful colour or typography will save the interface from feeling amateur."
Adam Wathan & Steve Schoger, Refactoring UI (2018)6
Frequently asked questions
What is the 8pt spacing grid?
A UI-design convention that constrains all spacing decisions (margins, padding, gaps between elements) to multiples of 8 pixels. Adopted as the canonical spacing scale by Google Material Design (2014) and propagated through Bootstrap, Ant Design, IBM Carbon, Apple iOS, and most major design systems.
Why 8 specifically?
Several reasons. 8 divides evenly into common device pixel densities (1x, 1.5x, 2x, 3x) producing whole-pixel rendering. 8 produces a usefully-sized scale (8 to 64 in 8 values). 8 contains 4 and 2 as factors, allowing 4pt and 2pt sub-grids for tighter contexts.
When did the 8pt grid become standard?
Google Material Design (June 2014) formalised it. Bryn Jackson's December 2014 article on Spec.fm popularised it. Within 18 months most major design systems had adopted the convention.
What is the 4pt sub-grid?
The 4pt sub-grid is the half-step subdivision of the 8pt grid, used for finer spacing within single components (icon-text gaps, badge padding, table-row gaps). Both grids compose: spacing lands on a 4pt or 8pt multiple consistently.
How does the 8pt grid interact with typography?
Typography line-heights must be multiples of 8 (or 4) so text baselines align to the spacing grid. Common body line-heights: 16, 20, 24, 28, 32px. Font size is chosen to fit the line-height, not the other way around.
Does the 8pt grid apply to desktop apps?
Yes. Apple macOS HIG, Microsoft Fluent Design, and modern Linux desktop environments all use 4pt and 8pt spacing. The convention is cross-platform.
What about mobile (iOS, Android)?
Mobile is where the 8pt grid actually originated. iOS used 4pt and 8pt before Material Design formalised the system; Android Material Design codified the 8dp baseline. Both platforms render at multiple pixel densities; 8 divides evenly into common scaling factors.
Are there alternatives to the 8pt grid?
Some systems use 4pt (Atlassian), 6pt (specialised), or 10pt (desktop-only) as the base. The 8pt convention dominates because Material Design's massive distribution made it the de-facto industry standard. Working against the convention adds friction without typically adding value.
References
- Google. Material Design Specification, Spacing & Layout Section. Google Inc. (2014–present). material.io/design/layout/spacing-methods.html. The canonical specification establishing the 8dp baseline convention.
- Apple. iOS Human Interface Guidelines, Layout & Spacing. Apple Inc. (2007–present). developer.apple.com/design/human-interface-guidelines. Pre-systematic spacing convention that anticipated the explicit 8pt grid.
- Otto, M. & Thornton, J. Bootstrap Documentation. Twitter / now independent (2011–present). getbootstrap.com. Spacing conventions of the most-distributed CSS framework of the 2010s.
- Jackson, B. "The 8-Point Grid." Spec.fm (4 December 2014). The most-circulated single design-community article popularising the convention with engineering rationale.
- IBM. Carbon Design System Documentation. IBM (2014–present). carbondesignsystem.com. Enterprise design system with strict 8pt grid; one of the most-cited examples of the convention applied rigorously.
- Schoger, S. & Wathan, A. Refactoring UI. Self-published (2018). ISBN 978-1-7325988-0-9. The most-distributed contemporary UI design teaching book; explicitly teaches the 8pt convention as foundational practice.
- Microsoft. Fluent Design System Documentation. Microsoft (2017–present). fluent2.microsoft.design. Cross-platform design system using 4pt and 8pt grids across Windows, Office, and Microsoft 365.
- Alibaba. Ant Design Documentation. Alibaba Group (2015–present). ant.design. One of the most-used enterprise UI frameworks; 8px base grid used consistently across hundreds of components.
Notes from the studio · Three practitioners on 8pt grids
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
Every product I've shipped in the last decade has used 8pt grids. The discipline of the discrete scale eliminates 80% of the spacing debates in design review.
For mobile design the 8pt grid is non-negotiable. Pixel-density rendering across iOS and Android scales depends on the multiples lining up cleanly.
When we audit a new design system at the studio the first check is 8pt-token compliance. Systems without it cost twice as much to maintain.
Open the 8pt Spacing Grid overlay
Drop a UI reference. The 8pt grid overlay applies in one click. Free, in your browser.
Launch Grid Maker Pro →