Spacing Tokens
Tokens that define the spacing used between content.
Spacing tokens define the spacing used between content.
| Token | Value | Description | Preview |
|---|---|---|---|
--forge-spacing-xxxsmall | 2px | Minimal spacing for fine adjustments and hairline gaps. | |
--forge-spacing-xxsmall | 4px | Very small spacing for tight layouts, such as the gap between an icon and its label. | |
--forge-spacing-xsmall | 8px | Small spacing for compact layouts, such as gaps between related items. | |
--forge-spacing-small | 12px | Small to medium spacing for the internal padding and gaps of compact containers. | |
--forge-spacing-medium | 16px | Standard spacing and the most commonly used, for padding and gaps in most layouts. | |
--forge-spacing-medium-large | 20px | Medium to large spacing, between standard and generous. | |
--forge-spacing-large | 24px | Large spacing for generous padding and separation between groups. | |
--forge-spacing-xlarge | 32px | Extra large spacing for separating sections and sizing roomy targets. | |
--forge-spacing-xxlarge | 48px | Very large spacing for major sections and large insets. | |
--forge-spacing-xxxlarge | 56px | Maximum spacing for page-level separation. |