Space
Our spacing system allows for consistent visual balance within UI elements and page layouts.
Principles
Visual rhythm
Working with a grid system, a spatial system can support vertical rhythm and spatial consistency.
No clear vertical rhythm
Consistent spacing creates vertical rhythm
Visual grouping
When applying space, it’s always best to consider the relationship between elements on the screen. Large areas of white space between elements can yield the perception that they are not related and don’t directly work together.
Blueprint spacing system
4px grid
Space tokens are typically applied to gap (space between elements), padding, and margins.
Pixels
rem
Token
0
0
spacing-0
2
0.125
spacing-100
4
0.25
spacing-200
8
0.5
spacing-300
12
0.75
spacing-400
16
1
spacing-500
20
1.25
spacing-600
24
1.5
spacing-700
28
1.75
spacing-800
32
2
spacing-900
36
2.25
spacing-1000
40
2.5
spacing-1100
44
2.75
spacing-1200
48
3
spacing-1300
