Common spacing values used in the Gusto Web platform.
|0px||Space between text elements that are 0-1 sizes different|
|4px||Spacing between text elements that are 2-3 sizes different|
|8px||Spacing between text elements that are 4+ sizes different|
|12px||Spacing between different content elements (e.g., section title and an address, a text description and an action button in an edit workflow)|
|20px||Spacing within a container element (i.e, Alert, Card, Dialog, etc.)|
|24px||Spacing between sections|
|32px||Page column/row spacing (i.e., space between main content and right bar)|
|60px||Page spacing (vertical and horizontal edge)|
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.