How to create a design system using tokens

Describe the overall visual design of your brand or style through tokens, text styles and custom variables.

Color Tokens
Text Styles
Layout Tokens
Imported variables (vars)

The design language tokens that you manually set up do not affect the themes associated with sections or AI generated pages.

All new projects comes with a predefined design language consisting of text styles, color and layout tokens.

To go to the Tokens tab in the Right panel, click outside of the Canvas.

1. Color and Gradient tokens

The Color Tokens Panel will help you create a color theme that reflects your brand or style. By defining a few colors or gradients you will be able to get a consistent look across your website.
You can define tokens grouped into sections.

Usually you would have a primary, secondary and neutrals/grey palette. All new projects come with a predefined color palette so you can get an idea about what it should look like and tweak it if necessary. You will notice that the tokens have names from 100 to 900, smaller numbers meaning a darker color, and bigger numbers meaning it's lighter.

These tokens can be used when styling color properties liked text, border or background color.

Color tokens can be rearranged using drag and drop, new categories can be created and rearranged as well from the category menu and you can also set the foreground (default text color) color and the background color that will be applied on all the pages of the project. You can also switch the background and foreground colors.

To apply a color token on one of the available elements:

Select an element and go to a property that can have a color
In the Color field select a token from the dropdown menu

2. Text Styles

Text styles will help you present your design and content as clearly and efficiently as possible. In the Text Styles Panel you can define reusable styles that you can link to text elements. The Design default design system comes with predefined text styles, one for the text content and one for heading elements.

You can choose any text style to be the default style for all your texts across the project.

To edit a text style simply click on it and choose your desired font, letter spacing and size. We also support Google Fonts so you can import any font you like. You can also use custom fonts if they were added in the project settings.

To apply a text token on one a piece of text:

Select a text element
Go to the Right panel -> Text style section
Click on the token icon (link icon)
Select a token from the dropdown menu

3. Layout Tokens

Similar to the color tokens, any new project comes with predefined layout tokens. These tokens are split into three categories: size, spacing and radius.
These tokens can be used when setting an element's width or height, spacing tokens can be used for margin and padding and radius for, you guessed it, the border radius property.

To apply a layout token on one a piece of text:

Select an element that c*an take one of the available properties: size, spacing or radius
Go to the Right panel
Go to the property you want to change
Select a token from the dropdown menu

4. Imported variables (vars)

The last column in the tokens tab is reserved for vars (variable tokens) imported into the project. Check out this article about importing code into your project.

Using the code import feature you can easily bring into your project an entire design system that you can then use to create a clean website according to your predefined standards.

To import a list of vars:

Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the Select the entire code between the <style> tags</s>
In the Left panel click on the Import HTML & CSS button
Paste the styles in the new tab
Click the Save button
Go to the Right panel to the vars section

To use any of the new imported vars you can proceed just like you would add any token.

Updated on: 28/03/2025