Details
Our spacing system uses what we call --core units. Each --core unit is equal to 4px. We use these units to define margin and padding. Use the demo below to see the generated class names.
Margin
Padding
Best Practices
1
.
Closely Related Elements
Elements that are closely related should be spaced closer together. ¹ ²
Do
2
.
Less Closely Related Elements
Large elements that are not as closely related should be spaced further apart.¹ ²
Do
Tokens
Name
Value
--
core-10
40px
--
core-9
36px
--
core-8
32px
--
core-7
28px
--
core-6
24px
--
core-5
20px
--
core-4
16px
--
core-3
12px
--
core-2
8px
--
core-1
4px
More
Additional Reading
Law of Proximity https://lawsofux.com/law-of-proximity.html
Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (2) https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2
Closeness of Actions and Objects in GUI Design https://www.nngroup.com/articles/closeness-of-actions-and-objects-gui/
7 Gestalt principles of visual perception: cognitive psychology for UX https://www.usertesting.com/blog/gestalt-principles#proximity