DESIGN SYSTEMS & CODE

8pt Grid & Figma Spacing Calculator

Generate an 8pt/4pt spacing scale with exact px/rem values, check any arbitrary pixel value for grid alignment, and export ready-to-use CSS variables, Tailwind config, or Figma variables.

13px is not aligned to the 8pt grid. Nearest values: 8px (down) or 16px (up) — closest is 16px.

Spacing Scale

0
0px0remp-0
1
8px0.5remp-2
2
16px1remp-4
3
24px1.5remp-6
4
32px2remp-8
5
40px2.5remp-10
6
48px3remp-12
7
56px3.5remp-14
8
64px4remp-16
9
72px4.5rem
10
80px5remp-20
11
88px5.5rem
12
96px6remp-24
13
104px6.5rem
14
112px7remp-28
15
120px7.5rem
16
128px8remp-32

compact

Button

padding-x: 24px

padding-y: 12px

gap: 8px

comfortable

Button

padding-x: 32px

padding-y: 20px

gap: 12px

spacious

Button

padding-x: 48px

padding-y: 32px

gap: 16px

:root {
  --space-0: 0px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-11: 88px;
  --space-12: 96px;
  --space-13: 104px;
  --space-14: 112px;
  --space-15: 120px;
  --space-16: 128px;
}
Spacing System Guide

What the 8-Point Grid Actually Solves

The 8pt grid isn't a rule for its own sake - it exists to solve three concrete, recurring problems in UI layout.

1. Composability

If every spacing value is a multiple of 8, any two spacing values you combine (padding + gap, margin + border) also land on the grid - nothing ever produces an odd, off-grid remainder.

2. Cross-density screens

8 divides cleanly by common device pixel ratios (1x, 2x, 3x) with no sub-pixel rounding, so the same 8pt value renders crisply on a standard display and a Retina display alike.

3. Fewer decisions

A finite, named scale (0, 4, 8, 16, 24, 32...) means a spacing decision is a lookup, not a fresh judgment call every time - which is also exactly what a design token system needs to exist.

8pt vs. 4pt - Which Should You Use?

Most teams use 8px as the base unit for macro layout (section spacing, card padding, layout gaps) and allow 4px as a deliberate "half step" for micro adjustments - icon padding, tight label spacing, border-adjacent alignment - where a full 8px would look too loose. Very few interfaces need finer than 4px; if you find yourself reaching for 1-3px values regularly, that's usually a sign of an underlying alignment bug, not a legitimate design need.

The density presets above (compact/comfortable/spacious) are a common starting convention - padding and gap scaling as fixed multiples of your base unit - not a derived law. Treat them as a starting point to tune, not a rule to follow blindly.

Frequently Asked Questions

Why isn't my design's spacing landing on exact px values in Figma?

Figma's Auto Layout can produce fractional pixel values when nested frames use percentage-based resizing or when a parent frame's width isn't itself a multiple of your base unit - use the alignment checker above to see how far off any given value is.

What root font size does the rem conversion use?

16px, the browser default. If your project sets a different root font-size (a common trick is 62.5% for a 10px root), the rem values here won't directly apply - the px values will still be correct regardless.

Do the Tailwind config numbers match Tailwind's own default spacing scale?

Where they overlap, yes - Tailwind's default scale is itself built on a 4px unit (its "4" token is 16px, i.e. 4 x 4px), which is why the token badges next to each row above only appear for values that already exist in Tailwind's defaults.

UI Pirate Ecosystem

Suggested Tools for Your Stack

Explore related utilities in this workflow or discover cross-category tools.

View All Tools →