Spacing

Spacing is an important, and often underestimated, part of the visual design within Inspire. The Spacing serves to
make all distances within the modules look the same. The different spacings allow for flexible arrangement within the system.

The spacing can be used horizontally and vertically. It refers to padding, margin, but also to distances between the elements, the "spacing scale".

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs.

Spacing	rem	px
`$spacer * 0`	0	0
`$spacer * 1`	0.125	2
`$spacer * 2`	0.25	4
`$spacer * 3`	0.375	6
`$spacer * 4`	0.5	8
`$spacer * 5`	0.75	12
`$spacer * 6`	1	16
`$spacer * 7`	1.375	22
`$spacer * 8`	1.5	24
`$spacer * 9`	1.625	26
`$spacer * 10`	2	32
`$spacer * 11`	2.5	40
`$spacer * 12`	3	48
`$spacer * 13`	4	64

Content

Space Tools