Design Tokens
All design tokens are defined in theme.css. Prefer native Tailwind v4 utility classes when a token exists in @theme, and use var(--token-name) in inline styles (or when no native utility exists). Previews update automatically with the current theme.
Spacing
| Step | Expression | Value | Preview |
|---|---|---|---|
spacing-0 | 0px | 0px | |
spacing-0.5 | calc(var(--spacing) * 0.5) | 2px | |
spacing-1 | calc(var(--spacing) * 1) | 4px | |
spacing-2 | calc(var(--spacing) * 2) | 8px | |
spacing-3 | calc(var(--spacing) * 3) | 12px | |
spacing-4 | calc(var(--spacing) * 4) | 16px | |
spacing-5 | calc(var(--spacing) * 5) | 20px | |
spacing-6 | calc(var(--spacing) * 6) | 24px | |
spacing-7 | calc(var(--spacing) * 7) | 28px | |
spacing-8 | calc(var(--spacing) * 8) | 32px | |
spacing-9 | calc(var(--spacing) * 9) | 36px | |
spacing-10 | calc(var(--spacing) * 10) | 40px | |
spacing-11 | calc(var(--spacing) * 11) | 44px | |
spacing-12 | calc(var(--spacing) * 12) | 48px | |
spacing-13 | calc(var(--spacing) * 13) | 52px | |
spacing-14 | calc(var(--spacing) * 14) | 56px | |
spacing-15 | calc(var(--spacing) * 15) | 60px | |
spacing-16 | calc(var(--spacing) * 16) | 64px | |
spacing-17 | calc(var(--spacing) * 17) | 68px | |
spacing-18 | calc(var(--spacing) * 18) | 72px |