> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como utilizar o Guia de Estilos (Design System) no GreatPages

# Como usar o Guia de Estilos

O **Guia de Estilos** é um painel do editor que reúne, em um só lugar, as cores, fontes, bordas, sombras e espaçamentos utilizados na sua página.

Com ele, você configura os padrões visuais uma única vez e pode aplicá-los em diferentes elementos da página. Quando um estilo é alterado no Guia, todos os elementos vinculados a ele são atualizados automaticamente.

Isso facilita a manutenção da página, economiza tempo e ajuda a manter a identidade visual consistente.

---

## Como acessar o Guia de Estilos

1. Acesse o editor de páginas.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_19nn6iv.png =650x385)

2. Dentro do editor, clique no **ícone de paleta**, correspondente ao **Guia de Estilos**, no menu lateral esquerdo.

O painel será aberto com três abas: **Cores**, **Fontes** e **Estilos**.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-14-as-_128lrsu.png =650x530)

---

## Aba Cores

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/guia-estilos-aba-cores_1mee4k2.png =650x393)

Nesta aba, você encontra:

* **Cores principais**: Primária, Secundária e Destaque, utilizadas como base da identidade visual da página;
* **Cores de superfície**: Fundo, Card e Suave, indicadas para fundos de blocos e outros elementos;
* **Cores de feedback**: Sucesso e Erro, utilizadas em mensagens, formulários e alertas;
* **Cores salvas**: cores personalizadas que você pode criar clicando em **+ Adicionar**.

Ao lado de cada cor salva, a informação **“Usado em X elementos”** mostra quantos elementos da página estão vinculados a ela.

Para editar uma cor, clique sobre ela. Na janela aberta, você poderá alterar o código HEX e definir a cor do texto exibido sobre ela como **Automática** ou **Fixa**.

Depois de salvar, todos os elementos vinculados àquela cor serão atualizados automaticamente.

---

## Aba Fontes

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/guia-estilos-aba-fontes_1mfd0t4.png =650x393)

Nesta aba, você encontra estilos de tipografia prontos para diferentes tipos de conteúdo:

* **Títulos**: estilos de H1 a H6, cada um com fonte, tamanho e peso definidos;
* **Textos**: Texto grande, Texto médio e Texto pequeno, utilizados em parágrafos e outros conteúdos;
* **Botões**: Botão grande, Botão médio e Botão pequeno;
* **Tipografias salvas**: combinações personalizadas de fonte que podem ser criadas clicando em **+ Adicionar**.

Ao clicar em um estilo de fonte, você poderá configurar:

* Família da fonte;
* Tamanho;
* Peso;
* Formatação, como negrito, itálico, sublinhado ou tachado;
* Altura da linha;
* Espaçamento entre letras.

Também é possível definir valores diferentes para **Desktop** e **Mobile**.

Quando uma tipografia é alterada no Guia de Estilos, todos os textos vinculados a ela são atualizados automaticamente.

---

## Aba Estilos

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/guia-estilos-aba-estilos_1kmyl24.png =650x393)

Nesta aba, você configura padrões visuais que podem ser aplicados aos elementos da página:

* **Bordas**: Sem borda, Pequena, Média e Grande;
* **Sombras**: Sem sombra, Suave, Média e Forte;
* **Espaço entre itens**: Pequeno, Médio e Grande, utilizado para controlar a distância entre os elementos;
* **Espaço interno**: Pequeno, Médio e Grande, utilizado para controlar o preenchimento interno dos elementos.

Ao clicar em um estilo, você poderá ajustar detalhes como:

* Arredondamento;
* Largura da borda;
* Cor;
* Intensidade da sombra;
* Espaçamento.

Assim como nas cores e fontes, qualquer alteração feita em um estilo será aplicada automaticamente aos elementos vinculados a ele.

---

## Como vincular os elementos ao Guia de Estilos

Os elementos da página podem utilizar valores definidos no Guia de Estilos em vez de configurações individuais.

### Exemplo em um botão

Selecione o botão e clique em **Editar**.

No campo **Cor do botão**, escolha uma opção da paleta, como **Cor primária**, em vez de definir um código de cor manualmente.

Se a Cor primária for alterada posteriormente no Guia de Estilos, todos os botões vinculados a ela serão atualizados.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1hug00t.png =650x270)

### Exemplo em um texto ou parágrafo

Selecione o texto, clique em **Editar** e abra o campo **Cor e gradiente**.

O Seletor de cores exibirá as mesmas opções disponíveis no Guia de Estilos, incluindo:

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

Ao selecionar uma dessas opções, o texto ficará vinculado à cor escolhida.

O campo **Estilo do texto** funciona da mesma forma. Nele, você pode aplicar uma tipografia definida no Guia, como **Texto médio**, **Título H1** ou uma tipografia salva.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1cow57s.png =650x225)

### Exemplo no fundo de um bloco

Selecione uma área vazia do bloco e clique em **Editar**.

No campo **Cor do fundo**, escolha uma opção da paleta, como **Cor secundária**.

O fundo do bloco ficará vinculado a essa cor e será atualizado automaticamente caso ela seja alterada no Guia de Estilos.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1tx1ndd.png =650x230)

### Exemplo em bordas e sombras

Nos campos **Borda** e **Sombra** de um elemento, escolha um dos estilos definidos no Guia, como:

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

Ao editar esse padrão no Guia de Estilos, todos os elementos que o utilizam serão atualizados.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/exemplo-borda-media_fsv2af.png =650x393)

---

## Alterações automáticas nos elementos vinculados

Ao utilizar estilos do Guia, você não precisa editar cada elemento individualmente.

Por exemplo:

* Ao alterar a **Cor primária**, todos os elementos vinculados a ela mudam;
* Ao alterar o estilo **Texto médio**, todos os textos que utilizam essa tipografia são atualizados;
* Ao alterar a **Borda Média**, todos os elementos vinculados recebem o novo arredondamento ou largura;
* Ao alterar a **Sombra Suave**, a nova configuração é aplicada em todos os elementos que utilizam esse estilo;
* Ao alterar um padrão de espaçamento, todos os elementos vinculados passam a utilizar o novo valor.

Essa vinculação permite atualizar a identidade visual da página de forma mais rápida e consistente.

---

Pronto! Agora você já sabe como configurar o Guia de Estilos e utilizar suas cores, fontes, bordas, sombras e espaçamentos nos elementos da página.

Ficou com alguma dúvida? Chame nossa equipe no Chat! Estamos sempre prontos para ajudar. 😊