26 · Manual Visual

Fontes: brand/guidelines/19-identidade-visual.md — fonte upstream primária · 20-moodboards.md · 21-simbolos-e-logotipo.md · 22-paleta-de-cores.md · 23-conjunto-tipografico.md · 24-grafismos.md · 25-direcao-de-imagem.md · 18-manual-verbal.md — gêmeo estrutural · 00-indice.md — mapa e precedência · 01-essencia.md §1.4 · MANIFESTO.md §2, §5, §8 · BRIEFING.md §4, §7 · .claude/ui-design/visual-language.md · .claude/ui-design/anti-patterns.md · .claude/content-design/forbidden-terms.md §5.2 · design-system/tokens/tokens.css — fonte da verdade da matéria visual · Design System materializado (designsystem.peppeai.com).

Este capítulo é a régua operacional visual da marca — a camada que materializa, ativo por ativo e superfície por superfície, o que os capítulos 19 a 25 decidiram. É o documento que se entrega a quem materializa o Peppe visualmente: o designer interno, a agência ou parceiro contratado, o engenheiro de front-end, o revisor (qa-ui) que audita antes da publicação. A pergunta que ele responde, ativo a ativo: como aplico isto, agora, e como sei que parece o Peppe?

---

Nota de método

Este capítulo fecha a Parte IV — Identidade visual, e é o gêmeo visual do capítulo 18 · Manual verbal. Onde o 18 é a régua de quem escreve, o 26 é a régua de quem desenha. Os dois respondem à mesma pergunta — isto soa/parece o Peppe? — em dois lados da mesma marca.

O prompt de diretriz traz cinco etapas de método — formato, estrutura, detalhamento técnico, aplicações, mentalidade de sistema vivo. O capítulo roda as cinco, na ordem, uma seção por etapa (§26.1 a §26.5). Duas observações regem a leitura:

• As etapas 1 e 2 já estão decididas pelo corpus. O formato (Brand System) e a estrutura do conjunto estão fixados no 00-indice.md. Este capítulo reflete essas decisões — não as reabre (prompt-inicial.md §7). O peso do trabalho está nas etapas 3, 4 e 5: a régua operacional dos ativos visuais, o checklist de revisão e o modelo de sistema vivo.
• Este capítulo foi escrito fora de sequência e está em reconciliação. Os capítulos 23 (Conjunto tipográfico), 24 (Grafismos), 25 (Direção de imagem), 27 (Aplicações) e 28 (Lançamento) existem. O 26 os referenciava como ainda não escritos; as referências foram atualizadas conforme o corpus foi completado. Onde o detalhe de cada capítulo não foi explicitamente reconciliado neste manual, o capítulo opera sobre a régua canônica vigente (.claude/ui-design/visual-language.md + tokens.css). Uma rodada de reconciliação formal — re-sintonizando §26.3.4 a §26.3.7 com os capítulos 23, 24, 25 — é recomendada (ver fechamento).

O que neste capítulo é proposta. O modelo de versionamento da marca (§26.5.1), o checklist do designer (§26.4.2) e o fluxo de revisão visual (§26.4.4) são consolidação proposta — materializam, no lado visual, o que o capítulo 18 fez no lado verbal. A régua de uso do logotipo (§26.3.2) é herdada como proposta do capítulo 21 (§21.6) — este manual a consolida, não a redecide. Tudo está listado no bloco de fechamento.

---

26.1 — O formato: um Brand System, não um manual de identidade visual

Método, etapa 1. Decidir entre um Manual de Identidade Visual e um Brand System.

O método pede uma escolha entre dois formatos. O corpus já a fez — e a decisão está cravada na primeira linha do 00-indice.md: as diretrizes do Peppe são "o artefato central do Brand System — a plataforma que orquestra a marca." É DADO. Esta seção registra a decisão e o porquê dela; não a reabre.

Os dois formatos, e por que o Peppe é o segundo

• Manual de Identidade Visual (VPL). Um documento fechado, focado nos ativos visuais e nas regras de uso deles — logotipo, cor, tipografia, aplicações. Resolve como aplicar a marca. Não carrega estratégia, voz nem evolução; pressupõe uma marca estável a documentar.
• Brand System. Um documento vivo que engloba os quatro planos da marca — estratégia, ativos verbais, ativos visuais e a evolução do conjunto. Resolve quem a marca é, e como ela cresce. Pressupõe uma marca em movimento.

O Peppe exige o segundo formato, por três razões que vêm do próprio produto:

