Spacing methods are a set of rules around how to place elements within layouts and components.
We are using a soft 8-point grid to define our spacing. This means we use multiples of 8 to define dimensions, padding, and margins of both block and inline elements. Individual elements are positioned relative to each other. Smaller components, such as iconography and typography, can align to a 4-point grid.
How to use
You should follow these spacing guidelines to any new component design. Existing components already utilize these spacings and are designed to work with our layout grid.
Best Practices
A grid is a guide that helps us set the base while designing. Here’s a list of a few things to keep in mind while designing with your grid.
- All your content should always wrap inside a container. These containers can be visible with clear borders (cards and modals) or be invisible for layouts with only text and icons.
- The containers should always span from the outer edges of the columns they sit on, and should not bleed.
Inset
Equal spacing within an element
Inset Squish
Inset Stretch
Stack
Horizontal spacing between components.
Inline
Vertical spacing between components.
Section/Component Minimum Spacing
Spacing methods are a set of rules around how to place elements within layouts and components.
We are using a soft 8-point grid to define our spacing. This means we use multiples of 8 to define dimensions, padding, and margins of both block and inline elements. Individual elements are positioned relative to each other. Smaller components, such as iconography and typography, can align to a 4-point grid.
Desktop
Tablet
Mobile
“