---
fonte: 01-canonicos/seed-ds-roadmap.md
versao_da_fonte: v2.53
secao: s11
titulo: "F10 — Material: vidro e metal ⚪ ABERTA em 2026-09-12 (veredito dele V-1 = B, MANIFESTO §204)"
sequencia: 12 de 16
bytes_do_corpo: 11280
md5_do_corpo: ceb9401166244b8e11bfc6e4ec47da6f
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 ⚪ ABERTA em 2026-09-12 (veredito dele V-1 = B, MANIFESTO §204)

> **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 | 🔵 **entregue em 2026-09-12, em aprovação** — 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 7 telas com gerador (chat, gantt, lista/tabela, quadro, detalhe/referência, site); lote 3: as 7 telas SEM gerador (atividade, autenticação, busca, configurações, documento, onboarding) só depois do gerador delas (`VT-P1/P3`) | regra §14.4 (edita-se o gerador) | 1 sessão + o brick VT | ⚪ |
| **F10.6** | **Vitrine e registry**: página `/material/` gerada (regra + render vivo + controles), `@seed/theme` ganha a camada, skill `seed-ds` herda por geração; desempenho medido em máquina de campo numa lista longa (`MA-P2`) antes de liberar vidro fora do chrome | MK23 (qualquer IA acha, lê, cita, usa) | 0,5 sessão | ⚪ |

**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) não medido; vidro fora do chrome espera a medição em máquina de campo | sessão | ⚪ aberta |
| MA-P3 | F10.5 | 7 das 16 telas de referência não têm gerador (`VT-P1/P3`): a camada de material não pode entrar nelas sem antes nascer o gerador | sessão · prioridade dele | ⚪ aberta |
| 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 | ⚪ exposta a veto |
| 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 |