Every size, padding and margin in the interface gets set as a multiple of 8 pixels. That is the whole idea behind the 8-point grid system. On the web the unit is 8 px, on iOS it’s 8 pt, and on Android it’s 8 dp.
Google’s Material Design aligns its components to an 8dp grid. IBM’s Carbon goes the same way, building columns, margins and padding from an 8 px mini unit.
Your design tool won’t enforce any of this. Figma’s Help Center (2025) lists a default big nudge of 10 and a default uniform grid of 10pt, so teams have to set 8 themselves.
What is the 8-point grid system?
Take a button that is 40 px tall, with 16 px of side padding and 24 px of space beneath it. Every number is a multiple of 8, so it follows the rule. A button at 37 px tall with 13 px of padding doesn’t.
Component heights fall under the rule, and so do the widths of fixed-size components. Padding inside a component counts too, along with the margins and gaps between components.
Material’s layout guidelines (the Material Design 2 documentation) put app bar and list heights on the 8dp grid and leave their widths to the responsive layout.
It isn’t a column grid. A traditional grid system divides the page width into columns and gutters, while the 8-point grid only controls distances and sizes.
IBM’s Carbon calls the 8-pixel square its mini unit and builds column, row and box dimensions, margins and padding from multiples of it (Carbon 2x Grid documentation). Material aligns all components to an 8dp square baseline grid on mobile, tablet and desktop.
That shared base is why the rule shows up in so many design systems. Two people measuring the same layout land on the same values.
How 8 px resolves at each screen density
Scale 8 px by 1x, 1.5x, 2x or 3x and you get 8, 12, 16 and 24 device pixels. Always a whole number.
The scale factor comes from a screen’s pixel density. Android’s developer documentation defines density buckets of 0.75 (ldpi), 1.0 (mdpi), 1.5 (hdpi) and 2.0 (xhdpi), with mdpi as the baseline.
Screens draw whole pixels, so a half-pixel value gets smeared across two of them and looks soft. Workday’s design documentation credits its 8pt grid with avoiding blurred images caused by half-pixel rendering.
| Spacing value | At 0.75x | At 1.5x | At 2x / 3x |
|---|---|---|---|
| 4 px | 3 | 6 | 8 / 12 |
| 6 px | 4.5 | 9 | 12 / 18 |
| 8 px | 6 | 12 | 16 / 24 |
| 10 px | 7.5 | 15 | 20 / 30 |
| 12 px | 9 | 18 | 24 / 36 |
The table is plain arithmetic, and it shows a limit in the usual explanation. Only 6 px and 10 px break, producing 4.5 and 7.5 at 0.75x.
The ls.graphics post “Why 8pt Grid?” (January 2026) presents eight as the value that divides cleanly at every scale. The same holds for 4 and 12.
Density rules out 6 and 10. It doesn’t separate 8 from 4, so the case for 8 over 4 rests on something else.
Which values belong on the 8-point spacing scale?
Start with 8, 16, 24, 32, 40, 48 and 64 px, then add 4 px as the one half-step below them. Breakdance’s practical guide extends the scale to 80, 96 and 128 px for page-level spacing.
The small end of the scale, 8 to 16 px, handles space between related items and padding inside components. Gutters and gaps between cards usually sit at 24 to 40 px (HB Reavis’s brand guide lists gutters of 8, 16, 24, 32 or 40 pt). Once you pass 48 px, you’re separating page sections.
The 4 px half-step adds 4, 12, 20 and 28 to the scale. Material keeps its 4dp grid for icons, type and elements inside components, and uses the 8dp grid for the components themselves.
Carbon’s fixed sizing scale is 8, 16, 24, 32, 48, 64 and 80 px, which skips 40 and 56. Its sizing multiples run 1x, 2x, 3x, 4x, 6x, 8x and 10x of the 8 px unit, so 5x and 7x never appear (Carbon 2x Grid documentation).
Material uses a 56dp toolbar and a 72dp list item, two multiples of 8 that Carbon leaves out. Neither system uses every multiple.
A shorter scale does more work than a complete one. I’d pick seven or eight steps, name them, and treat anything else as a mistake.
Naming is the point of spacing tokens. Workday’s Canvas design system exposes spacing as space tokens built on its 8pt grid.
On the web the same steps convert to rem units. With a 16 px root size, 0.5rem equals 8 px and 1.5rem equals 24 px.
Queensland Health’s design system derives its base spacing unit from 1rem, which equals 16 px in most browsers.
Sizing buttons, icons, text and touch targets on the grid
Component heights and icon boxes sit on multiples of 8. Line heights can use 4 or 8. Touch targets depend on the floor each platform sets.
Buttons and inputs
Material Design 2 puts bar and list heights on multiples of 8, but its button height is 36dp, which only fits the 4dp grid.
Treat the grid as a default. Buttons and inputs usually come out at 32, 40 or 48 px, and a dense layout can drop to the 4 px step when it needs a 36 px control.
Icons
Icon boxes on the 8 scale run 16, 24, 32 and 40 px, while 20 and 28 px come from the 4 px step.
Material aligns toolbar icons to a 4dp grid and pads its 24dp icons out to 48dp touch targets. The drawn icon and its hit area are two different boxes.
Text and line height
Font size doesn’t follow the grid. Line height does, in multiples of 4 or 8 such as 16, 20, 24 and 32 px.
Font size comes from the type scale instead. Apple’s default on iOS is 17 pt (Human Interface Guidelines, Accessibility page).
Material aligns type to the 4dp baseline grid. It lets text centered inside a button or list item sit off that grid when it looks vertically centered.
Touch targets
Material Design 2’s documentation gives the numbers. Components align to an 8dp square baseline grid, with a 4dp grid for icons, type and some elements inside components. A touch target needs at least 48 x 48 dp, with 8dp or more of space between targets. A 48dp target comes to about 9 mm of physical size (Google Accessibility Help).
As of October 2026, Apple’s Human Interface Guidelines list 44 x 44 pt as the default control size on iOS and iPadOS, with 28 x 28 pt as the minimum. Neither number is a multiple of 8. Both are multiples of 4.
That gap is one reason iOS work leans on the 4 px step. Apple’s guidelines also suggest about 12 pt of padding around controls with a bezel and about 24 pt around those without one.
The web accessibility baseline sits lower. WCAG 2.2 success criterion 2.5.8 (Level AA) asks for 24 x 24 CSS pixels, and allows smaller targets when enough space surrounds them (W3C).
Material wants 48dp at minimum and Apple defaults to 44 pt. WCAG’s floor is lower at 24 CSS px. Size the hit area to the relevant number first, then pad the visible icon or label inside it.
8-point grid or 4-point grid: which one fits your project?
Use the 8-point grid when layout is the main design problem and the 4-point grid when dense components are. Most teams land on a split rather than a winner.
Breakdance’s June 2026 guide puts the split plainly, with 8 px between components and 4 px inside them. That inner space covers small elements such as buttons, badges and chips.
| Grid | Governs | Pick it when |
|---|---|---|
| 8-point grid | Component sizes, padding, gaps | Page layouts, marketing sites |
| 4-point grid | Same properties, finer steps | Dense product UI, iOS-first apps |
| 4 px baseline grid | Vertical text rhythm | Type-heavy pages |
| Column grid | Horizontal page structure | Any multi-column layout |
Up to 64 px, an 8-point grid offers 8 values and a 4-point grid offers 16. The real trade is fewer decisions against finer control.
Webflow adopted a 4-point grid for its own Designer and Editor interface, starting with the style panel, and uses every value from 4 to 36 (Webflow Blog, updated January 2019). A 2021 UX Collective post argues the same case and notes how often 12 px ends up as a spacing value.
Material and Carbon, covered above, keep 8 as their base. The disagreement tracks the product. Webflow’s grid governs a dense editor, while those two govern broad component libraries.
Framework defaults already lean on 4. Tailwind CSS defines its spacing unit as 0.25rem (4 px at the default root size) and documents steps such as 1.5, 2.5 and 3.5 units, which are 6, 10 and 14 px (Tailwind version 3 documentation).
The default $spacers map in Bootstrap 5.3 runs from 0.25rem to 3rem, which is 4, 8, 16, 24 and 48 px at a 16 px root size. Four of those five steps sit on the 8-point scale.
My own rule of thumb is simple. Marketing sites and page layouts get the 8-point grid, while dense editors, panels, tables and iOS-first apps get the 4-point grid.
Either choice holds up if every value comes from a named list. The failure is a freehand 13 px.
How to set up the 8-point grid in Figma
Set the big nudge to 8 and build layout guides with stretch columns, using margins and gutters that are multiples of 8. Then store the scale as number variables and feed them into auto layout spacing.
- Choose the method: soft grid for screens, hard grid for icon work.
- Open Preferences, then Nudge amount, and set the big nudge to 8.
- Add layout guides to each frame, using Stretch columns with margin and gutter at multiples of 8.
- Create number variables for each step of the spacing scale, plus the 4 px half-step.
- Apply those variables to auto layout gap and padding.
- Export the same step names to code as CSS custom properties or framework spacing keys.
As of October 2026, Figma’s Help Center lists a default small nudge of 1 and big nudge of 10, both in points, and a default uniform grid of 10pt. That contradicts Breakdance’s claim that Figma’s nudge and snap defaults already assume 8, so change both values yourself.
Figma Community Forum users report a custom big nudge of 8 failing to carry over to Figma Slides (March 2025) and reverting to the default between sessions. Recheck the value when drags stop landing on 8.
Hard grid or soft grid
A hard grid is a uniform grid with a size of 8, so every square measures 8 by 8 px. Figma’s Help Center describes uniform grids as useful for precision work such as symbols and icons.
A soft grid works differently. It’s a column or row layout guide with properties divisible by 8, and the elements on it sit at distances divisible by 8. Stretch columns suit it because their width stays automatic and only margin and gutter are yours to set.
Figma’s page presents both methods without ranking them. A popular uxdesign.cc guide calls the hard grid too rigid and impractical to code.
Figma renamed layout grids to layout guides in May 2025, and its Help Center now treats them as a separate feature from the grid option in auto layout. Anyone new to the tool can start with a walkthrough on making a grid in Figma.
Use the soft grid for screens and the hard grid only on icon canvases.
Variables and auto layout
Figma’s number variables hold values such as 24 or -8, and any variable can alias another of the same type (Figma Help Center).
Spacing is the easiest job for variables in Figma, because aliasing lets you stack layers. The raw steps sit at the bottom (4, 8, 16, 24, 32, 40, 48 and 64), and role names such as gap-tight, gap-default and section-gap go on top, each pointing at a raw step.
Auto layout then takes those variables for gap between items and padding. Holding Shift while dragging the handles moves in big-nudge steps, which is why the nudge change matters (Figma Help Center).
Handoff to CSS
Map each step to the unit the codebase already uses. Tailwind’s spacing numbers and Bootstrap’s size keys cover the scale unevenly.
| Scale step | Tailwind unit | Bootstrap size |
|---|---|---|
| 8 px | 2 | 2 |
| 16 px | 4 | 3 |
| 24 px | 6 | 4 |
| 32 px | 8 | none by default |
| 48 px | 12 | 5 |
In Tailwind, every even number sits on the 8-point scale and every odd whole number is a 4 px half-step.
Bootstrap has no 32 px or 40 px step out of the box. Add entries to the $spacers Sass map before designers start using those values.
When the 8-point grid does not apply
It doesn’t apply to column widths, fixed-size media, optically centered elements or components the platform draws for you.
Column widths
Twelve columns in a 1280 px container with 32 px gutters and no outer margin come out at 77.33 px each.
No multiple of 8 fits there. Keep margin and gutter on the scale and let the columns flex, as responsive design already expects.
Fixed-size media
A hero image delivered at 850 px wide is not a multiple of 8.
Breakdance’s advice is to align the surrounding spacing to the image, not to the grid.
Optical centering
Webflow’s post on its 4-point grid admits that centering elements vertically can produce 6 px gaps, and that pills get non-standard padding for a more natural shape (Webflow Blog, updated January 2019).
Platform components
Spec.fm’s 8-point grid guide notes that many iOS system UI elements are not defined by an even grid.
Treat each exception as a decision someone made, and write it down. An unexplained 13 px is a bug.
Common Questions About the 8-Point Grid System
Who created the 8-point grid system?
No single inventor appears in the sources. Material Design documents an 8dp baseline grid, and Elliot Dahl’s introduction on the Built to Adapt blog calls Bryn Jackson’s guide the most comprehensive one.
Does 8-point mean pixels, points or dp?
The unit follows the platform. Web design counts CSS pixels, iOS counts points, and Android counts density-independent pixels (dp), where one dp equals a pixel on a 160 dpi screen.
All of them scale with screen density.
Which design systems use the 8-point grid?
Material Design, IBM Carbon and Workday Canvas document an 8-unit base in their own guidelines. The Queensland Health design system also builds its vertical rhythm on an 8 px grid.
Is the 8-point grid a CSS feature?
No. CSS has no setting for it. The rule lives in the spacing scale a team agrees on and in the tokens or rem values that carry it into code.
Moving an Existing Product onto the 8-Point Grid System
Start by auditing every distinct spacing value. List each unique padding, margin and gap so the scale covers what the product really uses, then snap each value to the nearest step or to the 4 px half-step. After that, replace components one at a time, beginning with the most reused ones. A full rebuild isn’t needed.
Webflow migrated this way, phasing out old components as it went instead of rebuilding the whole interface (Webflow Blog, updated January 2019).
The price is a mixed interface for months, with old and new spacing side by side. Log each deliberate exception in the team’s design system documentation so a leftover 13 px is not mistaken for one.
As of October 2026 that order holds. A new default control size from Apple or Google would change which steps need protecting.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
