Foundation
Spacing
Just like the color scale, a defined spacing system lets you work faster and more consistently. Every step is built on a 4pt grid — with 2 / 6 / 10px sub-grid values for fine adjustments — so you design and build from a limited, predictable set of options.
NameSizeVisual Represent
0--spacing-0
0px
Reset / flush
2--spacing-2sub-grid
2px
Sub-grid micro nudge
4--spacing-4
4px
Tight inline spacing
6--spacing-6sub-grid
6px
Sub-grid fine spacing
8--spacing-8
8px
Icon gaps, compact padding
10--spacing-10sub-grid
10px
Sub-grid medium spacing
12--spacing-12
12px
Small component padding
16--spacing-16
16px
Standard component padding
20--spacing-20
20px
Medium spacing
24--spacing-24
24px
Section padding, card gap
28--spacing-28
28px
Comfortable component spacing
32--spacing-32
32px
Large section spacing
36--spacing-36
36px
Extended spacing
40--spacing-40
40px
Wide component spacing
44--spacing-44
44px
Minimum touch-target height
48--spacing-48
48px
Page section margins
64--spacing-64
64px
Desktop margins / offsets
72--spacing-72
72px
Collapsed sidebar width
80--spacing-80
80px
Large layout spacing
96--spacing-96
96px
Page-level vertical rhythm
128--spacing-128
128px
Section-level gaps
144--spacing-144
144px
Large section gaps
160--spacing-160
160px
Hero / banner spacing
192--spacing-192
192px
Full-page padding
224--spacing-224
224px
Max layout padding
256--spacing-256
256px
Max content offset
Negative spacing
Reserved for intentional offset patterns — overlapping elements and pull effects. Use sparingly.
--spacing-minus-2−2pxFine negative offsets
--spacing-minus-7−7pxComponent pull patterns (overlap / stack)