23 · Conjunto Tipográfico

Fontes: design-system/tokens/tokens.css — fonte da verdade da matéria tipográfica · design-system/styles/tipografia.css — escala materializada e papéis · design-system/reference-files/Peppe Design System/ (colors_and_type.css, README.md, SKILL.md) · design-system/assets/fonts/ — as faces self-hosted · .claude/ui-design/visual-language.md §3, §4.4 · brand/guidelines/19-identidade-visual.md §19.3, §19.8, fechamento · brand/guidelines/20-moodboards.md §20.2.2 · brand/guidelines/21-simbolos-e-logotipo.md §21.1, §21.6, fechamento · brand/guidelines/22-paleta-de-cores.md §22.4 · brand/guidelines/11-virtudes-da-marca.md · brand/guidelines/12-arquetipos-da-marca.md · brand/guidelines/01-essencia.md §1.4 · MANIFESTO.md §2 · BRIEFING.md §4 · instrução do PO (2026-05-16).

Este capítulo responde qual é a tipografia da marca — as faces, as funções e a régua de uso. É um capítulo de execução: vem depois do briefing estratégico da identidade (19), do moodboard (20), do sistema de logotipo (21) e da paleta (22). Fecha uma pergunta que o capítulo 19 (§19.3, fechamento item 2) delegou explicitamente a ele: a gramática tipográfica do Peppe é uma dupla, um trio ou um quarteto?

---

Uma ressalva de partida — o conjunto tipográfico não é página em branco

A maioria dos capítulos de tipografia começa pela escolha das faces. Este não. O Peppe já tem tipografia, e ela já está em produção:

• O pareamento núcleo — uma sans + uma serif — está cravado no canônico (MANIFESTO.md §2, visual-language.md §4.4) e materializado nos tokens (design-system/tokens/tokens.css), com escala, pesos, tracking e entrelinha definidos.
• As quatro faces estão self-hosted e versionadas em design-system/assets/fonts/: Fraunces, Instrument Sans, Martian Mono e Sarina.
• O sistema está aplicado e navegável no Design System (designsystem.peppeai.com, página fundamentos/tipografia.html) e no app de chat em produção.

A consequência metodológica segue a precedência de 00-indice.md e repete a dos capítulos 19, 21 e 22: este capítulo consolida, não inventa. A matéria tipográfica é, na quase totalidade, DADO — decisão tomada upstream e materializada, incluindo o agrupamento das faces (ver §23.5: o vocabulário Núcleo / Acento vem da página de tipografia do próprio Design System). Onde aparece [A confirmar], é porque o corpus tem uma lacuna operacional real — notadamente a cobertura de glifos da face cursiva e a auditoria formal de licença.

Há um ponto que este capítulo fecha — não reflete. Os capítulos 19 (§19.3), 20 (§20.2.2) e 21 (fechamento) registraram, todos, o mesmo estado: a régua visual-language.md §4.4 define o sistema como pareamento de duas famílias e marca a fonte mono e a cursiva como excluídas ("Variante A"). O capítulo 19 não tratou isso como decisão final — registrou como decisão a ratificar e nomeou o capítulo 23 como o lugar onde se fecha. O PO ratificou em 2026-05-16: o conjunto tipográfico do Peppe é um quarteto. Este capítulo documenta a decisão e a régua que decorre dela; a reconciliação dos arquivos de código que ainda carregam o texto antigo é handoff de engenharia, listado no fechamento.

---

23.1 — Diagnóstico de posicionamento

Etapa 1 do método: o "mood" que a tipografia deve transmitir, e onde ela será usada.

O mood — o que o tipo precisa fazer sentir

A tipografia não escolhe sozinha o que comunica: ela herda. O Peppe já tem virtudes (cap. 11 — Honestidade, Prudência, Temperança, Lealdade), atributos centrais (Honesto, Antecipatório, Acolhedor), um arquétipo (cap. 12 — Cuidador, modulado por Bobo da Corte contido, Mago honesto e Sábio) e uma ideia de marca (cap. 01 §1.4 — a automação ingênua: "mostra a mão, não a máquina"). O conjunto tipográfico é a tradução desse núcleo em forma de letra.

