Spacing
Spacing make pages more readable by providing consistent spacing between elements. Different spaces are used for different purposes: from grouping elements that are related to each other to separating distinct sections of content, ensuring a clear visual hierarchy, and enhancing the overall flow of information.
Good spacing can significantly improve a reader's ability to comprehend and absorb the content, as it aids in reducing visual clutter and preventing confusion. It's a fundamental aspect of clean, user-friendly design, and plays a key role in making documents, websites, and other types of media more navigable and aesthetically pleasing.
Predefined spacing
| Name | Value | Usage |
|---|---|---|
| hairline | 2px | Used when you need to separate things with the minimum space possible. |
| xsmall | 4px | Mainly to separate texts and inline content in general from each other. |
| small | 8px | Smallest possible margin in a container. You can also use it to separate a title from its subtitle from example. |
| normal | 16px | The most used spacing value in the UI. Margin/padding often use this value. |
| large | 24px | Sometimes normal space is not enough and makes the UI look too crowded. Use this token to separate content that needs more space. |
| xlarge | 32px | Used to give some air to the UI, sometimes at the bottom of the screen or to separate big sections. |
| xxlarge | 48px | Not used so often but just here in case you need it. |
Border radius
| Name | Value | Usage |
|---|---|---|
| small | 2px | Rarely used |
| regular | 4px | Buttons, inputs, etc |
| circle | Make it a circle | When you need a circle shape |