Best Practices

Spacing tokens are identified in Shoreline by the prefix $space, followed by numeric suffixes that represent the space value in rems (value in pixels divided by 4). For example, the token with a 16px value is $space-4. The only exception is the token $space-gap, that represents the default spacing between elements in a page.

Spacing can be applied horizontally or vertically in any CSS property that receives a space value.

Usage

Relationships and hierarchy

• Elements that are meaningfully related should be closer to each other, for example, a Checkbox and its label.
• Elements arranged in the same spacing pattern are usually perceived as having similar weight, for example, options in a Checkbox Group.
• Spacing can also define the relationships between groups of elements. For example, the space between form sections should have a higher value than the space between the form section title and a field.
• Elements with more spacing around them are usually perceived as having a higher relevance on the interface, for example, the spacing around an error state of a Collection.

Spacing within a Checkbox group and between form sections.

Visual rhythm

• The visual rhythm of an interface is defined by pattern repetition. Spacing helps to create rhythm, improving predictability and scannability. It also allows you to draw the user’s attention to specific points by intentionally breaking the pattern.
• The rhythm can be more predictable when elements within a screen have the same level of importance, such as in a Table.
• The rhythm can also help organize elements that may have different levels of importance, such as in a dashboard.

Spacing between elements with the same level of importance.

Visual weight

• The spacing scale can be applied horizontally or vertically. Depending on the visual weight of the element, sometimes using the same value on both axes doesn’t result in a balanced composition. In these scenarios, it’s necessary to optically adjust the spacing.
• Observe if the components have a well-defined background (marked by a fill or stroke) or not. For example, the spacing value between primary and secondary Buttons should be larger than the spacing value between two tertiary Buttons.

Different spacing between components with and without a well-defined background.

Optical adjustment with the horizontal padding larger than the vertical padding.

Density

• Tighter spacing, more dense: increases the level of scannability for large sets of data, such as in a Table.
• Looser spacing, less dense: increases the level of hierarchy or helps define groups within an interface, such as Form sections.

Tighter and looser spacing.

Examples