Landing page caprichada, passo 1: forma e identidade

Signature — pipeline de forma e identidade para OpenCode

Derivado dos Top 50 Websites para Inspiração de Design (50 sites abertos ao vivo no navegador, verificados em 22 de outubro de 2026) mais o núcleo do processo de Hallmark da Nutlope. Cada forma e identidade nomeia evidências reais do corpus — a biblioteca são observações, não folclore de gosto.

Divisão de trabalho (não confundir)

• frontend-design é responsável pelo ofício: direção de arte, julgamento tipográfico, julgamento de cor, filosofia de movimento, redação, o ciclo de autocrítica. Quando estiver carregado, siga-o — não reafirme suas regras aqui.
• Signature é responsável pelo processo e pela biblioteca: qual forma de página esta construção tem, qual identidade ela usa, o registro de não repetição e uma lista mecânica de portões (grep-and-compute).

Verbos

Build (padrão)

1. Divida o briefing em: domínio, público e palavras de energia ("cinemático", "denso", "pessoal", "grandioso").
2. Escolha uma forma de references/structures.md. Diga em uma linha: Shape: <nome> (runner-up: <nome>). Se o briefing for vago, ofereça o trio do domínio — nunca use o padrão silenciosamente.
3. Verifique contra o corpus: abra 1–2 URLs de evidência das linhas de forma/identidade com o MCP do Playwright (ferramentas de navegação + screenshot) ou webfetch. Um link morto promove a próxima linha. Âncoras de paleta são sementes até que você tenha olhado a página ao vivo.
4. Escolha uma identidade de references/identities.md que compartilhe o mood da forma, então corrija suas sementes de token com base no que você realmente viu.
5. Escreva os tokens primeiro: um bloco semântico :root + o carimbo (abaixo), antes de qualquer CSS de componente.
6. Construa. Um elemento memorável carrega a página; todo o resto fica quieto (regra de contenção do frontend-design — aplique, não rederive).
7. Execute todos os Portões e corrija cada falha. Em seguida, a passagem de gosto — via frontend-design, se estiver carregado, caso contrário, contra sua lista de calibração de traços de IA.

audit <target>

Leia o código/site e execute apenas os Portões. Cada falha é um bullet: file:line — gate no. — one-line fix. Apenas achados mecânicos; quando for um problema de gosto, nomeie o princípio relevante do frontend-design em uma linha em vez de inventar uma nova regra. Se existirem carimbos, informe se a forma repete uma construção anterior.

redesign <target>

Mantenha a arquitetura da informação, o texto e os ativos da marca. Faça grep nos carimbos: a nova forma deve diferir da última forma carimbada. A identidade pode girar; mudar a voz da marca ou a paleta requer perguntar primeiro.

study <url | screenshot>

Abra a fonte. Extraia: ordem das seções → forma mais próxima; âncoras da paleta (amostre as cores reais); papéis tipográficos e quaisquer fontes observadas → identidade mais próxima. Emita uma linha: study: source=<url> shape≈<Shape> identity≈<Identity> anchors=<hexes>. Se nada na biblioteca se encaixar, anexe uma nova linha de identidade (formato no final de identities.md) — mas nunca substitua silenciosamente o resultado do estudo por uma escolha da biblioteca: se o usuário quiser o DNA estudado literalmente, o carimbo se torna identity=studied:<source> e os valores do estudo se tornam os tokens.

O registro é código

• Carimbo no topo da folha de estilo principal (e espelhe no <head> do index.html para builds só em HTML): /* signature: shape=<Shape> identity=<Identity> refs=<urls actually opened> */
• Antes de escolher, faça grep no projeto por carimbos existentes. Nenhuma construção consecutiva compartilha uma forma; prefira não reutilizar a identidade também.
• Sem arquivo de registro separado. O CSS é o registro.

Contrato

• Tokens de design vivem em um lugar (propriedades customizadas :root ou tokens.css/@theme do Tailwind do projeto). Nomes são papéis semânticos (--color-ink), não valores.
• Reutilize os próprios nomes de token do projeto em vez de sobrescrevê-los; estenda o tema do Tailwind, nunca coloque valores arbitrários inline.
• Uma folha de estilo global existente é apenas para acréscimo: mantenha toda diretiva @tailwind/@import "tailwindcss" exatamente no lugar, adicione tokens abaixo das regras existentes e coloque qualquer novo @import no topo. Nunca remova silenciosamente diretivas do framework — isso desestiliza todo o app. Reescrevas completas apenas mediante solicitação explícita.
• Siga as convenções de arquivo do framework. Não reinvente padrões de roteamento/layout que o projeto já possui.
• Escopo: este é um processo de gosto. Nenhum texto inventado (se o usuário não deu palavras, pergunte); nenhuma lógica de negócio; nenhuma escolha de identidade de marca do nada — siga uma que lhe foi dada.

