Ir ao conteúdo
SEED engenhariaDesign System

Componentes

76. GRAFISMO DA MARCA — a SERRA EM ARCOS

estávelseed-componentes.md v1.43 · §76seção 82 de 9876-grafismo-da-marca-a-serra-em-arcos-rodape.md · MD5 bd6d7712

Título completo no canon: GRAFISMO DA MARCA — a SERRA EM ARCOS (rodapé, PADRÃO) e a MONTANHA (topo, opção) · dois regimes de regra independentes · estável (2026-08-20/21, décima primeira parte) · geradores gen-zero-formatos.py · gen-z3-largos.py · gen-variantes-montanha.py

QUEM LÊ ISTO SEM TER VISTO A CONVERSA. O "grafismo" da SEED engenharia é o elemento gráfico de linha que assina as peças de marca (post, cartão, banner, capa, pasta, story) e as superfícies de produto. O canon o define em marca-seed.md §7 — "Grafismo v2 — linguagem de linhas" — e essa definição é aqui citada de SEGUNDA MÃO: a pasta Design System v2 guarda apenas uma CÓPIA daquele arquivo, e a leitura do canônico é a pendência MR-P3. Toda regra numérica de canon citada nesta seção é de segunda mão até a MR-P3 fechar. O que NÃO é de segunda mão: os onze vereditos do decisor (verbatim abaixo) e todos os números medidos, que vieram de instrumento nesta casa. Registro completo da rodada: validacao/MANIFESTO.md §103. Dimensões de cobertura que nasceram dela: mapa-cobertura-ds.md §22.15.

76.1 O PAPEL — e por que este componente é diferente de todos os outros deste arquivo#

Todos os outros componentes deste arquivo são de INTERAÇÃO: têm estados, respondem a ponteiro e teclado, e por isso se validam por comportamento. O grafismo não interage com nada. Ele é decorativo no sentido normativo estrito: não carrega informação, não recebe foco, é aria-hidden="true" e focusable="false", e não responde a piso de contraste de norma (nem SC 1.4.3, que é de texto, nem SC 1.4.11, que é de componente de interface). Isso não o torna livre: ele responde a um contrato de MARCA, que é mais restritivo em área e mais frouxo em contraste.

Do canon (segunda mão, marca-seed.md §7): traço 1,5–2px, stroke-linecap: round, sempre horizontal (nunca rotacionar), nunca voltar à massa preenchida, área total de grafismo ≤10% da peça, e a frase que governa tudo — "grafismo é o elemento mais silencioso da peça".

A ORIGEM DO DESENHO, dita pelo decisor em 2026-08-20 e que não estava escrita em nenhum documento (é o núcleo da emenda MR-P4):

"as ondas sao representacao de montanhas, pois remete ao verde, a natureza, logo as ondas devem se cruzar para formar um efeito de uma imagem na qual tem montanhas na frente e atras."

A curva não é uma onda decorativa: é uma cordilheira em planos que se cruzam. Perder essa leitura é perder o significado, não só a estética. Origem não registrada morre na primeira pessoa que sai do projeto — e foi por não estar escrita que se desenharam duas linhas paralelas, que é ritmo, não serra.

76.2 ⚠ DOIS MODELOS, DOIS REGIMES DE REGRA — leia isto antes de tocar em qualquer um dos dois#

Este é o ponto onde um leitor futuro se engana se a seção não avisar. Existem DOIS modelos de grafismo aprovados, e as regras de um NÃO valem para o outro. A fronteira é veredito, não inferência:

Rafael Sant'Ana, 2026-08-21, verbatim: "o uso das montanhas/ondas no topo nao é o padrao, o padrao em em baixo, mas aprovei esse modelo de montanha para usar no topo caso o criador queira coloca-las no topo."

E, sobre a tentativa de estender a regra do rodapé ao topo: "para as montanhas do topo, eu aprovei dessa forma porque o desenho ficou muito bom, entao nao tem problema nao seguir a regra das ondas do rodape. considere que o topo segue uma regra e o rodapé outra regra."

