Spacing
A consistent spacing scale for padding, margin, and gap values across the design system.
Spacing Scale
4
4px
Tight inline spacing, icon gaps
8
8px
Small padding, compact element gaps
12
12px
Input padding, tight card padding
16
16px
Default padding, list item spacing
20
20px
Medium padding, form group gaps
24
24px
Card padding, section gaps
28
28px
Comfortable card padding
32
32px
Large card padding, section margins
40
40px
Section spacing, page header margin
48
48px
Large section gaps
56
56px
Page section separators
64
64px
Page-level vertical rhythm
Guidelines
Padding
Use 12-32px for component internal padding. Cards typically use 24px, inputs use 12px.
12 / 16 / 20 / 24 / 32
Margin
Use 16-64px for spacing between components and sections. Larger values for page-level rhythm.
16 / 24 / 32 / 40 / 48 / 64
Gap
Use 4-24px for flex and grid gaps. Smaller values for inline items, larger for layout grids.
4 / 8 / 12 / 16 / 20 / 24
css
/* Spacing Tokens */
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-7: 28px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;
--spacing-14: 56px;
--spacing-16: 64px;
/* Usage */
padding: var(--spacing-6); /* 24px card padding */
gap: var(--spacing-4); /* 16px grid gap */
margin-bottom: var(--spacing-10); /* 40px section spacing */