Spacing Scale Generator

8pt grid · CSS variables

Set the base multiplier (4 or 8pt) and the number of steps and get the complete scale. Values in px, rem and ready-to-use CSS variables with a graphical proportions preview.

Preset
Base grid
Base unit 8px
4pt 8pt 12pt

used for rem calculation

Naming

e.g. --space-4

Output
Include :root
rem values
px comments next to rem
Include Tailwind utilities
SCSS format
12 step · base 8px 

                                    

                                    

                                        

                                    

                                    

                                        

                                            
What is the 8pt grid
The 8pt grid is the most common spacing system in product design. Padding, margin, gap, width, and height use multiples of 8 — or 4 for fine adjustments. The result is a visually consistent interface where spacing feels unified without micromanaging every pixel.
Practically, 8 is a common multiple of 1, 2, 4, and 8, so it divides cleanly in many layouts. Screens at 1x, 1.5x, 2x, and 3x density often snap multiples of 8 to whole pixels.
When to use 4pt instead of 8pt
A 4pt base suits dense UI: tables, forms, code editors, dashboards. An 8pt base fits page layouts and clear spatial hierarchy.
4pt — micro
Badges, icon padding, dividers, inner gaps in compact components
8pt — standard
Card padding, gaps between elements, form spacing — the default for most cases
16pt — breathing room
Section padding, margins between distinct component groups
32–64pt — layout
Vertical rhythm between sections, page margins, hero padding
WordPress and ACF
In a custom WordPress theme, place custom properties in style.css or a tokens.css partial imported before other styles. In ACF blocks with gap or padding fields, map the selected value to a scale token instead of a raw px value.
Figma: match the scale
In Figma, go to Edit → Preferences → Nudge amount and set Small nudge to 8 and Large nudge to 64. When you define spacing variables, use the same names as this generator so Figma → WordPress stays a 1:1 mapping without manual conversion.
                                        

                                    

                                

                            

                        

                    


                    

                        
The 8pt grid is the de facto standard in digital interface design: all spaces are multiples of 8 pixels, ensuring visual consistency and precise alignment between Figma components and CSS.
This generator produces:
  • The complete sequence of values (4, 8, 12, 16, 24, 32, 48, 64, 96, 128...)
  • Values in pixels, rem and CSS units
  • Ready-to-use CSS custom properties (--spacing-1, --spacing-2, etc.)
  • SCSS map variants
  • Graphical proportions preview
Why use a spacing scale
  • Visual consistency: multiples of a base (4/8pt) reduce noise and speed up layout decisions.
  • Design ↔ code: token names and rem values aligned with Figma avoid production drift.
  • Flexible export: CSS variables in :root, an @theme block for Tailwind v4, optional SCSS for Sass pipelines.
Use this tool alongside the Design Token Formatter for a full token workflow.