Spacing
Spacing is based on grids for vertical and horizontal rhythm. We use spacing tokens in figures of 4 to keep consistency.
We organize spacing into logical categories: padding, gap, margin, and inset. Each category has its own tokens and corresponding values, as well as usage guidalines.
Padding
Internal spacing within components and containers.
|
Token name |
Resolved value |
Usage |
|---|---|---|
|
spacing.padding.none |
0px |
Remove padding |
|
spacing.padding.2xs |
4px |
Compact buttons, tight layouts |
|
spacing.padding.xs |
8px |
Small buttons, compact cards |
|
spacing.padding.sm |
12px |
Standard buttons, form fields |
|
spacing.padding.md |
16px |
Default padding, cards, modals |
|
spacing.padding.lg |
24px |
Large cards, sections |
|
spacing.padding.xl |
32px |
Page containers, major sections |
|
spacing.padding.2xl |
48px |
Hero sections, feature areas |
Gap
Spacing between sibling elements in flex/grid layouts.
|
Token name |
Resolved value |
Usage |
|---|---|---|
|
spacing.gap.2xs |
4px |
Tight inline elements |
|
spacing.gap.xs |
8px |
Icon + label, tags |
|
spacing.gap.sm |
12px |
Form fields, list items |
|
spacing.gap.md |
16px |
Default gap, sections |
|
spacing.gap.lg |
24px |
Card grids, major groups |
|
spacing.gap.xl |
32px |
Page sections |
Margins
External spacing around components
|
Token name |
Resolved value |
Usage |
|---|---|---|
|
spacing.margin.none |
0px |
Remove margin |
|
spacing.margin.xs |
8px |
Compact spacing |
|
spacing.margin.sm |
12px |
Standard margin |
|
spacing.margin.md |
16px |
Default margin |
|
spacing.margin.lg |
24px |
Generous spacing |
|
spacing.margin.xl |
32px |
Section separation |
Inset
Uniform spacing on all sides (shorthand for equal padding).
|
Token name |
Resolved value |
Usage |
|---|---|---|
|
spacing.inset.sm |
8px |
Compact uniform padding |
|
spacing.inset.md |
16px |
Default uniform padding |
|
spacing.inset.lg |
24px |
Generous uniform padding |
Grid
Native app: 16px
Tablet: 24px
Web: 24px
