Spacing tokens follow a 4px base grid. Available as CSS custom properties with the --pm-spacing- prefix.
Scale
| Token | Value |
|---|
--pm-spacing-0 | 0px |
--pm-spacing-1 | 4px |
--pm-spacing-2 | 8px |
--pm-spacing-3 | 12px |
--pm-spacing-4 | 16px |
--pm-spacing-5 | 20px |
--pm-spacing-6 | 24px |
--pm-spacing-8 | 32px |
--pm-spacing-10 | 40px |
--pm-spacing-12 | 48px |
--pm-spacing-16 | 64px |
Border Radius
| Token | Value |
|---|
--pm-radius-none | 0px |
--pm-radius-sm | 4px |
--pm-radius-md | 6px |
--pm-radius-lg | 8px |
--pm-radius-xl | 12px |
--pm-radius-full | 9999px |
Usage
padding: var(--pm-spacing-4);
margin-bottom: var(--pm-spacing-2);
border-radius: var(--pm-radius-md);