Programa Visual — Componentes

Camada 5 do PVD (parcial) · Marca: BAZEá (slug: bazea)

Quinto subconjunto da Camada 5, depois de 05-programa-visual-cor.md, 05-programa-visual-tipografia.md, 05-programa-visual-grid.md e 05-programa-visual-iconografia.md. Fechado por definitivo em 2026-08-16 — aprovado por Alan.

Depende de: cor, tipografia, grid e iconografia, todas já fechadas. Alimenta: motion (próximo item, estava bloqueado por este) e Camada 6 (Precisão Digital).

---

1. Contexto

Diferente de cor, tipografia e grid — que partiram de uma referência externa citável (fotografia de SBC, acervo tipográfico, Müller-Brockmann) — "componentes" não tinha uma fonte óbvia. O primeiro passo foi auditar o que já existia sem nunca ter sido nomeado como sistema: os quatro ensaios (bazea-o01.html a bazea-o04.html) acumularam vocabulário próprio ao longo de três gerações. Esse levantamento abriu a Trilha 1.

Alan trouxe, em paralelo, referências de componentes táteis — dois links de Framer University (toggle skeuomórfico, parallax — este último parcado para motion), quatro do SegmentUI (fita de perigo, stickers, botão 3D, gráfico de fórmula) e uma pasta de moodboard de etiqueta industrial (12 imagens: fita de perigo, losango de risco químico, placa de calibração, etiqueta suspensa com ilhós, código de barras/QR). Isso abriu a Trilha 2.

2. Duas trilhas, dois tipos de evidência

• Trilha 1 — Sistema editorial. O que os ensaios já usam para se auto-explicar: card, callout, badge, linha de status, comparação. Evidência = auditoria do que sobreviveu três gerações sem mudar de nome.
• Trilha 2 — Sistema tátil. O que ainda não existia em nenhum ensaio: componente com profundidade, textura, interação de arrastar. Evidência = referências trazidas por Alan, uma por uma testadas contra a doutrina já fechada — não instaladas como vieram.

3. Trilha 1 — Sistema editorial (auditoria)

Comparação de seletores CSS entre bazea-o02.html, bazea-o03.html e bazea-o04.html (o01 foi redesenhado e descartado — vocabulário diferente, não sobreviveu). ~20 padrões aparecem nas três gerações sem mudar de nome nem de estrutura — evidência de estabilidade real, não coincidência de um ensaio só.

Rastreio da Trilha 1: a maior parte desses padrões não precisa de justificativa nova — são aplicações de cor, tipografia e grid já fechados, não princípios novos. Duas exceções recebem rastreio próprio, registrado agora pela primeira vez:

• .reject (borda tracejada = recusado): não é decoração, é a regra de ouro do PVD (rastreabilidade obrigatória) tornada visual — tracejado sinaliza "isto foi considerado e descartado com justificativa", sólido sinaliza "isto foi aceito". Rastreio → valor (recusa à charlatanice: nada fica de fora sem explicação registrada).
• Cor-por-estado (.tier, .lrow.open, .leg.aberto): reaplica a disciplina já fechada da cor — Sinal só aparece no que está em aberto, nunca como decoração. Isso já valia informalmente desde o02; fica registrado agora como regra, não coincidência.

4. Trilha 2 — Sistema tátil

Cada peça testada contra as referências de Alan, com correção quando a referência batia de frente com decisão já fechada.

4.1 Escala de elevação — nomeando o que já existia

Alan trouxe quatro referências de kit de UI genérico (Product UI Styleguide, um kit de "foundations" com camadas base/raised/inset/pressed, o design system do produto "Contra", um dashboard de gráficos escuro) pedindo para avaliar o que somar aos componentes. Nenhuma delas foi adotada como veio — a maior parte é vocabulário de aplicação sem tela real para testar (ver seção 6). Mas uma comparação valeu: a segunda referência descreve camadas "base/raised/inset/pressed" — a mesma lógica de metal prensado já registrada para o botão 3D (seção 4), chegando por uma fonte independente. Isso revelou que as peças já construídas (selo, etiqueta, placa, botão) já tinham uma escala de elevação implícita, nunca nomeada.

Três níveis reais, não os 5 genéricos da referência:

Não existe um quarto nível ("modal/popover" nas referências) — fica em aberto até existir uma tela real que precise de sobreposição (seção 6).

5. Recusado por doutrina, não por gosto

