We use spacing tokens to make margins and patterns consistently across components and layouts. Using a set spacing scale helps eliminate guesswork regarding the space between elements, and helps create a smooth, readable flow from page to page.
Human beings are pattern seekers. An important part of how we perceive our environments is by grouping together things that appear related, as a way to reduce our cognitive load. Here are a few key guidelines to consider when using spacing:
Optimize for pattern recognition.
Pay attention to the proximity between items. Use
small spacing between elements that belong together; use
large spacing to distinguish an item from the rest of the group.
Use backgrounds thoughtfully.
Putting a background behind a set of items helps to create a figure/ground relationship that can make it easier to scan a page. Too many backgrounds, however, makes it harder to scan the information. Use
xlarge spacing at the edge of backgrounds to help contain the different chunks of information.
Use the Spacing Scale when creating individual elements, or doing page layouts in Sketch. Our spacing scale is already applied to and used within all Bolt components.
Here are a few representative examples of how to use spacing in your layouts.
Card with teaser
In a teaser card, use
small spacing to separate text elements from one another.
medium spacing provides breathing room around the main content components.
In a hero/feature band, use
medium spacing to create visual distinction between elements in each section, and incorporate
xlarge spacing around the sections to help provide breathing room for the image.
When using a band to hold multiple things, including headlines, cards and other elements, be judicious with spacing around each element to ensure that the eye can move through the section easily.