Design language

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

Color Tokens
Text Styles
Layout Tokens

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.

Color Tokens

The Color Tokens Panel will help you create a color theme that reflects your brand or style. By defining a few colors 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. You will learn more about this in the upcoming lesson on Styling Elements.



If you add a new token and you want to keep a certain order, for example from dark to light, simply drag and drop the new color where you want it to be. This can also be done with layout tokens and text styles.



Another nice feature is setting the foreground (text) color and the background color that will be applied on all the pages of the project. You can also choose to switch the background and foreground colors.

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 language comes with predefined text styles, one for the text content and one for heading elements. You will see that 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.

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. As you might have guessed size 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.

Updated on: 29/05/2024