> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajustes de diseño para estilos globales y marca

> Personaliza los ajustes de diseño globales, como los colores, las fuentes y los estilos, para crear embudos coherentes y con aspecto profesional.

La pestaña Design es donde defines el **aspecto de todo tu flujo**. Desde los colores hasta la tipografía y los estilos de los componentes, todo se puede personalizar para que encaje con tu marca.

En lugar de dar estilo a cada elemento por separado, LanderLab usa un **sistema de diseño global**, así que tus cambios se aplican automáticamente a todo el flujo.

## Cómo acceder a los ajustes de diseño

Puedes abrir Design de dos formas:

* Haz clic en el **icono de la paleta de colores** del panel izquierdo → para los estilos globales
* Haz clic en los **tres puntos (•••)** de cualquier bloque y selecciona **Design** → para un acceso directo

Por defecto, todos los cambios de diseño se aplican de forma global.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/images/image-5-1024x571.png?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=c04f4b9ca8b518854114f8aff5254b1f" alt="Image 5 1024x571" width="1024" height="571" data-path="images/image-5-1024x571.png" />
</Frame>

***

## Cómo funciona el diseño

Los ajustes de diseño se comparten en todo tu flujo mediante un sistema de herencia:

* Al cambiar un estilo se actualizan automáticamente todos los bloques similares
* Garantiza la coherencia en todo el flujo
* Ahorra tiempo porque evita ediciones repetitivas

Aun así, puedes cambiar el estilo de bloques concretos cuando lo necesites.

***

## Colores

El panel de colores define la identidad visual de tu flujo.

### Colores principales

* **Primary Color:** se usa en botones, selecciones y acciones clave
* **Secondary Color:** se usa en acentos y elementos destacados

### Colores neutros

* Tonos negros, blancos y grises
* Se usan para el texto, los fondos y la estructura

### Color de error

* Se aplica automáticamente a los errores de validación y a los campos no válidos

💡 Consejo: define primero tus colores primario y secundario para crear una base de marca coherente.

<video src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/videos/change-color.webm?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=48d0ac29a81869b1488a33eb8127f3ea" controls={true} data-path="videos/change-color.webm" />

***

## Fuentes

Tu flujo hereda automáticamente las fuentes de la **landing page** en la que está insertado.

* No hace falta configurar las fuentes dentro del flujo
* Todo queda visualmente coherente

💡 Consejo: define tus fuentes a nivel de landing page para que todos los flujos sigan el estilo de tu marca.

***

## Presets

<video src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/videos/presets.webm?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=1906a157a2f3a2031e57735d3ca3620a" controls={true} data-path="videos/presets.webm" />

Los presets son estilos prediseñados que puedes aplicar a los bloques al instante.

En lugar de crear los estilos desde cero, puedes:

* Aplicar un preset
* Ajustarlo si hace falta

### Ejemplo

Aplicar un preset a un bloque de opción múltiple define automáticamente:

* Los colores
* El espaciado
* Los estilos de los botones

Gracias a la herencia global:

* Al actualizar el estilo de un bloque se actualizan todos los bloques similares

***

## Por qué usar presets

* Configuración más rápida
* Diseño coherente
* No hace falta experiencia en diseño

💡 Consejo: empieza con los presets por defecto y ajústalos más adelante si lo necesitas. Así tu flujo se ve limpio y profesional desde el principio.

***

## Buenas prácticas

* Define los colores antes de construir tu flujo
* Mantén los estilos coherentes en todos los pasos
* No personalices en exceso cada bloque
* Usa los presets para ahorrar tiempo
