Material · §93 · v1.53
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, 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.
Geração do mês (ilustrativo)
1.284 MWh
+4,2 %Chamados abertos (ilustrativo)
17
−3 hojePró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.
| classe | papel (§93.3) |
|---|---|
| .seed-mat-casca | a casca da aplicação — fundo com luz, uma por tela (MA4) |
| .seed-mat-vidro | vidro estático: barra superior, sidebar (MA1) |
| .seed-mat-vidro-cartao | cartão de vidro que flutua e responde ao ponteiro; a tinta de marca dentro vira a forte (MA9) |
| .seed-mat-metal-rail | o rail em metal, sobre o token do rail (MA2) |
| .seed-mat-metal-acao | botão primário e avatar: a cor continua o token; entra só o reflexo para o lado escuro (MA2) |
| .seed-mat-kpi | número grande com brilho |
| .seed-mat-pilula-success · -danger · -warning · -info | pílula com luz: a cor do estado na opacidade do vidro, sem desfoque |
| .seed-mat-trilho + .seed-mat-trilho-cheio | o sulco e o preenchimento de uma barra |
| .seed-mat-reflexo | peç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>): 9 de 16 telas de referência. Todas passam na régua de contraste rasterizado nos dois temas (rito de fechamento).
- Shell de aplicação tela-shell.html
- Tela de referência composta — Propostas tela-referencia.html
- Lista agrupada tela-lista.html
- Tabela / grade tela-tabela.html
- Painel tela-painel.html
- Quadro / Kanban tela-quadro.html
- Detalhe de registro tela-detalhe.html
- Gantt e linha do tempo tela-gantt.html
- Chat tela-chat.html
Sem a camada: Página de serviço, Documento / leitura, Feed / atividade, Busca / resultados, Configurações / preferências, Autenticação, Onboarding / primeiro uso — a página institucional por decisão dele (fica como está até a medição de GPU, MA-P2) e as seis telas que ainda não têm gerador (MA-P3).
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 ERP 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.
| cena | quadro médio | p95 | pior quadro | quadros acima de 50 ms |
|---|
A regra, byte a byte do canon
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–MA12#
| # | 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 |
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 espera a medição de GPU em máquina de campo (MA-P2); telas sem gerador não recebem a camada antes de ganhar gerador (MA-P3, 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 |
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 --seed-mat-glass; backdrop-filter: var(--seed-mat-glass-filter); anel --seed-mat-glass-border + --seed-mat-glass-shadow |
cartão de vidro (vidro_cartao) |
section.bloco:not(#lente-os) |
o mesmo, 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 |
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.
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 (GPU do vidro em lista longa, máquina de campo) · MA-P3 (seis telas sem gerador — atividade, autenticação, busca, configurações, documento, onboarding — esperam o gerador, VT-P1/P3; o roadmap dizia "sete": contadas em 2026-09-13, F10.5) · site (§47) sem a camada, por veredito dele ("V-M7 site: a", 2026-09-13, MANIFESTO §212: fica como está até a medição de GPU em máquina de campo, MA-P2; a variante com casca com luz, cabeçalho em vidro e botão primário em metal foi renderizada e fica como evidência em evidencia-f10-5/; a pergunta volta quando a MA-P2 fechar)
· 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 ERP 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).
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).
(Estado: estável desde 2026-09-13, por veredito dele sobre a folha do gate F10.4 — MANIFESTO §207, verbatim: "V-M1 shell: aprovo", "V-M2 painel: aprovo", "V-M3 metal do rail: 1", "V-M4 sidebar: vidro", "veto: nenhum". A folha pedia a aprovação sobre a folha do gate
F10.4 — shell e painel nos dois temas, a calibração do rail e a sidebar. As decisões MA1–MA12 nasceram da pesquisa,
do veredito V-1..V-3 e das medições da primeira aplicação; o que ele vetar volta ao gerador, nunca ao HTML.)
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 doseed-componentes.md§71: "quem cria um fundo novo cria a obrigação de medir o contraste sobre ele."
Os 18 tokens (grupo semantic.mat do JSON) e os 2 derivados do gêmeo#
| 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 |
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)·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 emmix-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 dometal-sheencaiu 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: ovar()dentro do valor de uma custom property é resolvido no elemento onde ela é declarada (o:root), não onde é consumida;--seed-mat-metal-sheenjá 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 que06-validacao/ferramentas/material_bloco.py(calibracao_metal()) faz. A alternativa de declarar esses tokens em*em vez de:root(ovar()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-metalnasce 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-luzdo estudo): ele deixou em 100 % e a intensidade está dentro docanvas; um multiplicador a mais seria botão sem decisão.