modelo MONTANHA modelo SERRA EM ARCOS
onde TOPO da peça RODAPÉ da peça
status OPÇÃO — à disposição de quem monta a peça, quando a composição pedir, e sem precisar justificar PADRÃO
planos 3 (fundo · meio · frente) 4 (fundo · longe · perto · frente)
traçado crista bezier de curvatura distribuída arcos que nascem e morrem abaixo da moldura
encontro das linhas oclusão COM FOLGA (traço de máscara 7px) TOQUE EXATO (recorte na própria crista)
faixa 64px em peça de 420 = 15,24% 13,8% cartão · 11,8% banner · 15,7% capa
gerador validacao/gen-variantes-montanha.py gen-zero-formatos.py · gen-z3-largos.py
folha de gate render-audit/gate-montanha/fechamento.html render-audit/gate-z3/fechamento{,-largos}.html

REGRA DE ESCOPO, e ela vale para além deste componente: regra derivada de um modelo fica ESCOPADA a ele até haver veredito que a estenda. O toque exato parecia lei da casa e é regra do RODAPÉ. Generalizar por conta própria teria mudado em silêncio uma peça que o decisor já havia aprovado — que é a forma mais cara de "conserto" que existe neste projeto.

O CONFLITO DE ALTURA, e por que os dois modelos o resolvem por lados opostos — a emenda de canon tem de escrever OS DOIS, senão parecem contradição: a serra precisa de ~15% da altura da peça para LER como serra (abaixo disso vira linha), e o canon dá ~8% ao "detalhe de rodapé". A montanha escapou indo para o TOPO, onde aquele teto não se aplica; a serra em arcos escapou mudando o teto — o decisor aprovou faixas de 11,8% a 15,7% no rodapé.

76.3 O MODELO SERRA EM ARCOS — anatomia, e as três regras de construção#

Anatomia (4 planos, de trás para a frente):

  • FUNDO — única linha contínua atravessando a peça inteira; a mais alta e a mais clara. Sem "ombros" (a 2,2px eles viravam ruído — veredito).
  • LONGE e PERTO — morros PARCIAIS em duas profundidades: arcos que nascem e morrem abaixo da moldura ou atrás de outro morro. Cume fora de centro, flancos assimétricos, ápice ARREDONDADO — nunca ponta: "o nosso nao é pontudo e sim uma ondulaçao".
  • FRENTE — baixa e suave; atravessa a peça mergulhando abaixo do limite inferior entre um cume e outro. Não pode ser alta: "nao pode ser tao alta, ela tampa os cumes do fundo".

Três regras de construção, todas nascidas de veredito:

① TOQUE EXATO. "as linhas devem se tocar, se uma linha acaba antes de tocar a outra nao da sensacao de profundidade". A oclusão é feita por recorte na PRÓPRIA crista dentro de <mask>, folga zero: a ponta redonda da linha de trás ENCOSTA no traço da frente. É construção, não retoque. O que existia antes era uma máscara deslocada 2,2× o traço, e a linha de trás terminava flutuando ~11px acima — literalmente "acabar antes de tocar".A oclusão é sempre por <mask>, NUNCA por forma preenchida: assim funciona sobre qualquer fundo e não viola "linha, nunca massa". E o corte de oclusão é o idioma do desenho técnico — linha interrompida para indicar o que passa por cima — o que conversa com o princípio "precisão de engenharia como estética" em vez de brigar com ele.

② REGRA DO FRAGMENTO. "pode fazer sentido ver um pedacinho de morro sobre o outro [na foto], mas na nossa representacao nao faz sentido pois em linhas nao fica bonito e profissional, clean". Trecho visível de linha com comprimento < 80px (calibrado na cena de 1080; escala com a janela) OU folga máxima < 9px sobre a linha que o oclui é SUPRIMIDO na máscara. Ou o morro aparece de verdade, ou não aparece. A regra roda POR FORMATO: o que vira fragmento numa proporção não vira em outra.

③ CRITÉRIO DO MOVIMENTO. "nao pode perder o sentido de movimento apesar de serem montanhas". O movimento é parte do SIGNIFICADO — a onda originou o desenho, a montanha é a leitura. Composição que congele a serra viola o aprovado, mesmo com cada linha correta.

76.4 A LEI DA ESCALA — forma em UNIDADES DE FAIXA, e a âncora em peça larga#

