Spacing

Spacing is a critical part of visual design. Using Soul as a guideline for your spacing will help you to overcome assumptions and ensure you deliver clear, functional layouts.

Component checklist

Design

Review required

React

Review required

Scale

The spacing scale is a guideline for all Soul components, demonstrating the incremental additions and substractions you need to create appropriate spatial relationships at the detail-level.

Spacing
3px
3px
Space 1
Primary space reserved for smaller components like Input, Select field, Button, etc. Using it as a general spacing (padding or margin) is not recommended.
Collection
-
Variable
--space-1
6px
6px
Space 2
The primary and default space unit.
Collection
-
Variable
--space-2
9px
9px
Space 3
Primary space reserved for smaller components like Input, Select field, Button, etc. Using it as a general spacing (padding or margin) is not recommended.
Collection
-
Variable
--space-3
12px
12px
Space 4
Standard space between logically associated and unassociated elements. e.g. Inside of a tooltip; horizontal spacing between associated and unassociated buttons, etc.
Collection
-
Variable
--space-4
18px
18px
Space 5
Collection
-
Variable
--space-5
24px
24px
Space 6
Standard space between logically primarily unassociated but also secondarily associated elements. e.g. form elements like inputs and selects. Default app content padding for resolution 1559px and lower.
Collection
-
Variable
--space-6
30px
30px
Space 7
Collection
-
Variable
--space-7
36px
36px
Space 8
Standard space between empty state and text. Default app content padding for resolution 1560px and higher.
Collection
-
Variable
--space-8
48px
48px
Space 9
Collection
-
Variable
--space-9
60px
60px
Space 10
Collection
-
Variable
--space-10
72px
72px
Space 11
Standard space below the empty state in panels or full-page elements.
Collection
-
Variable
--space-11
96px
96px
Space 12
Collection
-
Variable
--space-12
120px
120px
Space 13
Collection
-
Variable
--space-13

 

Recommendations

Paddings and margins

Below is a guideline for how to manage padding and margins between and inside elements or components. Use these recommendations to create custom and more complex parts of the UI. In other cases, everything should be prepared and available in the design system.

6px

  • Standard space between logically associated elements. e.g. Multiple buttons; a checkbox and a label; a tooltip and a button/icon; an icon and text, etc.

12px

  • Standard space between logically associated and unassociated elements. e.g. Inside of a tooltip; horizontal spacing between associated and unassociated buttons, etc.

24px

  • Standard space between logically primarily unassociated but also secondarily associated elements. e.g. form elements like inputs and selects.
  • Default app content padding for resolution 1559px and lower

36px

  • Standard space between empty state and text
  • Default app content padding for resolution 1560px and higher

72px

  • Standard space below the empty state in panels or full-page elements
  • Bottom padding for content where is a Go to up button

 

Sizes

Below are a few recommendations for spacing elements or components. Use these to create custom and more complex parts of the UI. Everything should be prepared and available in the design system.

 

30px

  • Smaller size for interactive elements if you need to save space. Eg. Community

36px

  • The default size of buttons, inputs, and other interactive elements

48px

  • The bigger size of interaction elements if you need to increase the attention of this element. Eg. the Request button on the teasing page.

60px

  • The standard height of bars. Eg. App header, the bar for bulk changes, etc.