O mood, então, não é um adjetivo solto — é um conjunto de tensões que o tipo precisa segurar ao mesmo tempo:

• Competente, mas não frio. O Peppe é um subordinado eficiente que conhece quem você é — não um oráculo de ficção científica. A tipografia não pode ler como uma única face geométrica futurista impecável: isso é "a máquina". Precisa de uma voz dentro dela.
• Claro, mas com personagem. A leitura tem de sumir quando o trabalho é informar; a marca tem de aparecer quando o momento é de voz. Duas funções, duas faces.
• Honesto sobre o esforço. O Peppe "não esconde a mão que move a engrenagem" (01-essencia.md §1.4). Há espaço, no sistema, para um tipo que mostra a engrenagem de propósito — o registro de dado bruto, a verdade-de-máquina exposta sem vergonha.
• Acolhedor sem ser fofo. Calor vem do desenho — a serif de sabor setentista com flavor Soft, o gesto manuscrito —, nunca de infantilização. Temperança (cap. 11) é a régua: o calor é pontual, contido.

Cada uma dessas tensões tem uma face que a resolve — é o que §23.5 consolida. A leitura curta: a sans é a mão de obra invisível; a serif é a voz; o mono é a engrenagem à mostra; a cursiva é a assinatura.

Onde a tipografia é usada — e onde ela não aparece

O Peppe é digital-only no pré-lançamento (01-essencia.md §1.6, estágio em BRIEFING.md). Não há material impresso, sinalização nem embalagem. Isso simplifica a decisão — não há que conciliar comportamento em papel — mas exige uma distinção que o método não antecipa:

• Superfícies onde a tipografia da marca aparece (o pixel é controlado): o app web de chat, a landing page, o Design System, peças de marketing digital. É aqui que o conjunto de quatro faces opera.
• A superfície onde ela não aparece: o WhatsApp — o canal primário do Peppe (BRIEFING.md §3). O WhatsApp renderiza texto plano na fonte de sistema do aparelho; nenhuma face da marca chega lá. No canal mais importante, a identidade é carregada inteiramente pela camada verbal — voz, vocabulário, ritmo (capítulos 14, 16, 18) — e pelas âncoras emoji do sistema de conteúdo, não pelo tipo.
• A superfície sem tipo: a voz (UC-14 — entrada por áudio) não tem matéria visual.

A consequência estratégica: nas superfícies onde o tipo pode aparecer, ele precisa trabalhar duro — porque é uma das poucas chances de a marca se mostrar com a forma, e não só com a palavra. Isso justifica investir numa serif com personagem real (Fraunces), e não numa segunda sans neutra.

Nota — emoji não é tipografia. As 11 âncoras emoji do sistema de conteúdo (✍️ 📝 🚨 ✅ 💤 🗑️ 🗓️ 💸 💰 🎂 💊) renderizam na fonte de emoji nativa de cada plataforma e pertencem à camada de conteúdo (voice-and-tone.md §4.5), não ao conjunto tipográfico. O capítulo 19 (§19.7) já registrou essa separação; ela é repetida aqui para não haver confusão de escopo.

---

23.2 — Análise de critérios fundamentais

Etapa 2 do método: avaliar as faces por Mensagem, Objetivo, Flexibilidade e Licença.

Mensagem — a face reflete a voz da marca?

O pareamento núcleo segue um modelo de referência conhecido: a dupla tipográfica do Claude — uma sans + uma serif, duas funções, uma identidade (19-identidade-visual.md §19.3). O Peppe estende esse modelo com duas faces de borda: uma para o dado, uma para o afeto.

Objetivo — funcionalidade ou personalidade?

A pergunta do método — "mais funcionalidade (leitura longa) ou mais personalidade (títulos impactantes)?" — não tem resposta única no Peppe, e é por isso que o conjunto tem mais de uma face. Cada uma resolve um ponto diferente do espectro:

