Componentes
93. MATERIAL — vidro e metal
seed-componentes.md v2.00 · §93seção 177 de 18493-material-vidro-e-metal-estavel-2026-09-12-f10-2.md · MD5 dbab4f16Título completo no canon: MATERIAL — vidro e metal · estável (2026-09-12, F10.2 · gate F10.4 aprovado por ele em 2026-09-13, MANIFESTO §207) · MA1–MA14 · tokens seed-tokens.md §3d (v1.24 · v1.25) · módulo 06-validacao/ferramentas/material_bloco.py · régua 06-validacao/contraste/contraste-raster.mjs (contrato RC) · guarda guarda-material.py no rito de fechamento · registry @seed/material (F10.6) · vitrine /material/ (F10.6) · aplicado em tela-shell.html v0.9, tela-painel.html v0.16 e, desde 2026-09-13 (F10.5, gate aprovado por ele no mesmo dia, MANIFESTO §212), tela-chat.html v0.2, tela-detalhe.html v0.3, tela-gantt.html v0.2, tela-lista.html v0.4, tela-quadro.html v0.2, tela-referencia.html v0.3 e tela-tabela.html v0.3 (tokens v1.26)
Em uma frase: Camada transversal ligada por data-material="vidro-metal" no <html>: vidro na navegação e no que flutua, metal no rail e no botão primário.
Vocabulário desta seção: material · vidro · metal · casca · pior pixel · piso
O que esta seção NÃO cobre: Conteúdo denso fica OPACO — tabela, lista longa, texto corrido, formulário, diálogos e menus —, e a camada NUNCA se escreve como CSS à mão: ela é emitida pelo módulo único ou pelo registry. — se é disto que você precisa, não preencha em silêncio: gere o pedido de cobertura (https://ds.seed.eng.br/pedidos/).
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 viraestá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.appdo shell; numa tela-documento, a página) · canvas = o fundo sobre o qual as peças assentam (CP1 doseed-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, excetotela-painel.htmlno 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 — aMA-P9reproduzida), 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-facemede 4,55 no claro, o número do estudo. Com a fonte do DS, o "abrir →" (text-brand-strongsobre 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#
- Interruptor: sem
data-materialno<html>, a tela é byte a byte a de antes na parte que não é token. - Nenhum literal de marca na receita — só
var(--seed-*); as constantes estruturais estão nomeadas no módulo. - Pior pixel ≥ piso em toda tela com material, nos dois temas (guarda RC no rito, com cobertura impressa).
- 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. - Cor declarada da casca =
surface-subtle— as réguas por cor declarada (render-contraste, contraste-composicao, CAL-01) continuam medindo o que sempre mediram. - Sem vidro dentro de vidro; sem vidro em conteúdo denso; sidebar em vidro por V-M4 (MA1, MA3).
- Tinta de marca no vidro é
-strong(MA9) — a régua RC é quem confirma. - Regeneração byte-idêntica das telas (duas gerações, mesmo MD5) e as suítes próprias verdes:
suite-shell72 · 0,render-shell34 · 0,suite-painel146 · 0,render-painel37 · 0,render-edicao142 · 0,render-contraste6 · 0,guarda-colisao4 · 0 (com a cláusula nova: fundo recortado por texto não é fronteira),guarda-valor-gemeo2 · 0,guarda-forced-colors4 · 0, TP1 2 · 0. F10.5 (2026-09-13, nove telas): régua RC 18/18 medições ·suite-composicao33·0 ×5, 32·0 (quadro), 27·0 (gantt) — os mesmos denominadores do HEAD ·suite-detalhe73·0 ·suite-gantt43·0 ·suite-quadro35·0 ·suite-container66·0 ·suite-reflow7 telas sem FAIL ·guarda-colisao36·0 nas nove e 212·0 no acervo (53 arquivos) ·guarda-forced-colors18·0 ·guarda-valor-gemeo9·0 ·guarda-tinta-marca2·0 ·contraste-composicao18·0 ·guarda-tipografia-viva9·0 ·guarda-barra-fixa9·0 ·paridade-tokens110·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-ponteirosegue 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)