1. A marca do Peppe é verbal e visual ao mesmo tempo. O Peppe é um assistente conversacional: ele fala o tempo todo. Voz e forma são espelhos um do outro — o paralelismo V-A/V-B ↔ Registro A/B é estrutural (visual-language.md §8). Um VPL, que só vê o visual, decepa metade da marca.
2. A interface é cenografia mutável. O Peppe usa SDUI — server-driven UI (BRIEFING.md §4, MANIFESTO.md §5). A forma não é um conjunto fixo de telas; é um sistema que se recompõe. Uma marca assim não se documenta num catálogo fechado — documenta-se numa plataforma.
3. A marca é pré-lançamento e está em construção. O Peppe ainda não foi ao ar. As diretrizes estão sendo escritas capítulo a capítulo. Documentar uma marca que ainda se monta exige um sistema que aceite revisão por princípio, não um manual que se fecha e congela.

Onde o capítulo 26 mora dentro do Brand System

O Brand System do Peppe é o conjunto inteiro das diretrizes (00-indice.md). Dentro dele, este capítulo 26 ocupa a camada operacional visual — não é o Brand System inteiro, é a sua régua de execução visual. O capítulo 19 fixou a estratégia visual; os capítulos 20–25 fixam cada ativo; o 26 consolida tudo numa régua aplicável por quem não vai ler os sete capítulos.

O Design System (designsystem.peppeai.com) é um módulo dentro do Brand System, não um concorrente dele (00-indice.md). Ele fornece tokens, fundamentos e componentes materializados — a matéria. Não responde quem a marca é; isso é dos capítulos de diretriz. A governança dessa relação está em §26.5.3.

---

26.2 — A estrutura do manual

Método, etapa 2. Organizar o manual em Introdução, Estratégia, Ativos Verbais, Ativos Visuais e Pontos de Contato.

O método pede para estruturar o conteúdo em cinco blocos. O 00-indice.md já estruturou o Brand System inteiro em cinco partes e 25 capítulos de diretriz (04–28). Este capítulo não reestrutura — reflete o mapa existente e mostra como os cinco blocos do método já estão acomodados nele.

Os cinco blocos do método, mapeados no Brand System do Peppe

A estrutura do método não conflita com a do 00-indice.md — é a mesma marca vista por uma lente um pouco diferente. O índice é a fonte canônica da organização; este capítulo apenas confirma que nenhum bloco do método ficou sem casa.

As três camadas da identidade visual

A identidade visual do Peppe vive em três camadas que não se substituem — o espelho exato do modelo de três camadas da identidade verbal (18-manual-verbal.md §18 — Nota de método):

1. Estratégica — MANIFESTO.md §2 (a gramática V-A/V-B, fonte de verdade do princípio) + capítulo 19 (a carta de identidade visual: o porquê de cada ativo). O nível do o quê e do porquê.
2. Operacional executável — .claude/ui-design/visual-language.md + .claude/ui-design/anti-patterns.md + design-system/tokens/tokens.css. A régua viva, revisada a cada ciclo de design, que rege cada pixel em produção: a matriz superfície × registro, os anti-padrões, os valores dos tokens.
3. Operacional visual — este capítulo 26: como aplicar, ativo por ativo, para quem não vai ler o corpus inteiro.

A precedência em conflito. Vale a mesma regra do lado verbal (18-manual-verbal.md §18): em conflito, a camada operacional executável prevalece em produção. O visual-language.md rege a régua; o tokens.css é o valor canônico de toda cor, raio, sombra e medida (22-paleta-de-cores.md §22 — regra de precedência cravada pelo PO). Este capítulo 26 é o espelho apresentável dessas duas camadas — quando elas mudam, este capítulo se re-sincroniza. E sobre tudo prevalece o MANIFESTO.md §2 quanto ao princípio: o canônico decide a regra, o Design System decide o valor.

---

26.3 — Detalhamento técnico: a régua operacional dos ativos visuais

Método, etapa 3. Para cada ativo: regras de construção e áreas de proteção, aplicações corretas e incorretas, códigos de cor e hierarquia tipográfica.

Esta é a régua de execução. Cada ativo é consolidado aqui no nível operacional; o detalhamento pleno de cada um mora no seu capítulo dedicado, citado no início de cada subseção.

26.3.1 — A régua-mãe: V-A predomina, V-B pontua

Antes de qualquer ativo isolado, uma regra governa todos. A identidade do Peppe é uma gramática de dois registros (MANIFESTO.md §2):

• V-A — Rigor Funcional. O chão. Off-white, cinzas industriais, geometria limpa, superfície lisa trabalhada por luz, zero ornamento. É o que o usuário vê na maior parte do tempo.
• V-B — Retrofuturista. A nota. Acento terroso saturado, calor tátil, a tecla. Aparece em elemento contido — card, ícone, ilustração, a tecla. A textura pontual (padrão de pontos) pertence ao sistema V-A acromático, não ao V-B — V-B pontua por cor e pela tecla, não por textura.