• Instrument Sans — funcionalidade pura. Corpo de texto, UI, instruções. Onde a leitura é longa, a face é serva.
• Fraunces — personalidade, com trava. Títulos de impacto e reconhecimento. Mas a personalidade da serif só é autorizada acima de 32px (ver §23.3): em tamanho pequeno, a métrica retrô prejudica a leitura e a face perde a função de voz que justifica o pareamento.
• Martian Mono — funcionalidade com textura. Legibilidade de dado (números alinham, IDs não se confundem) somada a um tom. Funcional e expressiva ao mesmo tempo.
• Sarina — personalidade pura. Zero papel funcional. Um soco tonal — um uso, um momento.

Flexibilidade — a família tem variações suficientes?

A assimetria é deliberada. As três primeiras famílias têm folga de sobra — e o sistema usa só uma fração dela, porque a hierarquia se constrói por peso, tracking e alternância de família, não por excesso de variantes (§23.3). A Sarina é o oposto: a falta de variação é o ponto. Uma face de uso único e momento único não precisa — nem deve — de uma família completa.

Licença — gratuita ou exclusiva?

As quatro faces são open-source, sob a SIL Open Font License, gratuitas para uso comercial, e estão self-hosted como TTF em design-system/assets/fonts/ — sem dependência de CDN externo em runtime. Não há custo de licenciamento nem face exclusiva paga no sistema.

A escolha por faces livres é coerente com o estágio (pré-lançamento, sem orçamento de fonte exclusiva) e com a tese: a identidade do Peppe não depende de uma face proprietária rara — depende do sistema (o pareamento, a régua de uso, o pareamento voz-forma). É a mesma verdade sistêmica que o capítulo 21 (§21.8) registrou sobre o logotipo: a força é do conjunto, não de uma peça cara isolada.

Marcado para o fechamento (lacuna 4): a auditoria formal de licença — versão exata da OFL de cada face, direitos de embedding e self-host, atribuição requerida — é item de checklist jurídico pré-lançamento. O dado acima é a leitura de marca; a validação legal é trabalho dedicado.

---

23.3 — Definição da hierarquia (sistêmica)

Etapa 3 do método: funções claras por papel — Título, Parágrafo, Nota/Legenda — e a importância do grid de 8px.

O método pede três papéis. O conjunto do Peppe tem quatro, porque o registro de dado é um papel próprio. Tudo aqui é DADO — a escala está materializada em tokens.css e tipografia.css.

A escala — dez tamanhos, quatro papéis

O quarto papel — Dado. O registro de dado bruto — código inline, IDs, strings de transação, timestamps, kicker numérico, rodapé — usa Martian Mono, tipicamente nos tamanhos xs e sm. Não tem um lugar próprio na escala de buckets porque não escala por hierarquia: é sempre micro-copy. Por ser monoespaçada, alinha numerais em coluna — o que importa quando o conteúdo é uma fatura ou um extrato.

O limiar da serif — a regra dura

A família Fraunces só pode ser aplicada em tamanhos ≥ 32px. Tokens autorizados: heading-lg, xl, 2xl, display, display-lg. Tokens vedados à serif: heading-md (24), lg (20), md (16), sm (14), xs (12) — nesses, a face obrigatória é a sans.

O motivo é funcional, não estético: abaixo de 32px, qualquer serif de sabor retrô-70s tem métrica apertada que prejudica a leitura e dilui a função de voz/personagem que justifica o pareamento. Serif em corpo de texto é violação de gramática — texto corrido é sempre sans (visual-language.md §4.4).

Hierarquia por peso, tracking e família — não por escalada de tamanho

A régua estrutural (DADO, visual-language.md §4.4): a hierarquia se constrói por peso, tracking e alternância sans/serif, não por inflar tamanho. Limites por tela: no máximo 3 pesos e 5 tamanhos simultâneos.

