Space is the horizontal and vertical distance between or around different design elements.
There are several types of spacing we can use to place elements within layouts and components. Although you’re most likely going to use them all when designing your products, it’s important to know what types of spacing are commonly used.
Padding is the distance between the edge of an element and its content. It can be specified horizontally, vertically, or both.
Margins are the distances between components and can be applied vertically and horizontally. They define the relationship between components, layout and viewport size.
Dimensions describe the overall width and height of a component or design element. While vertical dimensions should always stick to our spacing scale, horizontal dimensions are not specified because they are responsive to the viewport’s width.
Our main approach for designing components can be categorised as ‘element first’. This means that the sizing of components and design elements takes priority when matched to our predetermined spatial system. We follow this approach to keep a consistent rhythm within the overall composition and layout of our designs.
For instance, an element might be set to always have a height of 48px, regardless of the content found inside it. This means that if the component has different variations (like different typographic sizes) it will always preserve a 48px height, and it’s the internal padding will change to accommodate the difference in height.
We have a variety of different products within our pillars, and all of them have different spacing needs based on the nature of their target users. For instance, customer-facing products might need to use more generous space around components to incentivise white space, while operational products will want to use tighter measures to economise the use of space.
This is why we have defined two different spacing concepts to refer to these spacing needs:
Default spacing uses bigger space measures for its components’ paddings, margins and dimensions. This helps improve the readability and visibility of all the components and information within the layout. The use of breathing space around components is encouraged to help achieve this.
Compact spacing uses smaller space measures for its components’ paddings, margins and dimensions. This helps economise the space used in the screen and allows us to include more contents and information within the viewport.
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.
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.
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).
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.