> ## 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). # Cómo utilizar la Guía de Estilos (Design System) en GreatPages # Cómo usar el Guia de Estilos El **Guia de Estilos** (Guía de Estilos) es un panel del editor que reúne, en un solo lugar, los colores, las fuentes, los bordes, las sombras y los espaciados utilizados en tu página. Con él, configuras los estándares visuales una sola vez y puedes aplicarlos en diferentes elementos de la página. Cuando un estilo se modifica en la Guía, todos los elementos vinculados a él se actualizan automáticamente. Esto facilita el mantenimiento de la página, ahorra tiempo y ayuda a mantener la identidad visual consistente. --- ## Cómo acceder al Guia de Estilos 1. Accede al editor de páginas. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_l8gajq.png) 2. Dentro del editor, haz clic en el **ícono de paleta**, correspondiente al **Guia de Estilos**, en el menú lateral izquierdo. El panel se abrirá con tres pestañas: **Cores**, **Fontes** y **Estilos**. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_13tzjm4.png) --- ## Pestaña Cores ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/guia-estilos-aba-cores_1mee4k2.png) En esta pestaña encuentras: * **Cores principais** (colores principales): Primária, Secundária y Destaque, utilizados como base de la identidad visual de la página; * **Cores de superfície** (colores de superficie): Fundo, Card y Suave, indicados para fondos de bloques y otros elementos; * **Cores de feedback** (colores de feedback): Sucesso y Erro, utilizados en mensajes, formularios y alertas; * **Cores salvas** (colores guardados): colores personalizados que puedes crear haciendo clic en **+ Adicionar**. Al lado de cada color guardado, la información **“Usado em X elementos”** muestra cuántos elementos de la página están vinculados a él. Para editar un color, haz clic sobre él. En la ventana que se abre podrás cambiar el código HEX y definir el color del texto mostrado sobre él como **Automática** o **Fixa**. Después de guardar, todos los elementos vinculados a ese color se actualizarán automáticamente. --- ## Pestaña Fontes ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/guia-estilos-aba-fontes_1mfd0t4.png) En esta pestaña encuentras estilos de tipografía listos para diferentes tipos de contenido: * **Títulos** (títulos): estilos de H1 a H6, cada uno con fuente, tamaño y peso definidos; * **Textos** (textos): Texto grande, Texto médio y Texto pequeno, utilizados en párrafos y otros contenidos; * **Botões** (botones): Botão grande, Botão médio y Botão pequeno; * **Tipografias salvas** (tipografías guardadas): combinaciones personalizadas de fuente que pueden crearse haciendo clic en **+ Adicionar**. Al hacer clic en un estilo de fuente, podrás configurar: * Familia de la fuente; * Tamaño; * Peso; * Formato, como negrita, cursiva, subrayado o tachado; * Altura de línea; * Espaciado entre letras. También es posible definir valores diferentes para **Desktop** y **Mobile**. Cuando una tipografía se modifica en el Guia de Estilos, todos los textos vinculados a ella se actualizan automáticamente. --- ## Pestaña Estilos ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/guia-estilos-aba-estilos_1kmyl24.png) En esta pestaña configuras estándares visuales que pueden aplicarse a los elementos de la página: * **Bordas** (bordes): Sem borda, Pequena, Média y Grande; * **Sombras** (sombras): Sem sombra, Suave, Média y Forte; * **Espaço entre itens** (espacio entre ítems): Pequeno, Médio y Grande, utilizado para controlar la distancia entre los elementos; * **Espaço interno** (espacio interno): Pequeno, Médio y Grande, utilizado para controlar el relleno interno de los elementos. Al hacer clic en un estilo, podrás ajustar detalles como: * Redondeo; * Ancho del borde; * Color; * Intensidad de la sombra; * Espaciado. Al igual que en los colores y las fuentes, cualquier cambio hecho en un estilo se aplicará automáticamente a los elementos vinculados a él. --- ## Cómo vincular los elementos al Guia de Estilos Los elementos de la página pueden utilizar valores definidos en el Guia de Estilos en lugar de configuraciones individuales. ### Ejemplo en un botón Selecciona el botón y haz clic en **Editar**. En el campo **Cor do botão**, elige una opción de la paleta, como **Cor primária**, en lugar de definir un código de color manualmente. Si la Cor primária se modifica posteriormente en el Guia de Estilos, todos los botones vinculados a ella se actualizarán. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1hug00t.png) ### Ejemplo en un texto o párrafo Selecciona el texto, haz clic en **Editar** y abre el campo **Cor e gradiente**. El selector de colores mostrará las mismas opciones disponibles en el Guia de Estilos, incluyendo: * Cores principais; * Cores de superfície; * Cores de feedback; * Cores salvas. Al seleccionar una de esas opciones, el texto quedará vinculado al color elegido. El campo **Estilo do texto** funciona de la misma manera. En él puedes aplicar una tipografía definida en la Guía, como **Texto médio**, **Título H1** o una tipografía guardada. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1cow57s.png) ### Ejemplo en el fondo de un bloque Selecciona un área vacía del bloque y haz clic en **Editar**. En el campo **Cor do fundo**, elige una opción de la paleta, como **Cor secundária**. El fondo del bloque quedará vinculado a ese color y se actualizará automáticamente en caso de que se modifique en el Guia de Estilos. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1tx1ndd.png) ### Ejemplo en bordes y sombras En los campos **Borda** y **Sombra** de un elemento, elige uno de los estilos definidos en la Guía, como: * Borda Média; * Borda Grande; * Sombra Suave; * Sombra Forte. Al editar ese estándar en el Guia de Estilos, todos los elementos que lo utilizan se actualizarán. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/exemplo-borda-media_fsv2af.png) --- ## Cambios automáticos en los elementos vinculados Al utilizar estilos de la Guía, no necesitas editar cada elemento individualmente. Por ejemplo: * Al modificar la **Cor primária**, todos los elementos vinculados a ella cambian; * Al modificar el estilo **Texto médio**, todos los textos que utilizan esa tipografía se actualizan; * Al modificar la **Borda Média**, todos los elementos vinculados reciben el nuevo redondeo o ancho; * Al modificar la **Sombra Suave**, la nueva configuración se aplica en todos los elementos que utilizan ese estilo; * Al modificar un estándar de espaciado, todos los elementos vinculados pasan a utilizar el nuevo valor. Esta vinculación permite actualizar la identidad visual de la página de forma más rápida y consistente. --- ¡Listo! Ahora ya sabes cómo configurar el Guia de Estilos y utilizar sus colores, fuentes, bordes, sombras y espaciados en los elementos de la página. ¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. 😊