Vitality's design tokens are essentially JavaScript variables that represent some of the foundational style definitions that all components reference. They are strongly typed using TypeScript and guarantee a consistent structure. Design tokens allow you to "hook into" these foundations by referencing the same core variables in your app or project, whilst maintaining the freedom to implement them in a way that suits your needs.

A few examples include:

1. Writing a plugin for Figma that needs access to font sizes and colours.
2. Generating a color palette or theme for a non-React app.

Radii refers to the available values for rounding edges of elements. Typically used in buttons, inputs, dialogs etc.

Elevation refers to the available values for shadows on elements. Typically used in dialogs and popovers.

We use three levels of elevation:

For more information on font sizes, see the Typography component documentation.

For more information on colors, see the Color documentation.

The space of an element refers to the space around or inside objects. It does not relate to sizes like width or height. In common terms, use the space units for padding and margins.

The default spacing value is md which is 8px. This is considered to be the suggested norm to create a consistent visual scale. Use common sense though when creating components and consider whether other factors like font size, icons or nested elements may affect the spacing required.

All spacing units in Vitality are based on multiples of 8. For consistency, use the below aliases for spacing:

Figma user tip: change your nudge increments to 8px to ensure your spacing stays in the 8px grid. Video on YouTube

There are two scenarios where you may be working with Vitality's space scale.

Most Vitality components do not include props for adding padding and margins, as the intention is to let container components such as Stackor Box define how elements are spaced near others, rather than writing one-off spacing props on every component.

<Stack spacing="lg" />
<Box padding="sm" />
<Box margin="sm" />

Read more about Styling Components in Code