Spacing
4px base grid. Every spacing value is a multiple from the base-2 scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64...
Token
Value
Sample
--source-spacing-1
4px
--source-spacing-2
8px
--source-spacing-3
12px
--source-spacing-4
16px
--source-spacing-5
20px
--source-spacing-6
24px
--source-spacing-8
32px
--source-spacing-10
40px
--source-spacing-12
48px
--source-spacing-16
64px
--source-spacing-20
80px
--source-spacing-24
96px
The proximity rule
Spacing communicates grouping. Elements that belong to the same logical unit sit closer together than elements that belong to different types of content. The gap size signals how related two elements are.
In practice this comes down to one recurring pattern: a heading and its direct label get 4px between them, then 8px before the body or secondary content below.
Spacing by relationship
Value
Token
Use
4px
--source-spacing-1
Between a heading and its direct label or subtitle. Between a token name and its value. Between a field label and the input directly below. Tight coupling: these elements form a single unit.
8px
--source-spacing-2
Between a header group and its body or description. Between list items. Between a value and its secondary annotation. Related but different types of content.
12px
--source-spacing-3
Between form fields. Between small cards in a tight grid. Between a button row and its inline description.
16px
--source-spacing-4
Between sections within a card or panel. Padding inside small components (chips, badges). Standard row height in dense tables.
24px
--source-spacing-6
Padding inside cards and modals. Gap between cards in a grid. Between a card's content and its action row.
32px
--source-spacing-8
Between distinct content sections on a page. Padding inside sidebars and drawers.
48px+
--source-spacing-12 and up
Page-level breathing room. Vertical rhythm between major sections. Header and footer padding.
Example: card anatomy
A card title and subtitle sit 4px apart. The body sits 8px below the subtitle. Title and subtitle read as a unit, clearly distinct from the body below.
Correct
Card title
Subtitle or category label
Body content sits noticeably further from the header group above.
Flat gaps
Card title
Subtitle or category label
Same gap everywhere. Title and subtitle feel no more related than subtitle and body.
Where this applies
Context
Rule
Token swatch
Swatch to name: 8px. Name to value: 4px.
Resource card
Title to description: 4px. Description to link: 8px.
Form field
Label to input: 4px. Helper text below: 8px.
Auto-layout (Figma)
Same rule: tight within a unit, looser between content types.