8pt grid (also: 8-point grid)
Noun. A UI spacing system that constrains all margins, padding, gaps, and component dimensions to multiples of 8 pixels — 8, 16, 24, 32, 48, 64, 96. The 4pt half-step is sometimes used for finer control. The result is system-wide rhythm consistency across every screen of a product.
Origin
The 8pt grid emerged from Google's Material Design system, launched in 2014 with explicit 8dp grid mandates throughout the spec. Bryn Jackson's 2015 article "The 8-Point Grid" (published on Spec.fm) gave the system its now-universal name and made the case to designers outside Google. By 2017 the standard was industry-wide.
Why 8
8 is divisible by 1, 2, 4, and 8 — flexible for half-step (4) and quarter-step (2) spacing if needed. It scales cleanly across common display densities (1×, 1.5×, 2×, 3×) without producing fractional pixel values. It's also small enough to be precise but large enough that the multiples (16, 24, 32, 48) read as visibly distinct increments rather than noise.
In tools and frameworks
Tailwind's spacing scale defaults to 4px increments (so every-other token = 8pt multiple). Material Design tokens are 8dp. iOS HIG implies 8pt though doesn't mandate it. Most design systems (Carbon, Polaris, Lightning, Mantine) ship spacing tokens that follow the 8pt rhythm.
Common 8pt-grid component sizes
The 8pt grid produces a canonical set of component dimensions that recur across most design systems. Buttons: 32, 40, 48, 56 px tall. Text inputs: same heights as matching buttons. Icons: 16, 24, 32, 48 px. Avatars: 32, 40, 48, 56, 64 px. Card padding: 16 or 24 px inside, 24 or 32 px gap between cards. Touch targets minimum 44 × 44 px (Apple HIG) which approximates the 48 px button size. Each of these values is on the 8 px scale and produces a coherent visual rhythm when used together.
4pt half-steps — when finer control is needed
Pure 8 px increments can feel coarse for small UI elements (chips, badges, dense data tables). The 4pt half-step compromise (4, 8, 12, 16, 20, 24, 28, 32 px) gives twice the resolution while still maintaining a regular geometric pattern. Material Design's "4dp keyline" and Carbon Design System's 4 px increments both use this approach. The 4pt scale is typically used only for component-internal spacing; the larger layout spacing still snaps to 8 px multiples.