Spacing and size

Overview

Wave uses comprehensive size, spacing and border radius scales.

As much as possible, Wave tries to make use of this scales rather than generating custom sizing rules to ensure more harmonious and organized visual layout.

All our sizing values are set in rem.

Size tokens#

Size tokens are anchored around base spacing unit of 0.25rem, which translates to 4px by default in browsers. Size tokens follow one base unit increments for smaller dimensions, and up to four base unit increments for larger dimensions.

Usage#

Size scale values can be applied to common CSS dimensions properties such as width, height, maxWidth or maxHeight.

Spacing tokens#

Spacing tokens are selection of values from the size tokens above. Values on the scale are non-linear with a progressively larger increment each step. Spacing tokens can be used inside of components and between components for layout spacing.

Usage#

Spacing scale values can be applied to common CSS layout spacing properties such as margin, padding or gap. To create the space around components, it's recommened to use Flex layout component.

Radius tokens#

Border radius tokens define the standard corner radius of the components.

Different sizes of border radius are used according to the component size. Smallest radius is used for small components such as input fields, while medium radius is used for more prominent elements such as large buttons or dialogs.

Usage#

Border radius values can be applied to borderRadius CSS property.