Skip to content

Spacing

Workbench uses an incremental 4px system for horizontal and vertical spacing. Using this system, we can create functional layouts that are more predictable and are less complicated to build.

Space establishes hierarchy and creates relationships between elements on the screen. These patterns are repeated across components and patterns to make experiences familiar and predictable across our products.

Common spacing values used in the Gusto Web platform.

Spacing values used throughout Workbench
ValueExampleCommon usage
0px/0remSpace between text elements that are 0-1 sizes different
4px/.4rem
Spacing between text elements that are 2-3 sizes different
8px/.8rem
Spacing between text elements that are 4+ sizes different
12px/1.2rem
Spacing between different content elements (e.g., section title and an address, a text description and an action button in an edit workflow)
20px/2rem
Spacing within a container element (i.e, Alert, Card, Dialog, etc.)
24px/2.4rem
Spacing between sections
32px/3.2rem
Page column/row spacing (i.e., space between main content and right bar)
60px/6rem
Page spacing (vertical and horizontal edge)

Information density determines the spacing in Workbench’s layouts. Larger values help establish priority and visual hierarchy between content areas. Within each content area, smaller space values are used to help differentiate related and unrelated content.

Overview of layout spacing at a page level
Page, section, and grid spacing
Overview of spacing in page headings
Page heading
Overview of spacing in the main content area
Main content
Overview of spacing in the side bar
Side content

Spacing between icons and text within buttons and links is dependant on the size of the element and type style. Our medium and large buttons as well as links use 8px to separate icons and text, where as small buttons use 4px.

Spacing between Buttons and Links
Buttons and Links
  • Spacing in forms follow a consistent pattern of 12px between unique elements and 8px between grouped elements (like radios and checkboxes).
  • There are subtle differences between elements with a description (0px between title and description, 4px between the description and form element) elements with just a label (4px between the label and form element)
Example of spacing between form elements
Horizontal and vertical spacing between elements within a form

The system serves as a guide for the most common use cases in Workbench. Global elements like navigation, product area-specific workflows, and one-off features may require other values. The 4px base should always be the guide when designing for Workbench components. If you need help using a value outside of the current system, please reach out to the Design Systems team #design-systems on Slack.