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 Guia de Estilos

1. Go to the page editor.

2. Inside the editor, click on the palette icon, which corresponds to the Guia de Estilos, in the left side menu.

The panel will open with three tabs: Cores, Fontes and Estilos.

Cores tab

In this tab, you will find:

• Cores principais (main colors): Primária, Secundária and Destaque, used as the basis of the page's visual identity;
• Cores de superfície (surface colors): Fundo, Card and Suave, recommended for block backgrounds and other elements;
• Cores de feedback (feedback colors): Sucesso and Erro, used in messages, forms and alerts;
• Cores salvas (saved colors): custom colors that you can create by clicking on + Adicionar.

Next to each saved color, the information “Usado em X elementos” 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 Automática or Fixa.

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:

• Títulos (headings): styles from H1 to H6, each one with a defined font, size and weight;
• Textos (texts): Texto grande, Texto médio and Texto pequeno, used in paragraphs and other content;
• Botões (buttons): Botão grande, Botão médio and Botão pequeno;
• Tipografias salvas (saved typographies): custom font combinations that can be created by clicking on + Adicionar.

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.

Estilos tab

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

• Bordas (borders): Sem borda, Pequena, Média and Grande;
• Sombras (shadows): Sem sombra, Suave, Média and Forte;
• Espaço entre itens (space between items): Pequeno, Médio and Grande, used to control the distance between elements;
• Espaço interno (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 Guia de Estilos

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 Editar.

In the Cor do botão field, choose an option from the palette, such as Cor primária, 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 Editar and open the Cor e gradiente field.

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

• Cores principais;
• Cores de superfície;
• Cores de feedback;
• Cores salvas.

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

The Estilo do texto field works in the same way. In it, you can apply a typography defined in the Guide, such as Texto médio, Título H1 or a saved typography.

Example with a block background

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

In the Cor do fundo field, choose an option from the palette, such as Cor secundária.

The block background will be linked to that color and will be updated automatically if it is changed in the Guia de Estilos.

Example with borders and shadows

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

• Borda Média;
• Borda Grande;
• Sombra Suave;
• Sombra Forte.

When you edit that standard in the Guia de Estilos, 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 Cor primária, all elements linked to it change;
• When you change the Texto médio style, all texts that use that typography are updated;
• When you change the Borda Média, all linked elements receive the new rounding or width;
• When you change the Sombra Suave, 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/01/2026