@andespindola/crow-skills 0.40.0 → 0.42.0

package/skills/crow-design/references/adaptacao.md

@@ -0,0 +1,152 @@
+<!-- Derivado de Impeccable (Apache-2.0, Paul Bakaus), design-taste-frontend e high-end-visual-design (MIT, Leonxlnx), design-system (MIT, claudekit) e platform-design-skills (MIT, ehmo); reescrito e modificado pelo Crow em 2026-11-13. Ver ../NOTICE.md. -->
+# Adaptação: dispositivos, entradas, idiomas e plataformas
+
+Leia quando o contrato for dizer o que acontece com cada superfície em outra largura, outro tipo de entrada, outro idioma, impressão, e-mail ou app nativo. Adaptar não é escalar pixels: é repensar a experiência para o novo contexto.
+
+## Antes de adaptar: o que muda de contexto
+
+Para cada superfície, o contrato registra a origem e o alvo:
+
+- **Origem:** para que foi desenhada (desktop web? app de celular? um site sendo portado?) e que suposições fez (tela grande, mouse, rede rápida, um idioma, retrato).
+- **Alvo:** classe de dispositivo (celular, tablet, desktop, dobrável, impressão, e-mail; TV e relógio quando estiverem no escopo), entrada (toque, mouse, teclado, caneta, voz), orientação, rede (rápida, lenta, offline), postura de uso (em pé com uma mão, sentado com as duas, olhada rápida, leitura focada) e expectativa da plataforma.
+- **O que quebra:** o que não cabe (conteúdo, navegação, recursos), o que não funciona (hover em toque, alvo pequeno, atalho sem teclado físico) e o que fica impróprio (padrão de desktop no celular e vice-versa).
+
+Cinco coisas nunca são aceitáveis em nenhuma adaptação: esconder funcionalidade central numa classe de dispositivo (se importa, faça funcionar); mudar a arquitetura de informação entre contextos; supor que desktop é máquina potente; esquecer a paisagem no celular e no tablet; ignorar toque no desktop, porque muitos notebooks têm tela sensível.
+
+## Estratégias por contexto
+
+**Celular.**
+- Layout: uma coluna, empilhamento vertical, componentes em largura total, navegação inferior em vez de superior ou lateral quando o produto é app.
+- Interação: alvos de 44×44 sem depender de hover; sheets inferiores no lugar de dropdowns longos; controles na zona do polegar (a metade de baixo); gestos de deslizar onde a convenção existe (listas, carrosséis), sempre com alternativa visível.
+- Conteúdo: revelação progressiva; o principal primeiro e o secundário em abas ou acordeões; texto mais conciso; corpo com no mínimo 16px e campos de formulário com 16px (abaixo disso o iOS Safari dá zoom no campo focado e quebra o layout).
+- Navegação: drawer ou navegação inferior, menos níveis, cabeçalho fixo que mantém o contexto, voltar dentro do fluxo.
+
+**Tablet.**
+- Duas colunas, painel lateral para o secundário, mestre-detalhe (lista e detalhe lado a lado), estrutura que muda com a orientação.
+- Toque e ponteiro ao mesmo tempo: alvos de 44, mas densidade maior que no celular; drawer lateral de navegação; formulários em mais de uma coluna quando os campos são curtos e relacionados.
+
+**Desktop.**
+- Várias colunas, navegação lateral sempre visível quando a arquitetura pede, vários painéis de informação ao mesmo tempo, tabelas com muitas colunas, visualizações mais ricas, menos revelação progressiva.
+- Interação: hover para informação adicional (nunca para função), atalhos de teclado, menu de contexto com o botão direito, arrastar e soltar onde ajuda, seleção múltipla com Shift e Ctrl/Cmd.
+- Largura: telas de app e produto ocupam a largura disponível, sem coluna centralizada com largura máxima (default do pacote para telas de app e produto, recusável pelo brief ou pelo dono com motivo registrado); a medida de leitura limita a prosa, não a página. Em marketing, contêiner só quando a composição pede, nunca herdado por acidente. Ver [espaço e layout](layout-e-espaco.md).
+
+**Impressão.**
+- Quebras de página em pontos lógicos (`break-before`, `break-inside: avoid` em blocos que não podem partir); navegação, rodapé de site e elementos interativos removidos; preto e branco ou cor limitada, sem depender de cor para significado; margens adequadas.
+- Conteúdo expandido: URLs completas depois dos links, seções recolhidas abertas, número de página, título e data de impressão; gráficos em versão legível em tons de cinza.
+
+**E-mail.**
+- Largura máxima de 600px, coluna única, CSS inline (clientes de e-mail ignoram folhas externas), layout em tabelas para compatibilidade.
+- CTA grande e óbvio (botão, não link de texto), nenhum estado de hover (não é confiável), interação complexa levada por link profundo para o app.
+- Modo escuro dos clientes de e-mail inverte cores sem pedir: logo e imagens com fundo transparente testados nos dois.
+
+## Breakpoints e contêiner
+
+Mobile primeiro: o estilo base é o do celular e consultas `min-width` acrescentam complexidade. Os breakpoints vêm do conteúdo: comece estreito, estique até a composição quebrar, e ali entra o breakpoint. Valores como 640, 768, 1024, 1280 e 1536px são só exemplos marcados como tal, nunca a fonte da decisão. Componentes reagem ao contêiner em que estão (container queries), não à janela, porque o mesmo card vive numa sidebar estreita e numa área principal larga.
+
+Teste os extremos declarados no contrato: tela muito pequena (320 CSS px de largura), tela muito grande (4K), paisagem no celular e janela estreita no desktop (multitarefa e tela dividida também são tamanhos).
+
+## Colapso mobile declarado por seção
+
+O contrato diz, para cada seção, como ela colapsa abaixo do breakpoint de conteúdo: o que empilha, em que ordem, o que vira carrossel ou rolagem horizontal, o que vira acordeão, o que some com caminho alternativo. "Fica responsivo" não é especificação.
+
+**Override mobile das faixas de variância.** A composição assimétrica que o botão de VARIÂNCIA autoriza no desktop (faixas 4–10: sobreposições, proporções mistas, alvenaria, recuo largo de um lado) cai para coluna única no celular, com padding lateral do token de densidade. Rotações, margens negativas e cartas sobrepostas saem no toque: elas criam conflito de alvo e escondem conteúdo. Pan horizontal e scrollytelling ganham caminho nativo (rolagem com snap ou empilhamento) que mantém todo o conteúdo alcançável.
+
+**Altura cheia** usa `dvh` ou `svh` descontando o cromo fixo (barras do navegador móvel, cabeçalho persistente); `100vh` salta no iOS Safari quando a barra recolhe.
+
+## Entrada: ponteiro e hover, não tamanho de tela
+
+Tamanho de tela não diz qual é a entrada: há notebook com toque e tablet com teclado. Use consultas de capacidade:
+
+- `@media (pointer: coarse)` aumenta alvos e espaçamento (alvo de 44, densidade de linha confortável); `@media (pointer: fine)` permite controles menores e mais densos.
+- `@media (hover: hover)` habilita informação extra no hover; `@media (hover: none)` garante que nada dependa dele. Hover nunca é o único caminho para uma função.
+- Feedback de toque existe (estado pressionado visível) porque em toque não há hover para anunciar que algo é tocável.
+
+## Áreas seguras
+
+Em celulares com entalhe, ilha dinâmica, cantos arredondados e indicador de início, o conteúdo e os controles ficam dentro das áreas seguras: `padding` com `env(safe-area-inset-top|right|bottom|left)`, combinado com um mínimo (`max(1rem, env(safe-area-inset-bottom))`) e com a meta `viewport-fit=cover` para que o navegador exponha os valores. Barra inferior fixa e botão flutuante são os que mais esquecem disso. Teclado virtual aberto também reduz a área útil: campo focado não fica embaixo dele.
+
+## Imagens responsivas
+
+- `srcset` com descritores de largura (`400w, 800w, 1200w`) e `sizes` que diz quanto a imagem ocupa em cada contexto: o navegador escolhe o arquivo pela largura e pela densidade de pixels.
+- `<picture>` quando o recorte muda (direção de arte: horizontal no desktop, vertical no celular), não só a resolução.
+- Dimensões declaradas (`width`/`height` ou `aspect-ratio`) para não deslocar o layout; carregamento preguiçoso fora da primeira tela; a imagem principal da primeira tela com prioridade.
+- `display: none` esconde mas ainda baixa: conteúdo que não serve no celular não deveria ser carregado nele.
+
+## Padrões de colapso
+
+- **Navegação em três estágios:** drawer com botão rotulado no celular, horizontal compacta no tablet, completa com rótulos no desktop. O botão do drawer tem nome acessível, `aria-expanded` e Esc fecha; um menu em tela cheia é um diálogo (ver [componentes e estados](componentes-e-estados.md)).
+- **Tabela que vira cartão:** cada linha vira um cartão em que cada valor carrega o rótulo da sua coluna (o rótulo não some); ou a tabela mantém rolagem horizontal com a primeira coluna fixa. A escolha é por tabela (ver [dados e densidade](dados-e-densidade.md)).
+- **Revelação com `<details>`/`<summary>`** para conteúdo que pode recolher no celular, com semântica e teclado nativos.
+
+## Gestos e controles customizados
+
+Controle customizado (slider, comparador antes/depois, superfície de arrastar, faixa de controles rolável) passa em toda checagem de largura e ainda assim pode se recusar a arrastar no iOS. O contrato especifica e a verificação exercita:
+
+- **Gesto principal:** tocar responde como desenhado; arrastar com a entrada alvo completa o movimento, não só começa.
+- **Rolagem atravessando o controle:** deslizar no eixo de rolagem da página por cima do controle rola a página sem acioná-lo; arrastar a partir do controle, no eixo dele, move o controle e não a página. Nenhuma das duas falhas gera erro, então as duas precisam ser tentadas.
+- **Interrupção:** `pointercancel`, `lostpointercapture` e perda de foco da janela devolvem o controle a um estado coerente; nada fica preso no meio do arraste.
+- **Alternativa:** todo gesto tem equivalente por teclado e por um único toque (arrastar tem alternativa sem arrastar, WCAG 2.5.7); gesto de vários dedos ou de trajetória tem alternativa simples (2.5.1).
+- **Evidência declarada:** diga o que produziu a evidência (viewport emulado, toque sintetizado por ferramenta de navegador, qual motor rodou, aparelho físico). Captura de tela e janela redimensionada provam layout, nunca gesto. O que ficou sem teste é registrado como lacuna; hardware inalcançável não bloqueia, mas também não vira "testado".
+
+## Zoom, texto ampliado e reflow
+
+- Zoom de 200% sem perda de conteúdo ou função, e reflow sem rolagem em duas direções numa largura equivalente a 320 CSS px (exceto tabelas, mapas e gráficos que precisam de duas dimensões).
+- Espaçamento de texto ampliado pela pessoa (altura de linha, espaço entre letras, palavras e parágrafos) não corta nem sobrepõe texto: contêineres crescem com o conteúdo, sem altura fixa em caixa de texto.
+- Texto em unidades relativas (`rem`), para seguir a preferência de tamanho do navegador. No nativo, Dynamic Type no iOS e `sp` no Android, testados num tamanho grande (é onde o corte aparece).
+
+## Ordem
+
+A ordem do DOM e a ordem de foco acompanham a ordem visual em cada breakpoint. Reordenar só com CSS (`order`, `grid-area`, `flex-direction: row-reverse`) cria um caminho de teclado e de leitor de tela que não corresponde ao que se vê; quando a ordem visual muda por breakpoint, o contrato diz qual ordem de leitura vale e como o DOM a sustenta.
+
+## Idiomas, RTL e scripts
+
+Quando a superfície é ou será traduzida, isso entra no contrato desde o começo, não como ajuste:
+
+- **Propriedades lógicas** em tudo que tem lado: `margin-inline-start` em vez de `margin-left`, `padding-inline`, `border-inline-end`, `inset-inline-start`, `text-align: start`. O layout espelha sozinho com `dir="rtl"`.
+- **Espelhamento de ícones direcionais:** setas de avançar e voltar, chevrons, ícone de "responder", barras de progresso horizontais e indicadores de lista espelham em RTL. Não espelham: logos, ícones de mídia (play aponta para a direita em qualquer idioma), relógio, marcas de verificação, gráficos com eixo de tempo convencionado, texto embutido em imagem. Decida ícone por ícone; `transform: scaleX(-1)` em tudo é errado.
+- **Expansão:** reserve de 30 a 40% a mais de espaço para traduções (alemão e finlandês costumam ser os mais longos; português também cresce em relação ao inglês). Nada de largura fixa em contêiner de texto, botão ou aba; limites de tamanho por medida visual (linhas e largura), não por contagem de palavras em inglês.
+- **Altura de linha e tracking por script.** Scripts CJK e árabe precisam de altura de linha diferente da latina; tracking negativo nunca se aplica a CJK nem a árabe; caixa alta com espaçamento é recurso do latim, não existe em scripts sem caixa. Declare tokens tipográficos por script quando houver mais de um (ver [tipografia](tipografia.md)).
+- **Fontes:** fallback com cobertura para cada script em uso; `unicode-range` nunca corta o Latin-1, porque é onde estão os acentos do português.
+- **Formatos:** data, hora, número, moeda, plural e ordem de nome e sobrenome vêm do locale (APIs de internacionalização da plataforma), nunca montados à mão.
+- **Pseudo-localização como verificação:** antes de ter traduções reais, rode as strings por uma pseudo-localização que alonga o texto em cerca de 30 a 40%, adiciona acentos e delimitadores e, numa segunda passada, força RTL. O que corta, sobrepõe, desalinha ou não espelha aparece ali. É gate do contrato sempre que houver i18n.
+
+## Nativo
+
+Quando a superfície é app nativo (iOS, iPadOS, Android, ou multiplataforma entregando para esses aparelhos), as convenções da plataforma governam estrutura, navegação e interação em qualquer modo; a marca se expressa pela camada que a plataforma deixa aberta: tint ou papéis de cor, tipografia, forma, movimento, conteúdo.
+
+**Estrutura por tamanho, não por aparelho.** Size classes no iOS e window size classes no Android decidem a estrutura; nunca checagem de modelo de aparelho. Multitarefa entrega uma janela de largura de celular num tablet, e o layout dirigido por classe de tamanho resolve os dois casos.
+
+**Celular para tablet: reestruturar, não esticar.** Interface de celular ampliada no tablet é a falha típica.
+- A navegação muda de forma: a tab bar continua ou vira sidebar no iPad; a barra de navegação do Android vira rail ou drawer na largura expandida. Barra inferior de celular intocada num tablet não entra.
+- A largura é usada: split view ou mestre-detalhe, grades de várias colunas, popover onde o celular usava sheet.
+
+**Orientação e dobráveis.** Paisagem reestrutura (painéis lado a lado, controles reposicionados), sem cortar nem colocar tarjas. Travar orientação só quando a tarefa exige de fato, nunca para fugir de um defeito de layout. Dobráveis reagem à postura e à dobradiça pelas window size classes e são testados dobrado, aberto e em modo mesa.
+
+**Web para nativo: reconformar, não refluir.** Navegação web vira o modelo da plataforma; controles com cara de HTML viram controles da plataforma; affordances de hover viram affordances de toque; tipo em px vira Dynamic Type ou `sp`. Depois, a superfície passa pelo teste de conformidade da plataforma como qualquer outra.
+
+**Convenções iOS × Android.** Traduza idiomas, nunca transplante:
+
+| Aspecto | iOS | Android |
+|---|---|---|
+| Navegação de topo | tab bar com 2 a 5 seções (seções, nunca ações), pilha de navegação para hierarquia, sheet para tarefa autocontida | barra de navegação inferior com 3 a 5 destinos no compacto; rail ou drawer no expandido; top app bar com o contexto da tela |
+| Voltar | gesto de borda esquerda sempre vivo, chevron de voltar | gesto Voltar preditivo e botão Voltar do sistema sempre funcionam; nunca prender nem sequestrar |
+| Controles | switch, segmented control, stepper, pickers do sistema, action sheet, alerta, menu de contexto, ações de deslizar | botões cheio, tonal, contornado e de texto; um FAB para uma ação primária; switch, chips e pickers do Material |
+| Sobreposições | sheet para subtarefa dispensável, cobertura em tela cheia para imersão, Cancelar e Concluído claros, deslizar para fechar respeitado salvo risco de perda de dados | bottom sheet, diálogo do Material só para decisão que precisa interromper |
+| Feedback transitório | alerta ou banner do sistema conforme a gravidade | snackbar (com ação quando útil), nunca toast para isso |
+| Ícones e tipo | SF Symbols alinhados à linha de base; SF Pro e SF Compact na interface, fonte da marca em momentos de display; Dynamic Type (piso de 11pt, corpo de 17pt, estilos do sistema em vez de pontos fixos) | Material Symbols; Roboto ou a fonte da marca encaixada na escala tipográfica do Material (Display, Headline, Title, Body, Label, cada um em três tamanhos); sempre `sp` |
+| Cor e superfícies | cores semânticas do sistema (label, secondaryLabel, systemBackground, separator, tint), um tint para o interativo, materiais do sistema para desfoque | papéis de cor do Material (primary, on-primary, surface, surface-variant, secondary-container, outline, error), Dynamic Color no Android 12+ com fallback estático, elevação tonal |
+| Listas de ajustes | listas agrupadas ou inset | listas do Material |
+| Movimento | transições do sistema (push desliza, sheet sobe, fechar reverte a entrada); com Reduzir Movimento, crossfade no lugar de paralaxe e deslizes grandes | container transform, shared axis, fade through com easing e durações padrão; com "Remover animações", crossfade ou corte |
+| Alvo | 44×44pt com folga entre vizinhos | 48×48dp com pelo menos 8dp entre alvos |
+| Bordas do sistema | área segura (entalhe, ilha dinâmica, indicador de início, cantos) | edge-to-edge com insets de barra de status, barra de navegação, recorte de tela e teclado |
+| Modo escuro | aparência de primeira classe, desenhada e testada | tema escuro de primeira classe, nunca inversão rápida |
+
+**Os dois vícios de plataforma:**
+- **"Portado de site" no iOS:** barra de navegação ou voltar customizados, gesto de borda desligado ou coberto, botões com cara de web, affordances que dependem de hover, glassmorphism feito à mão no lugar dos materiais, pilhas de cards em telas de ajustes, conjunto de ícones da web misturado com SF Symbols, hex cru que quebra no modo escuro e no aumento de contraste.
+- **"Pele de iOS" no Android:** só barra inferior copiada do iPhone, voltar que ignora o gesto do sistema, switches e diálogos com forma Cupertino, FABs empilhados ou FAB gasto em ação secundária, toast no lugar de snackbar, barra de celular intocada no tablet.
+
+App que usa Material em todo lugar e também roda no iPhone ainda deve ao iOS as garantias do sistema naquele aparelho: área segura, Reduzir Movimento e gesto de borda para voltar.
+
+**Evidência nativa.** Simulador e emulador dão amplitude (classes de dispositivo, modo escuro, tamanho de fonte grande); postura, gestos, taxa de atualização e desempenho precisam de aparelho real. A verificação diz qual dos dois produziu cada evidência e cobre pelo menos um celular e, quando houver tablet no alvo, um tablet, nas duas orientações.
+
+**Handoff.** A crow-design decide a estrutura, a navegação, os tokens e a tradução de idiomas entre plataformas. Implementação de app nativo, mapeamento dos tokens para SwiftUI, Compose ou o framework multiplataforma, e a verificação em simulador ou aparelho são da `crow-native-mobile`, que recebe o contrato com: classes de tamanho e o que muda em cada uma, tabela de navegação por plataforma, tokens com os modos claro, escuro e de contraste aumentado, regras de movimento com o comportamento sob Reduzir Movimento, e a lista do que ficou sem verificação em hardware.

