Spacing Tokens
Source: Figma Primitives/spacing, node 2198:7021.
Scale
| Figma token | CSS token | px | rem | Preview |
|---|---|---|---|---|
| 7th.spacing.0 | --sui-spacing-0 | 0px | 0rem | |
| 7th.spacing.100 | --sui-spacing-100 | 2px | 0.125rem | |
| 7th.spacing.200 | --sui-spacing-200 | 4px | 0.25rem | |
| 7th.spacing.300 | --sui-spacing-300 | 6px | 0.375rem | |
| 7th.spacing.400 | --sui-spacing-400 | 8px | 0.5rem | |
| 7th.spacing.500 | --sui-spacing-500 | 12px | 0.75rem | |
| 7th.spacing.600 | --sui-spacing-600 | 16px | 1rem | |
| 7th.spacing.700 | --sui-spacing-700 | 20px | 1.25rem | |
| 7th.spacing.800 | --sui-spacing-800 | 24px | 1.5rem | |
| 7th.spacing.900 | --sui-spacing-900 | 28px | 1.75rem | |
| 7th.spacing.1000 | --sui-spacing-1000 | 32px | 2rem | |
| 7th.spacing.1100 | --sui-spacing-1100 | 36px | 2.25rem | |
| 7th.spacing.1200 | --sui-spacing-1200 | 40px | 2.5rem | |
| 7th.spacing.1400 | --sui-spacing-1400 | 48px | 3rem | |
| 7th.spacing.1500 | --sui-spacing-1500 | 56px | 3.5rem | |
| 7th.spacing.1600 | --sui-spacing-1600 | 64px | 4rem | |
| 7th.spacing.1700 | --sui-spacing-1700 | 72px | 4.5rem | |
| 7th.spacing.1800 | --sui-spacing-1800 | 80px | 5rem | |
| 7th.spacing.1900 | --sui-spacing-1900 | 96px | 6rem | |
| 7th.spacing.2000 | --sui-spacing-2000 | 112px | 7rem | |
| 7th.spacing.2100 | --sui-spacing-2100 | 128px | 8rem | |
| 7th.spacing.2200 | --sui-spacing-2200 | 144px | 9rem | |
| 7th.spacing.2300 | --sui-spacing-2300 | 160px | 10rem | |
| 7th.spacing.2400 | --sui-spacing-2400 | 176px | 11rem | |
| 7th.spacing.2500 | --sui-spacing-2500 | 192px | 12rem |