Design
Component checklist
Up to date
React
Up to date
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.
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.
Syntax: Web
-
Variable
--space-1
6px
6px
Space 2
The primary and default space unit.
Syntax: Web
-
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.
Syntax: Web
-
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.
Syntax: Web
-
Variable
--space-4
18px
18px
Space 5
Syntax: Web
-
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.
Syntax: Web
-
Variable
--space-6
30px
30px
Space 7
Syntax: Web
-
Variable
--space-7
36px
36px
Space 8
Standard space between empty state and text. Default app content padding for resolution 1560px and higher.
Syntax: Web
-
Variable
--space-8
48px
48px
Space 9
Syntax: Web
-
Variable
--space-9
60px
60px
Space 10
Syntax: Web
-
Variable
--space-10
72px
72px
Space 11
Standard space below the empty state in panels or full-page elements.
Syntax: Web
-
Variable
--space-11
96px
96px
Space 12
Syntax: Web
-
Variable
--space-12
120px
120px
Space 13
Syntax: Web
-
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 there 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. E.g. App header, the bar for bulk changes, etc.