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
Value	Example	Common usage
0px/0rem		Space 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.

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.