Spacing

Swarm uses a 4-base grid scale. The grig provides values in intervals of 4 with a base space being defined as 16.

Size Variable	Size (px)	CSS Variable
0	4px	--size-space-0
1	4px	--size-space-1
2	8px	--size-space-2
3	12px	--size-space-3
4	16px	--size-space-4
5	20px	--size-space-5
6	24px	--size-space-6
7	28px	--size-space-7
8	32px	--size-space-8
9	36px	--size-space-9
10	40px	--size-space-10
11	44px	--size-space-11
12	48px	--size-space-12
13	52px	--size-space-13
14	56px	--size-space-10
15	60px	--size-space-15
16	64px	--size-space-16

Application

Swarm spacing is built into all atoms of the design system, like Buttons and Text Inputs. To assemble layouts, spacing tokens can be applied to all four edges of a DOM element, using margin and padding properties.