A consistent spacing scale creates visual rhythm. Using a base unit (like 4px or 8px) makes the UI easier to scan and build.
Spacing is the invisible glue that holds a design together. It creates relationships between elements, establishes hierarchy, and gives the content room to breathe. Consistent spacing makes a UI feel polished and professional, while arbitrary spacing makes it feel chaotic.
Adjust the base unit to see how it affects the entire spacing scale and layout rhythm.
The gap between items and internal padding scales with the base unit.
Use a base unit (typically 4px or 8px) to derive all spacing values.
Group related items closer together to show they belong to the same context.
Treat negative space as an active design element, not just empty background.
Consistent vertical spacing creates a rhythm that guides the user's eye down the page.
Create a limited set of spacing values (e.g., 4, 8, 12, 16, 24, 32, 48, 64) and stick to them.
Implement spacing as design tokens (e.g., var(--space-md)) to ensure consistency.
Ensure containers and components have consistent internal padding.