Space communicates relationships. The V1 foundation uses a 4px rhythm to keep layouts consistent while giving related content a clear visual grouping.
Our spacing principles
ProximityKeep related content together. The distance between groups should exceed the distance within each group.ClarityProvide breathing room around controls and separate different tasks so they are easy to scan.Order and emphasisSpace influences perceived importance. Give essential content room without disconnecting related elements.
A scale built on four
The foundation uses a 4px rhythm, with larger steps for more substantial separation. Choose the smallest value that preserves the relationship and gives content room to grow.
4pxspace.4
8pxspace.8
12pxspace.12
16pxspace.16
20pxspace.20
24pxspace.24
32pxspace.32
40pxspace.40
48pxspace.48
64pxspace.64
Spacing properties
Use the property that describes the relationship. Margin lives outside a component; padding lives inside it; gap separates siblings in a layout.
24px margin
Component content
MarginSpace outside the border separates a component from its surroundings.
24px padding
Component content
PaddingSpace inside the border separates content from the component edge.
12px gap
Save↔Cancel
GapSpace between siblings preserves a consistent row or column rhythm.