• Losango de categoria — a forma vem do rótulo de transporte de produtos perigosos (existe de verdade na logística do ABC — o placar de "DIESEL" do próprio moodboard é esse símbolo). Mas o significado dele é risco regulatório; usá-lo para marcar conteúdo sem risco ("Camada 5", "Território") seria pegar emprestada a forma sem o sentido. A fita/Sinal já cobre "atenção" — um segundo símbolo para o mesmo papel duplicaria trabalho já resolvido.
• Vermelho como cor de perigo/atenção — quase todo o moodboard de etiqueta industrial usa vermelho (fita PERIGO, hazmat, fragile sticker). Vermelho já foi recusado por doutrina na cor (risco de leitura partidária, greve do ABC/PT). Todo componente que precisar do papel "perigo/atenção" usa Sinal+Tinta, nunca vermelho.
• Amarelo/preto de "caution tape" genérico — mesmo motivo da cor: amarelo não é token, ocupa o mesmo território semântico do Sinal.
• Sombra suave e difusa (tendência genérica de UI) — recusada em favor de sombra dura, sem borrão, no botão 3D. Sombra difusa é estética de app importada, sem lastro em nenhum objeto real dos pilares de SBC.
• Sticker decorativo instalado como veio (SegmentUI) — instalar a referência sem tradução contradiria a mesma regra que já derrubou o glitch (o02) e recalibrou o amarelo (cor): forma sem rastreio até um princípio da Camada 1. A mecânica de arrastar foi mantida; o conteúdo virou etiqueta de ofício (seção 4).
• Paleta genérica de SaaS (azul/branco/cinza) — do "Product UI Styleguide" trazido por Alan. Nenhuma cor rastreia a SBC ou aos 7 tokens já fechados; é a paleta que qualquer produto de software usa, não uma paleta da BAZEá.
• Cores da marca "Contra" (teal/amarelo/preto) — é a identidade de outro produto real, não uma referência neutra. Adotar essas cores seria vestir a BAZEá com a marca de outra empresa.
• Gradientes neon do dashboard escuro — vocabulário de produto de dados (fintech/analytics), sem lastro em nenhum dos quatro pilares de SBC nem em qualquer princípio da Camada 1.
• Escala de elevação de 5 níveis genérica — substituída pelos 3 níveis reais que as peças já construídas tinham (seção 4.1); a referência tinha um nível a mais ("modal/popover") que não existe em nenhuma peça da BAZEá ainda.

6. Em aberto

1. Sticker solto/puramente decorativo — Alan confirmou que quer que exista em algum momento, além da versão de etiqueta de ofício já fechada aqui. Fica intencionalmente aberto para evoluir, não é lacuna a fechar agora.
2. Aplicação em bazea-o04.html — nenhum componente deste documento (Trilha 1 formalizada ou Trilha 2) foi retrofitado no ensaio ainda. Mesma pendência que já existe para a iconografia.
3. Trilha 3 — catálogo de aplicação, inventariado mas não construído. As referências genéricas de UI trazidas por Alan (seção 4.1) mapeiam o que um app real vai precisar quando existir uma tela de verdade para testar contra (Camada 6 ou primeiro cliente) — mesma disciplina que já recusou fabricar grid de fachada sem projeto físico:
   • Fundações: camadas de profundidade (já cobertas pela escala de elevação, 4.1), escala de raio, espessura de borda, regra de traço de ícone em tamanho pequeno.
   • Controles: botão (estados normal/hover/pressed/disabled), checkbox, radio, switch, slider, campo de texto (com erro/preenchido).
   • Navegação: tabs, breadcrumb, stepper de processo, paginação.
   • Exibição de dado: card, lista, badge, avatar, tooltip, cabeçalho de tabela.
   • Feedback: modal de confirmação, toast, banner de alerta, progresso linear, spinner, skeleton, estado vazio.
4. Traço de ícone em tamanho pequeno (16-24px) — achado ao analisar as referências de componentes, não estava previsto na iconografia. O Registro 2 (05-programa-visual-iconografia.md) fixa espessura de traço em 8px numa grade de 64px (12,5% do ícone); em 16-24px isso fica desproporcional (33-50%). Precisa de uma regra de espessura por tamanho, não resolvido aqui — é ajuste da iconografia já fechada, exige o mesmo cuidado que fechou o Registro 2.
5. Componentes de formulário/navegação real (input, select, nav, modal) — aguardando uma tela real de aplicação (Camada 6 ou o primeiro cliente que precisar), mesma disciplina que já recusou fabricar grid de fachada sem projeto físico.
6. Motion — estava bloqueado por este item; agora destravado. Referência já registrada e parcada: parallax scroll (Framer University, links "Insane Parallax Animation" e "Parallax Image Scroll").

---

Rastreabilidade → Elemento (PROGRAMA), seed