• Pesos. Regular 400 (corpo), Medium 500 (títulos serif e destaque de UI), SemiBold 600 (H4 sans), Bold 700 (ênfase rara). Os títulos de display em Fraunces usam Medium 500 — refino de 2026-05-04, depois de avaliação visual; um Bold seria pesado demais para o sabor Soft da face.
• Tracking. tight −0.04em nos títulos de display; normal 0 no corpo; loose +0.08em — e só — nos kickers em caixa-alta. Tracking se ajusta no display (tamanho grande), nunca no texto de leitura.
• Entrelinha. tight 1.1 (títulos), snug 1.3 (destaque), normal 1.5 (corpo — respiração de leitura longa). Um token serif mais fechado (0.9) existe para o tratamento de hero mais monumental.

O grid de 8px

A escala é ancorada na base 8 do sistema (cap. 19.3). Os tamanhos de título — 24, 32, 40, 48, 64, 80 — são múltiplos exatos de 8. Os tamanhos de leitura — 12, 14, 16, 20 — seguem os degraus convencionais de texto pequeno: são a exceção tipográfica natural à grade (a tipografia é o único domínio do sistema que a admite). O que não abre exceção é o espaço em volta do tipo: entrelinha, margens e padding assentam todos na grade de 8px. O ritmo vertical de uma página é de 8 em 8, mesmo quando o corpo do texto é 14 ou 16.

Mapeamento semântico web

O Design System fixa, além da escala de buckets, a leitura semântica HTML (tipografia.css §2.B.c): H1 hero → display-lg, H1 de página → display, H2 → 2xl, H3 → heading-lg, H4 → heading-md, e H5/H6/<p>/<a> nos tokens de leitura. É prescrição de engenharia — citada aqui para rastreabilidade, detalhada no Design System.

---

23.4 — Tomada de decisão

Etapa 4 do método: selecionar famílias completas; cuidar de caracteres especiais e suporte a alfabetos.

Famílias completas — com uma exceção consciente

O método alerta contra adotar uma face sem família suficiente. Três das quatro faces do Peppe são famílias completas e maduras (ver §23.2 — Flexibilidade): Fraunces, Instrument Sans e Martian Mono cobrem com folga os pesos e variações que o sistema usa, e ainda guardam reserva.

A Sarina é a exceção deliberada: um peso único, sem itálico. Isso não viola o alerta do método — porque a Sarina não exerce papel de família. Ela é um acento de uso único; uma família completa de cursiva seria capacidade ociosa. A decisão é manter a Sarina exatamente como ela é: mínima, para um momento mínimo.

Caracteres especiais e suporte ao português

O Peppe é uma marca brasileira; a régua de idioma é o PT-BR completo. Isso exige cobertura de todos os diacríticos do Latin Extended: á à â ã, é ê, í, ó ô õ, ú, ç — com atenção especial ao til (ã, õ) e à cedilha (ç), os glifos que faces incompletas costumam falhar. Exige também o símbolo de moeda R$ (real brasileiro — moeda fixa do domínio financeiro).

• Fraunces, Instrument Sans, Martian Mono — faces de ampla cobertura Latina; renderizam o PT-BR completo sem falha. Numerais: a serif Fraunces carrega os numerais de valor (a régua "serif para substantivos de valor" — títulos, dinheiro, identidades); o Martian Mono dá numerais tabulares, alinhados em coluna, próprios para fatura e extrato.
• Sarina — script decorativa. A cobertura de diacríticos de uma cursiva de exibição não é garantida e precisa de verificação antes de qualquer uso real em português (ver fechamento, lacuna 2). É um risco contido pelo escopo: a Sarina aparece em pouquíssimas palavras, sempre curadas — mas uma palavra com ã ou ç exibida numa face que não desenha o glifo é uma falha visível.

Outros alfabetos (cirílico, grego, CJK) não estão no escopo: o Peppe opera em PT-BR. Caso o produto se internacionalize, a cobertura de cada face é decisão dedicada.

A decisão — o conjunto é fechado em quatro

