Space
You might say
Everything feels piled together. Adjust the spacing so related things stay close and separate things have room.
Use empty space to show which things belong togetherRelated items should sit close together, while separate groups need more room between them. That empty room is spacing. A product usually defines a small spacing scale so pages follow a visible rhythm instead of using a new value each time.
When to use it
- Keep a label close to the field it describes
- Separate one content group from the next
- Give text and controls enough room to breathe
- Build a reusable spacing scale for the whole product
When NOT to use it
- Choose a different spacing value for every element
- Use empty space to hide a weak information structure
- Leave related items farther apart than unrelated groups
- Add large gaps that force unnecessary scrolling
Anatomy
The space between this card and other elements
The space between content and the card border
The distance between internal elements
Variants
Compact · 4px
Place small elements in the same group closer together, such as icons and text
Medium · 8px
Default distance between elements in the same group
Loose · 16px
When separate modules need clearer grouping.
Typical use cases
Form fields
Name
Email
The label is close to the corresponding input box, and the distance between different field groups is increased
Card content
Padding
Project activity
Alex Chen finished reviewing the homepage prototype
Keep the padding consistent on every side of the card
Page sections
Use consistent spacing to keep related buttons grouped and easy to scan
Navigation groups
Design review
Today, 2:00 PM · 3 attendees
Requirements alignment meeting
Tomorrow, 10:30 AM · 6 attendees
Release review
Friday 16:00 · All members
Use consistent vertical spacing so each row is easy to scan
Further reading