Digital Services Design Language spacing reference

Spacing in the DSDL is based on an 8px reference point.

Sample	Variable	px	rem
A box illustrating the size of something using spacing 05 (half)	var(--spacing-05)	4px	0.25rem
A box illustrating the size of something using spacing 1	var(--spacing-1)	8px	0.5rem
A box illustrating the size of something using spacing 2	var(--spacing-2)	16px	1rem
A box illustrating the size of something using spacing 2-05 (two and a half)	var(--spacing-2-05)	20px	1.25rem
A box illustrating the size of something using spacing 3	var(--spacing-3)	24px	1.5rem
A box illustrating the size of something using spacing 4	var(--spacing-4)	32px	2rem
A box illustrating the size of something using spacing 5	var(--spacing-5)	40px	2.5rem
A box illustrating the size of something using spacing 6	var(--spacing-6)	48px	3rem
A box illustrating the size of something using spacing 7	var(--spacing-7)	56px	3.5rem
A box illustrating the size of something using spacing 8	var(--spacing-8)	64px	4rem
A box illustrating the size of something using spacing 9	var(--spacing-9)	72px	4.5rem
A box illustrating the size of something using spacing 10	var(--spacing-10)	80px	5rem
A box illustrating the size of something using spacing 15	var(--spacing-15)	120px	7.5rem
A box illustrating the size of something using spacing 20	var(--spacing-20)	160px	10rem

Note: For lines we want to be exactly 1 logical pixel without scaling, we use a 1px value directly.