O defeito que a criou (veredito, 2026-08-21): "no cartão de visita e no banner 3:1 1500×500, ficou muito achatado em baixo, esmagado."

A causa, medida (e é de causa, não de sintoma): as larguras dos morros eram frações da LARGURA DA PEÇA e as alturas frações da FAIXA. No post (1080×85, razão w/F = 12,7) o morro massivo sai 432×62 px — a proporção aprovada. No banner (1500×39, w/F = 38,5) o MESMO morro sai 450×28 px — razão 16:1, esmagado.

LEI: a forma do morro é constante em UNIDADES DE F (altura da faixa); o que muda com a largura da peça é a COMPOSIÇÃO, nunca a forma. Peça larga não ganha morro esticado. Razão natural da cena aprovada: w/F = 12,7.

Consequência de composição — a ÂNCORA. Peça larga-baixa recebe a cena ancorada numa janela de proporção natural (largura da janela = 12,7 × F), no lado oposto ao texto; a linha da FRENTE continua atravessando a peça inteira, mergulhada abaixo do limite fora da janela. Foi assim que L4 e L5 foram resolvidos: a janela começa no CENTRO (largura = w/2) e a faixa sai por CONSEQUÊNCIA — banner 750/12,7 = 59px, capa 792/12,7 = 62px.

Regras de adaptação por formato, declaradas em gen-zero-formatos.py: faixa = floor(h × 0,0795) · densidade do fundo n = max(3, round(7 × w/1080)) · peça com largura < 700px recebe SUBCONJUNTO da cena (massivo + apoio + frente de 1 cume) · traço escala com a FAIXA (3,5 × F/86), com grampo de 1,5 a 4,5px · a regra do fragmento roda por formato.

76.5 AS ESCADAS DE COR — e nenhum hex fora da rampa canônica#

Rampa turquesa canônica (seed-tokens.md §3): #E8FBF7 50 · #CDF3EC 100 · #9CE4D8 200 · #66D1C2 300 · #11B0A0 400 (âncora) · #00A192 500 · #098475 600 (âncora, o verde institucional) · #006C62 700 · #005048 800 · #00352F 900.

Princípio: perspectiva atmosférica. O que está longe é mais claro e mais fino; a frente é sempre a mais firme. No tema escuro o plano de trás quase se dissolve no fundo — é a "névoa".

modelo · tema fundo da peça frente perto longe plano de fundo
arcos · claro (C1) #FFFFFF #098475 #11B0A0 #66D1C2 #9CE4D8
arcos · escuro (E1-névoa) #005048 #66D1C2 #11B0A0 #098475 #006C62
montanha · claro #FFFFFF #098475 #66D1C2 #9CE4D8
montanha · escuro #005048 #66D1C2 #11B0A0 #006C62

