Componentes
76. GRAFISMO DA MARCA — a SERRA EM ARCOS
seed-componentes.md v1.43 · §76seção 82 de 9876-grafismo-da-marca-a-serra-em-arcos-rodape.md · MD5 bd6d7712Tí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 pastaDesign System v2guarda 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
#0A6B60está 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 emseed-tokens.mdeseed-tokens.json→ 0 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.lso arquivo do precedente antes de invocá-lo. ⚠ Onde o#0A6B60PERMANECE, e é de propósito: no estudo 3 (gen-estudo-seed.pyerender-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 (md5b88e6d32485b9312439659c2681c0e60).
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.mjsnunca 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#
- 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.
- 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.
- Tema. Claro → escada C1. Brand-deep → escada E1-névoa. Nenhum hex fora da rampa canônica turquesa, nos dois.
- 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.
- Nunca rotacionar · nunca massa preenchida · nunca amarelo nas linhas · nunca um morro em fragmento (regra do §76.3-②).
- 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.mddesta 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-cena≠detalhe de rodapé de 1–2 linhascom 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-P6 — traç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).