Hafen 1.0: um tema, 38 looks, zero arquivos de fonte

Um release de tema com o número 1.0 é uma promessa: isto aqui foi pensado até o fim. O Hafen roda desde a versão 0.4 em sites de produção, de uma associação a uma plataforma de coaching, e cada uma dessas instalações deixou marcas no tema. A 1.0 reúne tudo isso em um estado que defendemos sem notas de rodapé. A maior novidade é o sistema de looks.

De cinco variações de cor a 38 looks

Variações de estilo existem em quase todo tema de blocos, e em quase todos os casos isso significa: a mesma página em outras cores. Para nós, isso era pouco, porque o caráter de um site depende tanto da fonte, da forma e do espaço quanto da paleta. Por isso, os 38 looks do Hafen 1.0 trabalham quatro eixos de design: cor, tipografia (pareamento de fontes e escala de tamanhos), forma (raios de canto do anguloso ao formato de pílula) e densidade (espaçamentos, altura de linha, largura de texto).

O resultado são oito personalidades com quatro variações cada, mais um ponto fora da curva para a praia: sóbrio e funcional para prestadores de serviço, caloroso e narrativo para sites pessoais, alto e chamativo para campanhas, calmo e sério para escritórios de advocacia e consultorias, acessível ao máximo, técnico, lúdico, editorial. A troca é um clique no editor do site, o conteúdo permanece intocado, e como os raios e as sombras estão desde a 1.0 como tokens no theme.json, cartões, botões, imagens e até a paginação do blog acompanham cada look de forma consistente.

Zero arquivos de fonte, e em todos os looks

Aqui está talvez a decisão mais incomum da 1.0: todas as 38 variações usam pilhas de fontes do sistema. Segoe UI no Windows, San Francisco nos aparelhos Apple, Roboto no Android, cuidadosamente pareadas e ponderadas, mas sem um único download de fonte. Só o look padrão carrega a Inter incluída, como um único arquivo variável servido do próprio servidor, sem conexão com o Google Fonts ou qualquer servidor de terceiros.

O ganho é duplo: não há nada para carregar e nada salta durante o carregamento, e em termos de proteção de dados simplesmente não existe um fornecedor terceiro de fontes sobre o qual você precisaria pensar.

A verificação de contraste como freio de build

Verificar 38 looks à mão quanto à legibilidade é ilusório, então quem verifica é uma máquina. Uma ferramenta aplica cada variação sobre o theme.json, resolve todos os valores de cor e mede cerca de 30 pares de primeiro plano e fundo que realmente aparecem no tema contra o WCAG 2.1 AA. Se um par obrigatório reprova, o build do release é interrompido. Logo na primeira execução, a ferramenta encontrou seis erros de contraste no acervo que já estava aprovado na época, corrigidos com a 1.0. É exatamente para isso que se constroem guardiões assim.

Uma coluna de leitura a serviço do texto

A mudança mais visível para sites existentes: o texto corrido agora roda em uma coluna de 680 pixels com fonte base de 18 pixels, o que dá cerca de 68 caracteres por linha em vez dos aproximadamente 90 de antes. A regra prática da tipografia para linhas bem legíveis está há décadas entre 45 e 75 caracteres, e praticamente toda plataforma de leitura chega aí. Listas de posts, destaques e blocos largos continuam intocados em 1180 pixels, e o texto ganha ainda um ritmo vertical de verdade: os títulos se ligam ao parágrafo seguinte em vez de flutuar soltos em espaçamento uniforme.

E como largura de leitura também é questão de gosto, ela continua sendo uma configuração: no editor do site em Estilos, Layout, documentada em quatro níveis recomendados de 620 a 860 pixels. O padrão é uma recomendação, não um dogma.

O endurecimento vindo da migração real

Na 1.0 também entrou tudo o que a migração de um site de produção crescido, de um tema clássico para o Hafen, trouxe à tona: um template de página para conteúdos antigos de largura fixa, um airbag de embeds contra saltos de layout no celular causados por incorporações antigas de vídeo, saltos de âncora que não somem mais sob o cabeçalho fixo e um menu mobile que carrega as cores do tema também nos looks escuros. A série completa de medições, com todos os números e limites, está no nosso caso real de troca de tema.

O que vem a seguir

A 1.1 já está esboçada: receitas completas de página como patterns (página inicial, sobre nós, contato, preços para montar), uma variante de cabeçalho centralizado e a ampliação da acessibilidade rumo à verificação oficial accessibility-ready. Se você tem pedidos, é bem-vindo no fórum de suporte do tema.

Perguntas frequentes