Spacing

Spacing scale

Our spacing scale is relative and modular. The abstracted values share a base unit and increase or decrease predictably. This helps us maintain consistent vertical rhythm, regardless of the platform, product, viewport size, or zoom level.

Note to developers:
Never use a hardcoded non-scale spacing value. If you need a size that doesn’t exist in the scale, ask the designer if you should use an existing size or if the one-off size is actually necessary. If the one-off size is necessary, make sure to use rems instead of px, and to leave a comment in the code // NOTE: this is a one-off size.

Note to designers:
Use the spacing symbols in the Anatomy - Foundations library. Refer to the Getting started section in Resources for access the Sketch libraries.

Base 8

Our spacing scale is based on multiples of 8. The majority of popular screen sizes and breakpoints are divisible by 8, which makes scaling for a variety of devices easy and consistent. This also results in crisp edges without any blurry half-pixel offsets.

Like the type scale, the spacing scale uses rems. Because rems are relative to the root, which can vary by browser, the exact pixel size may change. Our spacing scale's base unit is 0.5rem, which is roughly 8px.

Vertical rhythm

Vertical space is almost always applied above an element. We do this because, in CSS, vertical margins can collapse and we can’t target preceding elements. Applying space above an element gives us more control over how elements stack, and results in more consistent and predictable vertical rhythm. There are a few exceptions to this for components that should always have consistent spacing above and below them, like dividers.

Usage

Consider the following when choosing which spacing option to apply:

• The overall layout of the page
• The relationship between information or components
• How the layout will reflow on smaller viewports
• The hierarchy of importance on the page
• Keeping visual balance by leveraging white space