Resumo

Este gerador de temas WordPress com IA monta um theme.json a partir de uma única cor da marca. Ele calcula a paleta, verifica o contraste WCAG para texto, links e botões, e define uma escala tipográfica modular. As regras são fixas, então o resultado é previsível e testável. Copie o arquivo para um tema de blocos e refine no Editor do site.

Gere uma paleta theme.json e uma escala tipográfica em segundos

Um gerador de temas WordPress IA costuma prometer um site inteiro. Este faz a parte que você consegue verificar: uma paleta com contraste checado, uma escala tipográfica modular e um theme.json pronto para o seu tema de blocos.

Defina o fólio

Gerador de tema inicial para tema de blocos

Escolha uma cor da marca, uma base e uma combinação de fontes. A paleta, o relatório de contraste e o theme.json são atualizados conforme você altera cada campo.

Paleta

Base
Superfície
Contraste
Primária
Destaque

Verificação de contraste (WCAG 2.x)

Texto corrido sobre a base
Link sobre a base
Texto do botão sobre a primária
Destaque sobre a base

Pré-visualização

Um título na sua escala

O texto corrido fica sobre a cor base. Um link na cor do link acompanha o texto.

theme.json

Como funciona

O que o gerador realmente calcula

Uma paleta a partir de uma cor

A cor da sua marca vira a Primária. A ferramenta lê o matiz dela e monta Base, Superfície e Contraste a partir dele, em HSL, com luminosidade de 97, 93 e 11 por cento em base clara, ou 9, 14 e 92 em base escura. O Destaque fica a 150 graus dela na roda de cores.

Contraste que você pode conferir

Quatro pares são medidos com a fórmula de luminância do WCAG 2.x: texto corrido, link, texto do botão e destaque. Cada um recebe uma razão e uma classificação. Se o link reprovar no AA, a luminosidade dele se move um passo por vez até passar.

Uma escala tipográfica modular

O tamanho médio vale 1rem. Grande, extra grande e enorme multiplicam pela sua proporção uma, duas e três vezes, e o pequeno divide por ela. Com a proporção 1.2, você obtém 0.833, 1, 1.2, 1.44 e 1.728 rem.

Marginália

Por que os tokens de design vêm antes dos padrões

Um padrão de cabeçalho, uma grade de cards e um rodapé leem os mesmos slugs de paleta. Quando esses valores falham no contraste, cada padrão herda a falha, e você descobre isso no celular do cliente. Corrigir os tokens primeiro garante que os padrões que você construir, ou gerar com o Pattern Forge, partam de cores que já passam. Teste o resultado num site de cliente real, não num sandbox.

  • Os slugs de paleta são compartilhados por todos os blocos e padrões
  • Os slugs de tamanho de fonte mantêm os títulos consistentes entre os templates
  • Uma edição no theme.json atualiza o site inteiro
Folha de amostras tipográficas e pequenas amostras de cor em papel sobre uma mesa de madeira
Na prática

Do arquivo gerado ao tema no ar

  1. 1

    Escolha os valores

    Comece com a cor da marca, tirada do logo do cliente. Escolha uma base clara, a menos que a marca seja escura por natureza, e depois a combinação de fontes que combina com o tom.

  2. 2

    Leia o relatório de contraste

    Procure qualquer linha marcada como Reprovado ou Só texto grande. Altere a base ou o tom neutro até que o texto corrido, o link e o texto do botão passem no AA.

  3. 3

    Copie o arquivo para o seu tema

    Clique em Copiar theme.json, cole na raiz do seu tema de blocos e depois abra o Editor do site para confirmar que a paleta aparece no seletor de cores.

  4. 4

    Refine à mão

    O resultado é um ponto de partida. Renomeie os slugs para combinar com o seu sistema de design, adicione configurações de espaçamento e layout e faça commit do arquivo junto com o resto do tema.

Limites

O que esta ferramenta não faz

Sem layouts de página

Ela gera tokens, não templates. Cabeçalho, rodapé e estrutura da página continuam vindo do seu tema de blocos ou dos padrões que você cria no Editor do site.

Sem fontes da web

As duas combinações usam pilhas de fontes do sistema para evitar qualquer requisição de fonte. Tipografias da marca precisam de uma fonte variável hospedada por você e de uma entrada fontFace, que você mesmo adiciona.

Sem garantia de gosto

Uma paleta pode passar em todas as checagens de contraste e ainda assim parecer chapada. Trate o resultado como uma base segura e depois ajuste Destaque e neutros a olho numa página real.

Perguntas sobre o gerador

Isto é mesmo um gerador de tema com IA?
Não, e a ferramenta diz isso logo de cara. A paleta, as checagens de contraste e a escala tipográfica vêm de regras fixas: matemática de cores em HSL, a fórmula de contraste do WCAG e uma escala modular. Isso torna o resultado previsível e testável. Se você quiser um modelo de linguagem no processo, o Pattern Forge gera padrões Gutenberg a partir de um prompt; esta ferramenta cobre os tokens de design que ficam por baixo deles.
É gratuito, e guarda minhas cores?
É gratuito e não exige conta. Tudo roda no seu navegador. A única coisa enviada é um contador anônimo que registra que a ferramenta foi usada, sem valores de cor nem texto do formulário.
De onde vem a razão de contraste?
Da fórmula de luminância relativa do WCAG 2.x: cada canal sRGB é linearizado, ponderado por 0.2126, 0.7152 e 0.0722, e a razão é (a mais clara + 0.05) dividida por (a mais escura + 0.05). 4.5 para 1 é o limiar AA para texto corrido, 7 para 1 é AAA, e 3 para 1 é o limiar AA para texto grande.
Por que a cor do Link é diferente da cor da minha marca?
Uma cor de marca costuma reprovar a razão de 4.5 para 1 contra uma base quase branca ou quase preta. O gerador mantém a sua cor da marca como Primária, para botões e preenchimentos, e ajusta a luminosidade dela um passo por vez até que a variante de Link passe no AA sobre a base escolhida.
Para qual versão do WordPress a saída é feita?
O arquivo usa o theme.json versão 3, lançado com o WordPress 6.6 (julho de 2024). Instalações mais antigas podem precisar da versão 2, que tem a mesma estrutura de paleta e tipografia, então você pode trocar o número e manter o resto.
As pilhas de fontes carregam algo da web?
Não. As duas combinações usam pilhas do sistema no estilo Georgia, então não há requisição de fonte nem deslocamento de layout causado por uma fonte web que chega tarde. Se você hospedar uma fonte variável depois, troque os valores de fontFamily e mantenha os slugs.
Funciona para sites da direita para a esquerda?
A saída não tem valores de esquerda ou direita: cores, tamanhos de fonte e famílias são independentes de direção. Verifique separadamente o fallback de fonte para árabe ou hebraico, já que as pilhas do sistema variam em cada plataforma.
Onde o arquivo vai no meu tema?
Salve-o como theme.json na raiz de um tema de blocos e abra o Editor do site. As entradas da paleta aparecem no seletor de cores, os tamanhos no painel de tipografia, e a seção de estilos define os padrões do site inteiro.

Passe os tokens para um padrão, não para uma página em branco

Com o theme.json no lugar, o Pattern Forge cria padrões Gutenberg que usam a sua paleta e a sua escala tipográfica. O Monk é gratuito; o Scribe custa $12/mês.

Ilumine o seu site
Noon