O conjunto tipográfico do Peppe é um quarteto, e está fechado. Não há quinta família. A inclusão de Martian Mono (registro de dado) e Sarina (acento de marketing) — antes marcadas como fora de escopo na régua visual-language.md §4.4 — é ratificada pelo PO e formalizada aqui (ver a ressalva de partida). Qualquer expansão futura — uma face de display alternativa, uma segunda sans — exige decisão dedicada de gramática, com revisão do MANIFESTO §2, e não se resolve por conveniência de projeto.

---

23.5 — Resultado esperado: o conjunto tipográfico do Peppe

Etapa 5 do método: a recomendação consolidada (font pairing) com a justificativa estratégica de cada escolha.

O conjunto tipográfico do Peppe são quatro famílias, organizadas em dois núcleos de uso. O agrupamento não é proposta deste capítulo — é DADO: vem da página de tipografia do Design System (design-system/reference-files/Peppe Design System/preview/type.html), que etiqueta cada face com um role-tag.

• Núcleo — o sistema de trabalho, sempre disponível. Reúne as duas faces de papel sempre (Instrument Sans + Fraunces — qualquer conteúdo) e a face técnica (Martian Mono — registro de dado).
• Acento — opcional, de marketing. Apenas a Sarina.

O quadro consolidado

A justificativa estratégica — o "porquê" de cada escolha

Núcleo · sempre — Instrument Sans + Fraunces. É a decisão central, e ela resolve a tensão de mood de §23.1. A sans neutra é a mão de obra invisível: onde a leitura é longa, a forma se apaga e o conteúdo aparece — a discrição do "subordinado eficiente". A serif retrô-70s é a voz: onde a marca precisa se mostrar — um título, um valor —, ela traz sabor setentista e calor, sem decorativismo. A alternância é semântica, nunca decorativa: sans = leitura; serif = voz. As duas convivem em todo o produto, nos dois registros visuais (V-A e V-B usam o mesmo par — visual-language.md §4.4). O modelo é a dupla tipográfica do Claude: duas faces, duas funções, uma identidade.

Núcleo · técnico — Martian Mono. O Peppe "mostra a mão, não a máquina" — mas não esconde a engrenagem; deixa-a escapar de propósito (01-essencia.md §1.4). O monoespaçado é a tradução tipográfica disso: quando o conteúdo é dado bruto — o ID de uma transação, um timestamp, uma string de fatura —, ele aparece numa face que lê como verdade-de-máquina, não como prosa. Tem um benefício funcional concreto: numerais tabulares que alinham em coluna, o que importa quando a tela mostra um extrato. E carrega o tom de "log de engenharia" que rima com o registro V-B retrofuturista. É família de produto, mas de uso pontual — micro-copy, nunca corpo.

Acento · opcional — Sarina. É a face do gesto humano: a cursiva manuscrita, a mão literal. Mas é a face mais perigosa do conjunto — uma script tem leitura difícil e cansa rápido — e por isso a régua é a mais dura. A Sarina é opt-in (não está nos tokens padrão), marketing-only (capa de campanha, hero de landing, assinatura de fim de onboarding), nunca entra no chrome de produto nem em UI funcional, e tem tamanho mínimo de 32px. É um soco tonal: um uso, um momento. Usada com parcimônia, entrega afeto; usada sem régua, vira ruído. A virtude que a governa é a Temperança (cap. 11).

O paralelismo voz-forma

O conjunto não é uma decisão visual isolada — espelha a identidade verbal. A sans é a calibragem do Registro A (Profissional, voice-and-tone.md §3.1): claro, neutro, eficiente. A serif e o flavor Soft são o calor do Registro B (Atrapalhado-Fiel): a voz que aparece, o personagem. O mono é o registro de dado — o Peppe que reporta um fato sem floreio. A cursiva é o momento mais expressivo, o mais raro. Uma superfície calibrada na voz para o Registro A não deveria aparecer com a serif gritando display; divergência entre calibragem vocal e tipográfica é flag, não decisão solo (visual-language.md §8).

