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.
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