---
fonte: 01-canonicos/seed-ds-roadmap.md
versao_da_fonte: v2.64
secao: s11
titulo: "F10 — Material: vidro e metal ✅ **FECHADA em 2026-09-13 — F10.1 a F10.6** (aberta em 2026-09-12 pelo veredito dele V-1 = B, MANIFESTO §204; fechada no §213). *O marcador desta linha ficou '⚪ ABERTA' até 2026-09-14 com as seis fases ✅ — corrigido no §217.1; é a mesma classe que a v2.42 e a linha da F9 registram.*"
sequencia: 12 de 16
bytes_do_corpo: 18474
md5_do_corpo: b446ca83b3fe09e4c95ff30821763e72
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-ds-roadmap.md
---
## F10 — Material: vidro e metal ✅ **FECHADA em 2026-09-13 — F10.1 a F10.6** (aberta em 2026-09-12 pelo veredito dele V-1 = B, MANIFESTO §204; fechada no §213). *O marcador desta linha ficou "⚪ ABERTA" até 2026-09-14 com as seis fases ✅ — corrigido no §217.1; é a mesma classe que a v2.42 e a linha da F9 registram.*

> **Por que existe.** Pedido dele em 2026-09-12, verbatim: *"Estou achando as telas criadas com o DS
> muito basicas, botoes, barras, menus etc. ta faltando alguma coisa. Faça uma pesquisa profunda sobre
> aplicação de liquid Glass metalizado em DS de grandes empresas, ou algo parecido. e gere 2 exemplos,
> um com o DS atual e outro com a aplicação das melhorias para eu comparar."* A pesquisa e o par de
> telas estão em `09-pesquisa/material-vidro-metal-2026-09-12/` (pesquisa.md · material.css ·
> compositor.py); o diagnóstico medido: um material só para navegação e conteúdo, fundo sem luz, luz
> só no hero, estados chapados, quase nenhum movimento. Ele decidiu **B — adotar a proposta inteira**
> (mesma marca; muda material, profundidade e movimento), com o alcance marcado em 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 como é hoje (peça opaca) — aplicado como marcado, exposto a veto (`MA-P4`).

> **O que a pesquisa manda cuidar (fontes datadas no pesquisa.md):** vidro é da camada de navegação,
> nunca do conteúdo denso (Apple, Fluent); opacidade ≥ 0,7 sobre fundo que não se controla (convenção
> de mercado); todo estado de sistema respeitado (sem `backdrop-filter`, reduzir transparência, mais
> contraste, reduzir movimento → sólido/parado); a Apple recuou três vezes em um ano por legibilidade;
> Microsoft desliga acrílico em economia de bateria. E o que a folha **não mediu**: contraste efetivo
> sobre vidro (o `render-contraste.mjs` aborta em fundo composto) e custo de GPU no ERP real.