Em uma frase

O conjunto tipográfico do Peppe é um quarteto com hierarquia de papéis: uma sans que se apaga para a leitura aparecer, uma serif que aparece para a marca ter voz, um monoespaçado que mostra a engrenagem sem vergonha, e uma cursiva que assina — uma vez, num só momento.

---

Para o usuário — fechamento

Este capítulo consolidou o conjunto tipográfico já materializado e fechou a pergunta que o capítulo 19 (§19.3, fechamento item 2) havia delegado a ele: a gramática é uma dupla, um trio ou um quarteto. Resposta ratificada pelo PO: quarteto. O que segue voltou para você.

Mapa de execução — o que os capítulos seguintes fecham

Este capítulo fixa as faces, os papéis e a régua de uso. A consolidação operacional — espécimes de aplicação, do-and-don't, exemplos por superfície — é do capítulo 26 (Manual visual). A relação tipografia × cor (tinta sobre superfície, contraste WCAG) está fixada no capítulo 22 (§22.4) e é referida, não reaberta, aqui.

Decisões a ratificar — nenhuma

Este capítulo não abre decisão nova. O conjunto de quatro faces, o papel de cada uma e o agrupamento Núcleo / Acento são DADO — materializados no Design System (tokens.css, tipografia.css, reference-files/Peppe Design System/preview/type.html, README.md) e confirmados pela instrução do PO (2026-05-16). Não há nada pendente de ratificação sua. O que segue são pendências de execução e de verificação — não de decisão.

Reconciliação necessária — handoff de engenharia / Design System

Não é escopo deste capítulo alterar arquivos de código (prompt-inicial.md §8), mas a decisão do quarteto exige que isto aconteça downstream:

• .claude/ui-design/visual-language.md §4.4 ainda descreve a gramática como pareamento de duas famílias e marca Martian Mono e Sarina como excluídas ("Variante A"). Atualizar para refletir o quarteto e suas três camadas.
• brand/guidelines/20-moodboards.md §20.2.2 carrega um "Flag — o monospace" baseado na mesma exclusão. Revisitar quando a régua acima for atualizada.
• design-system/tokens/tokens.css declara --type-family-mono mas não declara um token de acento — a Sarina vive só em reference-files/.../colors_and_type.css como --font-accent. Cravar o token de acento no tokens.css canônico.

Lacunas — dependem de dado ou input do PO

1. Cobertura de glifos PT-BR da Sarina. Uma script de exibição pode ter diacríticos incompletos — til (ã, õ), cedilha (ç). Verificar a cobertura da face antes de qualquer uso real em português.
2. Origem do wordmark cursivo (carry da lacuna 21#2). O peppe-logotype.svg é um outline SVG fixo; não consta se foi desenhado a partir da Sarina ou é lettering original. Se for derivado da Sarina, a face ganha um segundo papel — estrutural (o logotipo) — além do acento de marketing, e isso muda a sua régua de uso. Confirmar a origem do desenho.
3. Auditoria formal de licença (SIL OFL — versão, direitos de embedding e self-host, atribuição) das quatro faces, como item de checklist jurídico pré-lançamento.
4. Estratégia de carregamento. O corpus tem menção mista a self-host TTF e a Google Fonts CDN. Consolidar a decisão (e seu impacto em performance e privacidade) no manual visual (26).

Perguntas abertas — do método, que o corpus não responde

1. Impresso e sinalização. O método pergunta "digital, impresso, sinalização?". O Peppe é digital-only no pré-lançamento. Se surgir material impresso (deck de investidor, brinde), a escala de display e a Sarina precisam de teste de tamanho mínimo em papel — comportamento que não foi validado.
2. A tipografia ausente no canal primário. A tipografia da marca não renderiza no WhatsApp (texto de sistema). Confirmar que isso é aceito como invariante — e que, no canal mais importante do Peppe, a carga de identidade é assumida 100% pela camada verbal.