Programa Visual — Iconografia

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

Quarto subconjunto da Camada 5, depois de 05-programa-visual-cor.md, 05-programa-visual-tipografia.md e 05-programa-visual-grid.md. Fechado por definitivo em 2026-08-16 — aprovado por Alan. Tudo que está registrado aqui passou por verificação geométrica (amostragem de pixel, não só leitura de código) antes da aprovação.

Depende de: tipografia (Bitter, "contraste nulo") e grid (escala de espaçamento base 8) já fechados. Alimenta: Camada 6 (componentes de UI), qualquer peça gráfica ou digital que precise de símbolo.

---

1. Contexto

Alan trouxe uma pasta de referências de moodboard (referencias-moodboard/iconografia/) e pediu explicitamente: iconografia exclusiva, desenhada do zero, rica o bastante para cobrir "diversos modelos de negócio". Não citar biblioteca pronta (Phosphor, já usada pelo cliente LCC, foi descartada como base por essa razão) — mesmo padrão de recusa por doutrina que já apareceu na cor (glitch importado) e na tipografia (Jost/construtivismo rejeitado).

2. Método — como o módulo foi escolhido, não inventado

Nove imagens de referência analisadas, agrupadas em quatro blocos:

1. Módulo de pétala (três referências independentes — um sistema de ícones coloridos, um alfabeto completo, o sistema da Garfield County) — quadrado 2×2, cada quadrante cheio, vazio, ou cortado por um quarto-de-círculo ancorado num canto.
2. Ícones funcionais de linha (duas referências) — traço geométrico convencional.
3. Monograma abstrato — território de logotipo, fora do escopo (Alan pediu para não reabrir logotipo sem trazer o próximo passo).
4. Ilustração orgânica lúdica — traço solto, oposto ao que a doutrina já fechou.

O bloco 1 (módulo de pétala) foi escolhido por convergência de quatro critérios independentes, não preferência estética:

• Tipografia (Bitter): "contraste nulo, terminais quadrados" — preenchimento sólido geométrico é a mesma lógica formal, sem a tensão de terminal arredondado vs. quadrado que uma biblioteca de traço (Phosphor) traria.
• Grid: a combinatória de 12 colunas já é "uma peça base que se reagrupa" — o módulo de pétala é a mesma ideia em forma.
• Isotype (Otto Neurath, anos 1920-30): silhueta sólida, sem detalhe interno, composição por combinação de formas simples, consistência absoluta (mesmo ícone = mesmo significado sempre).
• ISO 7001 (pictograma de sinalização pública): silhueta sólida lê bem à distância — relevante para a exigência de Alan de "funcionar até numa fachada".

3. Registro 1 — Módulo (conceito, marca, categoria)

Construção: ícone em quadrado 64×64 (ou qualquer múltiplo consistente), dividido em 4 quadrantes de metade do lado. Cada quadrante: vazio, cheio, ou um recorte de quarto-de-círculo ancorado num dos 4 cantos do próprio quadrante (raio = lado do quadrante). Âncora no canto que toca o centro do ícone = pétala "para dentro"; âncora no canto oposto = pétala "para fora". Técnica de implementação: clipPath com circle em coordenadas absolutas (nunca relativas ao quadrante — foi a causa de um erro real, ver seção 6).

Regra de peso — faixa de preenchimento 55–80%. Calculado por área de quadrante: cheio = 100%, pétala = 78,5% (constante — não muda com o canto-âncora, só a orientação), vazio = 0%. Soma dividida por 4. A faixa não foi escolhida a priori: é a dispersão real que os quatro pilares de SBC ocuparam sozinhos (57,2–76,8%), com margem de arredondamento. Serve para não ter ícone "pesado" ao lado de ícone "fraco" na mesma fileira — o equivalente, em preenchimento, à exigência de tamanho consistente da Isotype.

3.1 Sete conceitos testados

Conexão começou como 2 pétala + 2 vazio (38,6%, fora da faixa) — subir para 3 pétala mudou a leitura de "duas formas se tocando" para "três convergindo". Mudança de conceito registrada, não escondida atrás do ajuste de peso.

4. Registro 2 — Traço (função, convenção universal)

Por que existe: busca, seta, fechar, menu dependem de convenção rígida (lupa com cabo, X, linhas paralelas) que o vocabulário do módulo — só aresta reta de quadrante e arco de quarto-de-círculo — não produz. Coração testado no Registro 1 puro também falhou: a composição resultou em duas "asas" separadas por um V, não dois lóbulos — confirmado por reconstrução de silhueta via amostragem, não por leitura de código.

Construção: mesma malha do módulo, estendida — grade de 25 pontos (0/16/32/48/64 em cada eixo, todos múltiplos de 8). Linha reta nasce e termina só nesses pontos. Espessura de traço = 8px (--sp-1, a própria base da escala de espaçamento já fechada no grid — não é número novo). Terminação de ponta solta: reta/quadrada (stroke-linecap: butt), o mesmo caráter de contraste nulo da Bitter. Círculo permitido, raio múltiplo de 8.

4.1 Regra de concordância (junção interna)

Dois segmentos que compartilham um ponto dentro do mesmo ícone precisam ser um só <path>, nunca duas <line> independentes — duas retas com ponta quadrada que só tocam num ponto não se fundem sozinhas; sobra fresta (erro real, corrigido — ver seção 6).

A concordância no vértice compartilhado é um arco, com raio calculado pela trigonometria do ângulo daquele ícone especificamente, nunca um raio-padrão aplicado sem checar:

