Uma página pode seguir cada token, cada degrau e cada regra de componente e ainda assim ler como template: oito seções com o mesmo cabeçalho, dezenas de cards iguais, caixa alta em todo bloco. Nenhuma regra de componente pega isso, porque o problema é a soma. Esta seção fixa como as faixas se encadeiam, o que a fotografia faz, o que o texto faz e como medir o resultado antes de ir ao ar. A home (asa-home-v2/index.html) é o exemplo vivo de tudo o que está aqui.
A fotografia carrega a emoção, o texto carrega o fato, a cor de marca aparece em poucos blocos grandes. Quando o texto tem de carregar tudo, a página compensa com ícone, caixa alta e card. É o sinal de que falta foto.
O olho aprende um padrão na segunda repetição e desliga na terceira. Cabeçalho, grade e fundo nunca se repetem em duas seções seguidas. É a sexta ferramenta de 07 Hierarquia.
Caixa alta, ícones, cards com borda, cabeçalhos repetidos, fundos em sequência e travessões se contam. O checklist no fim desta página é o critério de entrega de qualquer página nova, e scripts/auditar.py faz a conta.
Os portais de viagem e as companhias aéreas que servem de referência à Asa têm sete traços em comum. Nenhum deles é um componente: são decisões de página. A Asa adota os sete, com a sua própria cor, a sua própria fonte e o seu ângulo de 8°.
Caixa alta é assinatura, e assinatura se usa uma vez por página. Uma página com oito títulos em caixa alta não tem H1: tem oito.
A cor de marca aparece em poucos blocos grandes: o amarelo abre e fecha a página, o preto aparece uma vez, no momento da prova. Entre eles, branco e cinza mist alternados.
Sobretítulo, título em caixa alta e três cards com ícone dizem três vezes a mesma coisa. Título em caixa baixa, lide e uma foto larga com três fatos numa régua dizem uma vez, e a pessoa acredita.
Oito cards iguais com legenda embaixo tratam Porto de Galinhas e Jericoacoara como itens de inventário. A grade assimétrica, com o nome sobre a foto, trata cada destino como lugar.
Quatro seções com o mesmo fundo e o mesmo cabeçalho formam um muro: a rolagem não muda nada. Fundo e estrutura alternados fazem cada faixa parecer um lugar novo da mesma página.
Faixas de largura total, uma atrás da outra, com o container de 1200px dentro de cada uma. O ritmo vem da alternância de fundo e de estrutura, nunca de ilhas arredondadas flutuando sobre uma margem. Entre faixas, 120px no desktop e 72 no celular (--asa-section-pad-y). Cada faixa abaixo está construída em 06 Componentes · Faixas de página.
Branco aparece mais de uma vez, mas nunca com a mesma estrutura: foto larga, prateleira, grade assimétrica, lista. O amarelo abre e fecha a página e não aparece no meio; o preto aparece uma vez, no momento da prova. Uma página de destino ou de categoria reutiliza as mesmas faixas em outra ordem e com outro conteúdo, mas nunca duas iguais em sequência.
Cada regra existe para impedir um vício de template. Valem para a home, para a página de destino, para a landing de campanha e para o e-mail longo.
A caixa alta é a assinatura, e assinatura se usa uma vez. O texto fala como quem atende no balcão: frases curtas, fatos, nenhuma exclamação.
Ícone é âncora de leitura numa lista longa; como decoração de três frases ele só adiciona ruído. A spec do carro é uma linha de texto: "5 lugares · 2 malas · manual".
Antes de qualquer página nova ir ao ar, contar. Cada linha tem um limite e um jeito de medir que não depende de gosto. Quem contar acima do limite não precisa discutir: precisa reconstruir a seção. Para calibrar, a home de referência fica em 8 blocos em caixa alta, 11 ícones, 19 cards com borda, 0 sobretítulos, 16 fotos e 0 travessões.
| O que contar | Limite | Como medir | O vício que denuncia |
|---|---|---|---|
| Blocos de texto em caixa alta | H1 + etiquetas de benefício + preços e placas; nada mais | text-transform: uppercase computado nos nós com texto | Registro 1 espalhado; rótulo e legenda gritando |
| Sobretítulos | 0 | Qualquer texto curto imediatamente acima de um h2/h3 | Rótulo mono acima de todo título |
| Ícones | Só em controle (menu, seta, fechar) e em lista longa | <svg> fora de botão e de lista com mais de cinco itens | Ícone por atributo, trio ícone+título+texto |
| Cards com a mesma borda | Só onde há produto para comparar | Elementos com border: 1.5px fora da vitrine | Card como contêiner de qualquer coisa |
| Cabeçalhos de seção iguais | 0 em sequência | Duas seções seguidas com a mesma estrutura de abertura | Overfitting visual: o olho desliga na segunda |
| Fundos iguais em sequência | 0 | Duas faixas seguidas com o mesmo background | Ritmo plano, "muro" de seções |
| Grades iguais | Nunca a mesma grade duas vezes | 3×2, 4×1, 2×1 repetidos | Mesma topologia, conteúdo diferente |
| Marca d'água | 1 | .asa-watermark por página | Asa repetida vira papel de parede |
| Fotos | Pelo menos uma por faixa que fala de lugar, carro ou gente | Contar img/asa-figure por seção | Texto carregando tudo; ícone no lugar da foto |
| Travessões e fórmulas de texto | 0 | Contar o traço longo e o traço médio no texto visível; ler em voz alta à procura de "não é X, é Y" repetido | Texto gerado, não escrito |
| Fechamento | Curto, em Registro 2, com fundo e frase diferentes do hero | Comparar o H2 do fechamento com o H1 | Fechamento que repete a abertura |
O scanner determinístico (impeccable) pega texto pequeno, contraste e caixa alta em corpo de texto. Não pega oito seções iguais: isso só aparece contando, ou olhando a página de longe com os olhos semicerrados. Se tudo tem o mesmo peso, nada é a ação.
Uma página pode precisar de algo que o sistema ainda não tem. O caminho é desviar com motivo, medir o resultado e trazer a decisão para a regra, em 06 ou nesta página. Desvio em silêncio vira exceção que ninguém documenta e todo mundo copia.
Protótipo pode usar comp de visualização de banco de imagem, com marca d'água e marcado como tal, para avaliar a composição. Produção exige foto real da Asa ou licença. A legenda do placeholder já é o briefing da produção fotográfica.
A ordem é de dependência: decidir a estrutura antes de escrever, escrever antes de buscar foto, medir antes de entregar.
scripts/auditar.py, mais o scanner, em 375 e 1440px