Temas e guias de estilo
Como funciona o tema do projeto, como mudá-lo com segurança, e por que cores nunca devem ser editadas tela por tela.
Última atualização:
Cada projeto tem um tema: um conjunto de design tokens para cores, tipografia, raios e espaçamentos. As telas referenciam esses tokens em vez de valores fixos, e é isso que faz vinte telas parecerem um só produto.
Mudar algumas cores
É só pedir:
Deixe a cor principal #1B4DFF. O fundo está frio demais — deixe mais quente.
Isso mescla uma mudança pequena no tema existente e deixa o resto em paz. É gratuito e vale em todo lugar de uma vez.
Construir um visual completamente novo
Para uma mudança de raiz — um redesign, mudar para escuro, uma marca nova — peça exatamente isso:
Dê ao projeto inteiro um tema escuro. Redesenhe isto com nossa marca nova: verde profundo como principal, fundo creme, títulos com serifa.
Isso constrói um conjunto de tokens totalmente novo em vez de remendar o antigo.
Limitar uma mudança
Por padrão, mudanças de tema valem para o projeto inteiro. Para limitar uma a uma única tela, diga:
Só na landing page, deixe o fundo do cabeçalho preto.
O contraste é verificado
Os temas são validados por pares de cores legíveis antes de serem aplicados, então você não deveria acabar com texto escuro sobre fundo escuro. Se quiser de propósito um tratamento de baixo contraste, diga — mas espere que o sistema empurre para a legibilidade.
Gerar um guia de estilo
Peça um guia de estilo e você recebe uma tela renderizada com a paleta, a escala tipográfica e os componentes principais — útil como artefato de entrega e como conferência de que o sistema está coerente.
Erros comuns
- Editar uma cor em uma tela só. Funciona, e aí a próxima tela gerada não combina. Use o tema.
- Pedir “modo escuro” estando no modo edição sobre um elemento. Esse caminho pode fixar cores no código em vez de refazer o tema. Peça no chat, no nível do projeto.
- Achar que uma mensagem de sucesso da ferramenta de tema significa que renderizou. Olhe o canvas. Se as telas não mudaram, veja Meu guia de estilo não foi aplicado.
Perguntas frequentes
- Mudar o tema custa créditos?
- Não. Criar ou atualizar um tema é gratuito. Só as telas em si custam créditos para gerar.
- Uma tela pode ter um tema diferente?
- Sim — peça para limitar a mudança àquela tela. Por padrão, uma mudança de tema vale para o projeto inteiro, que costuma ser o que você quer.
Este artigo foi útil?
Artigos relacionados
Fontes e tipografia
Escolher fontes, usar o Google Fonts e o que fazer quando uma mudança de fonte não aparece.
Editar uma tela
As três formas de mudar um design — chat, modo edição e tema — e quando cada uma é a ferramenta certa.
Meu guia de estilo ou tema não foi aplicado
As telas renderizam sem estilo ou ignoram uma mudança de tema — o que checar e o que nos enviar.