| brick | entrega | governa | custo declarado | estado |
|---|---|---|---|---|
| **F10.1** | **Tokens de material**: `--seed-mat-*` no `seed-tokens.json` (DTCG) + gêmeo CSS + `seed-tokens.md` (v1.24): opacidade do vidro por tema, desfoque, saturação, especular, borda de vidro, sombras de vidro em camadas, luz do fundo, curvas do metal; e os fallbacks como regra escrita | V-2 dele (80 % · 72 % · 18 px); piso ≥ 0,7 | 0,5 sessão | ✅ **2026-09-12** — 18 tokens no grupo `semantic.mat` (+2 derivados só do gêmeo: `--seed-mat-glass`, `--seed-mat-glass-filter`); `seed-tokens.md` v1.24 §3d; fallbacks **executáveis** no gêmeo (sem `backdrop-filter`, `reduced-transparency`, `contrast: more`, `reduced-motion`); adição pura — `paridade-tokens.py` 110 PASS · 0 FAIL, gêmeo 330 → 350 variáveis; o fundo com luz é **derivado** da rampa turquesa (os hex do estudo não existem na paleta e não entraram); o 20 % de metal do gate **não** virou valor (MA-P5). MANIFESTO §205 |
| **F10.2** | **Canon**: seção "Material" no `seed-componentes.md` (a numerar depois da última viva) — onde vai vidro (barra superior, cartões, pílulas), onde vai metal (rail, ação primária, avatar), o que fica opaco (sidebar, tabela, lista densa, conteúdo), o fundo com luz, movimento com função e desligável, os fallbacks; **regra de contraste do metal**: gradiente só do token para o lado escuro | pesquisa §1; CP20 (a tinta passa nos dois extremos) | 0,5 sessão | ✅ **2026-09-12** — `seed-componentes.md` **v1.48 §93** "MATERIAL — vidro e metal", decisões **MA1–MA12** (onde vai vidro · onde vai metal · o que fica opaco, sidebar inclusive · fundo com luz só na casca, mantendo `surface-subtle` declarado · micro-movimento desligável · fallbacks no token · régua RC obrigatória · emissão pelo módulo único · tinta de marca no vidro = `-strong` · nenhuma textura de período fixo · calibração por peça · alcance declarado), receitas por peça, medições da primeira aplicação e calibrações registradas; estado `emitido · em gate (F10.4)`. Na mesma edição: errata **E-CF-06** no §46 e a pendência **SH-P9**. MANIFESTO §206 |
| **F10.3** | **Régua**: contraste **rasterizado** sobre vidro — renderiza a tela, apaga o texto (cor transparente), amostra os pixels atrás de cada caixa de texto e mede o **pior pixel** contra a tinta declarada; entra no rito (`fechar.sh`) para toda tela com `data-material` | "quem cria um fundo novo cria a obrigação de medir o contraste sobre ele" (HV1) | 1 sessão | ✅ **2026-09-12** — `06-validacao/contraste/contraste-raster.mjs` (contrato **RC**: duas capturas, com e sem texto; máscara de glifo por diferença, cobertura ≥ 0,5; pior pixel contra a tinta) + `guardas/guarda-material.py` no `fechar.sh` (9ª guarda) + cobaia `provas/contraste-raster/` com placar escrito antes (reprova 1,22 e 3,38 exatos). **Provada no canon**: `tela-painel` 298/299 textos passam, pior pixel 4,60 = o mesmo par do `contraste-composicao.mjs`; `tela-shell` acusou o que nenhuma régua via — o rótulo do item ativo do rail vaza 1 px da pílula sobre o gradiente (2,08 → `MA-P6`). **A MA-P1 foi medida** (ver a tabela de pendências). Bloqueio da promoção a canon **levantado**; a F10.4 roda a régua em toda tela que ganhar `data-material` |
| **F10.4** | **Aplicação, lote 1**: shell §46 + painel §48 pelos GERADORES (`gen-shell.py`, `gen-painel.py`), a camada de material emitida do token (nunca CSS copiado); régua F10.3 verde; **gate visual** nos dois temas | V-3 | 0,5 sessão | ✅ **2026-09-13** — gate dele (MANIFESTO §207, verbatim): *"V-M1 shell: aprovo · V-M2 painel: aprovo · V-M3 metal do rail: 1 · V-M4 sidebar: vidro · veto: nenhum"*; a §93 vira `estável` (v1.49), a sidebar entra no vidro (gen-shell v0.9, régua RC 71/71 nos dois temas), o rail fica no token. Do gate nasce a `SH-P10` (a barra do item ativo do rail). Entregue em 2026-09-12: nasce `06-validacao/ferramentas/material_bloco.py` (módulo único: tokens `--seed-mat-*` medidos no gêmeo, fallbacks extraídos verbatim, receita por peça); `gen-shell.py` v0.9 e `gen-painel.py` v0.16 emitem a camada e declaram `data-material="vidro-metal"` — as duas telas entram na régua RC do rito: **0 texto abaixo do piso nos dois temas** (shell 71/71 · painel 298/298 claro e 299/299 escuro). O caminho até o zero mudou quatro coisas: `MA-P6` consertado no gerador; a tinta de marca no vidro remapeada para `text-brand-strong` (9 textos em 4,42–4,49 → passam); **tokens v1.25** (a luz do canvas escuro cai de 40/26 para 26/18 % — o micro-rótulo do KPI media 4,41); e a calibração por escopo, que não fazia nada (o `var()` resolve onde é declarado), passou a reemitir os tokens no escopo. 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, colisão 4·0, valor-gêmeo 2·0, forced-colors 4·0, TP1 2·0). **Gate visual** dele: folha com as duas telas nos dois temas, a calibração do rail (1 · 0,7 · 0,4 medidos: 4,73 · 5,38 · 5,86) e a sidebar (`MA-P4`) — endereço no MANIFESTO §206 e na memória da sessão. Vira ✅ com o veredito. MANIFESTO §206 |
| **F10.5** | **Aplicação, lote 2**: as outras telas com gerador — contadas em 2026-09-13, são **oito** (chat, detalhe, gantt, lista, quadro, referência, tabela **e o site**; esta linha dizia "7"); lote 3: as **seis** telas SEM gerador (atividade, autenticação, busca, configurações, documento, onboarding — a linha dizia "7") só depois do gerador delas (`VT-P1/P3`, `MA-P3`) | regra §14.4 (edita-se o gerador) | 1 sessão + o brick VT | ✅ **2026-09-13** — gate dele no mesmo dia (MANIFESTO §212, verbatim): *"V-M5 chat: aprovo · V-M5 detalhe: aprovo · V-M5 gantt: aprovo · V-M5 lista: aprovo · V-M5 quadro: aprovo · V-M5 referencia: aprovo · V-M5 tabela: aprovo · V-M6 luz do topo do rail: 8 · V-M7 site: a · veto: nenhum"* — as sete telas aprovadas como geradas, a luz do rail fica em 8 % e **o site fica sem a camada até a `MA-P2`** (a linha desta fase o incluía no lote; a decisão dele o tira até a medição de GPU). Entregue em 2026-09-13: as **sete telas de aplicação** emitem a camada pelo `material_bloco.py` (gen-tela-chat v0.2, detalhe v0.3, gantt v0.2, lista v0.4, quadro v0.2, referência v0.3, tabela v0.3; regeneração byte-idêntica), com `data-material` no `<html>` — nove telas na régua RC do rito, **18/18 medições sem texto abaixo do piso**. A régua achou o ponto cego da F10.4: a luz do topo do metal do rail (30 %) derrubava o primeiro rótulo branco a 3,25–4,27 em seis telas (o shell passara porque o item ativo ocupa a primeira posição); **tokens v1.26** (8 % no topo; pior 4,69; MA2 aplicada), com a alternativa sem luz renderizada na folha. Três instrumentos aprenderam a camada com o sinal certo (RAIL-02, SH1-c, rota 1 do contraste-composicao) e o `material_bloco.completar()` deriva a lista de tokens. **O site** (§47) foi renderizado como variante e vai ao gate como pergunta (V-M7); o gerador não o emite até o veredito. **Folha do gate F10.5:** sete telas nos dois temas (V-M5), a luz do topo do rail 8 % × 0 % (V-M6), o site (V-M7) e o veto. Vira ✅ com o veredito. MANIFESTO §211 |
| **F10.6** | **Vitrine e registry**: página `/material/` gerada (regra + render vivo + controles), o registry ganha a camada (esta linha dizia `@seed/theme`; a forma certa, medida na implementação, é um item PRÓPRIO `@seed/material` — o tema do shadcn só carrega apelidos de cor), skill `seed-ds` herda por geração; a bancada de desempenho para a lista longa (`MA-P2`) nasce na própria página | MK23 (qualquer IA acha, lê, cita, usa) | 0,5 sessão | ✅ **2026-09-13** — registry: 4.º item `@seed/material` (`seed-material.css`, classes `.seed-mat-*` emitidas pelo `material_bloco.py`, sob `data-material`; guarda RG-8) · vitrine: `/material/` (regra byte a byte, amostra viva montada só com o registry, controles ao vivo, telas com a camada medidas no disco, bancada da MA-P2 com `window.seedMatMedir`) e a página de cada tela diz se carrega a camada · skill: passo do material no modo código (versão 2026.09.13+5202b3cc). Guardas: RG 7·0, VT 14·0, SK 10·0; regeneração byte-idêntica dos três. **A bancada mediu nesta máquina de desenvolvimento** (8 núcleos, 16 GB, Chrome 153): 8,3–8,9 ms por quadro com e sem a camada até 240 cartões — custo indistinguível aqui; a máquina de campo é o que fecha a MA-P2. MANIFESTO §213 |

