Guidelines

The Cedar spacing system is based on 16px units. The scaling system uses fractions and multiples of the base size (16px). The result is easy to understand. Please note that 1 rem equals 10 pixels.

System scale	Pixel values	Rem values
1/8 space	2px	0.2rem
1/4 space	4px	0.4rem
1/2 space	8px	0.8rem
3/4 space	12px	1.2rem
1 space	16px	1.6rem
1 1/2 spaces	24px	2.4rem
2 spaces	32px	3.2rem
4 spaces	64px	6.4rem

Learn more about using Cedar's spacing system and layout usage guidance in the Spacing for Layouts article.