Foundations
Spacing
The Stance spacing scale on a 4px grid, shared control heights for buttons and inputs, and rhythm guidance for related elements and sections.
Spacing follows a 4px grid. Use the scale for padding, gaps and margins so layouts align across products.
Space scale
--st-space-10.25rem · 4px--st-space-20.5rem · 8px--st-space-30.75rem · 12px--st-space-41rem · 16px--st-space-51.25rem · 20px--st-space-61.5rem · 24px--st-space-82rem · 32px--st-space-102.5rem · 40px--st-space-123rem · 48px--st-space-164rem · 64px--st-space-205rem · 80px--st-space-246rem · 96px--st-space-328rem · 128px--st-space-0-50.125rem · 2px--st-space-1-50.375rem · 6px--st-space-2-50.625rem · 10pxControl sizes
Buttons, inputs and selects share heights, so mixed controls in a row align.
| Token | Value |
|---|---|
--st-size-control-xs | 1.5rem (24px) |
--st-size-control-sm | 2rem (32px) |
--st-size-control-md | 2.5rem (40px) |
--st-size-control-lg | 3rem (48px) |
--st-size-icon-sm | 1rem (16px) |
--st-size-icon-md | 1.25rem (20px) |
--st-size-icon-lg | 1.5rem (24px) |
--st-size-container-sm | 40rem (640px) |
--st-size-container-md | 55rem (880px) |
--st-size-container-lg | 77.5rem (1240px) |
--st-size-container-xl | 90rem (1440px) |
Rhythm
- 4 to 8px between related elements, such as an icon and its label or a label and its input.
- 12 to 16px between fields in a form and items in a list.
- 24 to 32px between groups and card padding on desktop.
- 48 to 96px between page sections.