**Pendências da fase (nascem aqui, com código):**

| código | origem | o que é | dono | estado |
|---|---|---|---|---|
| MA-P1 | folha do gate, §4 "não medi" | contraste efetivo sobre vidro não foi medido por instrumento; a proposta NÃO vira canon sem a régua F10.3. **MEDIDA em 2026-09-12** pela régua da F10.3 nos dois quadros do estudo (1180 × 800, 42 textos por tema, pior pixel atrás de cada glifo): sobre vidro e luz **nenhum texto cai abaixo do piso** em nenhum tema. O custo do material está nos **rótulos brancos do rail sob o reflexo do metal** — Projetos 7,47 → **4,79** · Obras 6,59 → **4,79** · Compras 7,26 → 5,17 · Finanças 7,06 → 5,42 (piso 4,5: margem de 0,29) — e no KPI com tinta em gradiente (13,72 → 7,53, piso 3,0). 27 de 42 textos perdem contraste no claro e 26 no escuro, todos acima do piso. O único FAIL (Comercial 2,08 → 2,67) é pré-existente do canon (`MA-P6`). Registro com as tabelas: `09-pesquisa/material-vidro-metal-2026-09-12/regua-raster-2026-09-12.md` | sessão | ✅ medida · o reflexo do rail (`metal-sheen` a 30 % no topo) é a primeira calibração da F10.4 |
| MA-P2 | pesquisa (Microsoft: acrílico é GPU-intensivo) | custo de `backdrop-filter` no ERP real (dezenas de cartões numa lista longa); vidro fora do chrome espera a medição em máquina de CAMPO. **Instrumento pronto desde 2026-09-13 (F10.6):** a bancada em https://ds.seed.eng.br/material/#sec-custo (N cartões de vidro, rolagem de 3 s, quadros com e sem a camada; `window.seedMatMedir(n, ms)` para agentes). **Primeira medição, máquina de desenvolvimento** (8 núcleos, 16 GB, Chrome 153, 1440 px): 60/120/240 cartões → 8,3/8,9/8,4 ms por quadro com a camada, 8,4/8,3/8,3 sem; p95 8,5–8,6; um quadro de 133 ms na montagem de 120. **Segunda medição, 2026-09-14, máquina dele** (8 núcleos, 16 GB, DPR 1,25, janela 1536 px, Chrome 153; 120 cartões): 8,5 ms por quadro com a camada, 8,4 sem; p95 8,6 nos dois; pior quadro 41,7 × 16,8 (um quadro, [inferência] o da montagem); 0 de 353 e 0 de 359 acima de 50 ms — indistinguível também aqui, mas é máquina de porte de desenvolvimento. **Ele vai medir hoje em outras máquinas e mandar todos os resultados** (MANIFESTO §216.1); fecha quando a mais fraca delas estiver medida | sessão · medições dele | ⚪ aberta — instrumento pronto, medições das outras máquinas dele pendentes |
| MA-P3 | F10.5 | **6** das 16 telas de referência não têm gerador (atividade, autenticação, busca, configurações, documento, onboarding — `VT-P1/P3`; esta linha dizia 7 até 2026-09-13): a camada de material não pode entrar nelas sem antes nascer o gerador. Estado em 2026-09-13: 9 telas com material (shell, painel e as sete da F10.5), o site SEM a camada por veredito dele (V-M7 = a, até a `MA-P2`), 6 esperando gerador 🟡 **EM GATE desde 2026-09-14 (MANIFESTO §217):** as seis telas ganharam gerador (porte byte-idêntico salvo o selo do bloco de tokens; `gen-tela-atividade/autenticacao/busca/configuracoes/documento/onboarding.py` + moldes), e CINCO receberam a camada pelo `material_bloco.py` (documento fica sem, por C25 + MA3). Régua RC 0 FAIL em 14 de 14 telas nos dois temas; a linha de base no HEAD achou 10 textos de dívida pré-existente (tinta de marca sobre `brand-subtle`, 4,28 — corrigidos com `text-brand-strong`, §5-g; o acervo inteiro virou `CT-P9`). Folha do gate: V-P3.1–V-P3.5 + veto | sessão · veredito dele | 🟡 em gate |
| MA-P4 | V-3 dele | a **sidebar** não foi marcada em "onde aplicar"; fica opaca como hoje. Se foi esquecimento, uma palavra dele a inclui | ele | ✅ **fechada em 2026-09-13** — *"V-M4 sidebar: vidro"*; aplicada no `gen-shell.py` (receita `vidro`, a mesma da barra superior) e medida: shell 71/71 nos dois temas, pior pixel 4,52/4,60 (pares pré-existentes) |
| MA-P5 | V-2 dele | o "escovado" do rail (traço de 1 px repetido) virava moiré ao escalar — ele baixou o metal a 20 % por isso. **Consertado em 2026-09-12** (o traço saiu; textura por grão + reflexo); a calibração final do metal por peça é da F10.4, com o render na mesa | sessão | ✅ consertada no estudo · calibração na F10.4 |
| MA-P6 | régua F10.3 aplicada ao canon (`tela-shell.html`, 2026-09-12) | o rótulo do item **ativo** do rail ("Comercial", 11 px/800, caixa alta) **vaza 1 px da pílula arredondada** sobre o gradiente do rail: um pixel de glifo com cobertura total mede **2,08** (turquesa-900 sobre #006A60) — 0,4 % dos pixels do rótulo, nos dois temas. Invisível para o `contraste-composicao.mjs` (a pílula pinta cor opaca e a rota "cor declarada" não olha pixel). Evidência: `09-pesquisa/material-vidro-metal-2026-09-12/evidencia-raster/rail-comercial-1px-6x.png`. Conserto em **`gen-shell.py`** (pílula mais larga, ou rótulo menor) no lote 1 da F10.4, que já toca o shell — nunca no HTML | sessão | ✅ **fechada em 2026-09-12** (F10.4): medido antes de mexer — "COMERCIAL" a 800 media 71,5 px num item de 72 px (o papel micro passou a 11 px na v1.14 e a conta do SH3 era de 9 px); conserto no `gen-shell.py` v0.9 (o rótulo consome o tracking do papel, −0,2 px → 67,7 px; `max-width: 72px` como rede), errata **E-CF-06** no §46; régua RC: shell sem texto abaixo do piso nos dois temas; `render-shell` 34·0 |
| SH-P9 | F10.4 (medição do MA-P6) | o shell e o painel pedem `font-weight: 800` (rótulo ativo do rail, KPI, botão da solução, sujeito do hero) e os moldes só carregam Montserrat 400/500/600/700 — não há ExtraBold em `03-assets/fontes/montserrat/`: o navegador **sintetiza** o 800 a partir do 700 (medido: 700 e 800 têm o mesmo avanço, 69,52 px). A guarda TP1 não vê (mede se as faces declaradas carregam, não se os pesos pedidos têm face). Saídas com custo no §46 do `seed-componentes.md` v1.48: (a) trazer o ExtraBold e re-medir o rail; (b) baixar os 800 para 700 | sessão · veredito dele | ⚪ aberta |
| CT-P9 | MA-P3 (MANIFESTO §217.5 e §217.7, 2026-09-14) | **tinta de marca sobre a superfície suave reprova no pixel — no acervo inteiro.** A linha de base das cinco telas portadas achou 10 textos com `text-link` (#098475) sobre `surface-brand-subtle` (4,28) ou `surface-subtle` (4,23), todos anteriores ao material e invisíveis às réguas por cor declarada (o par É o declarado). O canon já tem a resposta desde a v1.19 (tokens §5-g, `text-brand-strong`: 5,82 sobre `surface-subtle`); corrigido só nas cinco telas. Falta: (1) censo do par no acervo com a régua RC (chips do §22, avatar com inicial, item ativo de navegação, bancadas e peças — hoje NÃO MEDIDO, a RC só roda em tela com `data-material`); (2) a regra no canon (§22, §46, §48 prescrevem -strong sobre as superfícies suaves, ou o gêmeo escurece `text-link`) — decisão com custo medido | sessão · censo sem gate; regra em gate | ⚪ aberta |
| SH-P10 | gate F10.4 (achado dele, 2026-09-13) | a **barra vertical branca** ao lado do item ativo do rail — ele escreveu *"essa barra nao deveria estar ali, acho que ela vem de outra estrutura"*. Medido: é a marca de ativo do **SH5** (§46), `::before` de 3 px em `left: -4px`, presente nos 8 moldes com rail e sondada em pixel pela `suite-composicao`; com o material ela lê como resíduo porque a pílula clara já sobrevive ao cinza sozinha. Decisão registrada → supersede é dele: (a) manter · (b) tirar do rail (a da sidebar fica), custo meia sessão (8 moldes, SH5-04, PX-01/02, re-gate). Folha SH-P10 com os quatro recortes (cor e cinza) | ele · sessão | ✅ **fechada em 2026-09-13** — veredito *"b-tirar-do-rail"* (MANIFESTO §209): a barra saiu dos 8 moldes com rail, telas regeradas byte-idênticas, SH5 reescrito por região (componentes v1.50), `suite-shell` SH5-04 e `suite-composicao` PX-01/02 provam a ausência |