Éclair 1.8: 12 direções de arte para um site único
Por Thierry Gustin
Publicado em
6 min de leitura
Índice
O Éclair 1.8 está disponível desde 1º de novembro de 2026. Até agora, um tema mudava as cores; uma direção de arte muda todo o universo do seu site. Você escolhe uma entre 12, ajusta-a ou pede para a IA imaginar a sua. E uma nova pontuação de design ajuda você a manter páginas bem-acabadas.
O que muda com o Éclair 1.8?
| Novidade | O que ela traz para você |
|---|---|
| 12 direções de arte | Um universo completo: paleta, fonte dos títulos, banner, diferenciais e ícones |
| Ajustar a direção | 5 cores, 18 fontes de títulos, caixa, cantos, espaçamento, cartões e banner |
| Imagine minha direção com a IA | Três direções realmente diferentes, tiradas da sua atividade, por cerca de US$ 0,03 |
| Pontuação de design | Uma terceira pontuação no editor, ao lado do SEO e do GEO |
| Nos bastidores | Contrastes garantidos, fonte servida pelo seu site, arquivo de 479 KB, 550 verificações |
O que é uma direção de arte?
Um tema muda as cores; uma direção de arte muda todo o universo: paleta, fonte dos títulos, tamanho dos títulos, cantos, espaçamento, composição do banner, layout dos diferenciais, faixas de cor e ícones. Cada uma parte de uma ideia concreta, não de um adjetivo:
| Direção | Universo | Fonte dos títulos |
|---|---|---|
| Noturno | A cidade à noite: azul profundo, luz âmbar | Big Shoulders Display, em maiúsculas |
| Galeria | Paredes brancas, legendas pretas, um vermelho de sinalização | Familjen Grotesk |
| Argila | O ateliê de cerâmica: areia, terracota, formas suaves | Young Serif |
| Botânica | O herbário e a estufa: verde profundo, papel sálvia | DM Serif Display |
| Cartaz | O cartaz suíço: preto sobre branco gelo, laranja vivo | Archivo Black, em maiúsculas |
| Riviera | A beira-mar: azul-marinho, céu pálido, coral | Gloock |
| Escritório | O papel timbrado: tinta azul-marinho, bordô, fios finos | Libre Caslon Display |
| Neon | A tela de criação à noite: quase preto, verde-limão | Unbounded |
| Delicadeza | O consultório de cuidados: rosa empoado, ameixa, muito espaço | Cormorant Garamond |
| Obra | Concreto, amarelo de segurança, sinalização condensada | Barlow Condensed, em maiúsculas |
| Recreio | O pátio da escola: azul-celeste, vermelho-tomate, letras redondas | Fredoka |
| Imprensa | O jornal da manhã: papel-jornal, vermelho de capa | Newsreader |
Como escolher e ajustar a sua direção?
- Em Configurações › Aparência, escolha Direção de arte em vez de Tema clássico.
- Clique em um dos 12 cartões e veja a pré-visualização ao vivo: o seu site de verdade, no computador ou no celular.
- Abra Ajustar a direção para personalizá-la e depois salve: nada é publicado antes disso.
O painel Ajustar configura tudo, para combinar à vontade:
- 5 cores: fundo, faixas e cartões, texto, texto secundário, destaque dos botões e dos links.
- Fonte dos títulos: 18 fontes escolhidas pela personalidade, ou uma fonte do sistema. O texto continua em uma fonte do sistema, sem download.
- Caixa dos títulos, tamanho dos títulos, cantos (retos, suavizados, arredondados) e espaçamento (compacto, normal, arejado).
- Cartões com borda fina, em cor sólida ou com sombra projetada, e banner de abertura lado a lado, em cartaz, com imagem em tela cheia, editorial ou centralizado.
- Diferenciais em cartões, linhas ou colunas, seções com fundo liso ou em faixas de cor, e ícones desenhados no lugar dos emojis.
Você volta ao tema clássico quando quiser: as configurações dele esperam por você, intactas.
Como a IA imagina a sua direção?
Quando o assistente de IA está ativado, Imagine minha direção com a IA aparece abaixo dos cartões. Descreva a sua atividade, o seu público e o clima que você quer em uma ou duas frases, por exemplo “padaria orgânica de bairro em Curitiba, clientela familiar, acolhedora mas moderna”, e clique em Propor 3 direções.
A IA também lê a apresentação do seu site e o seu perfil editorial. Ela parte do mundo concreto da sua atividade (lugares, materiais, objetos, luz), dá a cada proposta uma referência precisa e propõe três direções realmente diferentes, evitando a escolha padrão do seu segmento e os tiques do design gerado por IA. Esse método foi adaptado do Impeccable, de Paul Bakaus.
As três propostas entram no início dos cartões, marcadas com ✦: você as experimenta na pré-visualização, ajusta e salva a que preferir. A IA só escolhe entre os ajustes do Éclair e nunca escreve CSS: cada proposta é verificada e tem os contrastes corrigidos. O custo estimado é de cerca de US$ 0,03 pelas três propostas com o Claude Sonnet 5.5, descontado do orçamento do assistente.
O que é a pontuação de design?
No editor, a aba Análise agora mostra um terceiro anel, Design, ao lado do SEO e do GEO. Ele verifica se a sua página se sustenta visualmente:
- subtítulos hierarquizados e curtos, sem emoji decorativo;
- um banner com título curto e um botão de ação;
- chamadas para ação na medida, no máximo três botões;
- um bloco Diferenciais com 3 a 6 itens descritos;
- um texto sem frases em maiúsculas, sem superlativos vazios, sem trechos repetidos nem blocos de mais de 350 palavras sem pausa.
A nota da aba Análise é a média dos três anéis: uma boa página é encontrada, citada e agradável de ler.
O seu site continua rápido e legível?
Sim, e isso vem garantido de fábrica:
- Contrastes WCAG garantidos: sejam quais forem as cores, escolhidas por você ou pela IA, o Éclair ajusta o texto a 7:1 sobre o fundo, e o texto secundário, os links e os botões a 4,5:1. Isso foi verificado em 20.000 paletas sorteadas.
- Nenhum serviço de terceiros: a fonte dos títulos (de 12 a 27 KB) é baixada uma única vez pelo seu servidor e depois servida pelo seu site e pré-carregada. Os seus visitantes não se conectam ao Google Fonts nem a mais ninguém.
- Sempre 100/100: o Lighthouse dá 100 nas quatro categorias, inclusive com as direções Noturno, Riviera, Imprensa e Cartaz.
- Nada quebra: o HTML não muda, então o SEO, os dados estruturados e a acessibilidade também não. Os 6 temas clássicos continuam idênticos até o último byte.
Como atualizar para o Éclair 1.8?
O procedimento não muda e não mexe nos seus conteúdos:
- Em Segurança › Backup, clique em Baixar backup.
- Por FTP, apague as pastas
app/eassets/e depois envie as da nova versão, junto comindex.phpe.htaccess. - Não mexa em
data/(conteúdos, configurações, contas, CSS personalizado) nem emmedia/(imagens). - Na administração, clique em Configurações › Avançado › Limpar cache.
Só um ponto para conferir: o Éclair 1.8 exige a extensão PHP zlib, ativa por padrão em quase todo lugar. E, se a sua hospedagem bloqueia as conexões de saída, a fonte de uma direção não pode ser baixada: o Éclair avisa você e usa uma fonte de reserva da mesma família. O guia Atualizar, fazer backup, mudar de hospedagem detalha cada etapa, e o arquivo de 479 KB espera por você na página Baixar.
E depois?
Como nas versões anteriores, o seu feedback vai orientar o que vem a seguir. Uma ideia, um bug, uma dúvida? Escreva para mim pela página de contato ou abra uma issue no GitHub.
Perguntas frequentes sobre o Éclair 1.8
As direções de arte deixam o meu site mais lento?
Não. Só as regras úteis para a sua direção são inseridas na página, e a fonte dos títulos é servida pelo seu site e pré-carregada. O Lighthouse continua em 100 nas quatro categorias.
O meu tema atual vai desaparecer?
Não. Os 6 temas clássicos continuam lá, idênticos até o último byte. Você passa de uma direção para o tema clássico quando quiser, e cada um mantém as suas configurações.
Preciso do assistente de IA para usar as direções?
Não. As 12 direções e o painel Ajustar funcionam sem IA. Só o “Imagine minha direção com a IA” precisa do assistente, com a sua chave do Claude ou do ChatGPT.
Os meus visitantes se conectam ao Google Fonts?
Não. O seu servidor baixa a fonte uma única vez do Fontsource (licença SIL Open Font License) e depois a serve ele mesmo: nenhuma requisição a um serviço de terceiros.
Posso ir direto da 1.6 para a 1.8?
Pode: o procedimento é o mesmo, qualquer que seja a sua versão, e a 1.8 traz as novidades das versões anteriores. Basta fazer um backup antes.
Ler o guia dos temas e das direções
Leia também
Éclair 1.7: o modo Visual e páginas criadas pela IA
O Éclair 1.7 traz o modo Visual, para editar a sua página do jeito que ela aparece, e a criação de páginas completas pela IA. Novidades, custos e atualização.
Éclair 1.5: temas, loja leve e conector MCP
O Éclair 1.5 traz 6 temas com pré-visualização ao vivo, uma loja leve paga pela Stripe e um conector MCP para Claude e ChatGPT. Novidades e atualização.
Migrar do WordPress para o Éclair: o método passo a passo
Migrar do WordPress para o Éclair sem perder o seu posicionamento: inventário de URLs, recriação das páginas, redirecionamentos 301 e virada, passo a passo.