Examples of use
Here are some examples of use which might help guide your decisions when applying spacing within your designs. These are just suggestions, not strict rules you must follow. If you are unsure about what spacing works best between the components of your design you can use the following examples as a reference point.
Layout spacing
Horizontal spacing within design layouts should always try to adhere to our predefined grids. As we follow an element-first approach, try to expand your components to fill up the necessary columns within the grid.
Make sure to use vertical spacing as a way to create meaningful blocks of content, using bigger and smaller spaces to improve the visual hierarchy of your layout and to keep a consistent vertical rhythm within the page.
In the example above you can see how most of the vertical spacing has been defined using our spacing scale, while horizontal spacing is mostly defined by the layout grid
Component spacing
A good rule of thumb for designing components is to try using the same spacing value for all your outer paddings, as this will make the overall component look more balanced. Also, try to use centre alignment for design elements that are smaller than the area they occupy (e.g. the toggle button).
Typography spacing
When using spacing between typographic elements, try to prioritise legibility. You can also use spacing to dictate the visual hierarchy of your text, using tighter spaces to create blocks of content and bigger spaces to separate unrelated content.
