📏UI Spacing System Calculator

Set a base unit and scale type to generate a UI spacing scale with CSS variable names and rem values.

px

What Is a UI Spacing System?

A UI spacing system standardizes all margins, padding, and gaps in your interface around a consistent base unit. Rather than picking spacing values arbitrarily, you define a set of tokens (--space-1, --space-2, etc.) that your entire design and codebase share. This eliminates inconsistency and makes resizing and refactoring dramatically easier.

Why 8pt Works

8px is the most popular base unit because multiples of 8 map to whole pixels on 1x, 2x, and 3x DPR displays, avoiding sub-pixel blurring. Google Material Design uses 4dp increments, Apple HIG uses 8pt increments, and Tailwind CSS uses a 4px base with common multiples. All share the same underlying principle: enforce a grid to keep spacing intentional.

Applying Tokens in Code

Define spacing in :root: --space-1: 4px; --space-2: 8px; --space-3: 16px; Then apply: padding: var(--space-3). Use rem values when accessibility matters — users who increase their default browser font size benefit from rem-based spacing adjustments. Match token names between your design tool and codebase for clean handoff.

Frequently Asked Questions

Is the Tailwind scale compatible with standard 8pt grids?

Yes, with a 4px base. Tailwind's default spacing scale uses 4px as its base unit, with steps at 1×, 2×, 4×, 6×, 8×, etc. Select "Tailwind Compatible" and enter 4 as your base unit to generate Tailwind-matching values.

Should I use px or rem for spacing tokens?

Both are valid. px tokens are predictable and easy to reason about. rem tokens scale with user font preferences and can improve accessibility. Many teams define tokens in px for design tools and convert to rem in CSS.