How to use the Guia de Estilos

The Guia de Estilos (Style Guide) is an editor panel that brings together, in one place, the colors, fonts, borders, shadows and spacing used on your page.

With it, you configure the visual standards once and can apply them to different elements on the page. When a style is changed in the Guide, all elements linked to it are updated automatically.

This makes maintaining the page easier, saves time and helps keep the visual identity consistent.

How to access the Style Guide

1. Go to the page editor.

2. Inside the editor, click on the palette icon, which corresponds to the Style Guide, in the left side menu.

The panel will open with three tabs: Collor, Fonts and Styles.

Colors tab

In this tab, you will find:

• Mais colors: Primária, Secundária and Destaque, used as the basis of the page's visual identity;
• Surface colors: Fundo, Card and Suave, recommended for block backgrounds and other elements;
• Feedback colors (feedback colors): Sucesso and Erro, used in messages, forms and alerts;
• Saved colors: custom colors that you can create by clicking on + Add.

Next to each saved color, the information “Used in X elements” shows how many elements on the page are linked to it.

To edit a color, click on it. In the window that opens, you can change the HEX code and set the color of the text displayed over it as Automatic or Fixed.

After saving, all elements linked to that color will be updated automatically.

Fontes tab

In this tab, you will find ready-to-use typography styles for different types of content:

• Headings: styles from H1 to H6, each one with a defined font, size and weight;
• Texts: Texto grande, Texto médio and Texto pequeno, used in paragraphs and other content;
• Buttons: Botão grande, Botão médio and Botão pequeno;
• Saved typographies: custom font combinations that can be created by clicking on + Add.

When you click on a font style, you will be able to configure:

• Font family;
• Size;
• Weight;
• Formatting, such as bold, italic, underline or strikethrough;
• Line height;
• Letter spacing.

It is also possible to set different values for Desktop and Mobile.

When a typography is changed in the Guia de Estilos, all texts linked to it are updated automatically.

Styles tab

In this tab, you configure visual standards that can be applied to the elements on the page:

• Borders: Sem borda, Pequena, Média and Grande;
• Shadows: Sem sombra, Suave, Média and Forte;
• Space between items: Pequeno, Médio and Grande, used to control the distance between elements;
• Inner space: Pequeno, Médio and Grande, used to control the inner padding of the elements.

When you click on a style, you will be able to adjust details such as:

• Rounding;
• Border width;
• Color;
• Shadow intensity;
• Spacing.

Just like with colors and fonts, any change made to a style will automatically be applied to the elements linked to it.

How to link elements to the Style Guide

The elements on the page can use values defined in the Guia de Estilos instead of individual settings.

Example with a button

Select the button and click on Edit.

In the Button color field, choose an option from the palette, such as Primary color, instead of setting a color code manually.

If the Cor primária is changed later in the Guia de Estilos, all buttons linked to it will be updated.

Example with a text or paragraph

Select the text, click on Edit and open the Color and gradient field.

The color picker will display the same options available in the Guia de Estilos, including:

• Primary Colors
• Surface Colors
• Feedback Colors
• Saved Colors

When you select one of these options, the text will be linked to the chosen color.

The Text style field works in the same way. In it, you can apply a typography defined in the Guide, such as Texto Medium-length text, H1 Title or a saved typography.

Example with a block background

Select an empty area of the block and click on Edit.

In the Background color field, choose an option from the palette, such as Secondary color.

The block background will be linked to that color and will be updated automatically if it is changed in the Style guide.

Example with borders and shadows

In the Border and Shadow fields of an element, choose one of the styles defined in the Guide, such as:

• Medium Border
• Large Border
• Soft Shadow
• Strong Shadow

When you edit that standard in the Styles guide, all elements that use it will be updated.

Automatic changes to linked elements

When you use styles from the Guide, you do not need to edit each element individually.

For example:

• When you change the Primary color, all elements linked to it change;
• When you change the Medium-lenght text style, all texts that use that typography are updated;
• When you change the Medium border, all linked elements receive the new rounding or width;
• When you change the Soft shadow, the new setting is applied to all elements that use that style;
• When you change a spacing standard, all linked elements start using the new value.

This linking makes it possible to update the page's visual identity in a faster and more consistent way.

That's it! Now you know how to configure the Guia de Estilos and use its colors, fonts, borders, shadows and spacing on the elements of your page.

Still have questions? Reach out to our team on Chat! We're always happy to help. 😊

Updated on: 08/06/2026