Consistent spacing is one of the most impactful ways to improve a design system. It creates relationships between elements, establishes hierarchy, and guides the eye through content. Good spacing feels invisible — you notice it when it's missing.

The key is to use a limited set of spacing values from a scale rather than arbitrary pixel values. This creates visual rhythm and makes designs more predictable and easier to maintain.

A 4pt grid is the industry standard for digital interfaces. Starting from a base unit of 4px, you can create a scale of values that cover all needs from tight internal padding to large section breaks.

The scale should be used for all spacing — margins, padding, gaps, and positioning. This creates a cohesive rhythm throughout the interface.

Each type of spacing serves a specific purpose. Padding creates space inside an element between its border and content. Margin creates space outside an element between it and other elements. Gap creates space between children in flexbox or grid layouts.

Use padding for internal breathing room, margins for separation between components, and gaps for consistent spacing in layouts. Prefer gap over margins in flex/grid containers for more predictable layouts.

Grid gutters, container padding, and section spacing should all come from the spacing scale — not arbitrary pixels. The <a href="/design-system/layout">Layout</a> chapter shows the full 12-column grid with container and breakpoint implementation; this section documents the spacing-side decisions.

Use consistent gutters (typically <code>space-4</code> or <code>space-6</code>) and container padding that ramps with breakpoints (space-4 → space-6 → space-8) to maintain readability.

Not all interfaces need the same amount of breathing room. Dense interfaces like data tables or admin dashboards benefit from tighter spacing to show more information. Consumer-facing apps often need more generous spacing for better readability and touch targets.

Provide density modes or choose appropriate spacing based on context. The same component can use different spacing tokens for compact vs comfortable variants.

Vertical rhythm keeps text and elements aligned to a baseline grid. For body text with line-height, your spacing should relate to that rhythm. A common approach is to use spacing values that are multiples related to your base line-height.

Consistent vertical rhythm improves readability and creates a sense of order. Stack related elements with smaller gaps, and separate sections with larger gaps.

Start with the spacing scale and only deviate when necessary with justification. Use a spacing multiplier or stick to the predefined values. In CSS, prefer logical properties and use rem units for scalability.