Foundations
Spacing
A semantic spacing scale — named by role, not by size. Bars below show the relative proportions of fixed values; fluid values (clamp) show their raw expression instead.
| Token | Visual | Value | Role |
|---|---|---|---|
--space-layout-margin | fluid | clamp(1.25rem, 4vw, 2rem) | Page gutter — fluid side padding from viewport edge to content. |
--space-section-gap | fluid | clamp(3rem, 8vw, 5rem) | Vertical rhythm between major page sections. |
--space-component-gap | 24px | Gap between components within a section. | |
--space-element-gap | 16px | Gap between elements within a component. | |
--space-inline-gap | 8px | Tight horizontal gap between inline items. | |
--space-label-gap | 12px | Gap between a label and its associated element. | |
--space-tight-gap | 4px | Smallest gap — used for padding inside compact elements. | |
--space-control-padding-x | 16px | ||
--space-control-padding-y | 12px | ||
--space-prominent-padding-x | 24px | ||
--space-prominent-padding-y | 16px | ||
--space-compact-padding-x | 12px | ||
--space-compact-padding-y | 8px | ||
--space-container-padding | 32px | ||
--space-container-padding-lg | 48px | ||
--space-dialog-padding-mobile | 16px | ||
--space-dialog-padding-tablet | 24px | ||
--space-dialog-padding-desktop | 32px |
Visual reference
component-gap
element-gap
inline-gap
label-gap
tight-gap
control-padding-x
control-padding-y
prominent-padding-x
prominent-padding-y
compact-padding-x
compact-padding-y
container-padding
container-padding-lg
dialog-padding-mobile
dialog-padding-tablet
dialog-padding-desktop