A regra estruturante (MANIFESTO.md §2.3): V-A predomina, V-B pontua. A identidade não está em nenhum registro isolado — está na calibragem entre eles (19-identidade-visual.md §19.1).

A régua de dosagem (dura). Vale em qualquer superfície de produto:

• A superfície global — fundo de tela, shell do app, fundo de seção dominante — é sempre V-A. Terroso como tapete de fundo é violação, não decisão de registro.
• V-B habita apenas elemento contido. Um card V-B no campo de visão é regra; dois é o limite; três é violação (visual-language.md §2.2).
• A única exceção é landing / marketing / campanha: a fachada de comunicação externa admite proporção 50/50 — e mesmo lá, V-B entra por blocos e cards, nunca por fundo de tela.

A régua completa de calibragem por superfície é a matriz superfície × registro (visual-language.md §3) — este capítulo não a reproduz; fixa os pontos de leitura rápida:

26.3.2 — Logotipo e símbolos

Detalhamento pleno: capítulo 21 · Símbolos e logotipo. Esta subseção consolida a régua de uso.

O sistema gráfico — DADO (21-simbolos-e-logotipo.md §21.4). O Peppe tem dois ativos de marca, com papéis separados, e nenhum lockup combinado — a arquitetura da marca é monolítica:

• Wordmark (design-system/assets/peppe-logotype.svg) — a palavra "peppe" em cursiva manuscrita, inscrita numa moldura elíptica fina. viewBox 127 × 46 (proporção ≈ 2,76 : 1). É um outline SVG fechado, não texto vivo em fonte — uma assinatura é um desenho. Marca primária, usada onde há largura horizontal.
• Símbolo circular (brand/assets/logo-circle.svg) — um disco com a inicial "p" cursiva vazada em negativo. viewBox 48 × 48. Variante para fundo escuro: logo-circle-white.png. É a redução da marca para espaço quadrado e estreito: favicon, ícone de app, avatar. O favicon tem fonte canônica (brand/assets/favicon.png) e pipeline reprodutível (generate.sh).

O conceito — DADO (21-simbolos-e-logotipo.md §21.2): o logotipo é uma assinatura manuscrita. A escrita à mão é a contraparte gráfica da automação ingênua — "mostra a mão, não a máquina" (01-essencia.md §1.4).

Régua de uso — PROPOSTA (herdada de 21-simbolos-e-logotipo.md §21.6; este manual consolida, não redecide):

• Cor. O logo não carrega cor própria — é monocromático e herda o contexto via currentColor. Em repouso: ink/primary #171717 sobre superfície clara; ink/inverse #F7F7F7 (ou o ativo logo-circle-white) sobre escura. Quando o wordmark é um link, o hover o leva ao acento âmbar accent/amber-bottom #FA4C00 — a régua V-A predomina, V-B pontua aplicada ao próprio logo. Fora desse caso, o logo não recebe acento, cor funcional nem cor decorativa. (Pendência: os .svg estáticos carregam #262626 legado — reconciliar para currentColor ou #171717.)
• Tamanho mínimo. Wordmark: largura mínima 88 px — abaixo disso, trocar pelo símbolo circular. Símbolo circular: 16 px (o piso do favicon).
• Área de proteção. Wordmark: margem livre ao redor ≥ metade da altura do bloco da assinatura. Símbolo: margem livre ≥ 25% do diâmetro. Os dois valores se acomodam à escala de 8 px.
• Fundo e contraste. Habitat default: superfície clara de V-A. Sobre fundo escuro, versão invertida. Sobre acento V-B ou foto, só com contraste WCAG suficiente — na dúvida, preferir o disco ou a inversão.

Aplicações incorretas — usos proibidos:

• Recolorir fora da política de cor; aplicar gradiente.
• Aplicar sombra própria ao logo — o logo é tinta, não superfície: não pousa, não flutua.
• Distorcer a proporção (127 × 46 é fixa), rotacionar, inclinar.
• Aplicar o logo sobre a textura de pontos (pattern.svg) ou sobre fundo de baixo contraste.
• Separar a assinatura da moldura, reorganizar elementos, ou recriar a cursiva com fonte viva.

A assinatura visual secundária — a tecla. O Peppe tem um segundo sinal de marca: a tecla, o botão tátil retrofuturista de V-B (21-simbolos-e-logotipo.md §21.7). É o ativo mais proprietário do sistema — carrega identidade mesmo sem o logo em cena. Não é logo (não identifica a marca nominalmente, não substitui o wordmark) — é um sinal de marca. A especificação completa da tecla como grafismo é do capítulo 24.