Veredito da escada escura (2026-08-21): "pergunta 2, E1 nevoa fica melhor". A alternativa descartada, com número: a escada "presença" (que começava em #9CE4D8). Ele viu as duas na MESMA peça, com a cor como única variável: diferença medida de 7.413 px de 630.000 (1,18%) no verso do cartão e 5.048 px (0,80%) na capa, delta máximo de canal 85 de 255 — medição repetida com uma condição variada, e o veredito sobrevive.

⚠ SUPERSEDE FORMAL — o #0A6B60 está MORTO, e a regra que saiu disso#

Até 2026-08-21 o plano de trás das peças escuras usava #0A6B60. Essa cor nunca foi token da SEED: varredura de alvo de pasta em seed-tokens.md e seed-tokens.json0 ocorrências. Ela entrou "por precedente" e o arquivo do precedente não existia. Veredito: "eu nao autorizei e vc nao deveria ter criado sem autorizacao algo canonico e ja decidio." Substituída por #006C62 (turquesa-700). Medição que garante que a aparência aprovada não se perde: ΔE76 = 1,03 (limiar de percepção ~2,3) · contraste entre as duas 1,011 · contra #005048, 1,466 e 1,482 · no pixel da peça inteira a troca move 0,31% dos pixels com delta máximo de 10 em 255. REGRA §0-b DA CASA: valor de marca que não existe no canônico não se cria — nem por precedente, nem provisoriamente, nem porque a diferença é invisível. ls o arquivo do precedente antes de invocá-lo.Onde o #0A6B60 PERMANECE, e é de propósito: no estudo 3 (gen-estudo-seed.py e render-audit/estudo-seed/estudo.html). Aquele arquivo é o REGISTRO do que o decisor viu quando escolheu; trocar o valor lá seria falsificar a pergunta para arrumar a resposta. Recebeu supersede no docstring, e o HTML gerado saiu byte-idêntico (md5 b88e6d32485b9312439659c2681c0e60).

DECISÃO REGISTRADA COM O PORQUÊ: o AMARELO não entra nas linhas do grafismo. O canon dá ao amarelo o papel de acento único (o "risco") e manda o grafismo ser o elemento mais silencioso da peça — amarelo na serra criaria dois acentos competindo. Alternativa descartada, não esquecida.

76.6 AS PEÇAS APROVADAS — o inventário com número#

Serra em arcos · 7 formatos (gen-zero-formatos.py):

# formato faixa % altura traço
F1 post 1:1 · 1080×1080 · claro 85px 7,9% 3,46px
F2 cartão de visita · 1050×600 · claro 47px 7,8% 1,91px
F3 cartão · brand-deep 47px 7,8% 1,91px
F4 banner 3:1 · 1500×500 · claro 39px 7,8% 1,59px
F5 capa LinkedIn 4:1 · 1584×396 · brand-deep 31px 7,8% 1,50px (piso)
F6 pasta / A4 · 874×1240 · claro 98px 7,9% 3,99px
F7 story 9:16 · 1080×1920 · brand-deep 152px 7,9% 4,50px (teto)

Serra em arcos · 5 peças largas (gen-z3-largos.py), todas com w/F = 12,7 — L2, L3, L4 e L5 APROVADAS ("L2 e L3 estão ok" · "pergunta 1… está aprovado"); L1 descartada, era só a variação de comparação:

# peça janela faixa %
L1 cartão dentro do teto de ~8% 597px à direita 47px 7,8%
L2 cartão, frente, rodapé natural largura total 83px 13,8%
L3 cartão, verso brand-deep largura total 83px 13,8%
L4 banner 3:1, janela do CENTRO à direita 750px 59px 11,8%
L5 capa 4:1, janela do CENTRO à direita 792px 62px 15,7%

Montanha · 5 colocações (gen-variantes-montanha.py) — P3 e P4 APROVADAS. ⚠ Placares medidos pela guarda-grafismo.mjs, que foi perdida: são históricos e hoje irreproduzíveis (GR-P3).

# colocação faixa % área glifo velado GR1 lê como serra?
P1 rodapé 32px 32px 7,62% 1,84% 0 PASS não — vira linha
P2 rodapé 64px 64px 15,24% 2,17% 0 FAIL GR1-c sim
P3 TOPO 64px · branco 64px 15,24% 2,17% 0 PASS sim
P4 TOPO 64px · brand-deep 64px 15,24% 2,04% 0 PASS sim
P5 rodapé 64px · brand-deep 64px 15,24% 2,04% 0 FAIL GR1-c sim

Contraste nas quatro colocações: 8 PASS · 0 FAIL. Zero pixel de núcleo de letra velado em TODAS as doze peças dos dois modelos — o grafismo não toca o texto em nenhuma.

A geometria da montanha, congelada e com procedência (extraída literalmente do artefato aprovado; viewBox 420×64 com preserveAspectRatio="none", que é como a faixa escala):

plano traçado traço
fundo M-4,60.0 C 70,58.0 96,4.0 118,4.0 C 148,4.0 220,52.0 424,48.0 1,5px
meio M-4,62.0 C 90,60.0 150,24.0 186,22.0 C 220,22.0 300,54.0 424,52.0 1,75px
frente M-4,64.0 C 160,62.0 226,58.0 268,14.0 C 284,2.0 310,14.0 424,60.0 2px

NÃO EDITAR estes três traçados sem veredito dele: são a peça aprovada.

76.7 O CONTRATO GR1 — escrito, e HOJE SEM INSTRUMENTO#

# cláusula limite medido nas peças
GR1-a área total de grafismo na peça ≤ 10% arcos 0,67–1,12% · montanha 1,84–2,17%
GR1-b o grafismo não vela o núcleo do glifo do símbolo 0 px 0 em todas as 12
GR1-c faixa de rodapé ≤ teto do canon ~8% da altura 7,8–7,9% nos 7 formatos

⚠⚠ A GUARDA NÃO EXISTE NA PASTA. A validacao/guarda-grafismo.mjs nunca foi propagada (ver MANIFESTO §103.9): não está na pasta nem no índice do Drive. Todo placar "GR1 7 PASS" que apareça em folha antiga é HISTÓRICO e IRREPRODUZÍVEL, e nesta casa irreproduzível vale como NÃO VERIFICADO. As três cláusulas acima são a reconstrução do contrato a partir das citações e dos placares impressos — é o que torna a GR-P3 executável. Pasta de prova primeiro (render-audit/prova-gr1/, onde FAIL é o resultado desejado), com uma prova por cláusula, e só então placar novo.

A GR1-c REPROVA QUATRO PEÇAS APROVADAS, DE PROPÓSITO. L2, L3, L4 e L5 excedem o teto de ~8%. São FAILs sancionados pelo decisor, que ficam vermelhos até a emenda de canon existir. Guarda cujo limite se afrouxa para caber no desenho não é guarda — o limite muda quando o CANON muda, nunca antes.

76.8 COMO CONSUMIR — a árvore de decisão#

  1. A peça leva grafismo? Se ela já tem foto ou dado forte perto da borda, considere não levar: grafismo é o elemento mais silencioso da peça.
  2. Rodapé ou topo? Rodapé é o PADRÃO. Topo é opção de quem monta, quando a composição pedir — e usa o outro modelo (montanha), com o outro regime de regra.
  3. Tema. Claro → escada C1. Brand-deep → escada E1-névoa. Nenhum hex fora da rampa canônica turquesa, nos dois.
  4. Escala. A forma é constante em unidades de F; w/F = 12,7 é a razão natural. Peça larga-baixa → cena ANCORADA em janela natural no lado oposto ao texto, com a linha da frente atravessando a peça inteira.
  5. Nunca rotacionar · nunca massa preenchida · nunca amarelo nas linhas · nunca um morro em fragmento (regra do §76.3-②).
  6. Não recrie o traçado à mão. Os geradores são a fonte: gen-zero-formatos.py (7 formatos), gen-z3-largos.py (peças largas), gen-variantes-montanha.py (topo). Traçado redigitado é dado sintético plausível — a classe de defeito mais perigosa desta casa, porque não chama atenção.

76.9 FRONTEIRAS E PENDÊNCIAS#

  • MR-P3 — o marca-seed.md desta pasta é CÓPIA. Toda regra de canon citada aqui é de segunda mão. ✅ O acesso à pasta-mãe existe desde 2026-08-21; falta ler.
  • MR-P4 — a emenda de canon, a escrever COM o decisor, com quatro itens: a origem "onda = montanha"; o critério do movimento; a distinção serra-cenadetalhe de rodapé de 1–2 linhas com os tetos por formato (13,8% · 11,8% · 15,7%); e os dois regimes de regra com a hierarquia de uso. Só depois disso a GR1-c é atualizada.
  • MR-P6traço em MM para impressão (cartão 89×51mm, pasta A4). Todo número desta seção é px de TELA.
  • GR-P3 — reescrever a guarda-grafismo.mjs (§76.7).
  • Dívida técnica declarada — a gramática (cordilheira/filetes/morro/ frente_ondulada/compoe) está COPIADA em três geradores. A troca de cor desta rodada precisou ser feita em dois arquivos. Consolidar em lib quando o modelo estabilizar; até então, mudança num é mudança nos outros.
  • Este componente não tem bancada nem suíte, e a fronteira é declarada: ele não interage, então não há comportamento a asserir. O que ele tem é gate visual humano + o contrato GR1 + a régua de contraste. Quando a GR-P3 fechar, a bancada faz sentido; hoje seria uma galeria de estados impressos, que é DESENHO (§67.4).
Esc