package/skills/crow-design/references/anti-padroes.md

@@ -0,0 +1,187 @@
+<!-- Derivado de Impeccable (Apache-2.0, Paul Bakaus), design-taste-frontend e high-end-visual-design (MIT, Leonxlnx), design-system (MIT, claudekit) e platform-design-skills (MIT, ehmo); reescrito e modificado pelo Crow em 2026-11-13. Ver ../NOTICE.md. -->
+# Anti-padrões
+
+Leia antes de fixar a direção e antes de fechar o contrato: é o catálogo dos vícios recorrentes de interface gerada e de sistema mal governado, cada um com o motivo, quando o brief ou a marca o liberam e como checar.
+
+## Como usar este catálogo
+
+Quase tudo aqui é **default recusável**, não proibição. O vício não é o padrão em si; é chegar nele quando o eixo estava livre, porque aí ninguém decidiu nada. O brief, a marca ou a autoridade visual existente (documento do sistema, tokens, componentes, código) liberam qualquer item recusável, e a exceção é registrada com o motivo no documento do sistema. A ordem de precedência é: pedido atual do dono, brief, marca e sistema existentes, decisões do contrato, defaults desta skill.
+
+Três classes de item **não se liberam** por brief nem por marca, porque não são questão de gosto; só itens delas trazem "*Libera:* nunca":
+- **acessibilidade:** contraste abaixo do piso, foco invisível, alvo abaixo de 24×24, movimento sem alternativa reduzida, flash acima do limite, significado só por cor, conteúdo inacessível por teclado, estado que a tecnologia assistiva não recebe;
+- **verdade do conteúdo:** conteúdo, pessoa, métrica, logo, depoimento, interface ou progresso fabricados com cara de reais, e contrato que declara o que não será entregue;
+- **integridade do sistema de tokens e do contrato:** valor cru no lugar de token, referência quebrada, camadas achatadas ou misturadas, governança ausente em sistema compartilhado, e a ausência das decisões que os gates exigem (estados, largura).
+
+Todo o resto é gosto: *Libera* diz quando o brief ou a marca pedem o padrão, e a exceção é registrada.
+
+Cada item traz: **o que é**; *Vício*, por que é problema; *Libera*, quando deixa de ser; *Checa*, como verificar. "Gate" bloqueia o contrato; "heurística" orienta, e quem decide manter registra o motivo (ver [aceite e pré-voo](aceite-e-pre-voo.md)).
+
+## Os dois testes que valem para tudo
+
+**A mesma direção sairia de um brief sobre outro assunto?** Se dá para adivinhar a estética pela categoria (fintech → azul-marinho e cards; ferramenta de IA → roxo e brilho; livraria → creme e serifa), ou pela categoria mais o que ela costuma evitar, a direção é o default vestido com a roupa do assunto. Decida de novo a partir do que o assunto tem de específico: a matéria, o vocabulário, o público, a cena real de uso, o mecanismo único do produto. Restrição negativa do brief ("nada de neon") não proíbe exuberância, e um mundo fixado pelo brief não autoriza a versão mais mansa dele.
+
+**O inverso também é vício: variar por obrigação.** Exigir aparência nova a cada entrega, proibir repetir um layout entre seções, fazer rodízio de paleta ou de fonte "entre projetos" (não há memória confiável disso), ou banir uma família, uma cor ou um componente que a marca já usa, é trocar a decisão do dono pela preferência da ferramenta. Consistência entre telas do mesmo produto é virtude. Variação só existe contra defaults genéricos, nunca contra a marca ou o sistema existentes. Trocar um valor existente é decisão explícita, com motivo e caminho de volta.
+
+## Composição
+
+- **Cards iguais como estrutura da página.** Fileira de cards do mesmo tamanho, cada um com ícone, título e texto, servindo de esqueleto para tudo; três cards idênticos lado a lado como "features". *Vício:* o card é o contêiner preguiçoso; tudo pesa igual e nada é hierarquia. *Libera:* coleção real de itens equivalentes (planos comparáveis, produtos de um catálogo), onde a igualdade é a informação. *Checa:* heurística; remova as bordas mentalmente: se a seção continua funcionando com espaço e tipografia, o card era decoração. Em densidade alta (botão DENSIDADE acima de 7, ver [direção estética](direcao-estetica.md)), card genérico não entra; linhas de 1px e espaço fazem o trabalho.
+- **Card dentro de card.** *Vício:* duas fronteiras disputando a mesma hierarquia; quase sempre é estrutura que não foi pensada. *Libera:* o interno é um objeto distinto com fronteira própria (uma prévia de anexo dentro de uma mensagem) e o externo é região sem sombra. *Checa:* heurística.
+- **Template de número herói.** Número enorme, rótulo pequeno, três estatísticas de apoio e um acento. *Vício:* composição de marketing aplicada a qualquer coisa, inclusive a painel; quase sempre com número sem fonte. *Libera:* o número é real, tem fonte e é de fato a mensagem principal. *Checa:* heurística de composição; gate de honestidade para o número.
+- **Kicker ou eyebrow.** Rótulo pequeno, geralmente em caixa alta espaçada (às vezes em pílula ou mono), imediatamente acima de um título de seção. *Vício:* o título deveria carregar o próprio peso; repetido em toda seção, vira cromo de template e ruído; em 10–11px, ilegível para muita gente. **Não é banido de forma absoluta.** *Libera:* o brief ou a marca pedem; o rótulo carrega informação que o título não carrega (categoria real, data, autor numa publicação). Mesmo liberado: raro (como orientação, no máximo um a cada três seções, contando o hero, e as duas seguintes sem), com texto de pelo menos 12px e contraste AA. *Checa:* pela semântica, não pela classe CSS: conte rótulos de texto curto posicionados imediatamente acima de um título de seção (`h2`/`h3` ou equivalente), seja qual for a técnica (caixa alta, small caps, `font-variant`, pílula). Caixa alta espaçada em botão, navegação ou badge não conta; small caps acima de título conta. Heurística, registrada.
+- **Numeração de seção sem sequência.** "01 / 02 / 03" nas seções, eyebrow numerado ("00 / Índice", "001 · Capacidades"), paginação "01 / 4" em imagens ou tiles. *Vício:* simula ordem onde não há; é decoração disfarçada de informação. *Libera:* a sequência é real e a pessoa precisa dela (passos de um processo, capítulos). *Checa:* heurística: a ordem muda o significado?
+- **Hero centralizado sobre fundo escuro com malha de gradiente.** *Vício:* é o rosto mais reconhecível de página gerada. *Libera:* editorial, manifesto, anúncio de lançamento, ou variância baixa declarada (botão de VARIÂNCIA até 4). Com variância acima de 4, prefira divisão assimétrica, texto de um lado e visual do outro, espaço assimétrico ou seção fixada na rolagem. *Checa:* heurística.
+- **Cabeçalho dividido.** Título grande à esquerda (sete ou oito colunas) e parágrafo pequeno à direita (quatro ou cinco). *Vício:* virou assinatura de template; separa o título do texto que o explica. *Libera:* a marca usa; o parágrafo é de fato lateral (nota, legenda). *Checa:* heurística; o default é empilhar com o corpo na medida de leitura.
+- **Zigue-zague longo.** Mais de duas seções seguidas alternando imagem e texto de lados. *Vício:* ritmo previsível que o leitor para de ler na terceira. *Libera:* conteúdo que é de fato uma sequência paralela (passo a passo com imagem por passo), com variação de escala. *Checa:* heurística: a terceira alternância seguida pede outra forma.
+- **Monotonia de layout sem motivo.** A mesma família de layout repetida em seções que dizem coisas diferentes. *Vício:* tudo parece igualmente (des)importante. *Libera:* repetição deliberada (coleções, componentes do sistema, páginas de documentação, listagens) é consistência e não vício. *Checa:* heurística, só em marketing: oito seções costumam pedir várias famílias, mas não há cota. O vício inverso (proibir repetir) está no teste acima.
+- **Bento sem ritmo.** Grade de células com tamanhos que não seguem o conteúdo, célula vazia sobrando, todas as células com o mesmo fundo. *Vício:* bento escolhido pela forma, não pelo conteúdo. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção (célula vazia como respiro declarado); o resto, pela composição. *Checa:* N itens, N células; duas ou três células com fundo diferente (imagem, cor da marca, padrão, tint) quando a grade é grande; heurística.
+- **Lista longa em fileira simples em marketing.** Mais de cinco itens empilhados iguais, despejo de dados numa página de marketing, ficha técnica com borda inferior em toda linha, borda em cima e embaixo de cada linha de lista. *Vício:* parede de opções; o leitor não acha o que importa. *Libera:* página de referência, documentação, tabela de especificação que é a própria tarefa. *Checa:* heurística; alternativas: as três a cinco principais e "ver lista completa", duas colunas agrupadas, abas, acordeão, chips roláveis, grupos com um divisor só.
+- **Hero que estoura.** Título de quatro linhas, mais de quatro elementos de texto no hero (rótulo ou faixa de marca, título, subtítulo, CTAs), CTAs abaixo da dobra, logo wall, fileira de avatares, teaser de preço e bullets de feature dentro do hero, padding superior exagerado. *Vício:* a primeira tela tenta dizer tudo e não diz nada. *Libera:* o mundo da direção é tipográfico e o título é a peça. *Checa:* heurística: título até duas linhas no desktop, subtítulo até três ou quatro linhas, uma ação primária e no máximo uma secundária visíveis sem rolar.
+- **Hero sem visual.** Texto e uma mancha de gradiente no lugar de um visual real; página "minimalista" que é só texto quando o assunto pede imagem. *Vício:* ausência de decisão apresentada como estilo. *Libera:* modo Ler, direção tipográfica deliberada. *Checa:* heurística.
+- **Decoração de canto.** Subtexto flutuando no canto superior direito do cabeçalho da seção, faixa decorativa de palavras no pé do hero, chamada para rolar, texto vertical rotacionado, linhas de grade ou miras como enfeite. *Vício:* cromo que finge densidade editorial. *Libera:* texto vertical e grade quando o mundo é de fato editorial ou técnico e eles carregam informação (régua real, mapa, planta). *Checa:* heurística.
+- **Listras e grades sem chão.** `repeating-linear-gradient` em listras, grade em dois eixos sobreposta ao fundo. *Vício:* textura que não vem do mundo do assunto. *Libera:* há um canvas, mapa, planta ou instrumento de medida real por baixo. *Checa:* heurística.
+- **Coluna centralizada herdada em app.** Tela de produto estreitada num contêiner `max-w` centralizado; hero que devia sangrar cortado pelo contêiner do layout raiz. *Vício:* desperdiça a tela de quem trabalha e quebra a composição. *Libera:* prosa (a medida de leitura manda); marketing quando a composição pede contêiner. *Checa:* **gate**: a largura de cada superfície está decidida e escrita no contrato.
+- **Sidebar à esquerda por reflexo.** Dashboard que nasce com navegação lateral porque todo dashboard tem. *Vício:* a arquitetura de informação não foi consultada. *Libera:* a arquitetura pede (muitas seções, troca frequente). *Checa:* heurística. O vício inverso: proibir navegação lateral ou barra fixa de ponta a ponta por estética, sendo padrões acessíveis e comuns.
+- **Navegação que estoura.** Barra em pílula flutuante com largura do conteúdo que não cabe com muitos itens ou com tradução; navegação que quebra em duas linhas no desktop; barra mais alta que 80px. *Vício:* a forma veio antes do conteúdo. *Libera:* poucos itens fixos e testados na língua mais longa. *Checa:* heurística (altura de 64 a 72px é a faixa comum); gate de pseudo-localização quando há i18n.
+- **Sobreposição e rotação no toque.** Cartas sobrepostas com rotação de −2° e 3°, margens negativas, no celular. *Vício:* conflito de alvo e conteúdo escondido. *Libera:* nunca abaixo do breakpoint de toque. *Checa:* gate de alvos; colapso mobile declarado.
+- **Modal sem necessidade.** Modal para tarefa que não precisa de interrupção nem de foco protegido. *Vício:* tira o contexto, pesa a navegação por teclado. *Libera:* interrupção real ou foco protegido. *Checa:* árvore de decisão em [componentes e estados](componentes-e-estados.md).
+
+## Tipografia
+
+- **Fonte de reflexo.** Escolher por hábito uma destas, que aparecem em qualquer assunto: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Instrument Serif, Syne, Space Grotesk, Space Mono, IBM Plex, Inter como display, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans; e, como corpo, Inter, Roboto, Arial, Open Sans ou Helvetica sem pensar. *Vício:* a fonte não diz nada do assunto. *Libera:* a marca usa (a marca zera a lista para os próprios ativos); Inter e fontes de sistema são escolhas válidas em Operar e Ler e em setor público ou acessibilidade crítica; razão que só aquela fonte atende, registrada. *Checa:* heurística; a fonte é justificada pelo mundo da direção, não pela categoria. Ver [tipografia](tipografia.md).
+- **Fonte por associação de assunto.** Livro → serifa; tecnologia → mono; luxo → serifa de alto contraste; creme com serifa para tema de livro ("o default vestindo a roupa do assunto"). *Vício:* é o teste de categoria falhando. *Libera:* o brief nomeia a serifa, ou a família é genuinamente editorial, de publicação, manuscrita, de herança. *Checa:* heurística. Serifa em dashboard não entra como default.
+- **Supor fonte comercial disponível.** Especificar uma fonte paga como se estivesse à mão. *Vício:* o build quebra ou a licença é violada. *Libera:* licença declarada pelo dono. *Checa:* **gate** de honestidade de assets: cada fonte com licença e fallback livre equivalente.
+- **Palavra serifada injetada.** Uma palavra em serifa (ou itálico de outra família) no meio de um título sans. *Vício:* truque de template. *Libera:* a marca tem essa assinatura. *Checa:* heurística; ênfase vem de itálico ou peso da mesma família.
+- **Fonte de sistema como voz display.** Impact, Arial Black ou a sans da plataforma como voz de display numa página com mundo próprio. *Vício:* a fonte mais próxima instalada no lugar da que o mundo pede. *Libera:* modo Operar e Ler, onde fonte de sistema é virtude. *Checa:* heurística.
+- **Mono como fantasia.** Monoespaçada para parecer "técnico", ou mono em todos os números de uma interface densa. *Vício:* custa largura e legibilidade; o alinhamento de números vem de `tabular-nums`. *Libera:* código, IDs, hashes, medidas, terminal. *Checa:* heurística; numerais `tabular-nums` em colunas.
+- **Tracking extremo.** Abaixo de −0.04em no display; tracking negativo em CJK ou árabe; caixa alta espaçada em script sem caixa. *Vício:* letras colidem; em outros scripts, quebra a escrita. *Libera:* nunca o tracking negativo em CJK ou árabe nem a caixa alta em script sem caixa, que quebram a escrita (acessibilidade); o piso de −0.04em no display latino é valor, recusável quando a marca pede, registrando a exceção e conferindo a legibilidade (entre −0.02 e −0.03em costuma ler melhor). *Checa:* gate de valor de token; RTL e scripts na pseudo-localização.
+- **Escala sem degraus ou estourada.** Título de display acima de 6rem sem motivo; H1 exagerado; degraus de tamanho e peso que não se distinguem; hierarquia só por tamanho. *Vício:* ou grita, ou não hierarquiza. *Libera:* o mundo da direção pede display maior (registrado). *Checa:* heurística.
+- **Tipografia fluida em produto.** `clamp()` em títulos de painel e app. *Vício:* título que encolhe numa sidebar; produto é visto em densidade constante. *Libera:* display de Persuadir e Experienciar. *Checa:* heurística; escala em rem fixo, razão 1.125–1.2, em Operar e Ler.
+- **Título quebrado com itálico.** Quebra forçada com `<br>` e a última palavra em itálico ("por trinta<br>*anos.*"). *Vício:* assinatura de template; quebra ruim em outra largura ou idioma. *Libera:* a marca usa. *Checa:* heurística.
+- **Texto em gradiente.** *Vício:* ênfase vem de peso ou tamanho; gradiente prejudica contraste e legibilidade. *Libera:* logo ou marca que já é assim. *Checa:* heurística; contraste do pior ponto do gradiente é gate.
+- **Rótulo minúsculo em caixa alta.** 10–11px, caixa alta, tracking largo. *Vício:* ilegível para muita gente. *Libera:* não abaixo de 12px. *Checa:* gate de tamanho mínimo e contraste.
+- **Itálico cortado.** Itálico ou fonte de display com descendentes (g, j, p, q, y) cortados por altura de linha apertada. *Vício:* defeito de acabamento. *Libera:* o valor de folga é recusável pela fonte e pela marca, registrando a exceção; glifo cortado a ponto de prejudicar a leitura é acessibilidade e não se libera. *Checa:* heurística; altura de linha de pelo menos 1.1 e folga inferior quando há descendentes.
+- **`unicode-range` só latim básico.** Subconjunto que corta o Latin-1. *Vício:* acentos do português caem para a fonte de fallback. *Libera:* conteúdo que comprovadamente não usa caracteres fora do subconjunto, com o idioma registrado. *Checa:* gate 9 de [aceite e pré-voo](aceite-e-pre-voo.md) quando há i18n.
+- **Fonte de display em rótulo, botão ou dado** em superfície de produto. *Vício:* estranheza sem propósito. *Libera:* marca que tem essa voz e foi testada em tamanho pequeno. *Checa:* heurística.
+
+## Cor
+
+- **Cluster creme, serifa e terracota.** Fundo creme quente, serifa de display de alto contraste, acento terracota ou vermelho-sinal. *Vício:* o default "sofisticado" mais reconhecível. *Libera:* marca ou brief que pedem, executado com intenção. *Checa:* teste de categoria.
+- **Cluster quase preto e neon.** Fundo quase preto, um acento neon, bordas brilhando. *Vício:* o default "tech". *Libera:* idem. *Checa:* teste de categoria.
+- **Cluster jornal.** Linhas finas de jornal, serifa de display itálica e rótulos mono pequenos e espaçados. *Vício:* o default "editorial". *Libera:* publicação que é de fato jornal. *Checa:* teste de categoria.
+- **Roxo e azul "de IA".** Gradiente violeta-azul como identidade, orbs roxos, brilho automático. *Vício:* virou sinônimo de página gerada. *Libera:* a marca é roxa (marca roxa continua roxa), executada com intenção. *Checa:* teste de categoria.
+- **Paleta "consumidor premium".** Fundos bege-creme (como `#f5f1ea`, `#f7f5f1`, `#fbf8f1`, `#efeae0`, `#ece6db`, `#faf7f1`, `#e8dfcb`), acentos latão, ferrugem e vinho (`#b08947`, `#b6553a`, `#9a2436`, `#9c6e2a`, `#bc7c3a`, `#7d5621`), texto marrom-preto (`#1a1714`, `#1a1814`, `#1b1814`). *Vício:* o mesmo luxo em qualquer marca. *Libera:* a marca nomeia essas cores ou é genuinamente artesanal ou de época. *Checa:* teste de categoria. Sem rodízio obrigatório entre projetos.
+- **Fundo puxado pelo default.** Creme quente no claro, ardósia azul-preta no escuro, sem que a cena peça. *Vício:* o fundo que sai quando ninguém escolhe. *Libera:* a cena física pede. *Checa:* heurística.
+- **Claro ou escuro pela categoria.** Escuro porque "é tech", claro porque "é saúde". *Vício:* a cena de uso não foi considerada. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; a categoria sozinha não é motivo: decida por uma frase de cena (quem, onde, sob que luz). *Checa:* heurística registrada.
+- **Brilho e halo.** Glow neon, sombra colorida sem deslocamento em volta de botões e cards. *Vício:* decoração que imita luz. *Libera:* mundo que é de fato luminoso (interface de palco, jogo), com propósito. *Checa:* heurística.
+- **Acento demais.** Acento saturado além da saturação contida (ver [cor](cor.md)), mais de um acento sem função, acento em estado inativo, cor salpicada em acentos espalhados em vez de ocupar regiões. *Vício:* tudo chama atenção. *Libera:* estratégia de cor comprometida, completa ou encharcada declarada. *Checa:* heurística; contraste é gate.
+- **Paleta incoerente.** Cinzas quentes e frios alternando entre seções; CTA azul numa página de cinza quente; badge turquesa num site rosa. *Vício:* falta de lock de cor. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção (estratégia de cor completa ou encharcada, sistema existente). *Checa:* acentos e famílias de neutros declarados pela estratégia de cor escolhida, em tokens (ver [cor](cor.md)).
+- **Preto e branco puros.** `#000` e `#fff` como default de fundo e texto. *Vício:* contraste duro e sem profundidade. *Libera:* marca, modo de alto contraste. *Checa:* heurística; neutros tokenizados.
+- **Cinza sobre cor.** Texto secundário cinza genérico sobre superfície colorida. *Vício:* fica sujo e frequentemente reprova contraste. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; o default é derivar do matiz da superfície ou do primeiro plano. *Checa:* heurística; o contraste continua gate.
+- **Seção invertida.** Seção escura no meio de página clara (ou o contrário). *Vício:* quebra o lock de tema. *Libera:* uma única faixa de cor deliberada por página; tints da mesma família lado a lado. *Checa:* heurística.
+- **Escuro invertido.** Modo escuro feito por inversão mecânica, ou um dos dois modos esquecido, ou modo escuro só no fundo com primário, foco e estados sem ajuste. *Vício:* contraste e hierarquia não verificados. *Libera:* nunca, quando o contrato decidiu ter dois modos. *Checa:* **gate**: contraste por par e por modo.
+- **Alfa sem verificação.** Texto, borda, hover (primário a 90%) ou seleção (primário a 10%) feitos com transparência. *Vício:* o contraste muda conforme o fundo real. *Libera:* contraste verificado sobre o fundo real em cada modo. *Checa:* gate; prefira tokens opacos.
+- **Só cor.** Estado, categoria ou prioridade comunicados apenas por cor. *Vício:* falha para daltonismo, impressão, leitor de tela. *Libera:* nunca. *Checa:* **gate**.
+- **Ponto de status decorativo.** Bolinha colorida "ao vivo" sem estado real. *Vício:* finge atividade. *Libera:* estado semântico real, um por seção. *Checa:* heurística.
+- **Rampa com croma constante.** Mesma saturação do claríssimo ao escuríssimo. *Vício:* sai do gamut e fica berrante nas pontas. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção (rampa da marca fornecida); o contraste continua gate. *Checa:* rampa OKLCH com croma caindo perto do branco e do preto e recorte de gamut (ver [cor](cor.md)).
+
+## Superfície e profundidade
+
+- **Glass decorativo.** Vidro e desfoque como estilo geral, em cards de conteúdo, em área grande que rola, em dashboard ou B2B sóbrio. *Vício:* custo de desempenho, contraste instável, cara de template. *Libera:* camada fixa ou sobreposta (barra, sheet, overlay de mídia) em registro que pede (consumidor premium, adjacente à Apple, luxo), com fallback para `prefers-reduced-transparency` por modo (no escuro, o fallback é superfície escura opaca, não branca) e contraste nos quatro cenários. *Checa:* gate de contraste; heurística de uso. Receita em [superfície e profundidade](superficie-e-profundidade.md).
+- **Card fantasma.** Borda de 1px com sombra larga e suave ao mesmo tempo. *Vício:* duas linguagens de elevação brigando. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; o default é borda **ou** sombra, declarada uma vez. *Checa:* heurística.
+- **Aba lateral.** Borda colorida à esquerda ou à direita, acima de 1px, em card, item de lista, callout ou alerta. *Vício:* marca de template; carrega significado só por cor. *Libera:* a marca usa; o indicador é acompanhado de ícone ou texto. *Checa:* heurística.
+- **Sombra dura deslocada.** `box-shadow: 4px 4px 0` fora de um mundo neobrutalista. *Vício:* fantasia de estilo, não sistema de profundidade. *Libera:* o mundo escolheu o neobrutalismo. *Checa:* heurística.
+- **Sombra preta genérica.** Sombra de preto puro em fundo claro, sombra média padrão de kit. *Vício:* suja a superfície. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; o default é sombra tingida pelo matiz da superfície, com deslocamento e desfoque suave. *Checa:* heurística.
+- **Raio sem sistema.** Mesmo raio em tudo achatando a hierarquia, ou mistura de raios sem regra, pílula em algo que não é controle pequeno, raio interno igual ao externo. *Vício:* a forma não diz o que é o quê. *Libera:* regra de mistura documentada ("botões em pílula com `radius.full`, cards 16px, campos 8px"); card de 12 a 16px é sugestão, não regra. *Checa:* heurística; raio interno = externo − padding.
+- **Moldura dupla em tudo.** Casca e núcleo com raio concêntrico aplicados a todo card, campo e grade. *Vício:* ruído; em campo de formulário, confunde o limite. *Libera:* mídia de destaque e hero, no registro premium. *Checa:* nunca em campo; heurística no resto.
+- **Limite interativo invisível.** Borda de componente interativo (campo, botão contornado, card clicável) em linha fina abaixo de 3:1 (um preto a 5% sobre branco fica em 1.1:1), ou feita com `border.default`, que é decorativo, em vez do papel `semantic.border.control` (≥3:1). *Vício:* reprova o contraste de não-texto. *Libera:* nunca quando a borda é o único limite. *Checa:* **gate**.
+- **Grão mal posto.** Ruído em contêiner que rola, ou grão via `feTurbulence` como textura decorativa. *Vício:* custo de pintura a cada quadro; lê como amador. *Libera:* grão estático numa camada fixa que não captura ponteiro; filtro SVG de distorção funcional (efeito que é a ideia, com orçamento de desempenho). *Checa:* heurística.
+- **Ilustração de rascunho.** Cena em SVG estilo esboço, classes do tipo `doodle`, SVG decorativo desenhado à mão, SVG inline grande (acima de cerca de 64px ou mais que alguns caminhos) fazendo papel de ilustração. *Vício:* lê como amador e não é sistema. *Libera:* ilustração autoral real ou nenhuma; SVG de geometria exata (diagrama, forma, linha animada) é mídia legítima. *Checa:* heurística.
+- **Máscara geométrica no lugar de contorno.** Círculo, polígono ou recorte radial aproximando a borda de um sujeito fotográfico; `clip-path` com muitos vértices onde devia haver um asset recortado. *Vício:* versão barata do efeito, pior que omitir. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção (a forma geométrica é a ideia declarada, não aproximação de contorno); o default é alfa real ou asset recortado. *Checa:* heurística.
+- **Fisicalidade falsa.** Bisel, relevo, metal estampado ou giz feitos em CSS imitando material. *Vício:* fantasia de material. *Libera:* mundo que é de fato esse material, com asset real. *Checa:* heurística.
+- **Imagem enterrada.** Asset com opacidade quase zero ou atrás de um véu. *Vício:* peso de download sem efeito visível. *Libera:* textura quase invisível pedida pela marca, com o peso dentro do orçamento, registrando a exceção. *Checa:* heurística.
+- **Interface falsa.** Screenshot de produto montado com divs, interface de produto falsa no hero, rodapé de versão inventado dentro dele, crop de composição entregue como imagem final. *Vício:* mente sobre o produto. *Libera:* nunca com cara de real; preview com o componente real ou captura real. *Checa:* **gate** de honestidade.
+- **Pílulas sobre imagens.** Tags e rótulos ("Marca · 02", "PRANCHA · MARCA") sobre fotos. *Vício:* cromo de template. *Libera:* a tag é informação real (preço, status). *Checa:* heurística.
+- **Barra de pontuação com trilho.** Barras com trilho preenchido como comparação de qualidades. *Vício:* precisão falsa. *Libera:* dado real com escala declarada. *Checa:* gate de honestidade se o número for inventado.
+- **Ícones genéricos em tiles.** Quadrado com ícone de biblioteca em cada feature. *Vício:* parede de igualdade. *Libera:* o ícone carrega informação. *Checa:* heurística.
+- **Cursor customizado.** *Vício:* hostil a acessibilidade e a expectativa. *Libera:* default recusável só em Experienciar, quando o cursor é a obra: o cursor do sistema fica preservado sobre controles e texto, e com movimento reduzido não há atraso de seguimento (o cursor acompanha o ponteiro sem inércia). *Checa:* heurística.
+- **z-index solto.** `z-50`, `9999` espalhados. *Vício:* camadas brigam e ninguém sabe a ordem. *Libera:* nunca. *Checa:* escala de camadas tokenizada, canônica em [superfície e profundidade](superficie-e-profundidade.md).
+
+## Movimento
+
+- **Mesma entrada em toda seção; hover espalhado.** *Vício:* movimento que não diz nada vira ruído. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção (repetição como linguagem declarada); o default é um momento autoral por superfície. *Checa:* heurística.
+- **Truque como tese.** Fade-and-rise genérico, elevação no hover, camada de paralaxe ou revelação na rolagem apresentados como a ideia de movimento. *Vício:* é o default, não uma tese. *Libera:* quando servem a uma tese escrita (continuidade, foco, revelação com significado). *Checa:* heurística; movimento justificado numa frase ou cortado.
+- **Mola e quique por reflexo.** Easing de bounce ou elastic sem gesto que o justifique. *Vício:* cartunesco, cansa. *Libera:* gesto físico, interrupção, mundo lúdico. *Checa:* heurística.
+- **Loops perpétuos.** Pulso, máquina de escrever, flutuação, brilho passando, carrossel infinito em avatares, status e fundos; card que "respira" sem parar. *Vício:* distrai, cansa e viola a pausa de movimento automático. *Libera:* propósito declarado, com pausa visível quando o movimento automático dura mais de 5 segundos no total e roda junto com outro conteúdo (WCAG 2.2.2), parando fora da tela e desligado com movimento reduzido. *Checa:* **gate** para pausa e reduced motion; heurística para o propósito.
+- **Conteúdo invisível por padrão.** Elementos começam com `opacity: 0` e só aparecem quando a animação roda. *Vício:* sem JS, com JS falhando ou com movimento reduzido, o conteúdo some. *Libera:* nunca. *Checa:* **gate**: conteúdo visível por padrão; revelação anima só com `prefers-reduced-motion: no-preference` e JS ativo.
+- **Animar o caro.** Filtro (desfoque) animado na entrada; animar largura, altura, top, left, margens; `transition: all`. *Vício:* jank, custo em celular, propriedades animadas sem controle. *Libera:* custo medido no dispositivo-alvo e registrado como exceção (como a máscara no momento focal); o default é animar transform e opacity, listar as propriedades da transição e manter filtro estático. *Checa:* heurística de especificação.
+- **Ouvinte de rolagem.** `addEventListener('scroll')` ou posição de rolagem em estado. *Vício:* custo a cada quadro. *Libera:* caso sem alternativa declarativa, com custo medido e exceção registrada. *Checa:* IntersectionObserver, animação ligada à rolagem com `@supports`, ou biblioteca que faz isso.
+- **Banir easing linear ou ease-in-out por estética.** *Vício inverso:* a progressão contínua (scrub, barra de progresso) é linear por natureza. *Checa:* easing por propósito: entrada ease-out, saída ease-in e mais curta, progressão linear (ver [movimento](movimento.md)).
+- **Pressionar que sobe.** `:active` com `translateY(-1px)`; elevação no hover como padrão de botão. *Vício:* contradiz a metáfora física. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; o default é afundar (`translateY(1px)` ou `scale(.98)`), e com movimento reduzido não há deslocamento em caso algum. *Checa:* heurística.
+- **Coreografia de carregamento em produto.** *Vício:* ninguém quer assistir à ferramenta carregar. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção, sem atrasar a tarefa; em Operar o default é skeleton sem coreografia. *Checa:* heurística.
+- **Movimento prometido e não entregue (e o inverso).** Botão de MOVIMENTO alto declarado e página estática; ou movimento intenso num contrato que declarou movimento baixo. *Vício:* contrato que não corresponde à entrega. *Libera:* nunca, porque é verdade do contrato; ajuste o botão ao que será entregue. *Checa:* heurística.
+- **Mais de um marquee por página.** *Vício:* ruído. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; o default é no máximo um por página. *Checa:* heurística.
+- **Ponteiro sem alternativa.** Botão magnético, rastro de imagem no hover, menu radial, inclinação com paralaxe sem equivalente por teclado e toque. *Vício:* função só para mouse. *Libera:* efeito puramente decorativo, com o controle acessível por baixo. *Checa:* gate de teclado.
+- **Fixação dupla e pan sem saída.** O mesmo elemento fixado por CSS sticky e por fixação de biblioteca; pan horizontal sem fallback, que com movimento reduzido deixa cards fora da tela inalcançáveis. *Vício:* salto de layout; conteúdo perdido justamente para quem pediu menos movimento. *Libera:* nunca o pan sem caminho alcançável (acessibilidade); a fixação dupla é defeito a corrigir, não exceção de gosto. *Checa:* um mecanismo de fixação; pan com caminho nativo (rolagem com snap ou empilhamento) testado por teclado.
+- **Sem movimento reduzido.** Qualquer nível do botão de movimento sem alternativa reduzida. *Vício:* conforto vestibular e preferência da pessoa ignorados. *Libera:* nunca. *Checa:* **gate**.
+- **Omitir fallbacks.** Instrução de "não incluir fallbacks genéricos" (movimento reduzido, transparência reduzida, sem JS, forced colors). *Vício:* exclui quem mais precisa. *Libera:* nunca. *Checa:* **gate**.
+
+## Conteúdo e copy
+
+- **Rótulos genéricos.** Sim, Não, OK, Enviar. *Vício:* não dizem o que acontece. *Libera:* convenção da plataforma ou do sistema existente, registrando a exceção. *Checa:* heurística de texto; verbo mais objeto.
+- **Placeholder como rótulo.** *Vício:* some ao digitar; contraste baixo. *Libera:* nunca. *Checa:* **gate** de estados de formulário.
+- **Código como mensagem.** "Erro 500", "Algo deu errado" sem saída. *Vício:* não ajuda a recuperar. *Libera:* código em detalhe para o suporte, nunca como mensagem principal. *Checa:* heurística; matriz de estados.
+- **Progresso inventado e trabalho falso.** Barra que anda sozinha; atraso encenado para parecer que o sistema "pensa". *Vício:* mente sobre o estado. *Libera:* nunca. *Checa:* **gate** de honestidade.
+- **Piada em hora errada.** Humor em perda de dados, dinheiro, privacidade, acesso perdido ou trabalho bloqueado. *Vício:* trivializa o problema da pessoa. *Libera:* só por decisão explícita do dono sobre o tom, registrada; nunca por default. *Checa:* heurística.
+- **Clichê gerado.** "Elevar", "sem atrito", "desbloquear", "próxima geração", *seamless*, *unleash* e a lista completa em [texto e conteúdo](texto-e-conteudo.md); rótulos poéticos; prova social ensaiada; humildade encenada; micro-frase meta; rótulos de etapa genéricos. *Vício:* soa como qualquer página. *Libera:* copy fornecida pelo dono nunca é reescrita. *Checa:* heurística só para copy gerada.
+- **Cromo de metadado.** Rótulo de versão no hero, rodapé de versão em marketing, contador de estoque decorativo, faixa de cidade e clima, crédito de foto decorativo inventado, sub-rótulo "Marca · Nº 01", mais de um ponto médio por linha, "PALAVRA — fragmento", seta anexada a todo botão e link. *Vício:* simula densidade editorial ou atividade. *Libera:* informação real (lançamento real, estúdio distribuído real, fotógrafo real com permissão). *Checa:* heurística; gate de honestidade quando o dado é inventado.
+- **CTAs de mesma intenção.** "Fale conosco" e "Vamos conversar" na mesma página. *Vício:* a pessoa pensa que são coisas diferentes. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção. *Checa:* um rótulo por intenção.
+- **Nomes de template.** Acme, Nexus, SmartFlow, Cloudly; Fulano de Tal, *Jane Doe*. *Vício:* o mock se anuncia como mock, e mal. *Libera:* rótulo de exemplo explícito. *Checa:* heurística.
+- **Fabricação com cara de real.** Depoimento, cliente, pessoa, logo de terceiro, métrica, preço, benchmark inventados; dado "orgânico" (47,2%, telefone realista) inventado para parecer medido; telefone discável sem rótulo ou e-mail fora de domínio reservado (ver [texto e conteúdo](texto-e-conteudo.md)). *Vício:* alegação falsa, risco legal, sobrevive até a produção. *Libera:* **não se libera**; mock rotulado entra na lista de substituição. *Checa:* **gate** de honestidade.
+- **Imagem que mente.** Imagem gerada representando o produto real; picsum ou placeholder como entrega final; referência colhida em busca no entregável; foto de banco com pessoa identificável endossando produto. *Vício:* deturpa o produto e a licença. *Libera:* imagem gerada com consentimento, rotulada, para mood e textura. *Checa:* **gate**: proveniência e licença por asset.
+- **"Nenhum resultado" sem orientação.** *Vício:* beco sem saída. *Libera:* superfície sem ação possível, que diz isso. *Checa:* matriz de estados (gate 6) e os [tipos de vazio](componentes-e-estados.md#estado-vazio).
+- **Emoji como ícone ou default de copy.** *Vício:* não é sistema; leitura irregular por leitor de tela. *Libera:* voz lúdica, social ou de chat, com parcimônia, fora de ícones e `alt`. *Checa:* heurística.
+- **Banir o travessão.** *Vício inverso:* em pt-BR o travessão é correto em diálogo e aposto, e o meia-risca é o caractere de intervalos; banir quebra a tipografia e a voz. *Checa:* pontuação por locale; a heurística contra travessão-muleta vale só para copy gerada.
+- **Aspas retas.** Aspas do teclado no lugar das tipográficas. *Vício:* acabamento. *Libera:* código. *Checa:* heurística.
+- **Dois registros na mesma página.** Manifesto num bloco, manual no seguinte. *Vício:* voz quebrada. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção. *Checa:* heurística.
+- **Reescrever copy fornecida.** *Vício:* troca a voz do dono pela da ferramenta; pode mudar claim. *Libera:* pedido do dono; sem ele, a sugestão vai separada. *Checa:* heurística; perguntar antes de mudar claims.
+
+## Produto
+
+- **Movimento sem estado.** Animação decorativa em superfície operacional. *Vício:* atrasa quem trabalha. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; em Operar o default é movimento só de estado e feedback. *Checa:* heurística.
+- **Vocabulário inconsistente.** O mesmo controle com formas diferentes em telas diferentes. *Vício:* impede aprender. *Libera:* migração em curso com prazo e dono, registrando a exceção. *Checa:* heurística; componentes do sistema.
+- **Affordance reinventada.** Barra de rolagem com comportamento próprio, controle de formulário estranho, modal fora do padrão. *Vício:* estranheza sem propósito. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção, desde que o comportamento continue acessível; a barra de rolagem pode ser tematizada na cor. *Checa:* heurística.
+- **Spinner no meio do conteúdo.** *Vício:* esconde a forma do que vem e salta ao chegar. *Libera:* spinner inline na ação. *Checa:* matriz de estados.
+- **Gráfico decorativo.** Sparkline, anel de progresso e retângulo com sombra suave no lugar de conteúdo. *Vício:* forma de dado sem dado. *Libera:* são dado (período, escala, valor, fonte). *Checa:* heurística; ver [dados e densidade](dados-e-densidade.md).
+- **Navegação só com ícone.** *Vício:* reconhecimento vira memória. *Libera:* barra de ferramentas de especialista com tooltip e nome acessível, ícones universais. *Checa:* heurística.
+- **Marketing no painel.** Hero, frase de campanha, sequência de entrada numa superfície operacional. *Vício:* erro de classificação. *Libera:* tela de boas-vindas no primeiro uso. *Checa:* heurística.
+- **Estados faltando.** Componente com só o caminho feliz. *Vício:* a implementação inventa o resto. *Libera:* nunca, porque a decisão de estado é exigida por gate (integridade do contrato). *Checa:* **gate**: matriz de estados completa.
+- **Motor de cards animados em dashboard.** Bento com cards que fazem loop infinito (lista que se reordena sozinha, digitação, indicador que respira, carrossel de dados) como padrão de SaaS. *Vício:* distração em superfície de trabalho; viola pausa de movimento. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção, com pausa e movimento reduzido (esses não se liberam). *Checa:* gate de pausa e reduced motion.
+- **Tabela torta.** Status centralizado, números sem `tabular-nums` ou à esquerda, unidade repetida em cada célula, borda em cima e embaixo de toda linha. *Vício:* coluna difícil de varrer. *Libera:* convenção do sistema existente, registrando a exceção. *Checa:* especificação de tabela.
+- **Toast para erro acionável.** *Vício:* some antes da ação e longe da causa, e quem precisa de mais tempo perde a mensagem. *Libera:* nunca (acessibilidade). *Checa:* matriz de estados.
+- **Variar telas do mesmo produto.** *Vício:* quebra consistência. *Libera:* libera quando o brief ou a marca pedem, registrando a exceção; o default é consistência entre telas do mesmo fluxo. *Checa:* heurística.
+
+## Nativo
+
+- **iOS "portado de site".** Barra de navegação ou voltar customizados, gesto de borda desligado ou coberto, botões com cara de web, affordances de hover, glassmorphism à mão no lugar dos materiais do sistema, pilhas de cards em ajustes, ícones da web misturados com SF Symbols, tamanhos em pontos fixos no lugar de Dynamic Type, hex cru no lugar das cores semânticas. *Vício:* o usuário fluente para a cada controle fora do padrão. *Libera:* razão que o usuário agradeceria. *Checa:* heurística de conformidade; ver [adaptação](adaptacao.md).
+- **Android "com pele de iOS".** Só barra inferior copiada do iPhone, voltar que ignora o gesto do sistema, switches e diálogos Cupertino, FABs empilhados, FAB em ação secundária, toast no lugar de snackbar, `px` no lugar de `sp`, sombras arbitrárias no lugar da elevação tonal. *Vício:* idem. *Libera:* idem. *Checa:* heurística de conformidade.
+- **Celular esticado no tablet.** Barra inferior intocada, uma coluna ampliada. *Vício:* desperdício e desconforto. *Libera:* quando o brief limita o produto a uma coluna, registrando a exceção. *Checa:* estrutura por classe de tamanho.
+- **Travar orientação para esconder defeito.** *Vício:* a pessoa perde a paisagem por um bug. *Libera:* tarefa que exige de fato. *Checa:* heurística.
+
+## Sistema e tokens
+
+- **Valor cru em componente.** Hex, px ou duração soltos no componente em vez de token. *Vício:* tema e manutenção quebram. *Libera:* nunca. *Checa:* gate de tokens (ver [sistema de tokens](sistema-de-tokens.md)).
+- **Componente que pula o semântico.** Token de componente apontando direto para um primitivo. *Vício:* a troca de modo não alcança o componente. *Libera:* categorias declaradas como exceção (dimensões sem tema). *Checa:* o validador avisa.
+- **Camadas achatadas na saída.** Gerador ou CSS que grava o valor resolvido em vez de referenciar o semântico. *Vício:* o modo escuro dos componentes quebra. *Libera:* nunca. *Checa:* trocar o modo e ver os tokens de componente seguirem.
+- **Referência quebrada silenciosa.** Token que aponta para algo inexistente e cai num valor qualquer; token usado e não definido num dos modos. *Vício:* defeito vai para produção. *Libera:* nunca. *Checa:* **gate**: `python3 scripts/validar_tokens.py ARQUIVO.json` sai com 0.
+- **Nomes divergentes.** Documentação com um esquema de nomes e código com outro. *Vício:* ninguém acha a variável. *Libera:* nunca. *Checa:* um esquema, gerado a partir da fonte.
+- **Modo pela metade.** O modo escuro sobrescreve fundo e texto mas não primário, foco, status, sobreposição e superfícies elevadas; sobreposição literal igual nos dois temas. *Vício:* contraste não verificado no escuro. *Libera:* nunca. *Checa:* gate de contraste por modo.
+- **Camadas misturadas.** Durações semânticas ou cores de status declaradas na camada primitiva. *Vício:* o tema não sabe o que sobrescrever. *Libera:* nunca. *Checa:* revisão do arquivo de tokens; o validador só confere a direção das referências, não o significado dos nomes.
+- **Componente inventado.** O documento do sistema "sintetiza" componentes que o projeto não tem para ter algo a mostrar. *Vício:* especificação poluída por ficção. *Libera:* nunca; lista vazia declarada. *Checa:* heurística.
+- **Regra normativa antes do build.** Documento do sistema definitivo escrito antes de a direção ser construída e testada. *Vício:* a regra passa a ser defendida contra a realidade. *Libera:* o documento provisório de direção (`direcao.md`), rotulado como provisório e promovido a documento do sistema depois do build (ver [documento do sistema](documento-do-sistema.md)). *Checa:* heurística.
+- **Exemplo que ensina o vício.** Exemplo de tokens ou de documento com creme, serifa e terracota, botão em caixa alta espaçada, elevação no hover, brilho difuso. *Vício:* o exemplo é copiado. *Libera:* exemplo que é o sistema real do dono; fora disso, exemplos sintéticos e neutros. *Checa:* heurística.
+- **Sem governança.** Sistema sem versão, sem changelog, sem depreciação com alias, sem dono; exceção sem dono e sem validade. *Vício:* tokens divergem com o tempo. *Libera:* nunca para sistema compartilhado. *Checa:* `$meta.version` semântico e seção de governança.
+- **Dois sistemas ou sistema falsificado.** Dois design systems no mesmo projeto; recriar à mão o CSS de um pacote oficial; importar os tokens de um sistema para sobrescrever quase tudo; kit de componentes entregue no estado padrão sem a marca. *Vício:* custo dobrado e identidade de ninguém. *Libera:* nunca dois sistemas; pacote oficial quando a direção vem de um sistema existente, com o nome conferido no registro na hora. *Checa:* heurística.
+- **Validador permissivo.** Checagem que isenta preto e branco puros, pula o arquivo global de estilos ou não olha utilitários arbitrários. *Vício:* falsa sensação de governança. *Libera:* nunca. *Checa:* heurística.
+- **Corrigir deriva de passagem.** Ajustar o sistema como efeito colateral de outra tarefa. *Vício:* mudança sem dono nem registro. *Libera:* pedido explícito. *Checa:* deriva é relatada, não corrigida em silêncio.
+- **Regra nascida de anedota.** "Na última vez saíram cinco kickers, então kicker está proibido." *Vício:* um incidente vira lei absoluta. *Libera:* quando a razão de design está escrita, a regra deixa de ser anedota. *Checa:* heurística.
+- **Número mágico como lei.** Padding mínimo de seção, altura máxima de navegação, limite de palavras, contagem de eyebrows aplicados como reprovação automática. *Vício:* quebram em contextos legítimos. *Libera:* sempre como heurística com motivo e escape; gates são só os objetivos. *Checa:* ver [aceite e pré-voo](aceite-e-pre-voo.md).