Spacing System

Empty space — also known as white space — is important in design. It can be used to break up sections on a page or to help create focus on certain element(s). White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user’s eye rest.

The Zeta spacing scale complements the 4px mini unit scale by using multiples of 4. It includes both small increments needed to create appropriate spatial relationships for detail-level designs as well as larger increments used to control the density of a design. Each level of the spacing scale has its own token. Spacing tokens can be used inside of components for building and between components for layout spacing.

Applying space

Spacing can be applied to margin or padding properties, as well as to both vertical and horizontal edges following a more traditional CSS box model.

example:

Space spatial concepts

Spatial concept we use: insetting content from an edge, varying an inset’s shape, spacing items inline, and stacking items within and between a component.

These concepts — inset, inset squish, stack, inline, and grid — cover the vast majority of our library’s CSS rules for space: padding, margin, left, right, top, and bottom. These concepts also enhance how each atomic is self-contained, improving composability.

Please refer at the bottom of this page (Spacing scale) for token naming explanation.

Spacing scale

See also Token naming spreadsheet doc

Use the spacing 4px scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale should applied and be used within all Zeta components.

We have also introduced tokens that use a more human language like T-shirt sizes and spatial naming concepts, as yoy may already noticed from the examples above.

The spacing scale can be applied to margin or padding properties, as well as to both vertical and horizontal edges following a more traditional CSS box model.