Spacing
- Our new spacing scale has divergent compared with the legacy Clay design system. All spaces are now a multiple of 4px, our baseline grid. The largest spaces have been removed.
- Figma Variables are available for spacing, see your brand’s Figma library.
Spacing Scale
| name | css / figma | value |
|---|---|---|
| 5xs | --o3-spacing-5xs o3/spacing/5xs | 4px |
| 4xs | --o3-spacing-4xs o3/spacing/4xs | 8px |
| 3xs | --o3-spacing-3xs o3/spacing/3xs | 12px |
| 2xs | --o3-spacing-2xs o3/spacing/2xs | 16px |
| xs | --o3-spacing-xs o3/spacing/xs | 20px |
| s | --o3-spacing-s o3/spacing/s | 24px |
| m | --o3-spacing-m o3/spacing/m | 32px |
| l | --o3-spacing-l o3/spacing/l | 40px |
| xl | --o3-spacing-xl o3/spacing/xl | 48px |
| 2xl | --o3-spacing-2xl o3/spacing/2xl | 64px |
| 3xl | --o3-spacing-3xl o3/spacing/3xl | 80px |
| 4xl | --o3-spacing-4xl o3/spacing/4xl | 96px |