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
Closely Related Elements
Elements that are closely related should be spaced closer together. ¹ ²
Do
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