Spacing

The Shell DS spacing scale aligns with the 4x grid and uses increments of four (eight, twelve, sixteen and so on). Each level of the scale has its own token that can be used for building within components as well as for layout spacing between components.

The spacing token replaces the values usually given to margin and padding. In the example shown below, spacing is used to create a visual hierarchy between the title, the designer quote and spacer for the body copy underneath.

<p class="label">Designer quote</p>
<h1 class="heading">Paul Rand</h1>
<p class="paragraph">
  The public is more familiar with bad design than good design.
  It is, in effect, conditioned to prefer bad design, because that is
  what it lives with. The new becomes threatening, the old reassuring.
</p>
  
.p:first-of-type {
  margin-top: $spacing-7;
  margin-bottom: $spacing-1;
}

.h1 {
  margin-bottom: $spacing-5;
}

.p:last-of-type {
  margin-bottom: $spacing-9;
}
  

Stacking is a form of spacing that creates equal distance between components or a group of items.

Designing with space and creating negative areas between elements consciously communicates their respective relationships and hierarchy, and is integral in a UI.

Relationships and hierarchy

Space is a powerful design tool in suggesting relationships between elements in UI for several reasons.

• Less space denotes closeness between elements of design.
• Increased space separates and reduces the connection.
• Equal ratios of space between elements suggest equal importance.
• Sections can be created by using space around associated areas of content instead of dividers.

Spacing affects users’ perception of the relative importance of UI elements. In simple terms, greater areas of negative space denote importance of a particular element, whereas less important elements attract less focus if there is less space around them.

Whitespace

Essential to good UI – white space allows a user’s eye to rest and avoids overcrowding of information on a page. Overly dense page content with insufficient spacing can contribute to cognitive load for your user, leading to poor user experience.

Use whitespace to create a visual hierarchy in page layout and improve readability of content.

Too little whitespace leads to a cluttered layout which is difficult to read.