Spacing System Generator

Why a Spacing System Matters

Without a defined spacing system, every margin and padding decision becomes a one-off judgment call. The result is interfaces where gaps between elements feel inconsistent — sometimes tight, sometimes airy — without any clear logic. A spacing system replaces arbitrary decisions with a predictable set of values that your entire team (and your codebase) can reference by name.

The most widely adopted convention is the 8pt grid: all spacing values are multiples of 8px (8, 16, 24, 32...). This works because most modern screens have pixel densities divisible by 8, so 8pt elements render crisp on nearly every device. The 4pt grid (4, 8, 12, 16...) adds half-steps for finer control — useful for padding inside compact components like badges, tags, and table cells.

The geometric scale (multiplied by 1.5 each step) creates more dramatic size jumps, similar to a typographic scale. It is well-suited for page-level layout spacing — section padding, hero areas, and white space between major content blocks — where larger contrast between values is desirable. The t-shirt size naming (xs, sm, md, lg...) is especially useful in design tokens and component libraries where semantic names communicate intent better than raw numbers.

How to Choose the Right Scale

Start with Linear at 8px for most projects — it gives you a solid 8pt grid that aligns with Material Design, Apple's Human Interface Guidelines, and most popular component libraries. Switch to 4px if you need denser UI (data tables, admin dashboards). Use Geometric when you want layout-level spacing (section gaps, hero padding) to feel progressively more spacious. Use T-shirt sizes if you maintain a design system and prefer semantic names in your token library.