metade do ângulo no vértice = θ/2
distância do vértice até o ponto de tangência = R / tan(θ/2)
raio máximo válido = comprimento do braço × tan(θ/2)

Dois raios registrados como válidos, a usar conforme o peso visual que o ícone pede:

• R = 8 (sutil) — concordância discreta, quase reta. Ícones onde a legibilidade em tamanho pequeno importa mais que o gesto.
• R = 16 (generosa) — inspirada no raio 32 do ícone Móveis (Registro 1), mas recalculada para o que cabe: 32 é inválido para a seta (o ponto de tangência cairia a 64px do vértice, o dobro do comprimento do próprio braço, 35,8px). 16 é o maior múltiplo de 8 que respeita o teto geométrico (17,9 para esse ângulo específico).

Nenhum dos dois é "o raio do sistema" — o sistema é a fórmula. Cada ícone novo recalcula o teto antes de escolher.

4.2 Quatro conceitos testados

5. Aplicações testadas

Formato Destaque do Instagram (círculo ~88px, ícone centralizado, legenda embaixo). Anel do círculo em Conferido (azul, neutro) — não uma cor por categoria, que é o padrão comum de pacote de destaque. Colorir o anel por categoria contrariaria a disciplina já fechada: Sinal e Mata são raros de propósito; usá-los como "papel de parede" decorativo giratório esvaziaria o que já significam.

6. Erros reais encontrados e corrigidos (registrados por disciplina, não por constrangimento)

1. Ícone Automóveis (roda), primeira tentativa: três dos quatro clipPath usavam coordenada relativa ao quadrante em vez de absoluta no ícone — três quartos da roda saíam com âncora errada. Só foi pego por amostragem de pixel (o preview visual falhou, limitação já documentada no CLAUDE.md); corrigido reduzindo para um único clipPath compartilhado pelos 4 quadrantes (todos ancoram no mesmo ponto: o centro do ícone).
2. Ícone Favorito (coração) no Registro 1: leitura de cabeça da geometria (duas corcovas redondas) estava errada. Reconstrução de silhueta por amostragem revelou duas "asas" com V fundo — forma diferente da esperada. Não apresentado como sucesso; motivou a criação do Registro 2, onde o coração se resolve com círculo + 2 diagonais.
3. Ícone Seta no Registro 2: duas <line> independentes com ponta quadrada, compartilhando o ponto do ápice, não se fundem — sobra fresta. Identificado por Alan a partir de um screenshot, não por verificação interna. Corrigido com <path> único e arco de concordância com raio calculado por trigonometria (seção 4.1), não com stroke-linejoin: round genérico (que teria dado raio = metade da espessura do traço por especificação do SVG, sem controle sobre o valor).

6.1 Referências adicionadas depois — registradas, não aplicadas

Quatro imagens novas em referencias-moodboard/iconografia/, adicionadas por Alan depois do Registro 1/2 já definidos:

• Alfabeto de pétala (mesmo módulo do bloco 1, seção 2 — confirma a escolha, não traz técnica nova).
• "The Circular Alphabet", Stuart Thursby — círculo cheio com corte de linha reta por cima. Diferente dos dois registros: aqui a curva (Registro 1) e o traço (Registro 2) coexistem dentro da mesma forma, não em ícones separados. Candidato a um terceiro modo de composição — não testado ainda.
• "Quarter Curve Font", Richard Thomas Designs — mesmo módulo de quarto-de-círculo, construído de forma independente por outro designer. Confirma a escolha do bloco 1. O efeito de cor sobreposta (uma cor por quadrante) não se aplica aqui — contradiz a disciplina já fechada de Sinal/Mata raros de propósito.
• Quadrado preto com furo circular branco — mesma técnica subtrativa já usada sem citação (furo do cubo em Automóveis, anéis do Calendário). Confirma como construção reconhecida, não invenção isolada do projeto.

7. Em aberto

O sistema (dois registros, regra de peso, fórmula de concordância) está fechado. O que segue aberto é extensão e aplicação, não a decisão em si:

1. Critério de quando usar R=8 vs. R=16 no Registro 2 — as duas ficam registradas como válidas, mas não há regra ainda para qual contexto pede qual. Primeiro dado real, achado no ensaio o05: aplicado à Seta, R=16 é matematicamente válido (não ultrapassa o teto de 17,9) mas falha visualmente — a tangência consome quase todo o braço, sobrando pouca linha reta, e o ícone deixa de ler como seta (vira parêntese). Alan apontou isso pelo próprio ensaio, não verificação interna. Hipótese de regra, ainda não fechada: R=16 pede braço proporcionalmente mais longo que R=8 para o traço reto sobreviver — precisa de mais ícones testados antes de virar critério.
2. Mais conceitos a testar no Registro 1, além dos 4 pilares + 3 verticais.
3. Cor dos ícones fora do card de teste (hoje sempre Tinta sobre Vellum) — não testado sobre fundo escuro nem com Sinal/Mata em uso funcional (não decorativo).
4. Retrofit — nenhum ícone deste documento foi aplicado a bazea-o04.html ainda.
5. Terceiro modo de composição (curva + traço na mesma forma, referência "Circular Alphabet") — registrado na seção 6.1, não testado.
6. Traço em tamanho pequeno (16-24px) — achado ao analisar referências de componentes (ver 05-programa-visual-componentes.md §6). A espessura de 8px numa grade de 64px (seção 4) é 12,5% do ícone; em 16-24px de UI real isso fica desproporcional (33-50%). Precisa de uma regra de espessura por tamanho — não resolvido ainda.

---

Rastreabilidade → Elemento (PROGRAMA), seed