---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 76
titulo: "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`"
sequencia: 82 de 98
bytes_do_corpo: 20037
md5_do_corpo: bd6d7712d9954ad2af92bae1fd2ce759
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-componentes.md
---
## 76. 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.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. **`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-cena` ≠
  `detalhe 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-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).*