spacing-system

Create a consistent UI spacing system by defining a base unit of 4px or 8px and applying a stepped scale across components, layouts, and responsive breakpoints to ensure uniform visual rhythm and density.

The best way to standardize UI spacing is to define a named scale ranging from 2xs to 3xl and apply specific spacing types like Inset, Stack, Inline, and Grid gap consistently across your interface components.

Handle spacing density by applying Compact, Comfortable, or Spacious density modes to your spacing system, allowing you to adapt the visual rhythm for different tasks and viewing contexts.

Inconsistent spacing causes visual clutter and cognitive load because it lacks a standardized rhythm. Establishing a scalable spacing system with a defined base unit and scale standardizes spacing to resolve this.

Yes, you can use a 4px base unit instead of an 8px base unit. The spacing system is scalable and allows you to define either a 4px or 8px base unit to establish your preferred cohesive rhythm.

Use Inset, Stack, Inline, and Grid gap spacing types for layout grids and inline elements. Document the intent behind these spacing choices to ensure they align with your breakpoints and component structure.