Our spacing scale is used to maintain consistent paddings between and within elements. It allows us to be more consistent and predictable and helps make our designs more harmonious.
Sizing
| Token | Sample | Value |
|---|
| sizing.tiny | | 8 |
| sizing.small | | 12 |
| sizing.medium | | 16 |
| sizing.large | | 24 |
| sizing.x-large | | 32 |
| sizing.2x-large | | 40 |
| sizing.3x-large | | 48 |
| sizing.4x-large | | 64 |
| sizing.5x-large | | 80 |
Spacing
| Token | Sample | Value |
|---|
| spacing.tiny | | 2 |
| spacing.x-small | | 4 |
| spacing.small | | 8 |
| spacing.medium | | 12 |
| spacing.large | | 16 |
| spacing.x-large | | 20 |
| spacing.2x-large | | 24 |
| spacing.3x-large | | 32 |
| spacing.4x-large | | 40 |
| spacing.5x-large | | 48 |
| spacing.6x-large | | 56 |