Spacing
A 4px scale for padding, gaps and layout, in twenty-two steps.
Scale
Twenty-two steps on a 4px base. They run in fine steps up to 48, then widen to 56, 64, 80, 96, 112 and 128.
--spacing-0-5
2
--spacing-1
4
--spacing-1-5
6
--spacing-2
8
--spacing-2-5
10
--spacing-3
12
--spacing-3-5
14
--spacing-4
16
--spacing-5
20
--spacing-6
24
--spacing-7
28
--spacing-8
32
--spacing-9
36
--spacing-10
40
--spacing-11
44
--spacing-12
48
--spacing-14
56
--spacing-16
64
--spacing-20
80
--spacing-24
96
--spacing-28
112
--spacing-32
128
Usage
- Use
--spacing-2(8px) between adjacent controls in a toolbar. - Use
--spacing-3(12px) between rows inside a card. - Use
--spacing-4(16px) for card padding. - Use
--spacing-6(24px) for the page gutter and between sections. - Use the half-steps (2, 6, 10 and 14px) for padding and gaps inside small controls such as buttons and badges.
- Keep steps up to 48 for components, and the wider steps for page layout.
- Don’t use values between steps. For 52px, pick 48 or 56.