Portões (mecânicos — cada resposta deve ser "não"; cada falha = uma correção antes da entrega)

Disciplina de token

1. Falha se qualquer #hex, oklch(), rgb() ou font-family aparecer em um componente que não resolva para um token nomeado. Eleve-o ou substitua-o.
2. Falha se qualquer padding/gap/margin estiver fora da escala de espaçamento do projeto (múltiplos de 4px na ausência de um token nomeado). 17px arbitrário é um sinal.
3. Falha se o comentário do carimbo estiver faltando, ou nomear URLs que nunca foram realmente abertas.

Sobrevivência de layout 4. Falha se a página rolar horizontalmente em qualquer largura de viewport de 320–1920px. overflow-x: clip em ambos html e body (não hidden — clip preserva sticky/fixed). 5. Falha se qualquer trilha 1fr de grid/row contendo uma imagem não for minmax(0, 1fr). 6. Falha se texto do tamanho de exibição não tiver overflow-wrap: anywhere (e min-width: 0 em seu contêiner) — palavras compostas longas transbordam em telefones. 7. Falha se texto clicável (rótulos de botão, nav, tab, CTA) puder quebrar em 2 linhas em 320/375/768/1280px.

Fatos de código 8. Falha em transition: all — nomeie as propriedades. 9. Falha se um elemento carregar mais de um efeito hover (combinações de translate + scale + shadow + color). 10. Falha se inputs mudarem border-width entre estados; mudanças de estado vão para color/outline/shadow. Anéis de foco são outline, não border. Desabilitado precisa de ≥2 de: opacity, cursor: not-allowed, disabled/aria-disabled. 11. Falha se qualquer <svg>/<canvas>/elemento decorativo não tiver aria-hidden="true" nem um nome acessível.

Movimento e performance 12. Falha se qualquer animação/keyframe não tiver um fallback de prefers-reduced-motion: reduce. 13. Falha em conteúdo rotativo automático sem pausa ao passar o mouse e foco (WCAG 2.2.2). 14. Falha se o ativo hero do LCP for loading="lazy", ou um vídeo hero não tiver poster/fetchpriority="high".

Contraste e honestidade 15. Falha se qualquer par cor/fundo não atingir WCAG 4.5:1 (corpo) ou 3:1 (texto grande, ícones, anéis de foco). Dois pontos quentes: texto herdando uma cor enquanto um pai mudou de superfície; preenchimento de botão dentro de 5% de luminosidade de seu texto. 16. Falha em fatos fabricados — métricas, porcentagens, citações, nomes, preços que o usuário nunca forneceu, preenchendo slots de estatísticas. Slots de placeholder dizem "confirme", nunca invente. 17. Falha em emoji usado como ícones de recurso/passo/preço; uma biblioteca de ícones por página, no máximo. 18. Falha em chrome redesenhado: barras de navegador falsas, entalhes de telefone falsos, molduras de janela de terminal/IDE falsas. Use uma screenshot real ou nada.

Disciplina da biblioteca 19. Falha se uma fonte carregada não for uma webfont gratuita/licenciada conhecida. Fontes de foundry no corpus (Commercial Type, Klim, Grilli Type, type.today, testes do Pangram Pangram) são referências de exibição — verifique a licença, pergunte antes de pagar. Google Fonts e fontes variáveis abertas passam. 20. Falha se a forma desta construção corresponder ao carimbo mais recente do projeto (faça grep primeiro, conforme a regra do registro).

Referências — leia sob demanda, nunca de uma vez

• references/structures.md — dez formas de página com esqueletos, evidências e a tabela de trio de domínio. Leia ao escolher forma (build/redesign/audit).
• references/identities.md — vinte identidades: sementes de paleta, pares de fontes, evidências do corpus. Leia ao escolher identidade (build/redesign/study).

Exemplo prático (da própria orientação do corpus)

Briefing: "Meet India Journeys — site de operadora turística para uma viagem fluvial e patrimonial em Kerala." Palavra de domínio "travel" → trio é Scroll Story · Case Catalog · Luxury Ledger. Escolha Scroll Story (runner-up: Case Catalog) porque o assunto são lugares mostrados um de cada vez. Abra apple.com e simplychocolate.dk ao vivo para estudar o ritmo dos capítulos, mídia hero e tratamento full-bleed. Identidade: Forest Confection (verde escuro + cacau, exibição condensada) se encaixa em rio e patrimônio; amostre a referência ao vivo antes de corrigir os tokens. Carimbo: /* signature: shape=Scroll Story identity=Forest Confection refs=apple.com,simplychocolate.dk */