Configurações de design para estilos globais e identidade visual

A aba Design é onde você define a aparência e o estilo de todo o seu fluxo. Das cores à tipografia e aos estilos dos componentes, tudo pode ser personalizado para combinar com a sua marca. Em vez de estilizar cada elemento individualmente, o LanderLab usa um sistema de design global, para que suas alterações sejam aplicadas automaticamente a todo o fluxo.

​

Como acessar as configurações de design

Você pode abrir o Design de duas formas:

• Clique no ícone de paleta de cores no painel esquerdo → para estilos globais
• Clique nos três pontos (•••) de qualquer bloco e selecione Design → para acesso direto

Por padrão, todas as alterações de design são aplicadas globalmente.

---

​

Como o design funciona

As configurações de design são compartilhadas em todo o fluxo por meio de um sistema de herança:

• Alterar os estilos atualiza automaticamente todos os blocos semelhantes
• Garante consistência em todo o fluxo
• Economiza tempo, evitando edições repetitivas

Ainda assim, você pode substituir os estilos em blocos individuais, se necessário.

---

​

Cores

O painel Colors define a identidade visual do seu fluxo.

​

Cores principais (Main Colors)

• Primary Color → Usada em botões, seleções e ações principais
• Secondary Color → Usada em detalhes e destaques

​

Cores neutras (Neutral Colors)

• Tons de preto, branco e cinza
• Usadas em textos, fundos e estrutura

​

Cor de erro (Error Color)

• Aplicada automaticamente a erros de validação e entradas inválidas

💡 Dica: Defina primeiro as cores primária e secundária para criar uma base consistente para a sua marca.

---

​

Fontes

Seu fluxo herda automaticamente as fontes da landing page em que ele está inserido.

• Não é preciso configurar fontes dentro do fluxo
• Mantém tudo visualmente consistente

💡 Dica: Defina suas fontes no nível da landing page para que todos os fluxos sigam o estilo da sua marca.

---

​

Presets

Presets são estilos prontos que você pode aplicar instantaneamente aos blocos. Em vez de criar estilos do zero, você pode:

• Aplicar um preset
• Ajustá-lo, se necessário

​

Exemplo

Aplicar um preset a um bloco Multiple Choice define automaticamente:

• Cores
• Espaçamento
• Estilos de botão

Por causa da herança global:

• Atualizar o estilo de um bloco atualiza todos os blocos semelhantes

---

​

Por que usar presets

• Configuração mais rápida
• Design consistente
• Não é preciso ter experiência com design

💡 Dica: Comece com os presets padrão e ajuste depois, se necessário. Isso mantém seu fluxo limpo e profissional desde o início.

---

​

Boas práticas

• Defina as cores antes de montar seu fluxo
• Mantenha os estilos consistentes em todas as etapas
• Evite personalizar demais cada bloco
• Use presets para economizar tempo