26.3.3 — Cor

Detalhamento pleno: capítulo 22 · Paleta de cores. Valores canônicos: design-system/tokens/tokens.css.

A cor opera em três paletas com papéis estritamente separados — sistema fechado (MANIFESTO.md §2.4: "a cor tem função, ou não aparece"). Misturar papéis é violação. Todos os valores abaixo são DADO.

Paleta 1 — Base V-A (off-white, cinzas, tinta). O ambiente; cobre qualquer superfície.

Paleta 2 — Funcional (sinal de sistema). Quatro cores, um papel cada, nunca decorativas. Cada uma tem variante text-accessible (foreground de texto, contraste resolvido em WCAG AA) e tint (fundo de chip).

Paleta 3 — Acento V-B (terroso retrofuturista). A personalidade; só em elemento contido, nunca superfície global.

A máquina de estados completa do âmbar (hover, disabled, biséis) está no tokens.css — lista canônica sempre o arquivo. Notas duras: o âmbar nunca cobre superfície global; não há quarta paleta; o estado disabled da tecla vira cinza, não âmbar pálido — sem função interativa, o acento perde o direito à cor.

Digital × impresso. Toda a paleta vive em HEX/RGB, calibrada para tela — é o valor canônico. O Peppe é digital-first e pré-lançamento; CMYK e Pantone não estão definidos e não devem ser inventados. A conversão para impresso é trabalho de execução do capítulo 27, quando houver peça impressa real — a régua de significado não muda, só o espaço de cor.

26.3.4 — Tipografia

Detalhamento pleno: capítulo 23 · Conjunto tipográfico. Régua vigente consolidada: visual-language.md §4.4 + 23-conjunto-tipografico.md.

O sistema é um pareamento de duas famílias (visual-language.md §4.4, tokens.css):

• Instrument Sans — sans editorial, corpo de texto e UI. Onde a leitura é longa e a forma precisa sumir. A voz neutra do Registro A.
• Fraunces — serif de sabor retrô-70s, display (≥ 32 px). Onde a marca aparece: H1/H2, capa de seção, hero. Variable, flavor Soft aplicado globalmente (SOFT 50).

Hierarquia tipográfica — régua dura:

• Alternância semântica, nunca decorativa. Sans = leitura; serif = voz. A serif só entra em tamanho ≥ 32 px — limiar exato. Serif em corpo de texto é violação de gramática.
• Hierarquia por peso, tracking e alternância sans/serif — nunca por escalada de tamanho. No máximo 3 pesos e 5 tamanhos simultâneos numa tela.
• Escala de 10 tamanhos (valores desktop-first): xs 12 · sm 14 · md 16 · lg 20 · heading-md 24 · heading-lg 32 · xl 40 · 2xl 48 · display 64 · display-lg 80. Responsividade: os tamanhos xl (40), 2xl (48) e display-lg (80) são os mais sensíveis — reduzem em tablet/mobile (referências orientativas: xl → 32, 2xl → 40, display-lg → 64); valores exatos e breakpoints estão em design-system/tokens/tokens.css, que é a fonte canônica.
• Os dois registros (V-A e V-B) usam o mesmo pareamento — V-B muda por paleta e superfície, nunca por tipo.

26.3.5 — Grafismos e luz

Detalhamento pleno: capítulo 24 · Grafismos. Régua vigente consolidada: visual-language.md §4 + 19-identidade-visual.md §19.5 + 24-grafismos.md §24.5.

O clima visual do Peppe não vem de ilustração — vem de quatro sistemas estruturais:

