@andespindola/crow-skills 0.41.0 → 0.42.0

package/skills/crow-design/references/dados-e-densidade.md

@@ -0,0 +1,194 @@
+<!-- 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. -->
+# Dados e densidade
+
+Leia quando a superfície for produto: painel, tabela, ferramenta, administração, área autenticada, qualquer tela em que a pessoa está no meio de uma tarefa e não sendo convencida de nada. Também quando o contrato precisar de gráfico, filtro, busca, atalho de teclado ou orçamento de carga cognitiva.
+
+## O modo produto
+
+Em superfície operacional, o design serve ao trabalho. A falha típica não é ficar sem graça; é a estranheza sem propósito: botão enfeitado, controle de formulário que não combina com o resto, movimento gratuito, fonte de display em rótulo, affordance reinventada para uma tarefa padrão. A régua é a familiaridade conquistada: alguém fluente na categoria confia na interface de cara, sem parar a cada componente ligeiramente fora do lugar. A ferramenta some dentro da tarefa.
+
+O que o modo produto decide de saída (detalhes em [tipografia](tipografia.md), [cor](cor.md) e [espaço e layout](layout-e-espaco.md)):
+
+- **Abre na matéria de trabalho.** Indicadores, filtros, tabela, estado e contexto da tarefa ocupam a primeira tela. Sem hero, sem frase de campanha, sem sequência de entrada orquestrada.
+- **Uma família tipográfica costuma bastar**, bem ajustada para títulos, botões, rótulos, corpo e dado. Escala em rem fixo, razão 1.125–1.2; sem `clamp()` em título de painel (um h1 fluido que encolhe numa sidebar fica pior). Fonte de sistema e sans familiares são permitidas aqui.
+- **Cor contida é o piso.** Acento só em ação primária, seleção atual e indicador de estado, nunca como decoração. Uma segunda camada neutra, levemente mais fria ou mais quente que a superfície de conteúdo, separa sidebar, barra de ferramentas e painéis. Uma superfície isolada pode ganhar cor comprometida quando a cor carrega o dado (um relatório em que uma categoria domina) ou o momento (uma tela de boas-vindas encharcada no primeiro uso).
+- **Vocabulário de estados padronizado:** hover, foco, ativo, desabilitado, selecionado, carregando, erro, aviso, sucesso, informação. Cada um vira token opaco com par de contraste declarado por modo.
+- **Movimento pela coluna Operar de [movimento](movimento.md):** instantâneo 100–150ms, estado 150–250ms, layout e sobreposição até 250ms, sem entrada focal. Propósitos: estado e feedback; carregamento é skeleton com a forma do conteúdo, sem coreografia; revelação decorativa não entra. Ninguém quer assistir à ferramenta carregar.
+- **Navegação padrão é virtude:** barra superior com navegação lateral, breadcrumbs, abas, command palette. A escolha vem da arquitetura de informação, não da estética; sidebar à esquerda não é obrigação, e também não é proibida.
+- **Consistência acima de surpresa.** O mesmo vocabulário visual de tela em tela; se o botão de salvar tem duas aparências, uma está errada. Personalidade fica para momentos (primeiro uso, conclusão, recuperação), não para a página.
+- **Largura total.** Tela de app e produto ocupa a largura disponível, sem coluna centralizada com largura máxima. A medida de leitura limita a prosa (um texto de ajuda, uma descrição longa), não a página; tabelas densas passam de 120ch sem problema.
+
+## Densidade como token
+
+A densidade de linha e de controle é um token com três valores, escolhido por superfície e, quando fizer sentido, ajustável pela pessoa:
+
+| Densidade | Altura de linha | Padding de célula (vertical × horizontal) | Uso |
+|---|---|---|---|
+| Compacta | 40px | 8 × 12px | operação intensa, muitas linhas, ponteiro fino |
+| Padrão | 48px | 12 × 16px | default de tabela e lista |
+| Confortável | 56px | 16 × 16px | leitura frequente, toque, público amplo |
+
+Os números são ponto de partida e a marca ajusta, mas três coisas não cedem. Em `pointer: coarse`, a densidade compacta não se aplica a linhas com ações: o alvo sobe para 44px, porque 40px de linha com um ícone de 16px no meio é um alvo de 16px. Texto de célula fica no piso de 14px (texto secundário) com 4.5:1; abaixo disso, não importa quantas linhas cabem. E a densidade é um conjunto único de tokens por superfície, não um padding escolhido coluna a coluna.
+
+Em densidade alta, linhas de 1px e espaço substituem cards. Card genérico em painel denso é ruído: cada borda e sombra compete com o dado.
+
+## Tabelas
+
+Tabela é a peça central da maioria das superfícies de produto, e é onde o contrato mais costuma deixar a implementação adivinhar. Especifique:
+
+**Alinhamento.** Texto à esquerda (no início da linha, em termos lógicos). Números à direita, com `font-variant-numeric: tabular-nums`, a mesma quantidade de casas decimais na coluna e a unidade no cabeçalho, não repetida em cada célula ("Valor (R$)"). Mono não é a forma de alinhar números: custa largura e legibilidade, e `tabular-nums` resolve; mono fica para código, ID e hash. Status à esquerda, junto do rótulo da linha ou na própria coluna alinhada ao início, com texto e ícone, nunca centralizado (coluna centralizada é difícil de varrer) e nunca só cor. Ações no fim da linha. Datas num formato único por tabela, formatado pelo locale.
+
+**Cabeçalho.** Semântica real (`<th scope="col">`, `<caption>` ou nome acessível da tabela). Cabeçalho fixo (`position: sticky`) quando a tabela rola verticalmente; primeira coluna fixa, a que identifica a linha, quando rola na horizontal, com uma borda ou sombra que aparece só quando há conteúdo escondido sob ela. O cabeçalho fixo usa token da escala de camadas (canônica em [superfície e profundidade](superficie-e-profundidade.md)), não z-index solto.
+
+**Separação entre linhas.** Escolha uma das duas e declare: zebra (faixas alternadas) ajuda em tabela larga, com muitas colunas, em que o olho perde a linha; divisores de 1px bastam em tabela com poucas colunas. Não as duas juntas, e não borda em cima e embaixo de toda linha. O contraste da zebra é sutil e não carrega informação.
+
+**Hover e seleção.** Hover de linha é conforto, não indicador: nada depende dele. Linha selecionada usa token opaco de seleção (não o primário a 10% de opacidade, que muda conforme o fundo) mais o checkbox marcado, e o par fg/bg da linha selecionada tem contraste verificado em cada modo.
+
+**Ordenação.** Cabeçalho ordenável é um botão dentro do `<th>`, com `aria-sort` na coluna ativa e um indicador visível de direção só nela; as demais mostram que são ordenáveis sem parecer ativas. A ordenação padrão é declarada no contrato.
+
+**Filtros com estado visível.** Filtro ativo aparece como chip removível acima da tabela, com a contagem de resultados ("214 de 1.240 faturas") e um "Limpar filtros". O estado de filtro, busca, ordenação e página vai para a URL, para que recarregar ou compartilhar preserve a vista.
+
+**Seleção em massa.** Checkbox no cabeçalho com estado indeterminado quando a seleção é parcial. Ao selecionar, uma barra de ações em massa aparece com a contagem e as ações; selecionar "todos os 1.240" é uma ação explícita, distinta de selecionar a página visível. Ação destrutiva em massa nomeia o número e o objeto ("Arquivar 37 faturas") e oferece desfazer quando for seguro.
+
+**Paginação, carregar mais ou virtualização.** Paginação quando a pessoa precisa de referência estável ("está na página 3"), de link para uma posição ou de contagem total. Carregar mais quando a lista é exploratória e cronológica. Virtualização quando a tabela precisa de milhares de linhas roláveis sem perder desempenho; ela exige altura de linha previsível, cabeçalho fixo e anúncio da posição a tecnologias assistivas, e quebra o "buscar na página" do navegador, por isso a busca da própria tabela passa a ser obrigatória. Scroll infinito sem âncora não entra em tabela de trabalho.
+
+**Overflow e conteúdo extremo.** Texto longo trunca com reticências só quando o valor inteiro continua acessível (expandir a linha, popover acionável por teclado, `title` não basta sozinho); texto de descrição pode quebrar linha. Números nunca truncam: a coluna cresce ou o número é abreviado com o valor inteiro acessível ("1,2 mi", com "1.204.330" no rótulo acessível). Zero, vazio e ausente são estados diferentes: "0" é dado, "Sem registro" é ausência, e a célula vazia sem explicação é dúvida. Largura de coluna vem do conteúdo típico e máximo declarados no contrato.
+
+**Edição inline.** Quando a tabela edita no lugar, a célula editável se distingue sem hover, Enter confirma, Esc cancela e o foco volta à célula; erro de validação aparece na própria célula com texto.
+
+**Celular.** Decida por tabela: virar lista de cartões com rótulo em cada valor (o rótulo da coluna acompanha o dado, não some) ou manter tabela com rolagem horizontal e primeira coluna fixa. Esconder colunas no celular só com caminho para vê-las.
+
+## Filtros e busca
+
+Busca e filtros são a navegação de uma superfície de dados. O contrato decide: onde ficam (acima da tabela, em painel lateral recolhível quando são muitos), se aplicam ao vivo ou por botão (ao vivo para poucos resultados e consultas baratas; botão "Aplicar" quando cada mudança é cara ou há muitos campos), e o que a pessoa vê enquanto espera. Busca ao vivo espera a digitação assentar antes de consultar; algo em torno de 300ms é ponto de partida, ajustado ao custo real da consulta, não regra.
+
+Filtros mostram quantos resultados cada opção traz quando isso evita becos sem saída. Combinações salvas viram "vistas" nomeadas quando a mesma consulta se repete. Resultado de busca destaca o termo encontrado. "Nenhum resultado" diz qual consulta zerou, sugere afrouxar (remover um filtro específico, verificar a grafia) e oferece limpar tudo.
+
+## Dashboards
+
+Dashboard é resposta a perguntas recorrentes, não vitrine de números. O contrato parte das perguntas: o que a pessoa precisa saber ou decidir hoje ao abrir esta tela? Isso entra no primeiro viewport. O resto fica a um clique.
+
+- **Hierarquia de indicadores.** Um indicador principal, dois a quatro secundários e o resto sob demanda. Doze cards de KPI do mesmo tamanho em grade são a parede de opções do mundo dos dados.
+- **KPI só com fonte.** Cada número declara de onde vem, o período, a comparação (contra o quê) e a definição. Sem fonte, ele não entra; com fonte de exemplo, entra rotulado como ilustrativo (ver [texto e conteúdo](texto-e-conteudo.md)).
+- **Sparkline, anel de progresso e barra são permitidos quando SÃO o dado:** uma sparkline com período e valor atual, um anel que mostra 68% de uma meta declarada. Viram vício quando substituem conteúdo: um retângulo com sombra e uma linha decorativa sem eixo, sem período e sem número no lugar de uma informação real. A pergunta de checagem é se a forma pode ser lida e verificada.
+- **Template de número herói** (número enorme, rótulo pequeno, três estatísticas de apoio e um acento) não é dashboard; é composição de marketing.
+- **Atualização.** Dado em tempo real ou com atraso mostra a hora real da última atualização e o que acontece quando falha. "Sincronizado há 4s" inventado é falsificação.
+- **Estados por bloco.** Cada widget tem carregando (esqueleto com a forma do gráfico ou da linha), vazio, erro com tentar de novo e sem permissão, independentes: um bloco que falhou não derruba a tela.
+
+## Gráficos
+
+**Escolha pela tarefa, não pelo efeito.**
+
+| A pessoa precisa | Forma |
+|---|---|
+| Comparar quantidades entre categorias | barras (horizontais quando os rótulos são longos ou há ranking) |
+| Ver tendência no tempo | linha; área só quando o volume acumulado importa |
+| Ver parte de um todo | barra empilhada ou 100%; pizza ou rosca só com poucas fatias (até cerca de 5) e diferenças grandes |
+| Ver distribuição | histograma, box plot |
+| Ver relação entre duas medidas | dispersão |
+| Ver valor contra meta | barra com marcador de meta; anel só com meta declarada |
+| Ver geografia | mapa, só quando a localização é a pergunta |
+
+**Eixos.** Barras começam em zero, sempre: comprimento é a codificação, e cortar o eixo mente. Linhas podem não começar em zero quando a variação é a pergunta, com o eixo rotulado. Rótulos de eixo com unidade; números formatados pelo locale; linhas de grade sutis e poucas.
+
+**Legenda direta.** Rotule a série ao lado da própria linha ou barra sempre que couber; legenda separada obriga a memória a fazer a ponte. Com legenda, a ordem dela segue a ordem visual das séries.
+
+**Paletas de dados** (tokens próprios, definidos em [cor](cor.md) e no [sistema de tokens](sistema-de-tokens.md)):
+
+- **Categórica:** cores distintas entre si também em luminosidade, não só em matiz, para sobreviver a discromatopsia e à impressão em tons de cinza. Validada para os tipos comuns de daltonismo e com contraste de 3:1 de cada marca contra o fundo. Até seis a oito categorias; acima disso, agrupe em "outros" ou use outra forma.
+- **Sequencial:** um matiz (ou uma rampa perceptual) com luminosidade monotônica, do claro ao escuro, para quantidade ordenada.
+- **Divergente:** dois matizes com um ponto médio neutro que significa algo (zero, meta, média), para desvio em duas direções.
+- Cada paleta é reverificada no modo escuro, onde a ordem de luminosidade costuma inverter.
+
+**Nunca só cor.** Forma do marcador, padrão de preenchimento, rótulo direto ou posição carregam a distinção junto com a cor. Destaque de série por cor saturada contra o resto em neutro funciona melhor que oito cores competindo.
+
+**Tooltip acessível.** O tooltip é detalhe, não o único acesso ao valor: os pontos de dado são alcançáveis por teclado quando o gráfico é interativo, o tooltip abre no foco e não só no hover, e fecha com Esc. Todo gráfico tem um resumo textual do que mostra (a conclusão, não "gráfico de barras") e uma tabela alternativa com os mesmos dados, visível sob demanda.
+
+**Movimento em gráfico** entra para transição de estado (filtro aplicado, série trocada), curto, e some com movimento reduzido.
+
+## Teclado e atalhos
+
+Tudo que se faz com ponteiro se faz com teclado, na ordem visual. Em superfície de produto, o contrato vai além do piso:
+
+- **Atalhos para as ações frequentes**, descobríveis: o atalho aparece no tooltip do botão e no item de menu, e uma tecla (geralmente `?`) abre a lista completa.
+- **Sem conflito** com atalhos do navegador, do sistema e de tecnologias assistivas. Atalho de uma única tecla sem modificador precisa poder ser desligado ou remapeado, ou só valer com o componente em foco (WCAG 2.1.4).
+- **Navegação em grade e lista** com setas dentro do componente e Tab para sair dele (um ponto de parada por componente, foco itinerante dentro).
+- **Esc** fecha a camada de cima e devolve o foco a quem a abriu; nunca descarta trabalho sem confirmação.
+- **Seleção múltipla** com Shift e Ctrl/Cmd onde a convenção da plataforma existe.
+
+## Command palette
+
+Entra quando há muitas ações, muitos destinos e uso frequente por quem já conhece o produto. Abre com Ctrl+K ou Cmd+K (o atalho exibido conforme a plataforma), busca tolerante a erro de digitação, mostra recentes antes da busca, agrupa por tipo (navegar, criar, configurar), exibe o atalho de cada ação e segue o padrão de combobox acessível (campo com lista associada, setas navegam, Enter executa, Esc fecha). Ela acelera; não substitui navegação visível, porque o iniciante não sabe que ela existe.
+
+## Carga cognitiva
+
+Carga cognitiva é o esforço mental total para usar a interface. A carga intrínseca vem da própria tarefa e não se elimina, só se estrutura (passos, modelos, padrões, revelação progressiva). A carga estranha vem do design ruim (navegação que exige mapa mental, rótulo que obriga a adivinhar, ruído visual, padrão inconsistente, passos desnecessários) e se elimina sem dó. A carga de aprendizado constrói domínio e é boa quando o padrão é consistente e o feedback confirma o entendimento.
+
+Use como checklist de projeto do contrato, uma caixa por ponto de decisão:
+
+1. **Foco único:** a tarefa principal se completa sem distração de elementos concorrentes?
+2. **Agrupamento em blocos:** a informação vem em grupos digeríveis (como orientação, até cerca de 4 itens por grupo)?
+3. **Proximidade:** o que se relaciona está visualmente junto?
+4. **Hierarquia:** está claro de imediato o que é mais importante?
+5. **Uma coisa por vez:** dá para decidir uma coisa antes da próxima?
+6. **Poucas escolhas:** em cada ponto de decisão, as opções visíveis ficam por volta de 4?
+7. **Memória de trabalho:** a pessoa precisa lembrar algo de uma tela anterior para agir nesta?
+8. **Revelação progressiva:** a complexidade aparece só quando é necessária?
+
+Zero ou uma falha é carga baixa; duas ou três, moderada, a tratar; quatro ou mais, alta. É heurística: não reprova o contrato sozinha, mas carga alta pede correção ou o motivo registrado para manter.
+
+Os números são heurística, não lei. A ideia de que a memória de trabalho segura poucos itens de uma vez (por volta de quatro; cinco a sete já força o limite; oito ou mais sobrecarrega) orienta o agrupamento, mas o que conta é quantas coisas a pessoa precisa considerar ao mesmo tempo para decidir, não quantos elementos há na tela. Uma tabela com 40 linhas não viola nada; um formulário que pede para comparar 9 planos de uma vez, sim. Cede quando o público é especialista e a densidade é o que ele quer, desde que haja hierarquia.
+
+Aplicações concretas:
+
+- **Ações:** 1 primária e 1 a 2 secundárias visíveis; o resto num menu.
+- **Navegação de topo:** por volta de 5 itens, com faixas por plataforma: tab bar do iOS de 2 a 5 seções; barra de navegação do Android de 3 a 5 destinos; acima disso, agrupar em categorias claras, rail ou drawer.
+- **Sidebar de documentação:** por volta de 4 irmãos visíveis por nível antes de agrupar.
+- **Artigo longo:** um caminho de leitura; links relacionados reunidos num bloco no fim em vez de espalhados no meio.
+- **Galeria e portfólio:** uma decisão por tela (qual peça abrir), não filtro, ordenação e tags ao mesmo tempo.
+
+## As oito violações nomeadas
+
+1. **Parede de opções.** Dez ou mais escolhas de uma vez, sem hierarquia. Correção: agrupar em categorias, destacar a recomendada, revelar o resto sob demanda.
+2. **Ponte de memória.** A pessoa precisa lembrar no passo 3 o que viu no passo 1. Correção: manter o contexto visível ou repeti-lo onde é usado.
+3. **Navegação escondida.** É preciso construir um mapa mental de onde as coisas estão. Correção: mostrar sempre a localização atual (breadcrumb, item ativo, indicador de progresso).
+4. **Barreira de jargão.** Termo técnico ou de domínio obriga a traduzir. Correção: linguagem simples; termo inevitável definido no próprio lugar.
+5. **Ruído visual.** Tudo tem o mesmo peso e nada se destaca. Correção: um elemento principal, dois ou três secundários, o resto apagado.
+6. **Padrão inconsistente.** Ações parecidas funcionam de jeitos diferentes em lugares diferentes. Correção: mesmo tipo de ação, mesmo tipo de interface.
+7. **Demanda multitarefa.** A interface pede para ler, decidir e navegar ao mesmo tempo. Correção: sequenciar os passos.
+8. **Troca de contexto.** Para uma única decisão, a pessoa pula entre telas, abas ou modais juntando informação. Correção: colocar junto o que cada decisão precisa.
+
+## Personas de checagem
+
+Percorra a ação principal do contrato com duas ou três destas pessoas, as mais pertinentes à superfície, e anote o que reprova especificamente, não preocupações genéricas.
+
+- **Usuário avançado e impaciente.** Conhece produtos parecidos, pula instruções, procura atalho de teclado, quer selecionar em massa. Pergunte: a tarefa principal sai em menos de um minuto? há atalhos para as ações comuns? o onboarding pode ser pulado inteiro? modais fecham com Esc? existe caminho de especialista? Reprova: tutorial obrigatório, ação primária sem teclado, animação lenta que não se pula, fluxo de um item por vez onde lote seria natural, confirmação redundante em ação de baixo risco.
+- **Iniciante confuso.** Nunca usou algo assim, lê tudo, hesita, interpreta o rótulo ao pé da letra. Pergunte: a primeira ação fica óbvia em 5 segundos? todo ícone tem texto? há ajuda nos pontos de decisão? a terminologia supõe conhecimento prévio? há voltar ou desfazer em cada passo? Reprova: navegação só com ícone, jargão sem explicação, ausência de ajuda, próximo passo ambíguo, ação sem confirmação de que deu certo.
+- **Pessoa que depende de acessibilidade.** Leitor de tela, só teclado, talvez baixa visão, limitação motora ou diferença cognitiva; zoom até 200%. Pergunte: o fluxo inteiro sai só com teclado? todo interativo tem foco visível? imagens têm alt com sentido? o contraste passa AA? mudanças de estado (carregando, sucesso, erro) são anunciadas? Reprova: interação só de clique, foco invisível, significado só por cor, campo ou botão sem rótulo, ação com tempo limite sem extensão, componente customizado que quebra o fluxo do leitor de tela.
+- **Testador de estresse.** Empurra o caminho feliz: 0 itens, 1.000 itens, texto muito longo, emoji, texto RTL, colar de planilha, voltar, recarregar no meio, abrir em duas abas. Pergunte: o que acontece nas bordas? o erro se recupera ou deixa a interface quebrada? recarregar no meio preserva o estado? algo parece funcionar e falha em silêncio? Reprova: falha silenciosa, erro que expõe detalhe técnico, vazio sem orientação, perda de dados ao navegar, comportamento diferente para interações iguais.
+- **Pessoa no celular, distraída.** Uma mão, polegar, interrompida a toda hora, rede lenta. Pergunte: as ações principais estão na metade de baixo da tela? o estado sobrevive a sair e voltar? funciona em rede lenta (3G)? formulários usam autocompletar e bons defaults? alvos têm pelo menos 44×44? Reprova: ação importante só no topo, progresso perdido ao trocar de app, campo de texto onde uma seleção serviria, asset pesado em toda tela, alvo pequeno ou colado no vizinho.
+
+Escolha por tipo de superfície:
+
+| Superfície | Personas principais |
+|---|---|
+| Landing e marketing | iniciante, estresse, celular |
+| Dashboard e administração | avançado, acessibilidade |
+| Checkout e e-commerce | celular, estresse, iniciante |
+| Onboarding | iniciante, celular |
+| Dados e análise | avançado, acessibilidade |
+| Formulário longo e wizard | iniciante, acessibilidade, celular |
+
+Personas específicas do projeto saem dos usuários descritos no brief ou no documento de produto (quem são, em que situação, com que objetivo), uma ou duas no máximo, com perfil, comportamentos e o que as afasta. Sem dado real de público, não invente: use as cinco acima.
+
+## Estados de dados
+
+Toda superfície de dados declara, por bloco, o que aparece em cada estado e com que texto (o vocabulário está em [texto e conteúdo](texto-e-conteudo.md) e a matriz geral em [componentes e estados](componentes-e-estados.md)):
+
+- **Carregando:** esqueleto com a forma do que vem (linhas da tabela com a altura da densidade escolhida, barras do gráfico), nunca spinner no meio do conteúdo. Recarga de dado já exibido mantém o dado antigo visível, marcado como atualizando, em vez de apagar tudo.
+- **Vazio, nos seis tipos canônicos de [componentes e estados](componentes-e-estados.md#estado-vazio):** primeiro uso (o que vai aparecer, por que importa, como começar, modelo ou importação); limpo pelo usuário (toque leve, recriar fácil); sem resultado de busca (qual consulta, sugestão); filtro sem resultado (qual filtro, removê-lo); sem permissão (por quê, quem concede); falha ao carregar (é erro, não vazio: o que aconteceu e tentar de novo, sem fingir que não há dados).
+- **Parcial:** mostrar o que chegou, marcar o bloco ou a linha que falhou com o motivo e tentar de novo; totais calculados sobre dado incompleto dizem que são parciais.
+- **Erro:** o que falhou, se o dado exibido está desatualizado e desde quando, e a ação de recuperação. Erro de um widget não derruba a tela.
+- **Sem permissão:** em linha ou campo, o dado restrito é marcado como restrito, não some calado; em tela inteira, explica quem concede o acesso.
+- **Offline:** dado em cache rotulado com a hora em que foi obtido; ações que exigem rede ficam indisponíveis com explicação, ou entram numa fila declarada.
+- **Extremos:** um item (a tabela não vira um cartão gigante), mil itens (paginação ou virtualização decididas), número muito grande (abreviação com valor inteiro acessível), texto muito longo, valor negativo, moeda e data por locale.

package/skills/crow-design/references/direcao-estetica.md

@@ -0,0 +1,209 @@
+<!-- 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. -->
+# Direção estética: botões, registro, mundo e sistemas
+
+Leia depois da [leitura do brief](leitura-do-brief.md), quando for decidir quanto a superfície pode variar, mover e adensar, qual mundo visual ela habita e se a direção vem de um sistema oficial ou de uma estética própria.
+
+## Os três botões
+
+Três escalas de 1 a 10, com nomes fixos (não crie apelidos como "nível de animação" ou "variância de layout"; um nome por conceito evita que duas regras falem da mesma coisa com palavras diferentes):
+
+- **VARIÂNCIA (V):** 1 é simetria perfeita; 10 é composição assimétrica e ousada.
+- **MOVIMENTO (M):** 1 é estático; 10 é cinemático, com física.
+- **DENSIDADE (D):** 1 é galeria arejada; 10 é cockpit.
+
+**Não há baseline silencioso.** Os valores saem dos sinais do brief e aparecem na linha de leitura. Sem sinal nenhum, use 5/4/4 e diga que foi por falta de sinal. O ajuste é conversacional: o dono diz "mais calmo" e o botão desce, sem editar arquivo.
+
+### Sinal para faixa
+
+| Sinal no brief | V | M | D |
+|---|---|---|---|
+| minimalista, limpo, calmo, editorial, estilo Linear | 5–6 | 3–4 | 2–3 |
+| premium de consumo, estilo Apple, luxo, marca | 7–8 | 5–7 | 3–4 |
+| lúdico, experimental, Awwwards, agência | 9–10 | 8–10 | 3–4 |
+| landing, portfólio, marketing sem outro sinal | 7–9 | 6–8 | 3–5 |
+| confiança, setor público, regulado, acessibilidade crítica | 3–4 | 2–3 | 4–5 |
+| produto denso, painel, ferramenta interna | 2–4 | 1–3 | 6–8 |
+| redesign preservando | atual | atual | atual |
+| redesign refazendo | atual +2 | atual +2 | atual |
+
+### Presets de partida
+
+Landing SaaS 7/6/4; landing de agência 9/8/3; landing premium de consumo 7/6/3; portfólio de designer 8/7/3; portfólio de dev 6/5/4; editorial ou blog 6/4/3; setor público 3/2/5; painel ou produto denso 3/2/7; formulário ou fluxo transacional 3/3/5; documentação 3/2/5.
+
+Redesign preservando é igual ao existente nos três botões. Subir o movimento "um ponto" por conta própria muda a linguagem da marca; qualquer aumento vira proposta explícita ao dono. Redesign refazendo parte de +2/+2 e mantém a densidade atual, porque o conteúdo e a tarefa não mudaram. Em Operar, a densidade é guiada pelo dado e pela frequência de uso; o preset é só ponto de partida.
+
+### O que cada faixa implica
+
+As faixas descrevem intenção de composição, não classes de uma stack. A tradução para código é de quem implementa.
+
+**VARIÂNCIA**
+- **1–3:** grade simétrica de 12 colunas, paddings iguais, eixo central.
+- **4–7:** sobreposições moderadas (por exemplo, um bloco subindo 2rem sobre o anterior com `margin-block-start` negativo), proporções de mídia variadas lado a lado (4:3 junto de 16:9), títulos alinhados ao início sobre dados centrados.
+- **8–10:** masonry, colunas fracionadas desiguais (`2fr 1fr 1fr`), recuo grande de um lado (`padding-inline-start: 20vw`, sempre propriedade lógica para sobreviver a RTL).
+- **Colapso móvel, em qualquer faixa acima de 3:** abaixo do ponto em que o conteúdo deixa de caber (tipicamente perto de 768px, decidido pelo conteúdo), a composição vira uma coluna em largura total com margem lateral segura (ordem de 16px) e respiro vertical (ordem de 32px). Assimetria no celular é estouro, não estilo.
+- **Hero com V acima de 4:** evite o hero centralizado; use divisão conteúdo/asset, espaço assimétrico ou hero preso à rolagem. Cede para manifesto, editorial e anúncio de lançamento, em que o centro é a mensagem.
+
+**MOVIMENTO**
+- **1–3:** nada anima sozinho; só resposta a hover, foco e pressão.
+- **4–7:** transições de estado com propriedades explícitas, por exemplo `transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)`, nunca `transition: all` (anima layout e cor sem controle); cascatas curtas com atraso por índice (ordem de 60–100ms por item, com teto total).
+- **8–10:** reveal por rolagem, parallax, rolagem como narrativa, física; scroll-driven com `animation-timeline: view()` dentro de `@supports`, Intersection Observer ou a biblioteca que o projeto já usa. Nunca listener de scroll nem posição de rolagem guardada em estado.
+- **Movimento declarado é movimento entregue:** com M acima de 4, a primeira tela tem entrada, há reveal na rolagem e os controles principais respondem fisicamente. Se isso não vai existir, baixe o botão para 3.
+- **Movimento motivado:** cada animação serve a hierarquia, narrativa, feedback ou transição de estado. Se não dá para justificar numa frase, corte.
+- **Efeitos caros só com M acima de 5:** hover magnético e microinterações perpétuas (pulso, máquina de escrever, flutuação, brilho, carrossel) entram só com M acima de 5 e quando a seção ganha com isso; loop com mais de 5 segundos tem pausa. Mola (ordem de rigidez 100 e amortecimento 20) só onde há gesto ou interrupção. No máximo um marquee por página.
+- **Movimento reduzido vale em todo nível do botão**, inclusive 1–3: remove deslocamento espacial, mantém opacidade, cor e feedback, para loops. Conteúdo é visível por padrão e o reveal anima só com `prefers-reduced-motion: no-preference` e JavaScript ativo. Tokens e tabela de durações em [movimento](movimento.md).
+
+**DENSIDADE**
+- **1–3:** faixa arejada, padding de seção de 128–192px (8–12rem) no desktop.
+- **4–7:** faixa padrão, 64–96px (4–6rem).
+- **8–10:** faixa cockpit, 24–48px. Os números vêm da tabela canônica em [sistema de tokens](sistema-de-tokens.md); o registro premium usa a faixa arejada.
+- **Em 8–10,** além dos paddings justos: divisórias de 1px no lugar de cards, números com `font-variant-numeric: tabular-nums` e alinhados à direita. Monoespaçada fica para código e identificadores; usá-la em todo número custa largura e leitura sem ganhar alinhamento. Com D acima de 7, cards genéricos não entram.
+- Os valores saem dos tokens de densidade (ver [sistema de tokens](sistema-de-tokens.md) e [layout e espaço](layout-e-espaco.md)), nunca de um padding fixo para toda seção.
+
+## Registro: seguro ou ousado
+
+O registro é parâmetro do dono, não traço de personalidade da ferramenta. Ele vai de **seguro** (familiar, refinado, convenção bem executada) a **ousado** (forma comprometida, risco declarado). Sem instrução, o default é proporcional ao modo: Operar e Ler ficam no seguro e refinado; Persuadir e Experienciar ficam comprometidos. "Mais ousado" ou "mais seguro" ditos durante uma rodada de direção aberta regulam a próxima proposta, não disparam execução.
+
+Pressão por ousadia nunca atravessa a marca: dentro de um sistema existente, o registro ousado se expressa com os tokens e as fontes que já existem; trazer matiz ou fonte nova é proposta de mudança do sistema. Registro premium (técnicas de alto acabamento) é um caso específico do ousado, com guarda-corpos próprios em [registro premium](registro-premium.md).
+
+## Trilhas de processo
+
+O dono escolhe a trilha; sem escolha, ela segue o tamanho do pedido, e a trilha adotada é declarada.
+
+- **Leve:** estender o sistema. Leitura declarada, valores herdados, estados afetados, as caixas pertinentes de [aceite e pré-voo](aceite-e-pre-voo.md). Sem derivação de mundo nem candidatos.
+- **Padrão:** superfície nova num mundo existente. Leitura, cinco a sete estruturas materialmente diferentes de composição (o mundo fica fixo; variam topologia, sequência, densidade, hierarquia e foco), regras por eixo, tokens, pré-voo completo.
+- **Completa:** criar ou substituir o mundo. Tudo da padrão, mais derivação do mundo, candidatos, julgamento, contrato de direção, documento do sistema e governança.
+
+A verificação do próprio contrato tem no máximo duas rodadas: confira tudo de uma vez, corrija tudo de uma vez, confirme uma vez e pare. O que sobrar vira pendência nomeada.
+
+## Derivar o mundo (trilha completa)
+
+1. **Derivação.** Escreva em uma frase o mecanismo único do produto; descreva a cena real do público (quem, onde, sob que luz); nomeie a casa cultural do assunto; diga o que a primeira superfície precisa provar.
+2. **O sulco (rut).** Nomeie a página que a categoria sempre entrega e o seu oposto previsível; os dois ficam fora da lista de candidatos. Quando o brief já pinta a própria imagem (um nome de produto evocativo, uma metáfora governante, um artefato com título), a leitura literal dele também entra no sulco e ocupa no máximo um candidato.
+3. **Sete candidatos.** Do mundo cultural do público, liste sete sistemas visuais, artefatos, lugares, rituais ou tradições gráficas e de tela que ele conhece de cor, cada um com uma linha sobre por que ressoa e consegue carregar o mecanismo, em ordem de ressonância. Tradições gráficas valem tanto quanto objetos físicos: notação, publicações, programas de identidade, gráficos de dados, interfaces que o público lê todo dia. Pergunte como o produto seria como objeto físico e como o mundo dele era antes da web. Quase duplicatas contam uma vez. Se mais de três candidatos são da mesma família material, a derivação parou no artefato mais óbvio: cave até cobrir pelo menos três famílias.
+4. **Direções completas.** Cada candidato forte vira uma direção que junta um mundo reutilizável a uma experiência concreta de primeira tela.
+5. **Viabilidade antes de apresentar.** Toda direção apresentada é verdadeira e construível: relações e afirmações que ela visualiza são reais, há paleta e família de componentes reais, composição distinta com uma experiência específica do produto, e ela cabe nos assets, ferramentas e orçamento de desempenho disponíveis. Candidato que falha em verdade é trocado antes. Material ilustrativo é permitido quando rotulado (ver [texto e conteúdo](texto-e-conteudo.md)); recusar uma direção ousada só porque o dado de demonstração ainda não existe é timidez vestida de honestidade.
+
+### Desafiantes e julgamento
+
+Escolha a direção líder e tome como desafiantes as duas ou três seguintes mais fortes, de pelo menos uma família material diferente da líder (sem sorteio, o que quebra o vício de ranking é essa exigência de família; uma ferramenta de sorteio é opcional). Para cada desafiante:
+
+- **Funda antes de julgar:** a forma e a gramática do sistema vêm do desafiante; todos os fatos vêm do produto; em conflito, ganha a clareza.
+- **Julgue em dois eixos, e só dois:** identificação do público e clareza do produto.
+- **Veredito, decidido antes de qualquer empréstimo:** *vence* (supera a líder nos dois eixos e vira a candidata), *competitiva* (vence um eixo e fica como alternativa completa) ou *recusada* (perde os dois).
+- **Recusada doa disciplina:** nomeie a única disciplina do sistema dela que a líder não tem (o comprometimento total de uma paleta, a coragem de densidade de uma grade, a honestidade estrutural de uma forma) e eleve a líder até ela. A doação é de ambição e disciplina, nunca de figurino; motivo copiado é fantasia, não elevação. Cada elevação aparece como linha própria, com o nome do doador.
+
+### Apresentar e comprometer
+
+Apresente **uma** direção comprometida, já elevada, com: mundo, primeira tela, caminho do visitante, interação-assinatura, alcance em outras superfícies e risco honesto. As alternativas *vence* e *competitiva* aparecem completas (no máximo três); as *recusadas* aparecem compactas, com o veredito e o que a líder herdou delas, e continuam adotáveis a pedido. O veredito informa a escolha do dono, não a substitui. Registre no contrato as alternativas descartadas com o motivo; sem isso, a próxima sessão reabre a decisão.
+
+Se o dono rejeitar o conjunto, a nova rodada exclui tudo o que já foi mostrado; depois de duas rejeições seguidas, pergunte que qualidade está faltando. Por iniciativa própria, refaça só por razão factual (a direção não carrega a verdade ou a tarefa do produto), nunca por gosto. Direção fixada pelo dono ou pelo brief vence qualquer candidato.
+
+**Saída canon, sempre disponível:** o padrão da categoria executado sem ironia. É porta do dono, oferecida em silêncio, não recomendada nem pesada contra as outras. Quando ele a escolhe, peça dois ou três produtos ao lado dos quais isto deve ficar, faça do acabamento deles a barra, execute com fidelidade total sem peculiaridade contrabandeada e registre a preferência como compromisso de marca no contexto de produto. Familiar e eficaz é destino legítimo.
+
+Colisões entre a direção e o que foi fixado se resolvem campo a campo: o que o dono ou o brief fixou prevalece; nas dimensões abertas, a direção continua valendo por topologia, controles, vocabulário de estado e ritual; quando só o material colide com uma direção fixada ou um compromisso de marca, traduza a expressão material e nomeie a tradução.
+
+Um mundo escolhido é sistema operante, não referência de mood: paleta e material, tipo e composição, topologia, controles e estados, regras responsivas. O contrato especifica cada átomo (navegação, botões, campos, links) no vocabulário da forma; componente de prateleira sem ajuste dentro de uma forma comprometida é lapso. Referências de acabamento calibram o nível de execução, nunca a composição.
+
+Comps de composição (imagem ou wireframe) são opcionais, entram só com pedido, ferramenta disponível e consentimento, e variam topologia, sequência, densidade, hierarquia e foco, nunca o mundo. O prompt de um comp começa pela estrutura, não pelo mood. Três perguntas a cada comp: parece um pôster? o assunto sumiu? o modo é legível sem legenda? Mais carregado é mais alto, não mais ousado.
+
+**Comps de decisão** (opcionais, com as mesmas condições de pedido, ferramenta e consentimento) ilustram as direções apresentadas para a escolha do dono: um comp por alternativa, na ordem de leitura em que as direções aparecem (a comprometida primeiro, depois as *vence* e *competitiva*, depois a saída canon quando oferecida), no aspecto da superfície real (paisagem no desktop, **retrato no mobile**), com o prompt guardado ao lado do comp para que a rodada seja reproduzível. Comp de decisão mostra o mundo de cada direção; nenhum vira artefato entregue nem vai para o código.
+
+Construir a partir de uma imagem aprovada ou a partir do contrato escrito é escolha do dono, registrada como preferência do projeto: a imagem fixa o padrão de composição e permite a forma mais ousada, mas custa mais e pede rodadas de ajuste; o contrato escrito é mais enxuto e leva a ambição para a PRIMEIRA TELA, a interação-assinatura e a gramática de movimento, que a revisão confere no comportamento. Nenhum dos dois é desconto de comprometimento.
+
+A aprovação é um ponto único e registrado: quem aprovou, quando e qual direção. Se o dono delegou a aprovação, isso aparece já na primeira resposta.
+
+## Gates por modo
+
+A direção é aceita só se passa o gate do modo:
+
+- **Persuadir:** a abertura torna a oferta inteligível e desejável, expõe uma ação clara e demonstra algo que só este produto prova; conversão vive dentro do vocabulário da forma (gancho de uma linha, ação primária visível, ordem de leitura legível). Forma comprometida que esconde a oferta ou a ação ainda não terminou de traduzir.
+- **Operar:** a expressão nunca obscurece tarefa, estado ou affordance familiar.
+- **Ler:** compreensão e orientação permanecem intactas.
+- **Experienciar:** a obra lidera desde a primeira tela.
+
+## Calibração anti-cluster
+
+Interfaces geradas convergem para poucas aparências, independentemente do assunto:
+
+1. Fundo creme quente, serifa display de alto contraste e acento terracota ou vermelho-sinal.
+2. Quase preto com um único acento neon e bordas brilhando.
+3. Hairlines editoriais de jornal, serifa display itálica e rótulos pequenos em mono espaçada.
+
+Todas são legítimas quando o brief as pede. Onde o brief deixa a estética livre, cair numa delas é falha da autochecagem: se alguém consegue adivinhar a estética só pela categoria, ou pela categoria mais o que ela costuma evitar, refaça até que nenhuma das duas respostas seja óbvia. A quarta armadilha é **o default vestindo a roupa do assunto**: creme com serifa para um assunto de livros, mono para um assunto técnico, letra manuscrita para uma livraria. O mundo do livro inclui pano de encadernação, linha, sobrecapa, guarda e efêmera de prateleira, que cobrem o espectro saturado inteiro; papel creme é o menor canto desse mundo.
+
+Energia não é inimiga de confiança: restrições negativas do brief ("sem gamificação", "sem exagero") excluem esses recursos, não a exuberância, e adjetivos sobre o comportamento do produto ("apoio discreto") não ditam a energia da superfície. Um mundo fixado pelo brief fixa o mundo, não a versão mais mansa dele. Defaults recorrentes de interface gerada (gradiente roxo-azul, hero centralizado sobre malha escura, três cards iguais, vidro genérico em tudo, microanimação em loop por toda parte, sem serifa genérica sobre ardósia quase preta) e o catálogo completo estão em [anti-padrões](anti-padroes.md). Variação existe só contra esses defaults genéricos, nunca contra a marca ou o sistema existentes.
+
+## Estratégia de cor como decisão de direção
+
+A estratégia vem antes das cores e faz parte da direção:
+
+- **Contida:** neutros e um acento. Piso de Operar e Ler.
+- **Comprometida:** uma cor saturada cobre de 30 a 60% da superfície.
+- **Paleta cheia:** três ou quatro papéis nomeados.
+- **Encharcada:** a superfície é a cor.
+
+Persuadir e Experienciar têm permissão para as estratégias mais fortes quando o brief deixa. A cor se compromete em escala de página (campos que ocupam regiões), não em acentos espalhados. Claro ou escuro nunca é default: escreva uma frase de cena física (quem usa, onde, sob que luz) e deixe que ela decida; quais modos existem é decisão com o dono. Papéis, rampas, contraste e modos em [cor](cor.md).
+
+## Contrato de direção
+
+A direção comprometida fecha num bloco de cerca de 150 palavras, em seis linhas, guardado no brief da superfície:
+
+- **TESE:** a ideia que esta superfície possui e o arranjo padrão da categoria que ela recusa.
+- **MUNDO PRÓPRIO:** paleta e linguagem de componentes, específicas o bastante para serem reconhecíveis com todo o conteúdo removido.
+- **HISTÓRIA:** o que o visitante entende, passa a crer e faz.
+- **PRIMEIRA TELA:** a composição exata: o que fica onde, em que escala, e onde está a ação primária.
+- **FORMA:** a forma escolhida, sua posição na lista ordenada de candidatos e, se uma ferramenta de sorteio foi usada, a chave que ela devolveu.
+- **ACABAMENTO:** a condição de saída: contrato conferido em [aceite e pré-voo](aceite-e-pre-voo.md), documento do sistema escrito a partir do que foi construído e todo asset entregue com proveniência registrada.
+
+Se uma linha soa como mood ("elegante e moderno"), a direção ainda não foi decidida. O contrato de direção é documento de projeto e **nunca** vai para código-fonte ou artefato entregue ao navegador: nem comentário de HTML ou framework, DOM oculto, `<template>`, atributos `data-*`, saída renderizada, props ou estado serializados, payload de componente de servidor, bundle, metadados ou JSON-LD, texto só para leitor de tela, nem arquivo servido ao lado do artefato. Um otimizador que remove metadados de desenvolvimento não é fronteira de segurança.
+
+## Brief para sistema oficial
+
+Quando a direção vem de um sistema de design existente, use o pacote oficial dele, não uma recriação à mão do CSS, nem um import cujos tokens você sobrescreve quase inteiros. Um sistema por projeto: nada de dois sistemas de componentes na mesma superfície (Fluent com Carbon, shadcn/ui dentro de Material). Mapa indicativo:
+
+| Sinal no brief | Sistema | Referência de pacote (conferir) |
+|---|---|---|
+| ecossistema Microsoft, enterprise, painéis | Fluent | `@fluentui/react-components` ou `@fluentui/web-components` |
+| ecossistema Google, Material | Material 3 | `@material/web` com tokens M3 |
+| analytics e B2B da IBM | Carbon | `@carbon/react` e `@carbon/styles` |
+| app para lojistas Shopify | Polaris | componentes web do Polaris ou a variante React vigente |
+| produto no ecossistema Atlassian | Atlassian Design System | `@atlaskit/*` e `@atlaskit/tokens` |
+| ferramenta de desenvolvedor no GitHub | Primer | `@primer/css` ou `@primer/react-brand` |
+| serviço público do Reino Unido | GOV.UK Design System | `govuk-frontend` |
+| serviço público dos Estados Unidos | USWDS | o pacote atual do USWDS (o nome já mudou entre versões) |
+| MVP local, agência com prazo curto | Bootstrap | Bootstrap 5.x |
+| base React acessível sem marca própria | Radix | `@radix-ui/themes` |
+| SaaS com componentes próprios | shadcn/ui | gerador oficial; nunca entregue no estado default (raio, cor, sombra e tipo ajustados aos tokens) |
+| marketing SaaS ou IA já em Tailwind | Tailwind | a versão do projeto (v4 por padrão em projeto novo; detecte v3) |
+
+**Regra de honestidade:** o contrato nomeia o sistema e a razão; o nome exato do pacote, a versão e o comando de instalação são conferidos no registro de pacotes na hora da execução por quem implementa, porque mudam com o tempo. Nada nesta tabela é comando de instalação.
+
+**Links canônicos por sistema** (documentação pública de cada mantenedor; conferir na data de uso, porque endereços e versões mudam):
+
+- Material 3: [m3.material.io/develop/web](https://m3.material.io/develop/web), [material-web.dev](https://material-web.dev/theming/material-theming/), [github.com/material-components/material-web](https://github.com/material-components/material-web).
+- Fluent 2: [fluent2.microsoft.design](https://fluent2.microsoft.design/get-started/develop), [componentes React](https://fluent2.microsoft.design/components/web/react/), [web components](https://learn.microsoft.com/en-us/fluent-ui/web-components/), [github.com/microsoft/fluentui](https://github.com/microsoft/fluentui).
+- Carbon: [carbondesignsystem.com](https://carbondesignsystem.com/), [tutorial React](https://carbondesignsystem.com/developing/react-tutorial/overview/), [github.com/carbon-design-system/carbon](https://github.com/carbon-design-system/carbon).
+- Polaris: [componentes web do App Home](https://shopify.dev/docs/api/app-home/web-components), [polaris-react.shopify.com](https://polaris-react.shopify.com/components).
+- Atlassian: [atlassian.design](https://atlassian.design/get-started/develop), [design tokens](https://atlassian.design/tokens/design-tokens).
+- Primer: [primer.style](https://primer.style/), [github.com/primer/css](https://github.com/primer/css), [github.com/primer/brand](https://github.com/primer/brand).
+- GOV.UK: [design-system.service.gov.uk](https://design-system.service.gov.uk/components/button/), [github.com/alphagov/govuk-frontend](https://github.com/alphagov/govuk-frontend).
+- USWDS: [designsystem.digital.gov](https://designsystem.digital.gov/documentation/developers/), [github.com/uswds/uswds](https://github.com/uswds/uswds).
+- Bootstrap 5.3: [grade](https://getbootstrap.com/docs/5.3/layout/grid/), [card](https://getbootstrap.com/docs/5.3/components/card/).
+- Tailwind: [modo escuro](https://tailwindcss.com/docs/dark-mode), [anúncio da v4](https://tailwindcss.com/blog/tailwindcss-v4).
+- Radix Themes: [tema](https://www.radix-ui.com/themes/docs/components/theme), [github.com/radix-ui/themes](https://github.com/radix-ui/themes).
+- shadcn/ui: [ui.shadcn.com/docs](https://ui.shadcn.com/docs), [github.com/shadcn-ui/ui](https://github.com/shadcn-ui/ui).
+- MDN e CSSWG (técnicas sem pacote): [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter), [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme), [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion), [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout), [scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), [especificação](https://drafts.csswg.org/scroll-animations-1/).
+- Apple HIG: [Materials](https://developer.apple.com/design/human-interface-guidelines/materials), [Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass), [adotar Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass).
+
+## Estéticas sem pacote oficial
+
+Não existe biblioteca oficial destas estéticas; especifique-as como técnica com valores e fallbacks, e rotule a aproximação quando imitam efeito de plataforma.
+
+- **Vidro (glass):** desfoque de fundo só em camada fixa ou sobreposta (nav, overlay, legenda sobre mídia), nunca em container que rola nem em card de conteúdo; nunca em painel, setor público ou B2B sóbrio. Receita, fallbacks por modo e cenários de contraste na fonte canônica, [superfície e profundidade](superficie-e-profundidade.md).
+- **Bento:** CSS Grid com células de tamanhos mistos; N itens geram N células, sem célula vazia; duas ou três células com fundo diferente (imagem, cor de marca, padrão, tint) dão ritmo. Colapso para uma coluna declarado.
+- **Brutalismo:** CSS nativo, bordas cruas, tipo bruto, sombra dura deslocada permitida porque é a gramática deste mundo (fora dele, é vício). Contraste e foco continuam no piso.
+- **Editorial:** grade assimétrica, hierarquia tipográfica forte, serifa só pelo critério de [tipografia](tipografia.md); atenção ao cluster de hairlines com itálica e mono.
+- **Dark tech:** fundo escuro não puro, um acento de alta luminância. É o cluster 2 por definição: só quando o brief o fixa, e o acento passa contraste como texto e como não-texto.
+- **Aurora e malha de gradiente:** gradientes radiais ou SVG, estáticos ou de deriva lenta; nada de filtro animado. Texto sobre gradiente é verificado no ponto de pior contraste.
+- **Tipografia cinética:** CSS, scroll-driven com `@supports` ou a biblioteca do projeto; o texto continua texto real, selecionável e lido pelo leitor de tela, e fica estático com movimento reduzido.
+- **Aproximação de Liquid Glass:** não existe folha oficial para a web; o contrato rotula como "aproximação de Liquid Glass", nunca como o material da plataforma. A receita canônica (valores claro e escuro, sombra tingida, transparência reduzida opaca, `forced-colors`) está em [superfície e profundidade](superficie-e-profundidade.md).