# Material — vidro e metal (a camada do §93) O acabamento adotado em 2026-09-12 e aprovado nas telas de referência: vidro na navegação e nos cartões que flutuam, metal no rail e na ação primária, luz no fundo da casca, dois micro-movimentos desligáveis. Mesma marca. Página gerada: https://ds.seed.eng.br/material/ ## Registry Instale `@seed/material` (depende de `@seed/tokens`): `npx shadcn@latest add @seed/material`; ligue com `data-material="vidro-metal"` no ``; classes: `.seed-mat-casca`, `.seed-mat-vidro`, `.seed-mat-vidro-cartao`, `.seed-mat-metal-rail`, `.seed-mat-metal-acao`, `.seed-mat-kpi`, `.seed-mat-pilula-success · -danger · -warning · -info`, `.seed-mat-trilho + .seed-mat-trilho-cheio`, `.seed-mat-reflexo`. Arquivo: https://ds.seed.eng.br/r/seed-material.css · passo a passo: https://ds.seed.eng.br/r/LEIA-ME.md ## Telas com a camada (medido no arquivo) - Shell de aplicação — https://ds.seed.eng.br/telas/tela-shell/ - Tela de referência composta — Propostas — https://ds.seed.eng.br/telas/tela-referencia/ - Lista agrupada — https://ds.seed.eng.br/telas/tela-lista/ - Tabela / grade — https://ds.seed.eng.br/telas/tela-tabela/ - Painel — https://ds.seed.eng.br/telas/tela-painel/ - Quadro / Kanban — https://ds.seed.eng.br/telas/tela-quadro/ - Detalhe de registro — https://ds.seed.eng.br/telas/tela-detalhe/ - Gantt e linha do tempo — https://ds.seed.eng.br/telas/tela-gantt/ - Chat — https://ds.seed.eng.br/telas/tela-chat/ Sem a camada: Página de serviço, Documento / leitura, Feed / atividade, Busca / resultados, Configurações / preferências, Autenticação, Onboarding / primeiro uso. ## Bancada de custo (MA-P2) Em https://ds.seed.eng.br/material/#sec-custo: N cartões de vidro sobre a casca com luz, rolagem de 3 s, intervalo entre quadros com e sem a camada. Agentes: `window.seedMatMedir(n, ms)` devolve `{com, sem, maquina}` (média, p95, pior quadro, quadros acima de 50 ms). ## MATERIAL — vidro e metal > Componentes v1.53 · §93 · byte a byte do canon · https://ds.seed.eng.br/canon/seed-componentes/93-material-vidro-e-metal-estavel-2026-09-12-f10-2/ ## 93. MATERIAL — vidro e metal · **`estável`** (2026-09-12, F10.2 · gate F10.4 aprovado por ele em 2026-09-13, MANIFESTO §207) · MA1–MA12 · 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) > **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 ``** — 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 1. **Interruptor:** sem `data-material` no ``, 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). *(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.)* ## Material — vidro e metal > Tokens v1.26 · §03d · byte a byte do canon · https://ds.seed.eng.br/canon/seed-tokens/03d-material-vidro-e-metal-f10-1-v1-24-v1-25-v1-26/ ## 3d. Material — vidro e metal (F10.1, v1.24 · v1.25 · v1.26, 2026-09-12/13) · **`estável`** (o §93 do `seed-componentes.md` virou `estável` pelo gate F10.4 em 2026-09-13; esta linha dizia "emitido · aplicação em gate" até a v1.26 — registro de estado que envelheceu) > **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 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 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.