• A luz direcional. Direção fixa, do canto superior esquerdo. Dela nasce a tridimensionalidade: superfícies que pousam (raised), afundam (carved) ou flutuam (floating), cada uma com sombra orgânica derivada da cor do fundo — nunca preto puro como filtro. É 3D honesto, não neumorphism (sombra simétrica sem direção é anti-padrão — §26.4.1).
• A geometria. Raios materializados: sm 8 · md 16 · lg 24 · xl 32 — um raio único por família de componente, no máximo três valores simultâneos. Grade base 8 px: todo espaçamento de layout é múltiplo de 8 (escala 2/4/8/12/16/24/32/48/64/96/128); 4 px só em ajuste óptico.
• A textura pontual. Um padrão de pontos (pattern.svg — tile 16 px, ponto de 1 px em #D9D9D9). Grafismo V-A acromático: cinza estrutural, baixo contraste, sem cor — opera como chão de grade revelada, não como acento V-B. V-B pontua por cor e pela tecla; a textura não é acento retrofuturista, é estrutura tornada visível. Jamais como tapete de fundo global (anti-patterns.md §3).
• A tecla. O objeto-grafismo onde o V-B se concentra. Especificação completa no capítulo 24.

O Peppe é 2D estrutural com profundidade percebida: a interface lê como painel único e sólido (MANIFESTO.md §2.4) — sem sobreposição teatral de camadas. Elementos interativos têm volume; elementos estáticos são perfeitamente planos.

26.3.6 — Iconografia, e a fronteira com as âncoras emoji

Detalhamento pleno: capítulo 24 · Grafismos. Régua vigente: visual-language.md §4.5.

A gramática de ícone — DADO. Glifos geométricos puros, stroke único e consistente (1,5 px), três tamanhos no sistema de 8 px (16 / 24 / 32). Proibido: multi-stroke, ilustração vetorial complexa, preenchimento gradiente. O ícone do Peppe é sinal funcional, não desenho. Hoje os ícones são contextuais (SVGs inline em componentes) — não há kit proprietário nomeado; um kit pequeno e fechado é proposta de horizonte pós-PoC (19-identidade-visual.md §19.7).

A fronteira a registrar — emoji × glifo. O capítulo 19 (§19.7) delegou a este manual o registro de uma fronteira que não pode ser contaminada. São dois sistemas distintos:

A regra: emoji ancora frase; glifo ancora UI. Os dois coexistem e não se misturam — um emoji nunca é usado como ícone de interface, um glifo nunca é usado como pontuação de texto. Quem materializa a marca audita os dois caminhos separados.

26.3.7 — Imagem (fotografia e ilustração)

Detalhamento pleno: capítulo 25 · Direção de imagem. Ver 25-direcao-de-imagem.md.

O capítulo 25 propõe a direção de imagem; fotografia permanece proposta a ratificar — não é régua vigente. Este manual registra o estado real e aponta para o cap 25.

• Ilustração — DADO parcial. A ilustração tem lugar definido e mínimo: acento V-B, em elemento contido, em superfícies de apresentação (onboarding, estado vazio). Glifo geométrico e paleta terrosa — nunca ilustração vetorial complexa nem cena decorativa. A ilustração do Peppe pontua; não narra.
• Fotografia — proposta existente, ainda a ratificar. O capítulo 25 (25-direcao-de-imagem.md) propõe uma direção completa (anti-stock, anti-aspiracional, a pessoa e não o produto-na-mão, tratamento de cor coerente com a paleta, dois registros V-A/V-B) — mas é integralmente proposta a ratificar pelo PO. Enquanto não ratificada, fotografia não deve ir ao ar como superfície de marca (19 §19.6, 25 — fechamento).

---

26.4 — Aplicações e exemplos: o checklist visual e o fluxo de revisão

Método, etapa 4. Exemplos de aplicação para que qualquer designer ou parceiro saiba usar a marca.

O método pede exemplos de aplicação nos pontos de contato. A aplicação por ponto de contato é matéria do capítulo 27 · Aplicações (27-aplicacoes.md). O que este manual entrega é a camada que torna qualquer aplicação verificável: o catálogo de recusa, o checklist e o fluxo de revisão.

26.4.1 — O catálogo de recusa: os 13 anti-padrões visuais

A melhor "aplicação de exemplo" de uma marca disciplinada é o par certo / errado. O .claude/ui-design/anti-patterns.md é o catálogo operacional do que o Peppe nunca exibe — cada item tem comportamento, efeito, descrição-gatilho e par antes/depois. Os treze:

1. Sombra preta ou pesada — sombra é cor-do-fundo deslocada, nunca preto como filtro.
2. Gradiente colorido ou vibrante — fora de chrome de UI; exceção só em data-viz com função semântica.
3. Textura como tapete — textura é pontual, contida em área funcionalmente delimitada (faixa de chrome, card); nunca fundo de tela. A textura pertence ao sistema V-A acromático — não é acento V-B.
4. Ícones ilustrativos ou multi-stroke — só glifo geométrico, stroke único.
5. Cor aplicada como decoração — cor tem função (estado ou acento V-B autorizado), ou não aparece.
6. Mistura 50/50 entre V-A e V-B — inclui V-B como superfície global. Violação dura.
7. Neumorphism genérico — volume plástico sem direção de luz única.
8. Sobreposição teatral de camadas — a interface é painel único e sólido.
9. Variação excessiva de tamanho tipográfico — hierarquia por peso e tracking, não por pixel.
10. Luz não-direcional ou invertida — a luz vem de um lugar só, o canto superior esquerdo.
11. Raio inconsistente entre componentes — um raio por família.
12. Espaçamento fora da escala estrutural — todo espaçamento é múltiplo de 8.
13. Fatura como dashboard de KPI — o fluxo de fatura (N3) é descritivo, não diagnóstico: sem números grandes paralelos, sem seta de comparação colorida, sem barra de progresso rumo a meta.

26.4.2 — O checklist do designer

Proposta a ratificar. Materializa, no lado visual, o checklist do redator (18-manual-verbal.md §18.4.1).

Antes de qualquer artefato visual ir ao ar, quem desenhou responde — e quem revisa confirma. Um "não" em qualquer linha é reescrita visual.

Gramática

• A superfície global está em V-A? (V-B só em elemento contido.)
• A calibragem V-A/V-B bate com a matriz superfície × registro? (Dashboard 100/0; onboarding ~75/25.)
• No campo de visão há, no máximo, dois cards V-B?

Cor

• Toda cor tem função — base, funcional ou acento V-B autorizado? (Nenhuma cor decorativa.)
• Os valores vieram do tokens.css? (Nenhum hex inventado fora do token.)
• A cor funcional só sinaliza estado de sistema, nunca decora?

Forma

• A luz vem do canto superior esquerdo, e todas as superfícies da cena a respeitam?
• Sombra é cor-do-fundo deslocada, nunca preto puro?
• Espaçamento em múltiplos de 8; raio consistente por família?
• Tipografia: serif só em ≥ 32 px; no máximo 3 pesos e 5 tamanhos na tela?
• Ícones: glifo geométrico, stroke único de 1,5 px?

Logotipo

• O logo está na cor canônica (monocromático em repouso; âmbar só em hover de link)?
• Respeita tamanho mínimo (wordmark 88 px / símbolo 16 px) e área de proteção?
• Sem sombra própria, sem distorção, sem aplicação sobre textura?

Anti-padrões e IP — ver §26.4.1 e §26.4.3.

26.4.3 — O filtro de IP visual (bloqueante)

O Peppe nasce de uma memória afetiva da cultura popular brasileira — a inspiração-fonte. Ela é backstage: vive na documentação interna profunda, nunca em superfície de marca (MANIFESTO.md §8, BRIEFING.md §7).

Em qualquer artefato visual voltado ao usuário — tela, card, ícone, ilustração, moodboard, peça de marketing — a marca nunca caracteriza, desenha, alude ou confirma a inspiração-fonte: nem o personagem, nem a paleta-assinatura dele, nem o monograma, nem a silhueta, nem o cenário associado. A governança de IP visual — assinaturas visuais proibidas — está em .claude/content-design/forbidden-terms.md §5.2; quem audita visual consulta esse arquivo.

Esta é a única camada da régua sem request-changes. Vale a mesma lógica do lado verbal (18-manual-verbal.md §18.4.2): um anti-padrão visual pede ajuste; um match de IP bloqueia o artefato e escala ao orquestrador. Violação de IP é estrutural, não cosmética. Em dúvida, decide-se para dentro.

26.4.4 — O fluxo de revisão: ui-designer / qa-ui

Proposta a ratificar. Materializa, no lado visual, o fluxo de revisão verbal (18-manual-verbal.md §18.4.3).

Nenhum artefato visual avança sem passar pelo par de QA (WORKFLOW.md — modelo de pair-QA):

1. Produção — o ui-designer (ou a agência) desenha, já com o checklist da §26.4.2 aplicado.
2. Auditoria — o qa-ui revisa, read-only, com autoridade de veto. Checklist operacional: este manual + visual-language.md + anti-patterns.md + forbidden-terms.md §5.2.
3. Veredito — aprovado / request-changes (ajuste de gramática, cor ou forma) / block (match de IP visual — escala ao orquestrador).
4. Publicação — só depois do veredito do par.

Para agências e parceiros externos, o entregável passa pelo mesmo fluxo. O qa-ui é o portão; o checklist é público, para que o parceiro se auto-verifique antes de entregar.

26.4.5 — Aplicações nos pontos de contato

O método cita aplicações em redes sociais e anúncios, sinalização e uniformes, documentos internos e brindes. Estado honesto:

• Aplicação digital (app, website, Design System) — em produção, regida pela régua acima.
• Aplicação física (sinalização, uniforme, papelaria, brinde, embalagem) — não se aplica hoje. O Peppe é digital-first e pré-lançamento, sem operação física. É lacuna de horizonte para o capítulo 27 · Aplicações, que também trata a conversão para impresso (CMYK/Pantone) e eventuais selos de certificação (LGPD, segurança, privacidade — plausíveis quando houver operação pública).

---

26.5 — Mentalidade de sistema vivo

Método, etapa 5. A marca é viva e o manual se atualiza conforme a marca evolui.

26.5.1 — A marca é viva: o versionamento

Proposta a ratificar. O método sugere um versionamento do tipo "2.0.0". O corpus não tem um modelo de versão de marca — o 00-indice.md versiona por status de capítulo (em construção · planejado · vigente). O que segue é proposta.

O Brand System do Peppe é vivo por construção (00-indice.md: documentos-base são vivos; visual-language.md §10: documento vivo). Proposta de modelo, em duas escalas que não se substituem:

• Por capítulo — status. Cada capítulo declara seu estado: em construção · planejado · vigente. Já é a convenção do 00-indice.md; mantém-se.
• Pelo sistema — versão semântica. O Brand System como um todo carrega uma versão MAJOR.MINOR.PATCH:
  • MAJOR — reposicionamento da marca ou mudança da gramática (implica rebobinar o MANIFESTO.md §2).
  • MINOR — um capítulo novo entra como vigente, ou uma régua nova é adicionada.
  • PATCH — correção, reconciliação de valor, ajuste de redação sem mudança de decisão.

O Design System tem seu próprio versionamento (tokens.css é versionado) — é um módulo, evolui no seu ritmo, e o Brand System referencia a versão de tokens vigente. (Pendência: o "2.0.0" do método é um número de exemplo. O Peppe é pré-lançamento e nunca teve uma "1.0" pública — de que número o versionamento parte é pergunta para o PO; ver fechamento.)

26.5.2 — Gatilhos de revisão

O manual visual não se atualiza por calendário arbitrário. Revisão formal a cada 90 dias, e revisão reativa sempre que (visual-language.md §10):

• uma referência visual recorrente em produção exibir lacuna na régua;
• uma nova superfície entrar em produção (canal visual externo, campanha, material impresso);
• o MANIFESTO.md §2 atualizar princípios visuais;
• uma decisão do product-designer introduzir componente que não cabe nos tokens existentes;
• pesquisa primária trouxer sinal de estranhamento visual associado à identidade.

A responsabilidade pela atualização é do ui-designer, com par de leitura do qa-ui. Qualquer mudança que toque o MANIFESTO.md §2 escala ao orquestrador e ao product-designer.

26.5.3 — Governança: Brand System × Design System

O capítulo 19 (fechamento, pergunta 3) deixou em aberto uma decisão de governança que este manual registra — e recomenda fechar:

• A identidade visual canônica é o conjunto de capítulos de diretriz (19–26). O Design System (designsystem.peppeai.com) é o módulo que a materializa — fornece tokens, fundamentos e componentes.
• Recomendação (alinhada à precedência do 00-indice.md): a diretriz decide a régua e o princípio; o Design System decide o valor e o reflete. Em conflito de valor (cor, raio, medida), o tokens.css prevalece — é a fonte da verdade da matéria (22-paleta-de-cores.md §22). Em conflito de princípio ou régua, a diretriz prevalece, e o Design System é corrigido para refleti-la.

A divisão é limpa: o capítulo é a verdade do quê e do porquê; o Design System é a verdade do quanto.

26.5.4 — O pacote de marca: o que se entrega

O capítulo 21 (fechamento, lacuna 4) delegou a este manual o inventário de entrega da marca — o que se passa para um colaborador novo, uma agência ou um parceiro. Estado atual:

• Existe — os .svg de wordmark e símbolo circular; a fonte canônica de favicon e o pipeline de derivação; os tokens (tokens.css); o Design System navegável.
• Não existe — um arquivo-mestre editável (Figma / Illustrator) e um pacote de exportação padronizado (PNG transparente, PDF, versões em uma e outra cor). Montar esse pacote é trabalho pendente — registrado como lacuna.

Enquanto o pacote não existe, a entrega de marca para terceiros é: este capítulo 26 + os capítulos 19–25 + o link do Design System + os .svg versionados. O qa-ui é o portão de qualquer peça que o terceiro produzir.

---

Em uma frase. Materializar o Peppe visualmente é deixar o V-A ser o chão e o V-B pontuar, cor só com função, luz vinda de um lugar só, espaçamento em múltiplos de 8 e a marca gráfica intocada — o mesmo aparelho de confiança, calibrado para a superfície, em todo lugar onde a marca aparece.

---

Para o Product Owner

Bloco de fechamento (prompt-inicial.md §8). Este capítulo consolida a régua operacional visual decidida pelos capítulos 19–25; onde materializou algo que aquelas decisões deixaram em aberto, marcou como proposta. Abaixo, o que volta para você.

Decisões a ratificar (propostas deste capítulo)

1. O formato — Brand System (§26.1). Registrado, não reaberto: a decisão está cravada no 00-indice.md. Confirmado aqui para rastreabilidade — o Peppe é um Brand System vivo, e o capítulo 26 ocupa a sua camada operacional visual.
2. O modelo de versionamento da marca (§26.5.1). O método pede um versionamento; o corpus só tinha status por capítulo. Proposta: manter o status por capítulo e adotar uma versão semântica MAJOR.MINOR.PATCH para o sistema como um todo. Ratificar o modelo — e responder de que número ele parte (ver pergunta aberta 2).
3. A fronteira emoji × glifo (§26.3.6). O capítulo 19 (§19.7) mandou este manual registrar a fronteira entre as 11 âncoras emoji (sistema verbal) e os glifos de ícone (sistema visual). Registrada: os dois sistemas coexistem e não se misturam. Ratificar como régua.
4. O checklist do designer (§26.4.2) e o fluxo de revisão visual (§26.4.4). Materializam, no lado visual, o checklist do redator e o fluxo de revisão do capítulo 18. Ratificar o formato.
5. A governança Brand System × Design System (§26.5.3). O capítulo 19 deixou a decisão em aberto. Recomendação registrada: a diretriz decide régua e princípio, o Design System decide e reflete o valor; em conflito de valor, o tokens.css prevalece. Ratificar.
6. A régua de uso do logotipo (§26.3.2). É herdada como proposta do capítulo 21 (§21.6) — tamanho mínimo, área de proteção, cor canônica, usos proibidos. Este manual a consolida; não a redecide. A ratificação é a mesma já pendente no capítulo 21.

Lacunas (dependem de dado ou input do PO)

1. Reconciliação com os capítulos 23, 24 e 25. Este manual 26 foi escrito antes deles; todos existem agora. O detalhamento pleno de tipografia, grafismos/tecla e imagem mora em 23, 24 e 25 respectivamente. As referências internas do 26 foram atualizadas; uma rodada de reconciliação formal — revisando §26.3.4 a §26.3.7 à luz dos capítulos agora disponíveis — é recomendada antes de o capítulo 26 ser declarado vigente.
2. Reconciliação com os capítulos 27 e 28. Ambos existem. A aplicação por ponto de contato é matéria de 27-aplicacoes.md; o lançamento é de 28. As referências que apontavam esses capítulos como ausentes foram corrigidas. Pendências de conteúdo (CMYK/Pantone, selos de certificação) permanecem lacunas de horizonte — não do estágio atual do corpus.
3. Direção fotográfica (§26.3.7). O capítulo 25 (25-direcao-de-imagem.md) propõe uma direção de fotografia completa, mas é integralmente proposta a ratificar. É o único pilar visual sem régua vigente confirmada pelo PO. Até a ratificação, fotografia não vai ao ar como superfície de marca.
4. O arquivo-mestre editável e o pacote de exportação (§26.5.4). Existem os .svg versionados, mas não um arquivo-fonte editável (Figma / Illustrator) nem um pacote de exportação padronizado. Montar o pacote de entrega da marca é trabalho pendente.
5. Cor canônica do logo nos .svg estáticos. Os arquivos estáticos carregam #262626 legado, anterior ao token ink/primary #171717. Reconciliação pendente (herdada dos capítulos 21 e 22).
6. Paleta V-B, data-viz e dark mode. Heranças do capítulo 22: o escopo da família terrosa V-B, a paleta funcional de categoria (data-viz) e a paleta de modo escuro têm régua mas ainda não têm todos os valores materializados. São exercícios dedicados de extração de tokens.

Perguntas abertas

1. Reconciliação pós-corpus. O capítulo 26 foi produzido antes dos capítulos 23–25, 27 e 28. Todos existem agora. A recomendação original de re-rodá-lo ao fim da Parte IV/V segue válida: o 26 é, por natureza, o capítulo que consolida — e uma rodada de reconciliação formal (alinhando §26.3.4–§26.3.7 com o que 23, 24 e 25 efetivamente decidiram) é o próximo passo para declarar o capítulo vigente.
2. De que número parte o versionamento (§26.5.1). O método fala em "2.0.0". O Peppe é pré-lançamento e nunca teve uma versão pública. Confirmar se o Brand System parte de 0.x (em construção, pré-lançamento), de 1.0.0 (no lançamento) ou de outro marco.
3. Materialização do manual. O 00-indice.md diz que a materialização das diretrizes como página/app vem quando o stack do Brand System for definido. Confirmar se o manual visual permanece como markdown até lá, ou se há intenção de antecipá-lo como artefato navegável.