frangkli/design-rules

Regras de design

Aplique estas regras sempre que o briefing, o DESIGN.md do projeto e a skill de design em uso (geralmente impeccable) deixarem a escolha em aberto. Onde qualquer um desses falar, ele vence. Leia-as antes da primeira edição de UI e antes de escrever uma crítica ou auditoria.

Cópia

• O rótulo de um controle nomeia seu resultado, e a mesma palavra se mantém ao longo do fluxo: um botão "Publicar" produz uma confirmação "Publicado".
• O texto de erro informa o que falhou e como corrigir, na voz do produto, sem pedir desculpas.
• Um rótulo por intenção em navegação, herói e rodapé (escolha "Fale com vendas" ou "Converse conosco", não ambos). Um rótulo de botão primário cabe em uma linha com três palavras ou menos.
• Títulos e botões seguem o caso que o projeto já usa; um novo projeto usa letra inicial maiúscula para palavras principais (sentence case).
• Um registro por página: hype e texto de produto conciso não compartilham a mesma tela.
• Aspas e apóstrofos curvos, uma reticência real (…), sem travessão (use ponto, vírgula ou dois pontos), no máximo um ponto médio por linha.
• Depoimentos têm três linhas ou menos e trazem o nome e cargo da pessoa.
• Antes de finalizar, leia cada string visível na página renderizada uma vez, incluindo texto alternativo, estados vazios e o rodapé, e corte happy talk: frases que apenas dizem o quão bom algo é.

Elementos a evitar quando o eixo é livre

• Paleta: um fundo creme quente próximo a #F4F1EA com um acento terracota próximo a #D97757 (as cores da própria interface do Claude); o conjunto premium-consumidor #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714; preto quase matizado (#0B0B0B, #111) substituindo o preto.
• Tipo: uma palavra de um título destacada por itálico, peso ou cor; rótulos em caixa alta com espaçamento; "→" anexado a texto de links e botões; rótulos construídos como "PALAVRA — fragmento".
• Chrome: tags de versão no herói (V0.6, BETA) ou um rodapé de versão; indicações de rolagem; tiras de localidade, relógio ou clima; pontos ou pílulas de status decorativos sobre imagens; créditos de foto decorativos; tiras de slogan como "MARCA. MOVIMENTO. ESPACIAL."; "Silenciosamente confiável por".
• Dados: listas com mais de cinco itens desenhadas como linhas com bordas acima e abaixo; barras de progresso preenchidas usadas para comparar valores.

Páginas de persuasão

• Herói: título com duas linhas ou menos na largura do desktop, texto de apoio com 20 palavras ou menos, a ação principal visível sem rolagem, quatro elementos de texto ou menos, padding superior de 6rem ou menos, e nada abaixo dos botões de ação (sem tagline, faixa de confiança ou teaser de preço).
• Defina o título em um contêiner largo com tamanho fluido (aproximadamente clamp(3rem, 5vw, 5.5rem)) para que ele tenha duas a três linhas em todas as larguras.
• A navegação fica em uma linha, com 64–72px de altura, nunca ultrapassando 80px.
• No máximo um marquee por página e no máximo duas divisões alternadas de imagem/texto seguidas.
• Uma grade bento de N itens tem exatamente N células e nenhuma vazia; com empacotamento denso, verifique se os spans se encaixam em cada ponto de quebra.
• Nomeie a única coisa que um visitante deve lembrar após o primeiro olhar, e faça com que as escolhas posteriores a sirvam.

Componentes e detalhes

• Cantos arredondados aninhados: raio interno = raio externo − o espaço entre eles.
• Em uma fileira de cards, prenda a ação de cada card à sua borda inferior para que os botões fiquem alinhados; listas de recursos de preço começam na mesma altura em cada coluna.
• Tipo de exibição itálico com descendentes recebe line-height 1.1 ou mais, mais um pouco de padding inferior, para que nada seja cortado.
• Parágrafos de corpo usam text-wrap: pretty para que nenhum parágrafo termine com uma palavra solitária.
• Links visitados têm aparência diferente onde as pessoas retornam ao conteúdo (docs, listas de artigos). Nenhum espaço reservado href="#" é enviado.
• Uma barra lateral colapsável tem 56–72px de largura, mantém seus rótulos no DOM, tem alvos de 44×44px, define aria-expanded no alternador e inert no conteúdo oculto.
• Seções de altura total usam dvh ou svh, nunca 100vh.
• Sem rolagem horizontal em nenhuma largura. Corte o overflow de elementos animados ou deslocados com overflow-x: clip; hidden quebra o posicionamento sticky.
• Efeitos vinculados à rolagem são executados em animações CSS baseadas em rolagem ou em um IntersectionObserver, não no estado do framework gravado por evento de rolagem ou por quadro.
• A meta viewport permite zoom (sem user-scalable=no, sem maximum-scale=1). Transições nomeiam suas propriedades em vez de transition: all.
• Um site público envia um link de pular para o conteúdo, um 404 personalizado, um favicon, título, meta description e tags Open Graph, e links legais no rodapé.
• Mantenha a especificidade CSS baixa e verifique se as regras de seção (.section) e as regras de componente (.cta) não cancelam o padding ou margin uma da outra.

Modo escuro

• color-scheme: dark na raiz, para que controles de formulário e barras de rolagem sigam o tema.
• O texto do corpo é off-white (cerca de #E0E0E0, matizado da paleta), não branco puro.
• Acentos perdem 10–20% de saturação em relação aos seus valores do tema claro.

Crítica e auditoria

Relate estes como descobertas dentro da própria estrutura de crítica ou auditoria da skill de design; eles não adicionam novas seções de relatório.

• Teste do tronco, por página: um visitante de primeira viagem poderia dizer que site é este, em qual página está, quais são as principais seções, quais são suas opções aqui, onde ele está na estrutura e como pesquisar? Três ou menos respostas claras é uma descoberta de alta gravidade.
• Goodwill: comece em 70. Subtraia 15 por preços ou detalhes de contato ocultos ou um tour forçado; 10 por formatos de entrada punitivos (rejeitar espaços em um número de cartão) ou solicitar informações que a tarefa não precisa; 5 por escolha ambígua. Relate a pontuação com cada dedução.
• Primeiro olhar: nomeie as três primeiras coisas em que o olho pousa e se são as três que importam.
• Happy talk: relate a contagem de palavras da página e a parcela que é happy talk.

Redesigns

Antes de substituir a aparência de um site ativo, registre uma linha de base de SEO (títulos, meta descriptions, headings, URLs indexados). Mantenha os slugs de URL, rótulos de navegação, nomes e ordem de campos de formulário, o logotipo, texto legal e de consentimento, e IDs de análise, a menos que o usuário aprove uma alteração.

Variantes, composições e fontes

• Duas variantes são muito próximas se seus títulos puderem ser trocados sem que ninguém perceba; leve uma delas mais adiante.
• Para ler detalhes em uma composição gerada, regenere essa seção maior em vez de recortar o quadro.
• A rodada de capturas de tela em lote cobre larguras de 375, 768 e 1440px.
• Corrija uma página construída com edições direcionadas às partes que falham; regenere arquivos inteiros apenas para uma reconstrução.
• Confirme cada fonte em sua listagem oficial (Google Fonts, Fontshare ou a fundição) e obtenha sua URL de lá; marque uma face não confirmada como pendente em vez de adivinhar um nome ou URL.