Ir ao conteúdo
SEED engenharia

Material · §93 · v2.00

Vidro e metal — a camada de material

O acabamento que o decisor adotou em 2026-09-12 e aprovou nas nove telas de referência: vidro translúcido com desfoque na navegação e nos cartões que flutuam, metal no rail e na ação primária, luz no fundo da casca e dois micro-movimentos que os estados do sistema desligam. Mesma marca — cor, tipografia e logo não mudam. Tudo abaixo é gerado: a regra vem do canon (byte a byte no Markdown desta página),a amostra é montada só com o registry (@seed/material), e a bancada mede o custo na sua máquina.

A amostra viva — montada com o registry

Esta amostra não tem CSS próprio de material: cada peça leva uma classe .seed-mat-* do arquivo seed-material.css, que o módulo único emite — a mesma receita das telas. O <html> desta página tem data-material="vidro-metal"; sem o atributo nada pinta. Os números são ilustrativos.

Barra superior em vidro

Geração do mês (ilustrativo)

1.284 MWh

+4,2 %

Chamados abertos (ilustrativo)

17

−3 hoje

Próxima manutenção (ilustrativo)

Subestação Bravo — abrir a regra →

Controles — os tokens ao vivo

Mexem nos tokens desta página (opacidade e desfoque do vidro, intensidade do metal, movimento); nada aqui muda o canon. O que mudar de verdade passa por gate com a régua na mesa (§93 MA11).

As classes do registry

Instalação: npx shadcn@latest add @seed/material (depende de @seed/tokens); depois data-material="vidro-metal" no <html> e a classe no elemento que faz o papel. Onde não vai (MA3, MA12): conteúdo denso, diálogos, menus, tudo que rola dentro de si; e-mail e impresso nunca. O passo a passo inteiro está no LEIA-ME do registry.

classepapel (§93.3)
.seed-mat-cascaa casca da aplicação — fundo com luz, uma por tela (MA4)
.seed-mat-vidrovidro estático: barra superior, sidebar (MA1)
.seed-mat-vidro-cartaocartão de vidro que flutua e responde ao ponteiro; a tinta de marca dentro vira a forte (MA9)
.seed-mat-metal-railo rail em metal, sobre o token do rail (MA2)
.seed-mat-metal-acaobotão primário e avatar: a cor continua o token; entra só o reflexo para o lado escuro (MA2)
.seed-mat-kpinúmero grande com brilho
.seed-mat-pilula-success · -danger · -warning · -infopílula com luz: a cor do estado na opacidade do vidro, sem desfoque
.seed-mat-trilho + .seed-mat-trilho-cheioo sulco e o preenchimento de uma barra
.seed-mat-reflexopeça opaca que ganha só o reflexo deslizante

Telas que já carregam a camada

Medido no arquivo de cada tela publicada (o atributo no <html>): 24 de 25 telas de referência. Todas passam na régua de contraste rasterizado nos dois temas (rito de fechamento).

Sem a camada: Documento / leitura — a leitura de documento é conteúdo opaco por regra (§93 MA3 e C25) e o documento exportado não tem chrome.

Custo em lista longa — a bancada da MA-P2

Vidro com desfoque custa GPU, e a regra do canon (MA12) só libera vidro fora do chrome e dos cartões de painel depois de medir numa máquina de campo. Esta bancada é a medição: monta N cartões de vidro sobre a casca com luz, rola a lista por três segundos medindo o intervalo entre quadros, e repete a mesma cena sem a camada. O custo é a diferença. Rode na máquina em que o SIGA vai viver e mande as duas linhas (com o texto da máquina) pelo pedido de cobertura; um agente pode chamar window.seedMatMedir(n, ms) e ler o objeto devolvido.

Como ler. O quadro médio não desce abaixo do intervalo do monitor (16,7 ms a 60 Hz, 8,3 ms a 120 Hz): com e sem a camada nesse valor quer dizer que as duas cenas seguram a taxa do monitor. O custo, quando existe, aparece no pior quadro — e a bancada diz em que quadro ele caiu: no quadro 1 é o primeiro desenho da rolagem com a camada; no meio da rolagem é engasgo — e nos quadros acima de 50 ms.

A regra, direto do canon

MATERIAL — vidro e metalComponentes · v2.00 · §93ler no lugar ↗dbab4f16

Para quem lê sem ter visto a conversa. Em 2026-09-12 o decisor do design system, Rafael Sant'Ana, escreveu que as telas feitas com o DS estavam "muito básicas, botões, barras, menus etc. ta faltando alguma coisa" e pediu pesquisa sobre "liquid Glass metalizado em DS de grandes empresas" com dois exemplos lado a lado. A pesquisa (13 fontes datadas, em 09-pesquisa/material-vidro-metal-2026-09-12/pesquisa.md) e o par renderizado foram ao gate no mesmo dia; o veredito dele, verbatim, está no MANIFESTO §204.4: V-1 = B (adotar a proposta inteira), V-2 opacidade do vidro 80 % no claro · 72 % no escuro · desfoque 18 px · movimento ligado, V-3 "fundo com luz · barra superior em vidro · rail em metal escovado · cartões em vidro · botões primários em metal · números KPI com brilho · barras e pílulas com luz · micro-movimento" — a sidebar não foi marcada e fica opaca (MA-P4, exposta a veto). Os valores viraram tokens na F10.1 (seed-tokens.md §3d), a régua que mede texto sobre vidro nasceu na F10.3 (o instrumento anterior lia o fundo por CSS, e vidro não é uma cor), e esta seção é a regra (F10.2): onde a camada vai, onde não vai, como se emite e como se mede. A F10.4 aplicou a regra nas duas primeiras telas no mesmo dia; o gate visual dele decide se ela vira estável.

Vocabulário desta seção (para quem chega por uma fatia): material = o acabamento da superfície (translucidez, desfoque, luz de borda, reflexo), sem mudar cor, tipografia nem logo · vidro = superfície translúcida que desfoca e satura o que está atrás (backdrop-filter) · metal = superfície opaca com reflexos de luz em gradiente por cima da cor do token · casca = o contêiner da aplicação (o .app do shell; numa tela-documento, a página) · canvas = o fundo sobre o qual as peças assentam (CP1 do seed-composicao.md) · pior pixel = a menor razão de contraste entre a tinta do texto e qualquer pixel de fundo atrás de um glifo (régua RC, F10.3) · piso = 4,5 para texto normal e 3,0 para texto grande (WCAG 2.2 SC 1.4.3, nível AA).

93.1 Natureza e fronteira#

Material é camada transversal de acabamento, não componente e não pattern: ela veste peças que os §1–§92 já especificam, sem criar nenhuma. Vale para toda tela que declare data-material="vidro-metal" no <html> — sem o atributo, nada muda um pixel (o interruptor é o que permite a mesma tela existir "como hoje" e "com material" sem duas árvores). Mesma marca: cor, tipografia e logo continuam os do DS; a camada só mexe em material, profundidade (sombras em camadas, fundo com luz) e movimento (dois micro-movimentos, desligáveis). Aposta da casa, não prática de mercado — a pesquisa leu oito sistemas corporativos e nenhum usa metal em controles; ele decidiu sabendo disso (§204.5).

93.2 Decisões MA1–MA14#

