Spacing Scale
Crystal uses a Fibonacci-based spacing scale with 10 steps from 0 to 272px. Each value is available as a Tailwind utility spacing-{n} and CSS custom property var(--spacing-{n}).
Visual Scale
00px
14px
28px
316px
424px
540px
664px
7104px
8168px
9272px
Click any bar to copy the CSS variable.
Reference
| Step | CSS Variable | Tailwind | Value |
|---|---|---|---|
| 0 | --spacing-0 | spacing-0 | 0px |
| 1 | --spacing-1 | spacing-1 | 4px |
| 2 | --spacing-2 | spacing-2 | 8px |
| 3 | --spacing-3 | spacing-3 | 16px |
| 4 | --spacing-4 | spacing-4 | 24px |
| 5 | --spacing-5 | spacing-5 | 40px |
| 6 | --spacing-6 | spacing-6 | 64px |
| 7 | --spacing-7 | spacing-7 | 104px |
| 8 | --spacing-8 | spacing-8 | 168px |
| 9 | --spacing-9 | spacing-9 | 272px |