Spacing
- Figma Variables are available for spacing, see your brand’s Figma library.
- Our new spacing scale includes additional options and different, t-shirt naming. For comparison, see our legacy UI library and legacy o-spacing component in Storybook.
Spacing Scale
name | css / figma | value |
---|---|---|
5xs | --o3-spacing-5xs o3/spacing/5xs | 0.25rem (4px) |
4xs | --o3-spacing-4xs o3/spacing/4xs | 0.5rem (8px) |
3xs | --o3-spacing-3xs o3/spacing/3xs | 0.75rem (12px) |
2xs | --o3-spacing-2xs o3/spacing/2xs | 1rem (16px) |
xs | --o3-spacing-xs o3/spacing/xs | 1.25rem (20px) |
s | --o3-spacing-s o3/spacing/s | 1.5rem (24px) |
m | --o3-spacing-m o3/spacing/m | 2rem (32px) |
l | --o3-spacing-l o3/spacing/l | 2.5rem (40px) |
xl | --o3-spacing-xl o3/spacing/xl | 3rem (48px) |
2xl | --o3-spacing-2xl o3/spacing/2xl | 4rem (64px) |
3xl | --o3-spacing-3xl o3/spacing/3xl | 5rem (80px) |
4xl | --o3-spacing-4xl o3/spacing/4xl | 6rem (96px) |