Spacing
Every part of a UI should be intentional including the empty space between elements. The amount of space between items creates relationships and hierarchy.
Two scales
There are two spacing scales; one for general spacing within components and the other for layout spacing. Both are designed to complement the existing components and typography throughout the system. The two scales have certain overlapping values that serve two different roles.
Spacing scale
Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all Bewond components.
| Token | rem | px |
|---|---|---|
spacing-01 | 0.125 | 2 |
spacing-02 | 0.25 | 4 |
spacing-03 | 0.5 | 8 |
spacing-04 | 0.75 | 12 |
spacing-05 | 1 | 16 |
spacing-06 | 1.5 | 24 |
spacing-07 | 2 | 32 |
spacing-08 | 2.5 | 40 |
spacing-09 | 3 | 48 |
Layout scale
The layout scale is used for arranging components and other UI parts into a full page layout. It has larger increments that are used to control the density of a design. Use the smaller layout tokens to create more dense compositions and direct relationships. Use the larger tokens to increase the amount of white space and to disassociate sections.
| Token | rem | px |
|---|---|---|
layout-01 | 1 | 16 |
layout-02 | 1.5 | 24 |
layout-03 | 2 | 32 |
layout-04 | 3 | 48 |
layout-05 | 4 | 64 |
layout-06 | 6 | 96 |
layout-07 | 10 | 160 |
The Grid is the encouraged way to horizontally space UI elements. The layout scale is most commonly used for vertical spacing, but it can also be applied for horizontal spacing when appropriate, especially in the case of fixed spacing.
There are a few other non-token methods that can be used for spacing elements like center.