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)	Show p-0 m-0 gap-0
100	4px	spacing-100	var(--spacing-100)	Show p-100 m-100 gap-100
200	8px	spacing-200	var(--spacing-200)	Show p-200 m-200 gap-200
300	12px	spacing-300	var(--spacing-300)	Show p-300 m-300 gap-300
400	16px	spacing-400	var(--spacing-400)	Show p-400 m-400 gap-400
500	20px	spacing-500	var(--spacing-500)	Show p-500 m-500 gap-500
600	24px	spacing-600	var(--spacing-600)	Show p-600 m-600 gap-600
700	32px	spacing-700	var(--spacing-700)	Show p-700 m-700 gap-700
800	40px	spacing-800	var(--spacing-800)	Show p-800 m-800 gap-800
900	48px	spacing-900	var(--spacing-900)	Show p-900 m-900 gap-900
1000	56px	spacing-1000	var(--spacing-1000)	Show p-1000 m-1000 gap-1000
1100	64px	spacing-1100	var(--spacing-1100)	Show p-1100 m-1100 gap-1100
1200	80px	spacing-1200	var(--spacing-1200)	Show p-1200 m-1200 gap-1200
1300	96px	spacing-1300	var(--spacing-1300)	Show p-1300 m-1300 gap-1300
1400	112px	spacing-1400	var(--spacing-1400)	Show p-1400 m-1400 gap-1400
1500	128px	spacing-1500	var(--spacing-1500)	Show p-1500 m-1500 gap-1500