Ready

Spacing

Provides a foundation to help create consistent layouts and designs.

Ready

Spacing

Provides a foundation to help create consistent layouts and designs.

Ready

Spacing

Provides a foundation to help create consistent layouts and designs.

  1. core-1 4px

  2. core-2 8px

  3. core-3 12px

  4. core-4 16px

  5. core-5 20px

  6. core-6 24px

  7. core-7 28px

  8. core-8 32px

  9. core-9 36px

  10. core-10 40px

Best Practices

Elements that are closely related should be spaced closer together. ¹ ²

2. Unrelated Elements

Large elements that are not as closely related should be spaced further apart.¹ ²

Tokens

Name

Value

Name

Value

Name

Value

--core-1

4px

--core-1

4px

--core-1

4px

--core-2

8px

--core-2

8px

--core-2

8px

--core-3

12px

--core-3

12px

--core-3

12px

--core-4

16px

--core-4

16px

--core-4

16px

--core-5

20px

--core-5

20px

--core-5

20px

--core-6

24px

--core-6

24px

--core-6

24px

--core-7

28px

--core-7

28px

--core-7

28px

--core-8

32px

--core-8

32px

--core-8

32px

--core-9

36px

--core-9

36px

--core-9

36px

--core-10

40px

--core-10

40px

--core-10

40px

More

Additional Reading

  1. Law of Proximity https://lawsofux.com/law-of-proximity.html

  2. 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

  3. Closeness of Actions and Objects in GUI Design https://www.nngroup.com/articles/closeness-of-actions-and-objects-gui/

  4. 7 Gestalt principles of visual perception: cognitive psychology for UX https://www.usertesting.com/blog/gestalt-principles#proximity

© 2024 Basis Technologies
© 2024 Basis Technologies
© 2024 Basis Technologies