# Decisão Porquê / número medido Descartado
MA1 Vidro na camada de NAVEGAÇÃO e nas peças que FLUTUAM sobre o canvas: barra superior (§46 SH10), sidebar (§46 SH4 — por veredito dele no gate F10.4, "V-M4 sidebar: vidro"; até 2026-09-13 ficou opaca porque V-3 não a marcara), cartões do painel (§48 PN2/PN21a), cúpulas e pílulas de estado ("com luz": tinta do estado na opacidade do vidro + linha especular, sem desfoque). Receita única no módulo (vidro, vidro_cartao, pilula) Apple (HIG 2025) e Fluent (Acrylic): vidro é da navegação e do que flutua, nunca do conteúdo. A régua RC mediu a primeira aplicação: sobre vidro e luz, no claro, nenhum texto cai abaixo do piso (painel 298/298) vidro em tudo (o conteúdo branco anulava o efeito e vidro dentro de vidro reduz legibilidade — visionOS, Fluent) · pílula com backdrop-filter dentro de cartão de vidro (vidro dentro de vidro)
MA2 Metal no chrome e na ação primária: rail (§46 SH15, sobre --seed-rail-background), botão primário (§1, action-primary), avatar da barra. Regra de contraste do metal: o gradiente só vai do token para o lado ESCURO onde há texto CP20 (a tinta passa nos dois extremos, nunca na média): branco sobre action-primary já mede 4,60 no claro, o piso — clarear qualquer extremo reprovaria. Medido: o metal melhora o botão (4,60 → 4,91) e o rail fica em 4,73 no pior rótulo ("Compras", sob a faixa especular) com --seed-mat-metal em 1 metal que clareia o token (reprova por construção) · metal em superfície de dado (CP20 P1: gradiente jamais em dado)
MA3 O que FICA OPACO: conteúdo denso (tabela §40, lista longa §92, a lente do painel com edição direta, texto corrido, formulário), diálogos e menus, e tudo que rola dentro de si. (A sidebar esteve nesta lista até 2026-09-13 — V-3 não a marcara, MA-P4; o gate F10.4 a mandou para o vidro, V-M4, e ela foi para a MA1.) Fluent proíbe acrílico em superfície grande e em painel vertical opaco; a leitura densa é onde a legibilidade paga primeiro (Apple recuou três vezes em um ano por isso). [inferência, a conferir na fonte]: backdrop-filter estabelece bloco de contenção para descendentes position: fixed, e a lente do painel abriga o menu de contexto fixo — mais um motivo para ela ficar fora vidro no conteúdo (o .conteudo do shell, a lente #lente-os do painel)
MA4 Fundo com luz SÓ na casca, uma por tela: --seed-mat-canvas pintado por dois pseudo-elementos da casca (um fixo, um que respira); a casca mantém surface-subtle como cor declarada — o canvas do CP1 continua lá O CP1 (canvas = surface-subtle) não é supersedido: a cor do canvas segue declarada e é o que as réguas por cor declarada leem (medido: casca transparente fazia o render-contraste.mjs medir texto contra o body, 1,79 falso); a luz é pintura por cima, e quem a mede é a régua RC no pixel. Luz na família da marca, derivada da rampa turquesa por color-mix — nenhum hex novo (§14.1) canvas dentro de peça · luz por gradiente de COR (CP20 proíbe fora do chrome; aqui é LUZ em alfa baixo, a classe do véu do PN21b) · casca transparente
MA5 Micro-movimento com função e desligável: (a) o reflexo do cartão e do hero desliza no sobrevoo (--seed-mat-sheen-duration, 700 ms); (b) o fundo respira (--seed-mat-breath-duration, 18 s, translação e escala de uma cópia do canvas a 35 % de opacidade); prefers-reduced-motion zera as duas durações no token e a cópia móvel some V-2 dele: movimento ligado. Movimento consome token (PN21h); os dois estados de sistema são respeitados pelo próprio gêmeo. A régua RC mede o estado de repouso com as animações congeladas — declarado no cabeçalho dela duração literal · movimento que não para com a preferência do sistema · movimento em dado
MA6 Fallbacks EXECUTÁVEIS no token — o consumidor consome só os derivados (--seed-mat-glass, --seed-mat-glass-filter, sombras, bordas), nunca escreve backdrop-filter: blur(18px) à mão Sem backdrop-filter ou com reduzir transparência o vidro vira sólido; mais contraste tira luz, grão e véu e põe borda forte; reduzir movimento zera as durações — tudo no gêmeo (§3d). Quem escreve o valor à mão perde os quatro. O módulo extrai os blocos condicionais do gêmeo e os embute no preview media query por consumidor (um esquece)
MA7 Régua obrigatória: toda tela com data-material passa na guarda RC (guarda-material.py, rito de fechamento) nos dois temas — veredito pelo PIOR PIXEL atrás de cada glifo HV1-c (§71): "quem cria um fundo novo cria a obrigação de medir o contraste sobre ele"; vidro é o fundo novo por definição. A guarda diz a cobertura ("2 de 2 telas medidas") — placar sem denominador não é placar aprovar por cor declarada (o instrumento que existia dizia "não medi" sobre vidro — MA-P1)
MA8 A camada é EMITIDA pelo módulo único material_bloco.py — receita por peça, nomeada; o gerador de cada tela passa só os seletores. Receita nova nasce no módulo; nunca CSS copiado no molde Regra da casa (uma implementação por peça): o estudo tinha a camada num CSS de 20 kB com literais; copiá-lo em dois moldes seria duas verdades. O módulo mede os --seed-mat-* no gêmeo (nunca lista à mão), extrai os fallbacks e aborta se o bloco do preview não emitir um token que a camada referencie (NV-01 mecanizado) CSS de material no molde · lista de tokens digitada
MA9 Dentro de cartão de vidro, a tinta de marca é a -strong: o escopo do cartão remapeia --seed-text-brand e --seed-text-link para --seed-text-brand-strong. Emenda de 2026-10-18 (folha 11, P4 do estudo MA-P8): vale em TODO vidro — barra superior e sidebar (receita vidro) também, não só o cartão; fecha a MA-P10. Veredito dele, verbatim: MA1 = "a" — "sim — uma linha no gerador do material; no claro, o link da barra sai de 4,00 e as reprovações vão de 1 a 0" seed-tokens.md §5-g: text-brand mede 4,60 só contra o BRANCO PURO — o vidro nunca é branco puro. Medido pela régua RC no painel (2026-09-12): nove textos em text-brand sobre cartão de vidro em 4,42–4,49 (títulos-insight em itálico e os links "abrir →"); com o remapeamento, 298/298 no claro. text-link tem o mesmo valor de text-brand nos dois temas (gêmeo v1.24); no escuro os dois -strong já são iguais reescrever cada consumidor (o remapeamento por escopo é o precedente do [data-tinta="familia"] do §48) · afrouxar o piso
MA10 Nenhuma textura de período fixo em pixel: a textura do metal é grão aleatório (--seed-mat-grain, feTurbulence a 5 %) e reflexo contínuo O "escovado" de 1 px a cada 2 px do estudo virou moiré quando ele viu a folha a 39 % de escala (MA-P5, §204.6) — textura de período fixo não sobrevive a escala; grão aleatório e reflexo contínuo sobrevivem. Vale para tudo que será visto em miniatura (folha de gate, thumbnail, celular) traço repetido (repeating-linear-gradient de 1 px)
MA11 Calibração do metal por peça, com a régua na mesa: o único botão é --seed-mat-metal; calibrar no escopo de uma peça exige reemitir no escopo os tokens que multiplicam pelo botão (material_bloco.calibracao_metal(), texto lido do gêmeo); todo valor calibrado entra na tabela do §93.5 com o número medido Errata da v1.24 dos tokens (v1.25, §3d): o var() dentro do valor de uma custom property é resolvido onde ela é declarada (o :root), não onde é consumida — a régua devolveu os mesmos números em 1, 0,7 e 0,4 até o conserto. Medido no rail: 1 → 4,73 · 0,7 → 5,38 · 0,4 → 5,86 no pior rótulo sobrescrever só o botão no escopo (não faz nada) · declarar os tokens em * (sairia da paridade G2) · o 20 % do controle do gate (era reação ao moiré)
MA12 Alcance declarado: vidro fora do chrome e dos cartões do painel — lista longa, cartões que rolam, página institucional — está liberado desde 2026-09-14 (MA-P2 fechada por veredito dele, MANIFESTO §221.1; piso de campo medido em 2026-09-14 (MANIFESTO §220.2): 4 núcleos · 8 GB · monitor de 60 Hz · janela 2560 px — as duas cenas seguram a taxa do monitor (16,7–17 ms por quadro com e sem a camada) e o único custo é UM quadro isolado de 50–67 ms por rolagem de 3 s, [inferência] no primeiro desenho; nenhum custo contínuo em cinco portes de máquina), sempre sob a régua obrigatória (MA7) e com a bancada pública https://ds.seed.eng.br/material/#sec-custo para quem quiser medir a própria máquina; até 2026-09-14 esta linha dizia "espera a medição de GPU em máquina de campo"; telas sem gerador não recebem a camada antes de ganhar gerador (MA-P3, fechada em 2026-09-14 — as seis ganharam gerador; regra §14.4); e-mail e impresso: proibido — nenhum cliente de e-mail da casa suporta backdrop-filter [convenção nossa; a matriz de clientes do seed-email.md é a fonte] e sombra e gradiente não sobrevivem à impressão (CP20, DI §4c) Microsoft: acrílico é GPU-intensivo e desliga em economia de bateria; medir antes de espalhar é a regra "declarar um limite não é medi-lo" vidro em lista longa sem medir · material em e-mail
MA13 Vidro SOBRE IMAGEM (2026-10-18, folha 11, P5 do estudo MA-P8) — a tela DECLARA, por atributo: o elemento que pinta a imagem (o que tem background-image, ou um invólucro de <img>/<picture>/<video> sem mais nada dentro; um <img> não tem ::after), posicionado (relative, absolute, fixed ou sticky — é o bloco de contenção do véu; o módulo não força position), leva data-mat-midia e ganha o véu --seed-mat-media-dim sobre --seed-preto (35 % no escuro, 0 % no claro); cada peça de vidro que assenta sobre essa imagem leva data-mat-sobre="midia" e ganha o piso --seed-mat-glass-alpha-midia (92 % no escuro; 82 % no claro — decisão da sessão, exposta a veto, 2026-10-18: a prancha do estudo não embutia a Montserrat e media o claro na fonte de reserva; com a fonte real, a cobaia do DS dava 1 texto a 4,48 no claro com o vidro no V-2 de 80 %; medido variando só esse piso: 81 % → 4,53 · 82 % → 4,66 · 84 % → 4,80; ele aprovou o resultado "0 reprovações nos dois temas", e 82 % é o menor piso medido que o entrega com folga), por max() sobre o alfa do V-2 e reemitido no escopo da peça (MA11). As duas regras saem do módulo junto com qualquer vidro (atributo que não casa não pinta pixel), nas telas e no registry. Toda declaração nova passa na régua (MA7); sem tela de referência usando hoje, a cobaia declarada 06-validacao/provas/vidro-midia/vidro-midia-declarado.html (gerador gen-prova-vidro-midia.py) está na guarda-material.py do rito, nos dois temas, e a contraprova sem declarar reproduz a MA-P9. Veredito dele, verbatim: MA2 = "a" — "sim, 92 % e véu 35 %" Apple HIG Materials: "If the underlying content is bright, consider adding a dark dimming layer of 35% opacity." Medido no estudo (prancha, régua RC, 27 textos): sem isto o escuro reprova 5 textos, 3,04–4,08; com P2 + P4 + P5 (92 % / 35 %), 0 nos dois temas, pior 4,61; calibração 86/88/90/92 % × véu 35/45 %, a escolhida é a de menor custo visual com pior ≥ 4,6. Medido no DS (cobaia, 2026-10-18): ver §93.4, "Terceira aplicação" a variante clear da Apple (texto miúdo de software de gestão não sobrevive) · troca automática claro/escuro lendo o pixel (exige JavaScript) · véu de 45 % (4,66, mas escurece a imagem inteira: custo 28,5 contra 22,2) · véu no vidro em vez da imagem (o véu é do conteúdo)
MA14 Vidro mais ESPESSO no topo (2026-10-18, folha 11, P2 do estudo MA-P8): a tinta das peças vidro e vidro_cartao é um gradiente vertical de --seed-mat-glass-thick (o alfa + --seed-mat-glass-thick-delta = 10 pontos, teto 100 %) no topo até --seed-mat-glass a 45 % da altura (constante ESPESSURA_FAIXA do módulo: a faixa onde mora o título). Os 80 % / 72 % do V-2 continuam sendo o mínimo. Veredito dele, verbatim: MA2 = "a" — "sim, 92 % e véu 35 %" (a pergunta MA2 da folha 11 juntou P2 + P5) Apple HIG Materials: "Thicker materials, which are more opaque, can provide better contrast for text"; HIG Color: "Liquid Glass appears more opaque in larger elements like sidebars". No claro o contraste só sobe; no escuro, não (o surface-raised escuro é mais claro que o canvas — medido na "Terceira aplicação" do §93.4: nenhum texto cruzou o piso). Sem a P2 a P5 precisaria de piso de 96 % (medido no estudo) baixar qualquer ponto abaixo do V-2 · espessura por peça (um número só, no token)

93.3 Receitas — o que cada peça consome (a fonte é o módulo; isto é a leitura humana)#

peça (chave no módulo) seletores hoje tokens consumidos
casca (casca) .app (shell, chat, detalhe, gantt, lista, quadro, referência, tabela) · .painel (painel) fundo declarado --seed-surface-subtle; pseudo-elementos com --seed-mat-canvas; respiração com --seed-mat-breath-duration; a casca é contexto de empilhamento (isolation: isolate) para a luz ficar acima do fundo e abaixo do conteúdo
vidro (vidro) .topbar · .sidebar (V-M4, 2026-09-13) — nas oito telas com rail --seed-mat-grain (ladrilho de 160 px, o tamanho do SVG) sobre a tinta do vidro — desde 2026-10-18 (MA14) o gradiente --seed-mat-glass-thick 0 % → --seed-mat-glass 45 %; backdrop-filter: var(--seed-mat-glass-filter); anel --seed-mat-glass-border + --seed-mat-glass-shadow; desde 2026-10-18 o remapeamento MA9 (tinta de marca -strong)
cartão de vidro (vidro_cartao) section.bloco:not(#lente-os) o mesmo (inclusive a tinta MA14), mais --seed-mat-metal-specular como camada que desliza (largura 220 %, posição 100 % → 0 no sobrevoo), --seed-mat-glass-shadow-hover, e o remapeamento MA9
vidro sobre imagem (MA13; sai junto com vidro ou vidro_cartao, sem chave própria) por atributo: [data-mat-midia] (a imagem) · [data-mat-sobre="midia"] (a peça de vidro sobre ela) — hoje só na cobaia 06-validacao/provas/vidro-midia/ véu: ::after com color-mix(in srgb, var(--seed-preto) var(--seed-mat-media-dim), transparent), a imagem tem de ser posicionada (o módulo não força position: a forma com :where() saía fora do interruptor na guarda RG-8 do registry, e a forma dentro dele venceria o position: absolute da tela); piso: --seed-mat-glass e --seed-mat-glass-thick reemitidos no escopo com max(var(--seed-mat-glass-alpha), var(--seed-mat-glass-alpha-midia)) (piso_sobre_midia(), texto lido do gêmeo)
metal do rail (metal_rail) .rail (oito telas; intensidade = o token, V-M3) --seed-mat-grain, --seed-mat-metal-specular, --seed-mat-metal-sheen, --seed-mat-metal-curve sobre --seed-rail-background; arestas --seed-mat-metal-edge
metal da ação (metal_acao) .btn-prox, .btn-solucao (painel) · .avatar (shell e as sete telas) · .btn-enviar (chat, action-primary) a cor continua o token de ação; background-image: var(--seed-mat-metal-action); --seed-mat-metal-action-edge; pressionado afunda (translateY(1px) scale(.985), HV1-b)
KPI com brilho (kpi) .kpi .valor (painel) · .stat .num (chat, lista, tabela — o número da faixa de estatística no papel titulo-tela; na referência o número usa corpo-denso e não é KPI) tinta em gradiente text-primary → text-secondary (background-clip: text); em mais contraste volta a tinta lisa
pílula com luz (pilula) .pilula.pos (feedback-success-bg) · .pilula.neg (feedback-danger-bg) a cor do estado em --seed-mat-glass-alpha; linha --seed-mat-glass-specular; sem desfoque
trilho (trilho) · preenchimento (trilho_cheio) .prog-trilho, .brs .trilho, .trilho-r, .stack · os i de cada um anel --seed-mat-glass-border por dentro do sulco · linha --seed-mat-glass-specular no preenchimento
reflexo (reflexo) .hero só o reflexo deslizante (--seed-mat-metal-specular), em pseudo-elemento abaixo do texto (isolation: isolate)

Constantes estruturais do módulo (não são valor de marca, e cada uma carrega o motivo no código): ladrilho do grão = 160 px (o tamanho do próprio SVG), largura do reflexo = 220 % (para poder deslizar), opacidade da cópia móvel do fundo = 0,35 (baixa o bastante para não dobrar a luz; a régua mede com ela parada).

93.4 O que a régua mediu na primeira aplicação (2026-09-12, viewport 1440 px, dois temas)#

tela tema textos medidos pior pixel onde estado
tela-shell.html v0.9 claro 71 4,52 link "Comercial" da trilha (text-link sobre o conteúdo opaco, pré-existente) PASS
tela-shell.html v0.9 escuro 71 4,60 botão "1180" da barra de provas (instrumento, não a tela) PASS
tela-painel.html v0.16 claro 298 4,60 botão "Família (proposta)" da barra de provas PASS
tela-painel.html v0.16 escuro 299 4,58 micro-rótulo "Geração do mês" (text-secondary) do primeiro KPI, sob vidro no ponto mais quente da luz PASS

O caminho até esse placar mudou quatro coisas, todas registradas onde moram: (1) MA-P6 — o rótulo ativo do rail vazava 1 px da pílula (errata E-CF-06 no §46; conserto no gerador); (2) a tinta de marca no vidro media 4,42–4,49 → MA9; (3) a luz do canvas escuro derrubava o micro-rótulo do KPI a 4,41 → tokens v1.25 (a luz cai de 40 %/26 % para 26 %/18 %; o alfa do vidro, dele, não mudou); (4) a calibração por escopo não fazia nada → MA11 e a errata da v1.24. O que a régua NÃO mede está no cabeçalho dela: texto coberto por outro elemento, texto não pintado, componente inativo, estados fora do repouso.

Segunda aplicação (F10.5, 2026-09-13, viewport 1440 px, dois temas) — e o ponto cego que ela achou#

A régua rodou nas nove telas com material. Antes de qualquer conserto: 12 reprovações em 6 telas, todas no mesmo lugar — o primeiro (às vezes o segundo e o terceiro) rótulo branco do rail, sob a luz do topo do --seed-mat-metal-sheen (30 % de branco no topo): "Comercial" 3,62 (chat, referência, tabela) e 3,25 (lista), "Obras" 3,99 (lista), "Usinas" 3,67 (quadro) e 4,27 (gantt), "Propostas" 3,77 (quadro); piso 4,5. Por que a primeira aplicação não viu: o shell tem o item ativo na primeira posição do rail, e a pílula clara com tinta escura cobre exatamente a faixa onde a luz é mais forte — o pior rótulo branco medido lá ("Compras", 4,73) estava na terceira posição. Prova do ponto cego: o próprio shell, com a pílula do primeiro item removida por CSS de variante, reprova no mesmo número (3,62). Não era gosto: a regra MA2 (o gradiente só vai do token para o lado escuro onde há texto) já proibia luz ali, e a luz passou por acidente de posição. Candidatos medidos nas 8 telas × 2 temas: sem luz no topo → 16/16, pior rótulo do alto do rail 5,32; 8 % no topo, transparente a 18 % → 16/16, pior 4,69 ("Comercial", lista, escuro). Ficou o 8 % — tokens v1.26 — por ser o mais próximo do que ele aprovou em V-M1, com margem da mesma ordem que o shell já tinha; a alternativa sem luz vai renderizada à folha do gate F10.5. --seed-mat-metal segue em 1.

tela tema textos medidos pior pixel onde estado
tela-chat.html v0.2 claro · escuro 79 · 79 4,60 · 4,60 botão "Recolher chat" da barra de provas (instrumento) PASS
tela-detalhe.html v0.3 claro · escuro 75 · 75 4,60 · 4,96 link "Usina Alfa" (text-link sobre branco, pré-existente) · avatar em metal PASS
tela-gantt.html v0.2 claro · escuro 132 · 132 4,60 · 4,60 botão "Linha de base" da barra de provas PASS
tela-lista.html v0.4 claro · escuro 162 · 162 4,60 · 4,69 link "Finanças" da trilha · rótulo "Comercial" (1.ª posição do rail, sob a luz de 8 %) PASS
tela-quadro.html v0.2 claro · escuro 80 · 80 4,60 · 4,96 título de cartão (text-link sobre branco) · avatar em metal PASS
tela-referencia.html v0.3 claro · escuro 78 · 78 4,52 · 4,89 link "Comercial" da trilha (pré-existente) · rótulo "Comercial" do rail PASS
tela-tabela.html v0.3 claro · escuro 137 · 137 4,52 · 4,89 link "Obras" da trilha (pré-existente) · rótulo "Comercial" do rail PASS
tela-shell.html v0.9 · tela-painel.html v0.16 (remedidas com a v1.26) claro · escuro 71 · 71 · 298 · 299 4,52 · 4,60 · 4,60 · 4,58 os mesmos pares da tabela acima PASS

Nenhum texto sobre vidro ou sobre a luz do canvas ficou abaixo do piso em nenhuma das nove telas; os piores pares são todos pré-existentes (tinta de marca sobre branco, 4,52–4,60) ou do instrumento (a barra de provas). Gate F10.5 aprovado por ele em 2026-09-13 (as sete telas: "aprovo"; MANIFESTO §212). Três instrumentos por cor declarada aprenderam a camada com o sinal certo, nunca com exceção (linha de base medida no HEAD antes de mexer em cada um): a suite-composicao (RAIL-02) exige, por peça, o anel do estado dela — vidro → anel --seed-mat-glass-border, opaca → anel border-subtle (CP17); a guarda-colisao (SH1-c) passa a contar o nó de texto só no eixo em que o elemento de fato transborda (a casca transborda 11–13 px em Y pela cópia móvel do fundo, e a régua achava um rótulo do gantt 91 px além em X — dentro de um rolador próprio); o contraste-composicao (rota 1) compõe cada parada do gradiente do metal sobre a cor opaca do botão/avatar e toma a pior (antes caía no pixel e lia o canvas fora do círculo do avatar: 1,09 falso). Faixas de estatística em vidro foram renderizadas e descartadas sem gate: assentam sobre o conteúdo opaco (surface-raised) e vidro sobre branco não muda pixel nenhum — MA3 e MA12 ficam como estão.

Terceira aplicação (folha 11, 2026-10-18, viewport 1440 px, dois temas) — P2 + P4 + P5 nas 23 telas e na cobaia#

Régua RC (guarda-material.py, a linha do rito), duas rodadas iguais (22:16Z e 22:46Z, 0 textos com razão diferente entre elas), contra o HEAD 556c8386 medido com a mesma régua às 22:18Z:

  • As 23 telas com data-material: 46 de 46 medições sem texto abaixo do piso, como no HEAD; o pior pixel de cada tela ficou igual ou subiu, exceto tela-painel.html no escuro (4,59 → 4,56, micro-rótulo "Geração do mês" do primeiro KPI — ainda acima do piso, folga de 0,06).
  • "Contraste só sobe" (estudo MA-P8) não vale no escuro: no tema escuro surface-raised (#1D272D) é MAIS CLARO que o canvas, e vidro mais espesso clareia o fundo do texto claro. Medido: 230 textos com razão menor, a maior queda 0,28 (painel, número "9" do KPI, 6,08 → 5,80); 125 textos com razão maior. Nenhum cruzou o piso.
  • Cobaia declarada (vidro-midia-declarado.html, 28 textos): escuro 0 abaixo, pior 4,68 ("Geração do mês"); claro 1 abaixo: o link "abrir →" do cartão, 4,48. Contraprova sem declarar: escuro 3 abaixo (3,32 · 4,06 · 4,10 — a MA-P9 reproduzida), claro o mesmo 4,48. Repetida com a janela a 1000 px de altura: os mesmos números.
  • Por que o claro do estudo dava 0 e aqui dá 1: a prancha do estudo não embutia a Montserrat (o texto saía na fonte de reserva). A mesma cobaia sem os @font-face mede 4,55 no claro, o número do estudo. Com a fonte do DS, o "abrir →" (text-brand-strong sobre vidro a 80 % sobre a foto clara) cai a 4,48. Medido variando só o piso do CLARO na cobaia (--seed-mat-glass-alpha-midia): 80 % (o de hoje, = sem piso) → 4,48 · 81 % → 4,53 · 82 % → 4,66 · 83 % → 4,71 · 84 % → 4,80. Piso do claro = 82 %: decisão da sessão, exposta a veto, 2026-10-18 (ele aprovou o resultado "0 reprovações nos dois temas", MA2 = "a"; o 0 % do claro vinha da medição sem a fonte real; nenhuma tela de hoje declara vidro sobre imagem, então o piso não muda pixel nelas). Remedido com o piso aplicado: ver a linha abaixo.

93.5 Calibrações registradas#

peça --seed-mat-metal pior rótulo medido (régua RC) estado
rail do shell 1 (o token) "Compras" 4,73 (piso 4,5) decidido por ele em 2026-09-13 ("V-M3 metal do rail: 1"); 0,7 (→ 5,38) e 0,4 (→ 5,86) foram renderizados lado a lado na folha do gate F10.4
luz do topo do metal-sheen (todas as telas com rail) 8 % de branco no topo, transparente a 18 % (era 30 % → 6 % a 18 %; tokens v1.26) "Comercial" na 1.ª posição do rail 4,69 (lista, escuro); sem luz nenhuma daria 5,32 medido na F10.5 (2026-09-13): com 30 %, 12 rótulos brancos do alto do rail em 3,25–4,27; o shell só passara porque o ativo ocupa a primeira posição — aplicação da MA2; decidido por ele em 2026-09-13 ("V-M6 luz do topo do rail: 8", MANIFESTO §212) com a alternativa 0 % (pior 5,32) renderizada e descartada

93.6 Fronteiras e pendências#

MA-P2 fechada em 2026-09-14 ("V-MA2.1 MA-P2: fechar", MANIFESTO §221.1 — o piso de campo medido em 2026-09-14 (MANIFESTO §220.2): 4 núcleos · 8 GB · monitor de 60 Hz · janela 2560 px — as duas cenas seguram a taxa do monitor (16,7–17 ms por quadro com e sem a camada) e o único custo é UM quadro isolado de 50–67 ms por rolagem de 3 s, [inferência] no primeiro desenho; nenhum custo contínuo em cinco portes de máquina; a bancada continua pública em /material/#sec-custo, e agora diz em que quadro caiu o pior intervalo) · MA-P3 fechada em 2026-09-14 (as seis telas ganharam gerador e cinco receberam a camada — documento fica opaco por C25 + MA3; gate aprovado, MANIFESTO §218.1 e §220.1) · site (§47) COM a camada desde 2026-09-14 ("V-MA2.2 site: a", MANIFESTO §221.1 — o V-M7 de 2026-09-13 o tinha deixado sem até a MA-P2; tela-site.html v0.3: casca com luz .pagina, cabeçalho em vidro header.topo, ação primária em metal .btn-primario, tinta de marca em text-brand-strong pela §5-g; RC 84/84 nos dois temas; evidência em evidencia-ma-p2/) · MA-P4 fechada em 2026-09-13 (V-M4: a sidebar em vidro, aplicada no gerador e medida — shell 71/71 nos dois temas) · SH-P9 (peso 800 sem face, §46) · SH-P10 fechada em 2026-09-13 ("b-tirar-do-rail": a barra saiu do rail nos 8 moldes; SH5 por região, §46) · a composição shell + painel é do produto (o SIGA compõe: uma casca, um canvas; o conteúdo do shell fica transparente onde os cartões são vidro — supersede candidato do CP-P5 só para telas com material, a decidir no gate) · a suite-composicao.mjs exige canvas = surface-subtle em CAL-01 e continua verdadeira (MA4 mantém a cor declarada) · vitrine, registry e skill herdaram a camada por geração na F10.6 (2026-09-13, MANIFESTO §213): o registry publica @seed/material (/r/material.json → src/styles/seed-material.css, classes .seed-mat-casca, -vidro, -vidro-cartao, -metal-rail, -metal-acao, -kpi, -pilula-success|danger|warning|info, -trilho, -trilho-cheio, -reflexo, tudo sob html[data-material="vidro-metal"], emitido pelo mesmo material_bloco.py das telas — a guarda RG-8 prova interruptor, só tokens e dependência de @seed/tokens); a vitrine publica /material/ (a regra desta seção e o §3d dos tokens byte a byte, a amostra viva montada SÓ com as classes do registry — a página é a primeira consumidora do item —, controles que mexem em --seed-mat-glass-alpha, --seed-mat-glass-blur e --seed-mat-metal ao vivo, a lista das telas com a camada medida no arquivo, e a bancada da MA-P2: N cartões de vidro sobre a casca com luz, rolagem de 3 s, intervalo entre quadros com e sem a camada, exposta a agentes por window.seedMatMedir(n, ms)); a skill seed-ds ganhou o passo do material no modo código. Primeira medição da bancada, nesta máquina de desenvolvimento (8 núcleos, 16 GB, Chrome 153, janela 1440 px, DPR 1; não é a máquina de campo): 60 cartões 8,3 ms com · 8,4 sem; 120 cartões 8,9 · 8,3 (um quadro de 133 ms com a camada, o da montagem); 240 cartões 8,4 · 8,3 — p95 8,5–8,6 ms em todas. Custo indistinguível aqui; a MA-P2 só fecha com o número de uma máquina de campo, e é ela que libera vidro fora do chrome (MA12) e reabre a pergunta do site (V-M7).

Folha 11 (2026-10-18) — o estudo MA-P8 (Liquid Glass da Apple × Viver de IA × SEED). Veredito dele, verbatim: MA1 = "a" — "sim — uma linha no gerador do material; no claro, o link da barra sai de 4,00 e as reprovações vão de 1 a 0" · MA2 = "a" — "sim, 92 % e véu 35 %" · MA3 = "b" (a borda de luz em gradiente, P1, depois — passa antes pela bancada /material/#sec-custo) · MA4 = "b" (a borda de rolagem do cabeçalho do site, P3, e a régua de cantos concêntricos, P6, depois). Aplicado no mesmo dia: P4 → emenda da MA9 (fecha a MA-P10: a receita vidro não trocava a tinta de marca); P2 → MA14; P5 → MA13 (resolve no DS a MA-P9, vidro com texto sobre imagem reprovando no escuro — latente, nenhuma tela de referência põe vidro sobre imagem hoje; a cobaia declarada está no rito).

93.7 Os 8 testes#

  1. Interruptor: sem data-material no <html>, a tela é byte a byte a de antes na parte que não é token.
  2. Nenhum literal de marca na receita — só var(--seed-*); as constantes estruturais estão nomeadas no módulo.
  3. Pior pixel ≥ piso em toda tela com material, nos dois temas (guarda RC no rito, com cobertura impressa).
  4. Os quatro estados de sistema (sem backdrop-filter, reduzir transparência, mais contraste, reduzir movimento) resolvem no token, e a casca volta ao canvas do CP1 em mais contraste.
  5. Cor declarada da casca = surface-subtle — as réguas por cor declarada (render-contraste, contraste-composicao, CAL-01) continuam medindo o que sempre mediram.
  6. Sem vidro dentro de vidro; sem vidro em conteúdo denso; sidebar em vidro por V-M4 (MA1, MA3).
  7. Tinta de marca no vidro é -strong (MA9) — a régua RC é quem confirma.
  8. Regeneração byte-idêntica das telas (duas gerações, mesmo MD5) e as suítes próprias verdes: suite-shell 72 · 0, render-shell 34 · 0, suite-painel 146 · 0, render-painel 37 · 0, render-edicao 142 · 0, render-contraste 6 · 0, guarda-colisao 4 · 0 (com a cláusula nova: fundo recortado por texto não é fronteira), guarda-valor-gemeo 2 · 0, guarda-forced-colors 4 · 0, TP1 2 · 0. F10.5 (2026-09-13, nove telas): régua RC 18/18 medições · suite-composicao 33·0 ×5, 32·0 (quadro), 27·0 (gantt) — os mesmos denominadores do HEAD · suite-detalhe 73·0 · suite-gantt 43·0 · suite-quadro 35·0 · suite-container 66·0 · suite-reflow 7 telas sem FAIL · guarda-colisao 36·0 nas nove e 212·0 no acervo (53 arquivos) · guarda-forced-colors 18·0 · guarda-valor-gemeo 9·0 · guarda-tinta-marca 2·0 · contraste-composicao 18·0 · guarda-tipografia-viva 9·0 · guarda-barra-fixa 9·0 · paridade-tokens 110·0 (supersede v1.26 declarado) · shell e painel regerados byte-idênticos em duas gerações e suítes próprias iguais às acima; guarda-resposta-ponteiro segue reprovando igual ou menos que no HEAD (HV-P4, pré-existente: o metal da ação acrescenta o pressionado que faltava).

(decisão registrada — ver Histórico da seção)

Material — vidro e metalTokens · v1.40 · §03dler no lugar ↗9a593032

Para quem lê sem ter visto a conversa. Em 2026-09-12 o Rafael escreveu que as telas feitas com o DS estavam "muito básicas, botões, barras, menus etc. ta faltando alguma coisa" e pediu pesquisa sobre "liquid Glass metalizado em DS de grandes empresas" com dois exemplos para comparar. A pesquisa (13 fontes datadas) e o par de telas estão em 09-pesquisa/material-vidro-metal-2026-09-12/; o veredito dele, verbatim, no MANIFESTO §204: V-1 = B (adotar a proposta inteira), V-2 opacidade 80 % claro · 72 % escuro · desfoque 18 px · movimento ligado, V-3 fundo com luz · barra superior em vidro · rail em metal · cartões em vidro · botões primários em metal · números KPI com brilho · barras e pílulas com luz · micro-movimento (a sidebar NÃO foi marcada e fica opaca — MA-P4, exposta a veto). Esta seção é o que a F10.1 do roadmap entrega: a camada vira tokens, para o gerador de cada tela emitir o material a partir deles (F10.4) — nunca CSS copiado (regra da casa: uma fonte).

Mesma marca. Cor, tipografia e logo continuam os do DS. Aqui só muda material (translucidez, desfoque, luz de borda, acabamento metálico), profundidade (sombras em camadas, fundo com luz) e movimento (dois micro-movimentos, desligáveis).

⚠ Token existir não é permissão de uso — é o que permite MEDIR. A folha do gate declarou "não medi" o contraste efetivo de texto sobre vidro (MA-P1): o instrumento da casa lê o fundo por CSS e um fundo de vidro é composição de pixel. A F10.3 entrega a régua rasterizada (renderiza, apaga o texto, amostra os pixels atrás de cada caixa de texto, mede o pior pixel contra a tinta declarada) e bloqueia a aplicação: nenhuma tela do acervo consome --seed-mat-* até a régua medir. HV1-c do seed-componentes.md §71: "quem cria um fundo novo cria a obrigação de medir o contraste sobre ele."

Os 21 tokens (grupo semantic.mat do JSON) e os 3 derivados do gêmeo#

(Eram 18 e 2 até a folha 11 de 2026-10-18; os três últimos tokens e o terceiro derivado estão nas quatro linhas marcadas "folha 11" e no bloco logo abaixo da tabela.)

token variável CSS claro escuro de onde vem o valor
mat.glass-alpha --seed-mat-glass-alpha 80% 72% V-2 dele (2026-09-12); piso ≥ 70 % da pesquisa
mat.glass-blur --seed-mat-glass-blur 18px = claro V-2 dele
mat.glass-saturate --seed-mat-glass-saturate 1.45 = claro receita da pesquisa (Fluent)
mat.glass-border --seed-mat-glass-border #FFFFFF9E #FFFFFF21 estudo v1.1 (material.css), branco a 62 % / 13 %
mat.glass-specular --seed-mat-glass-specular #FFFFFFD9 #FFFFFF38 estudo v1.1; é o PN21 do §48 com nome
mat.glass-shadow --seed-mat-glass-shadow inset 0 1px 0 #FFFFFFD9, inset 0 -1px 0 rgba(0,53,47,0.05), 0 1px 2px… inset 0 1px 0 #FFFFFF38, inset 0 -1px 0 rgba(0,0,0,0.25), 0 1px 2px r… estudo v1.1; tinta = turquesa-900 no claro, preto no escuro (como shadow-raised)
mat.glass-shadow-hover --seed-mat-glass-shadow-hover inset 0 1px 0 #FFFFFFD9, inset 0 -1px 0 rgba(0,53,47,0.05), 0 2px 4px… inset 0 1px 0 #FFFFFF38, inset 0 -1px 0 rgba(0,0,0,0.25), 0 2px 6px r… par de glass-shadow no sobrevoo
mat.canvas --seed-mat-canvas radial-gradient(52% 48% at 10% 0%, color-mix(in srgb, var(--seed-turq… radial-gradient(52% 48% at 10% 0%, color-mix(in srgb, var(--seed-turq… estudo v1.1, derivado: turquesa-400/300/500 por color-mix, rampa surface-subtle → surface-sunken; os hex #E9F1F4/#DDE8EE do estudo NÃO entraram (§14.1). v1.25: a luz do escuro caiu de 40 % / 26 % para 26 % / 18 % (turquesa-400 / turquesa-500) — medido pela régua RC na primeira aplicação (F10.4): com 40 % o micro-rótulo text-secondary do primeiro KPI, sob vidro a 72 %, media 4,41 no ponto mais quente da luz (piso 4,5); em quatro intensidades (40/26 → 4,41 · 34/22 → 4,47 · 30/20 → 4,52 · 26/18 → 4,58) ficou a que passa com margem. O alfa do vidro (V-2 dele) não mudou
mat.metal --seed-mat-metal 1 = claro nasce em 1; o 20 % do gate não é valor (MA-P5); calibração por peça na F10.4
mat.metal-sheen --seed-mat-metal-sheen linear-gradient(180deg, rgba(255,255,255,calc(0.08 * var(--seed-mat-m… = claro estudo v1.1; regra do metal: só do token para o escuro onde há texto. v1.26 (F10.5): a luz do topo cai de 30 % para 8 % e some a 18 % da altura — medido pela régua RC nas sete telas seguintes: o primeiro rótulo branco do rail media 3,25–4,27 sob a luz (o shell passou na F10.4 porque o item ativo, com pílula clara, ocupa a primeira posição); com 8 %, 16 de 16 medições passam, pior 4,69
mat.metal-specular --seed-mat-metal-specular linear-gradient(162deg, transparent 28%, rgba(255,255,255,calc(0.13 *… = claro estudo v1.1 (substitui o escovado de 1 px — moiré, MA-P5)
mat.metal-curve --seed-mat-metal-curve linear-gradient(90deg, rgba(255,255,255,calc(0.08 * var(--seed-mat-me… = claro estudo v1.1
mat.metal-action --seed-mat-metal-action linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,calc(0.06 … = claro estudo v1.1; CP20 (branco sobre action-primary = 4,60, o piso — clarear reprova)
mat.metal-edge --seed-mat-metal-edge inset 0 1px 0 rgba(255,255,255,calc(0.55 * var(--seed-mat-metal))), i… = claro estudo v1.1
mat.metal-action-edge --seed-mat-metal-action-edge inset 0 1px 0 rgba(255,255,255,calc(0.40 * var(--seed-mat-metal))), i… = claro estudo v1.1
mat.grain --seed-mat-grain url(data:image/svg+xml…feTurbulence…) = claro estudo v1.1 (feTurbulence 5 %)
mat.sheen-duration --seed-mat-sheen-duration 700ms = claro estudo v1.1 (700 ms; mais lenta que dur-expressive-slow de propósito)
mat.breath-duration --seed-mat-breath-duration 18s = claro estudo v1.1 (18 s)
— (derivado) --seed-mat-glass color-mix(in srgb, var(--seed-surface-raised) var(--seed-mat-glass-alpha), transparent) idem só no gêmeo CSS, como --seed-focus-ring
— (derivado) --seed-mat-glass-filter blur(var(--seed-mat-glass-blur)) saturate(var(--seed-mat-glass-saturate)) idem só no gêmeo CSS
mat.glass-thick-delta --seed-mat-glass-thick-delta 10% = claro folha 11 (2026-10-18), MA2 = "a", proposta P2 do estudo MA-P8: quanto o vidro é mais espesso no topo
mat.glass-alpha-midia --seed-mat-glass-alpha-midia 82% 92% folha 11, MA2 = "a", P5: piso do vidro sobre imagem (calibrado pela régua RC no estudo MA-P8)
mat.media-dim --seed-mat-media-dim 0% 35% folha 11, MA2 = "a", P5: véu preto (--seed-preto) na imagem sob vidro — o número da Apple (HIG Materials)
— (derivado) --seed-mat-glass-thick color-mix(in srgb, var(--seed-surface-raised) min(100%, calc(var(--seed-mat-glass-alpha) + var(--seed-mat-glass-thick-delta))), transparent) idem folha 11, P2: a tinta do TOPO do vidro (90 % no claro, 82 % no escuro); só no gêmeo CSS

Folha 11 (2026-10-18) — vidro mais espesso no topo e vidro sobre imagem. O estudo MA-P8 (Liquid Glass da Apple × SEED, 2026-10-18) levou seis propostas à folha 11; o veredito dele, verbatim: MA1 = "a" — "sim — uma linha no gerador do material; no claro, o link da barra sai de 4,00 e as reprovações vão de 1 a 0"; MA2 = "a" — "sim, 92 % e véu 35 %"; MA3 = "b" (a borda de luz P1 fica para depois); MA4 = "b" (a borda de rolagem P3 e a régua de cantos P6 ficam para depois). O que mudou nos tokens:

  • P2 (espessura): a tinta do vidro passa a ser um gradiente vertical de --seed-mat-glass-thick (alfa + 10 pontos, teto 100 %) no topo até --seed-mat-glass a 45 % da altura (a geometria é constante do material_bloco.py). O V-2 dele (80 % / 72 %) continua sendo o mínimo — a tinta só fica mais densa. Nos fallbacks (sem backdrop-filter, reduzir transparência, mais contraste) o alfa vai a 100 % e o min() segura o teto.
  • P5 (sobre imagem): dois pares por tema: véu 0 % no claro e piso 82 % no claro (decisão da sessão, exposta a veto, 2026-10-18: o estudo mediu o claro sem a Montserrat embutida e achou que a P4 bastava; com a fonte real, a cobaia do DS dava 1 texto a 4,48 no claro com o vidro em 80 % — 81 % → 4,53 · 82 % → 4,66 · 84 % → 4,80; §93.4 do seed-componentes.md, "Terceira aplicação") e, no escuro, véu de 35 % na imagem e piso de 92 % no vidro. O piso entra por max(var(--seed-mat-glass-alpha), var(--seed-mat-glass-alpha-midia)) reemitido no escopo da peça (errata da v1.25: o var() resolve onde é declarado) — e o max() deixa o 100 % dos fallbacks vencer. Calibração do estudo (régua RC, prancha, 27 textos): 86/88/90/92 % × véu 35/45 %; 92 % / 35 % é a de menor custo visual com pior texto ≥ 4,6 (4,61). Sem a P2, o piso precisaria de 96 %.
  • Como uma tela declara "vidro sobre imagem" é regra do canon (§93, cláusula MA13): data-mat-midia no elemento que pinta a imagem, data-mat-sobre="midia" em cada peça de vidro sobre ela.
  • P4 (tinta de marca forte em todo vidro) não tem token novo: é o remapeamento da MA9 estendido à barra e à sidebar.

Como se compõe (a receita que a F10.4 emite do token, por peça):

  • Vidro (barra superior, cartão, pílula): background: var(--seed-mat-glass) (desde a folha 11, 2026-10-18, na barra, na sidebar e no cartão: linear-gradient(180deg, var(--seed-mat-glass-thick) 0%, var(--seed-mat-glass) 45%) — P2; a pílula segue com a tinta do estado em --seed-mat-glass-alpha) · backdrop-filter: var(--seed-mat-glass-filter) · box-shadow: 0 0 0 1px var(--seed-mat-glass-border), var(--seed-mat-glass-shadow) (no sobrevoo, -hover). O grão (--seed-mat-grain) entra como camada por cima em mix-blend-mode: soft-light.
  • Metal do rail: background: var(--seed-mat-grain), var(--seed-mat-metal-specular), var(--seed-mat-metal-sheen), var(--seed-mat-metal-curve), var(--seed-rail-background) · box-shadow: var(--seed-mat-metal-edge). ⚠ v1.26 (F10.5, 2026-09-13): a luz do topo do metal-sheen caiu de 30 % para 8 % (some a 18 % da altura). A F10.4 mediu o rail do shell, cujo item ATIVO ocupa a primeira posição — a pílula clara cobria a faixa mais clara da luz e o pior rótulo branco ("Compras", 4,73) estava na terceira; nas sete telas seguintes o primeiro rótulo é branco e media 3,25 a 4,27 (12 medições, piso 4,5), e o shell com a pílula removida por variante reprova igual (3,62). Foi ponto cego da primeira medição, não mudança de gosto: a regra de contraste do metal (abaixo, e MA2 do §93) já proibia luz onde há texto.
  • Metal da ação primária: a cor continua o token de ação; background-image: var(--seed-mat-metal-action) · box-shadow: var(--seed-mat-metal-action-edge).
  • Fundo com luz: background: var(--seed-mat-canvas) na casca da aplicação.
  • Calibração: --seed-mat-metal é o único botão, com o render e a régua na mesa. ⚠ Errata v1.25 (medida na F10.4, 2026-09-12): esta linha dizia "a F10.4 pode sobrescrevê-lo no escopo de um componente" — não basta: o var() dentro do valor de uma custom property é resolvido no elemento onde ela é declarada (o :root), não onde é consumida; --seed-mat-metal-sheen já nasce com o multiplicador resolvido em 1, e um .rail { --seed-mat-metal: .7 } não alcança nada (a régua devolveu os mesmos números em 1, 0,7 e 0,4 até o conserto). A calibração por peça reemite no escopo os tokens que multiplicam pelo botão, com o texto lido do gêmeo — é o que 06-validacao/ferramentas/material_bloco.py (calibracao_metal()) faz. A alternativa de declarar esses tokens em * em vez de :root (o var() resolveria por elemento) foi descartada: sairia da paridade G2, que lê o :root.

Regra de contraste do metal (vai ao canon na F10.2): o gradiente metálico só vai do token para o lado escuro onde há texto. Motivo medido: a tinta branca sobre action-primary já mede 4,60 no claro, que é o piso — clarear qualquer extremo reprovaria (CP20: a tinta passa nos dois extremos, não na média).

Os fallbacks — regra escrita E executável#

A pesquisa manda respeitar todo estado de sistema (a Apple recuou três vezes em um ano por legibilidade; a Microsoft desliga o acrílico em economia de bateria; NN/g 2025). Aqui a regra vive no gêmeo CSS, no próprio token, então nenhum consumidor precisa lembrar de escrever a media query:

condição o que o token faz
navegador sem backdrop-filter (@supports not) glass-alpha → 100 %, glass-blur → 0 — o vidro vira sólido
prefers-reduced-transparency: reduce idem: vidro sólido
prefers-contrast: more vidro sólido · glass-border → border-strong · glass-specular → transparente · canvas → none · grain → none · metal → 0
prefers-reduced-motion: reduce sheen-duration → 0 ms · breath-duration → 0 s (no mesmo bloco que já zera as durações produtivas)

O seletor dos blocos de fallback é :root, :root[data-theme]: cobre os três estados de tema (sem atributo, claro forçado, escuro forçado) com especificidade igual ou maior que a dos blocos de tema, e vence por vir depois no arquivo.

O que NÃO entrou, e por quê#

  • O "escovado" de 1 px da v1 do estudo (traço repetido a cada 2 px): virava moiré quando a tela era vista em escala e listra visível a 100 % — foi o que ele viu no gate ("cria várias linhas verticais paralelas"). Textura de período fixo em pixel não sobrevive a escala; grão aleatório e reflexo contínuo sobrevivem (MA-P5).
  • O 20 % de metal que ele deixou no controle: era reação ao defeito acima, não preferência — ele mesmo escreveu "acredito que testes e medições vc vai achar o que é melhor para cada caso". --seed-mat-metal nasce em 1 e a calibração por peça é da F10.4.
  • Os hex do fundo do estudo (#E9F1F4 → #DDE8EE no claro, #0B1419 → #08100E no escuro): não existem na paleta. O canvas é derivado de token em todas as paradas (§14.1: valor que não está no canônico não se cria). A diferença de tom vai à mesa no gate visual da F10.4, com o render.
  • Um token de "luz" (--mat-luz do estudo): ele deixou em 100 % e a intensidade está dentro do canvas; um multiplicador a mais seria botão sem decisão.
Esc