Spacing
Every measurement for consistent margin and padding
Form and section spacing
Section spacing and page layout using Spark CSS classes is documented on the Page sections page.
Examples
Use the toggle at the top of these page templates to visualize spacing on mobile and desktop.
Layout of form elements and form design specs will be documented on the Forms page.
Value scale
Our spacing system is based on multiples of 4 and 8. Multiples of 4 are mostly used in Typography. These rules are agnostic of breakpoints or platform, and should apply globally to all types of content.
Functions for space include the following, mapped to their current values:
| Function | Description | Value | Token |
|---|---|---|---|
| Space between related pattern elements View example | Represents related yet separate elements that inform each other | 8px |
$sds-global-spacing-micro |
| Connection between groups of elements or patterns View example | Represents the flow of items that are related yet serve different purposes | 16px |
$sds-global-spacing-medium |
| Offsetting visually View example | Represents a maintained flow or idea yet visually separated for emphasis | 24px |
$sds-global-spacing-large |
Examples
Space between related pattern elements
- A photo and a caption
- A heading and a sub-heading
- Space between icon buttons
Connection between groups of elements or patterns
- A photo and a heading
- A description and a “read more” link
- Photos in a gallery grid
- Buttons in a form
16px should also be used as default horizontal padding on a container or viewport.
Offsetting visually
- A section header area and section content area
- Space between buttons or links (that perform markedly different actions) in a module
Exceptions
Exceptions to the above rules can be made as needed to push work forward, but should be avoided.
Optical adjustment
As noted in Optical Effects in User Interfaces, and especially for icon or illustration sizing and layout, some optical adjustment may be necessary.
Adjustment of spacing or padding within pages, sections or modules should be communicated to the Spark team so that we can note any deviations as possible iterations or amendments to the above system.