Spacing
Chroma includes spacing available to designers and developers to easily create the same UI in Figma and code.
| Name | Value | Figma Variable Name | CSS Variable Name | Utility class |
|---|---|---|---|---|
| 0 | 0 | spacing-0 | var(--spacing-0) | Showp-0 m-0 gap-0 |
| 100 | 4px | spacing-100 | var(--spacing-100) | Showp-100 m-100 gap-100 |
| 200 | 8px | spacing-200 | var(--spacing-200) | Showp-200 m-200 gap-200 |
| 300 | 12px | spacing-300 | var(--spacing-300) | Showp-300 m-300 gap-300 |
| 400 | 16px | spacing-400 | var(--spacing-400) | Showp-400 m-400 gap-400 |
| 500 | 20px | spacing-500 | var(--spacing-500) | Showp-500 m-500 gap-500 |
| 600 | 24px | spacing-600 | var(--spacing-600) | Showp-600 m-600 gap-600 |
| 700 | 32px | spacing-700 | var(--spacing-700) | Showp-700 m-700 gap-700 |
| 800 | 40px | spacing-800 | var(--spacing-800) | Showp-800 m-800 gap-800 |
| 900 | 48px | spacing-900 | var(--spacing-900) | Showp-900 m-900 gap-900 |
| 1000 | 56px | spacing-1000 | var(--spacing-1000) | Showp-1000 m-1000 gap-1000 |
| 1100 | 64px | spacing-1100 | var(--spacing-1100) | Showp-1100 m-1100 gap-1100 |
| 1200 | 80px | spacing-1200 | var(--spacing-1200) | Showp-1200 m-1200 gap-1200 |