# Logomarca e assets

Normas verificadas diretamente em `Troca Pontos Brand Guidelines.pdf`, pp.4–14 e 17–24. O guia HTML §§05–07 e 10–11 fornece referências digitais. Nenhum arquivo de marca foi redesenhado nesta execução.

## Aplicação e versões

- Principal/preferencial positiva: wordmark original roxo sobre fundo claro; preferir branco. Negativa: original branco sobre roxo institucional (PDF pp.4–5).
- Monocromáticas: preto/branco quando houver restrição de impressão (p.6). Não fabricar essa versão a partir dos PNGs disponíveis.
- Co-branding: preto sobre branco ou branco sobre preto, com distância entre marcas/divisor definida pela largura da letra “o” — a **largura de avanço**, medida na p.7 em vetor. O divisor também é norma medida desde 22/09/2026, não premissa. A regra completa está na seção **Co-branding com marca de cliente**, abaixo.
- Área livre: altura da letra “t”, considerando sua parte mais alta (p.10). Ela deve existir fora da caixa de tinta do wordmark. A magnitude está medida em vetor e vale **0,163254 da largura do wordmark** — ver **A área de proteção, medida**, abaixo.
- Largura mínima: **6 cm impresso e 170 px digital** (p.11) — mas a p.11 desenha **duas** réguas e elas não medem o mesmo elemento. Ver **Os dois mínimos da p.11**, abaixo.
- Não distorcer, mudar pesos, recolorir ou aplicar efeitos (p.12). O texto “Troca Pontos” na interface não pode ser estilizado para substituir a marca.

### A área de proteção, medida — corrigida em 22/09/2026

A p.10 desenha quatro letras “t” em cinza `#E5E5E5`, uma por lado, encostadas entre a caixa de tinta do wordmark e o retângulo de área livre. Medidas por `getBBox()` no Chromium sobre a própria prancha:

| | Unidades | Fração da largura do wordmark |
| --- | ---: | ---: |
| Tinta do wordmark | `296,90 × 45,12` | — |
| Cada “t” marcador | `48,47 × 20,36` | **`0,163254`** |
| Retângulo de área livre | `393,82 × 142,07` | soma: 296,90 + 2×48,47 = 393,84 ✓ |

**Confirmado numa segunda prancha.** Na p.11 a versão preferencial é uma caixa de `170,08 × 61,36` com o wordmark de `128,23 × 19,51` dentro. As sobras são 20,76 / 21,09 / 20,92 / 20,93 → `20,93 ÷ 128,23 = 0,163224`. Duas pranchas independentes, mesma fração.

**Por que a conta anterior não fechava.** O sistema aplicava `--tp-logo-protection: 24px` a 170 px, ou `0,14118` — **13,5% abaixo da norma**. A derivação registrada usava a altura do “t” **do wordmark** (`37,13` un = `0,125059`), e nem esse número dava 24 px. O vetor mostra por quê: o “t” que a prancha desenha como marcador **não é o “t” do wordmark**. O marcador mede `48,47 × 20,36` e o “t” do wordmark mede `37,13 × 15,59` — o marcador é **1,305× maior**, e o mesmo fator aparece nos dois eixos (48,47/37,13 = 1,3053; 20,36/15,59 = 1,3060). A frase do manual continua certa (“equivalente à altura da letra ‘t’”); o que estava errado era supor que a letra de referência fosse a do wordmark.

O token deixou de ser pixel: `--tp-logo-protection-ratio: 0.163254` e `--tp-logo-protection: calc(var(--tp-logo-width) * var(--tp-logo-protection-ratio))`. A 170 px isso dá **27,75 px** por lado, e a caixa de `.tp-brand` passa de 218 px para **225,5 px**. Conferido em tela: header do portal, cabeçalho institucional, sidebar do painel e as páginas de erro continuam sem estouro em 1440 e 390 px, nos dois temas.

**E o painel de autenticação passou a ter marca.** Conferir a proteção nesse painel revelou que ela não chegava lá: `src/partials/brand-panel.html` exibia `src/images/logo/auth-logo.svg` — **o logo do template TailAdmin, em `#465FFF`** — com `p-6` fixo no lugar da área livre, enquanto o comentário do próprio arquivo dizia aplicar “a logo preferencial negativa, largura mínima 170 px, área de proteção = altura do ‘t’”. Era marca de terceiro na tela de entrada do produto. Entrou o wordmark oficial negativo, com `--tp-logo-width-hero: 220px` de escala de exibição e a proteção derivada da fração (35,9 px); `.tp-brand-field` tira o fundo próprio da caixa, porque o painel **já é** o campo roxo da versão preferencial e pintar outro desenharia um retângulo dentro de outro. `auth-logo.svg` deixou de ser referenciado em qualquer página.

### Os dois mínimos da p.11 — separados em 22/09/2026

A p.11 imprime “6 cm | 170 px” **duas vezes**, e cada régua mede um objeto diferente:

| Versão | O que a régua mede | Medida |
| --- | --- | ---: |
| **Principal** | o **wordmark nu** | `170,11` un |
| **Preferencial** | a **caixa cheia** | `170,08` un |
| — | o wordmark *dentro* da caixa | `128,23` un (75,4%) |

E a caixa da preferencial é exatamente o wordmark mais a área de proteção: `128,23 + 2 × 20,93 = 170,09`. Ou seja, **a versão preferencial é o wordmark dentro da própria área livre, preenchida** — o bloco fechado que a p.05 apresenta, não a marca solta.

O sistema declara os dois, em vez de fundir um no outro:

| Token | O que mede | Valor |
| --- | --- | --- |
| `--tp-logo-width` | mínimo da **principal**: o wordmark | `170px` |
| `--tp-logo-lockup-width` | mínimo da **preferencial**: a caixa inteira | `170px` |
| `--tp-logo-lockup-wordmark` | o wordmark dentro dessa caixa | `128,15px` (prancha: 128,23 — 0,06% de diferença) |

`.tp-brand` é a versão preferencial, e sozinho ele aplica o mínimo da **principal**: wordmark de 170 px, caixa de 225,5 px — acima do mínimo da preferencial, nunca abaixo. `.tp-brand-lockup-min` é a mesma construção no mínimo **dela**: caixa de 170 px com o wordmark em 128,15 px. As duas estão demonstradas lado a lado na seção de logomarca do portal.

### O símbolo — resolvido em 22/09/2026

O guia §06 afirma que não existe símbolo isolado aprovado. A leitura direta do PDF pp.13–14 sempre mostrou o contrário: um ícone próprio em aplicações de mídias e app, um arco em diferentes suportes. Durante quase todo o projeto isso ficou registrado como divergência (**D01**) e pendência (**M2**), porque o desenho só existia rasterizado dentro do PDF — extraí-lo dali produziria imagem, não vetor, e reconstruí-lo seria redesenhar a marca. Nenhuma das duas coisas foi feita.

Foram inspecionados `Favicon-Quadrado.ai` e `Favicon-Redondo.ai`, na mesma pasta de marca. **Não pertencem à Troca Pontos**: suas tintas são `#E4006A`, `#432864` e `#F49600`, ausentes da paleta do manual, e o desenho não corresponde ao arco. Foram descartados e não entraram no pacote.

Em 22/09/2026 a dona do projeto confirmou (M2) que o símbolo existe em vetor e enviou primeiro `Troca_Pontos_Brand_Guidelines.ai`, que **não servia** (salvo sem compatibilidade PDF; as 35 páginas com fluxo de conteúdo vazio, a arte apenas no dado privado do Illustrator; tabela de referências truncada). **No mesmo dia veio o que resolve: o guia de marca exportado em SVG, 34 pranchas.** A **prancha 14, “Ícones de mídias sociais e app”**, traz o símbolo em vetor.

#### Origem e extração

| | |
| --- | --- |
| Fonte | Guia de marca em SVG, **prancha 14** (“Ícones de mídias sociais e app”), recebido em **22/09/2026** |
| O que a prancha traz | O arco branco em cinco recipientes de `80,16 × 80,16` em `#6B0080`, e uma segunda fileira menor (`60,12`) em cinza claro com o arco em roxo |
| Como foi extraído | **Sem redesenho.** O atributo `d` do arco é cópia literal do vetor original. A única normalização foi recortar o `viewBox`, como já se fizera para o wordmark |
| Como foi medido | `getBBox()` no Chromium sobre a arte original — não parser de path próprio, não leitura de aparência |
| Bounding box do arco | `405,76 261,59 48,2 24,79` no sistema de coordenadas da prancha |

#### Os arquivos

| Arquivo | O que é |
| --- | --- |
| `src/images/brand/simbolo.svg` | O arco sozinho, em `currentColor`, com o `viewBox` recortado ao bounding box analítico (`48,2 × 24,79`). É o arquivo para compor fora dos recipientes; a cor vem de quem usa |
| `simbolo-app-quadrado.svg` | Recipiente `80,16`, `rx 0`. Grupo da prancha: **Outros** |
| `simbolo-app-r283.svg` | `rx 2,83`. Grupo: **Outros** |
| `simbolo-app-r850.svg` | `rx 8,5`. Grupo: **Sistemas operacionais (Android, iOS)** |
| `simbolo-app-r2268.svg` | `rx 22,68`. Grupo: **Sistemas operacionais (Android, iOS)** |
| `simbolo-app-circulo.svg` | `rx 40,08` (círculo). Grupo: **Redes sociais** |

Os cinco recipientes e os agrupamentos são os da prancha, não escolha do sistema: a arte rotula o par `rx 0` / `rx 2,83` como “Outros”, o par `rx 8,5` / `rx 22,68` como “Sistemas Operacionais: Android, iOS, etc.” e o círculo como “Redes Sociais: Facebook, Instagram, LinkedIn, TikTok, etc.”.

#### Área livre: o símbolo é exceção

A prancha 14 diz, textualmente: os ícones de redes sociais e aplicativos “são desenvolvidos de forma individual, seguindo as especificações de cada sistema. **Eles são uma exceção às regras de área livre**, sendo ajustados visualmente para se adaptar melhor a cada plataforma.”

Na prática, isso significa duas coisas, e o sistema aplica as duas:

1. **Dentro do recipiente vale o encaixe da prancha, não um cálculo.** O arco ocupa `48,2` de `80,16`, ou **60,13%** da largura do recipiente, e fica centrado. Esse número é medido, não derivado da área livre da p.10.
2. **O recipiente não recebe área livre em volta.** Sendo ele próprio o ícone, a margem da p.10 (altura da letra “t”) não se aplica: quem separa o ícone do resto é o layout que o recebe.

A regra da p.10 continua valendo integralmente para o **wordmark**. A exceção é do símbolo em ícone, e só dele.

#### Onde o símbolo aparece

- **Sidebar recolhida** (`src/partials/sidebar.html`): entrou o símbolo no recipiente de `rx 22,68`, em `currentColor` para o recipiente e branco para o arco, como a prancha pinta. Saiu a marca compacta provisória que **D01** registrava — era a razão original daquela divergência. Os `sidebar-layout-*` continuam com o ícone funcional de início (`.tp-nav-home`): ele nunca foi assinatura de marca e não vira uma agora.
- **Favicon** (`src/images/favicon.ico`): regerado do vetor, nas mesmas quatro entradas (16, 32, 48 e 64 px).
- **Ícones de aplicativo** (`apple-touch-icon.png`, `icon-192.png`, `icon-512.png`): **mantidos**. Ver a comparação abaixo.
- **Portal**: seção própria na área de logomarca, com os cinco recipientes em tamanho real, o arco isolado em três escalas e a exceção de área livre escrita.

#### Favicon e ícones de aplicativo: o que foi medido antes de trocar

Os arquivos existentes eram recortes da mesma prancha 14, rasterizada a 900 dpi e reduzida. Como a geometria é a mesma por construção, a única diferença possível era de antialiasing. Os quatro tamanhos foram regerados do `simbolo-app-quadrado.svg` e comparados pixel a pixel com os que já existiam:

| Arquivo | Diferença média | Decisão |
| --- | --- | --- |
| `favicon.ico`, entrada 16 px | `1,764/255` | **Trocado** |
| `favicon.ico`, entrada 32 px | `1,058/255` | **Trocado** |
| `favicon.ico`, entrada 48 px | `0,594/255` | Trocado junto, por coerência do arquivo |
| `favicon.ico`, entrada 64 px | `0,381/255` | Trocado junto, por coerência do arquivo |
| `apple-touch-icon.png` (180) | `0,165/255` | **Mantido** |
| `icon-192.png` | `0,172/255` | **Mantido** |
| `icon-512.png` | `0,104/255` | **Mantido** |

O critério foi o mesmo nos dois casos: trocar só onde a diferença é visível. Nos PNG de 180, 192 e 512 px a diferença média fica em 0,10–0,17/255 — menos de 0,07%, invisível a olho nu —, e trocar três binários por isso seria churn. No favicon é outra história: em 16 px a inspeção lado a lado mostra que o recorte a 900 dpi entrega o arco borrado, com os terminais fundidos no fundo, enquanto o render vetorial mantém os terminais separados e a curva limpa. O favicon vive em 16 px na aba do navegador; ali a diferença é a legibilidade do símbolo.

Navegação compacta continua usando controle funcional com nome acessível nos layouts alternativos.

### Os fundos das versões secundárias negativas — e uma divergência que nunca existiu

A p.8, lida no vetor, escreve literalmente:

> “As versões secundárias negativas são aplicadas em branco sobre fundos **roxos**.”

Não há “azul” nem “azuis” em nenhuma das 32 pranchas auditadas.

**O que aconteceu.** Durante quase todo o projeto este item ficou registrado como divergência editorial do manual (**D02**): “o texto da p.8 diz fundos azuis, a ilustração mostra roxo”. **Isso era erro nosso, não do manual** — a transcrição do PDF é que trocou a palavra. O manual e a ilustração sempre disseram a mesma coisa. Não havia nada a resolver, e a pergunta M4 à dona do projeto (respondida em 22/09/2026, confirmando o roxo) foi gasto evitável: a resposta confirmou o que o guia já dizia. Fica registrado aqui, e em **D02**, porque é o tipo de erro que precisa ficar visível para não voltar.

**Os cinco fundos autorizados.** A p.8 não generaliza “fundos roxos”: ela desenha **cinco** faixas nomeadas, cada uma com o wordmark branco e o rótulo “Versão secundária negativa”. Lidas do SVG, são uma rampa própria — **não** são as cinco primárias:

| # | Fundo | Token |
| --- | --- | --- |
| 1 | `#4B005A` Russian violet | `--color-brand-ramp-1` (= `--color-brand-dark`) |
| 2 | `#65007A` | `--color-brand-ramp-2` |
| 3 | `#7E0098` | `--color-brand-ramp-3` |
| 4 | `#9700B5` | `--color-brand-ramp-4` |
| 5 | `#AF00D1` | `--color-brand-ramp-5` |

A p.8 desenha a quinta faixa em `#B000D3` e as pp.21, 16, 19 e 17 desenham a mesma parada em `#AF00D1` — diferença de 1/255 em R e 2/255 em B, arredondamento do Illustrator. O sistema publica `#AF00D1`, que é o valor que aparece em cinco pranchas. Os passos 2, 3 e 4 são interpolações lineares entre as pontas e **só existem nesta rampa**: não são cor de interface nem de superfície, e não entram na paleta de 30.

Fora dessas cinco, a negativa continua valendo sobre roxo institucional e fundos escuros — o que muda é que agora existe um conjunto fechado e nomeado, e não uma generalização.

## Co-branding com marca de cliente (manual p.7)

**Decidido pela marca em 22/09/2026 (Guilherme Sydow, resposta M3): a Troca Pontos fica à esquerda.** A prancha em vetor mostra o arranjo inverso — a divergência está aberta em D32, e até a resposta vale a decisão. Implementado como componente `.tp-cobrand`, no bloco `TP:COBRAND` de `src/css/style.css`, com o partial `src/partials/cobranding.html` e demonstração na seção de logomarca do portal.

### O que é norma

O manual determina duas coisas, e só duas:

1. **Neutralidade.** “Por serem utilizadas no contexto da marca do cliente, estas versões devem ser aplicadas em preto sobre fundo branco ou branco sobre fundo preto, garantindo a neutralidade visual.” **Proibido usar a versão colorida em co-branding** — nada de roxo institucional, gradiente ou grafismo na composição. A escolha entre as duas versões é do autor da peça, em função do fundo do cliente; o componente não segue o tema claro/escuro da página, porque a neutralidade é da composição, não do ambiente.
2. **Distância.** “A largura da letra ‘o’ define a distância entre as logomarcas e o divisor.”

### A medida, e como foi medida

A p.7 em vetor **desenha** a unidade de medida: dois blocos em `#E5E5E5`, um de cada lado do divisor, em `x=535,46` e `x=563,70`, com **`27,14`** de largura cada. O wordmark da mesma prancha mede **`226,77`** de tinta, e a tinta da letra “o” mede **`23,51`**. Os dois números foram confirmados por `getBBox()` no Chromium sobre a arte original.

`27,14` não é a tinta do “o”. É a **largura de avanço** dele — a tinta mais as duas laterais da letra, isto é, o passo com que a letra anda na composição. **É essa a leitura correta da frase “a largura da letra ‘o’ define a distância entre as logomarcas e o divisor”:** a largura com que a letra ocupa lugar num texto, não o contorno do desenho.

O espaço aplicado na própria arte fecha a questão:

| Vão na p.7 | Medida |
| --- | --- |
| Borda direita da caixa do cliente (`535,82`) → divisor (`563,15`) | `27,33` |
| Divisor (`563,15`) → tinta do wordmark (`590,89`) | `27,74` |

Os dois batem com `27,14` e não com `23,51`. A diferença de ±0,3 é folga de composição; a de 3,6 seria outra medida.

**Correção aplicada em 22/09/2026.** A primeira entrega do componente, feita horas antes da prancha em vetor chegar, usou `0,103672` — a tinta do “o”, medida em `logo-mono.svg` (`58,546875 ÷ 564,734375`). O valor correto é **`0,119681`** (`27,14 ÷ 226,77`), o avanço. Os dois números ficam declarados no CSS (`--tp-cobrand-o-ratio` e `--tp-cobrand-o-ink-ratio`) e publicados no portal, para que a troca seja rastreável e ninguém tenha de refazer a medição para entender por quê.

| Medida na prancha p.7 | Unidades | Fração da largura | Onde entra |
| --- | --- | --- | --- |
| **Bloco cinza = avanço do “o”** | `27,14` | **`0,119681`** | Distância entre marcas e divisor (`--tp-cobrand-gap`) |
| Tinta da letra “o” | `23,51` | `0,103672` | Não aplicada. Registrada porque foi o valor anterior |
| Altura do divisor | `56,69` | `0,250000` | `--tp-cobrand-rule-height` |
| Espessura do divisor | `1,00` | `0,004410` | `--tp-cobrand-rule-width` |
| Caixa do wordmark (altura) | `34,48` | `0,152028` | Altura mínima da área reservada do cliente |
| Altura da letra “t” | — | `0,125068` | Área livre externa do conjunto (p.10) |

O número virou token **relativo**, não pixel: `--tp-cobrand-gap: calc(var(--tp-cobrand-logo-width) * var(--tp-cobrand-o-ratio))`. Na largura mínima de 170 px isso dá 20,35 px; em qualquer outra escala a distância acompanha, que é o que a norma pede.

### O divisor: a premissa foi substituída por medição

A entrega anterior registrava o divisor como **premissa**, porque o PDF do manual mostrava apenas uma régua vertical sem cota: régua de 1 px lógico na largura mínima da marca, na mesma tinta do conjunto, com a altura da caixa do wordmark (`0,152028`). **Essa premissa caiu — e caiu por medição, não por opinião.** A p.7 em vetor define os três valores:

- **Espessura:** `1` unidade, ou **`0,004410`** da largura do wordmark.
- **Cor:** **`#c6c6c6`**. E é *a mesma nas duas versões*, a positiva e a negativa — o divisor **não** acompanha a tinta do conjunto, como a premissa supunha.
- **Altura:** `56,69`, ou **`0,250000`** da largura do wordmark (`56,69 ÷ 226,77 = 0,250000`). A régua cresceu: antes era `0,152028`.

Sobre `#c6c6c6` na versão positiva: o divisor fica em 1,53:1 contra o branco, e é de propósito. Ele é **decorativo** (`aria-hidden`), não carrega informação e não tem mínimo de contraste a cumprir; a arte o desenha claro justamente para que não dispute com nenhuma das duas marcas. Não recolorir para “melhorar” o contraste — isso seria desfazer a norma que acabou de ser medida.

**A única premissa que sobra é a posição vertical.** Aí a arte não é conclusiva: o divisor fica `2,485` unidades abaixo do centro do conjunto na versão positiva e `2,320` na negativa — mesmo sentido, magnitude parecida, sem fração redonda que sustente norma. O componente **centraliza no conjunto** e registra isso como premissa.

Segunda premissa, de leitura do manual: **entre as duas marcas vale a p.7** (o avanço do “o”), que é a regra específica do co-branding; a **área livre da p.10** (altura da letra “t”) governa as bordas externas da composição. As duas não se somam no eixo interno.

### A ordem das marcas: divergência consciente

A p.7 em vetor mostra **cliente à esquerda, Troca Pontos à direita**, nas duas versões. A divergência foi levada a Guilherme Sydow com a arte da prancha à vista, e ele **manteve a Troca Pontos à esquerda** em 22/09/2026, confirmando a resposta M3 depois de ver o que o guia desenha.

Então, neste ponto, o sistema **não reproduz a ilustração do manual, por decisão de quem homologa**. Isso fica escrito aqui de propósito: quem for atualizar o manual precisa saber que a p.7 e o sistema discordam por escolha, não por engano. Registrado em **D32**.

A troca está preparada para ser de **uma linha**: a classe `.tp-cobrand-cliente-primeiro` reescreve `--tp-cobrand-flow` e `--tp-cobrand-flow-stack`, invertendo a ordem na horizontal e no empilhamento sem tocar no markup nem no resto do componente.

### Comportamento e limites

- Ordem corrente: Troca Pontos, divisor, marca do cliente — decidida em 22/09/2026, contra a ilustração da p.7. O modificador `.tp-cobrand-cliente-primeiro` continua existindo e inverte a composição em uma linha, para o caso de o manual ser atualizado. Em tela estreita a composição **empilha mantendo a ordem corrente** (consulta ao próprio contêiner, `@container tp-cobrand`), e a régua gira para horizontal sem mudar de comprimento.
- A largura mínima de 170 px do wordmark (p.11) continua valendo dentro do lockup.
- A marca do cliente é **espaço reservado rotulado** (“Marca do cliente”). O sistema não distribui, não inventa e não versiona marca de terceiro; quem monta a peça substitui o espaço pelo arquivo autorizado do cliente e confere a área de proteção da marca dele.
- Assets permitidos na composição: `logo-mono.svg` (preta) e `logo-negative.svg` (branca). `logo-positive.svg` e `logo.svg` estão proibidos aqui.

## Originais vetoriais

O wordmark existe agora como vetor no projeto. A origem é **`Troca Pontos 2024.ai`**, o arquivo oficial da marca, aberto como PDF (Illustrator 28.6) e convertido para SVG com preservação de contornos. Não houve redesenho, redigitalização de letra nem reconstrução de lettering: os 11 contornos correspondem às 11 letras de `trocapontos`.

O `viewBox` foi recortado ao bounding box real da tinta, calculado analiticamente a partir dos extremos das curvas de Bézier — não por aparência. A proporção resultante, 564,734 × 85,855 (6,578:1), confere com a dos PNG do guia (1477 × 225 = 6,564:1); a diferença de 0,2% corresponde ao antialiasing das bordas do raster.

| Arquivo em `src/images/brand/` | Tinta | Uso |
| --- | --- | --- |
| `logo-positive.svg` | `#4B005A` Russian Violet | Fundos claros |
| `logo-negative.svg` | `#FFFFFF` | Fundos roxos e escuros. Como **versão secundária negativa** (p.8), os cinco fundos autorizados são `#4B005A`, `#65007A`, `#7E0098`, `#9700B5` e `#AF00D1` — a rampa `--color-brand-ramp-1..5`. Atende também a monocromática negativa da p.6 (branco sobre preto) |
| `logo.svg` | `currentColor` | Herda a cor do contexto; para uso controlado por token |
| `logo-mono.svg` | `#000000` | Versão monocromática positiva (restrição de impressão, p.6) |

Os quatro são copiados para `design-system/assets/` pelo export. Os partials `brand.html` e `brand-inverse.html` passaram a referenciá-los; nenhuma página do projeto referencia mais o PNG do wordmark.

Os **PNG permanecem** e continuam sendo a versão correta para e-mail, onde o suporte a SVG é irregular. O gerador de e-mails aponta deliberadamente para `logo-positive.png`.

A cor da versão positiva continua sendo Russian Violet, e não Purple, tal como nos PNG do guia: a decisão anterior foi preservada, não reaberta.

## Inventário de imagens do guia

As imagens foram decodificadas do `src` data URI, preservando bytes. Não são SVGs. Os IDs abaixo são a ordem zero-based dos elementos `<img>` no HTML.

| ID e contexto | Formato/dimensão | Cor e transparência | Integridade e condição |
| --- | --- | --- | --- |
| 00 navegação; 01 versão positiva | PNG, 1477×225 | RGBA; tinta `#4B005A`; alpha variável | Mesmos bytes; wordmark completo visualmente, sem margem de proteção embutida |
| 02 versão negativa; 04 rodapé | PNG, 890×135 | RGBA; tinta branca; alpha variável | Mesmos bytes; wordmark completo visualmente, sem margem de proteção embutida |
| 03 assinatura de e-mail | PNG, 1477×225 | RGB; roxo `#4B005A` sobre branco | Variação raster com fundo branco; sem transparência |

| Asset | SHA-256 |
| --- | --- |
| PNG positivo transparente | `ff091632fa06dfc061efbbcc07e6f87611b89aa1d90dc0e24e64fa232aeae4d6` |
| PNG negativo transparente | `5957272fbbe191827a0700d7096cadafd70ac3dfbb568e0c6ab58eb199131471` |
| PNG positivo com fundo branco | `d25beb32d5d9d313233373ae04b4768b798197849a20cd9ac305d73805a72c39` |

São assets originários do guia fornecido, comparados visualmente com o wordmark do PDF. Não há identificação de release própria nos PNGs. A classificação correta é “asset fornecido no guia, bytes preservados, aplicação sujeita à homologação”; não “novo original vetorial”. A versão positiva é Russian Violet, e não Purple: preservar essa cor embutida sem recolorir.

Os pixels opacos atingem as bordas da imagem. Isso indica recorte justo à tinta; a inspeção visual não revelou letra truncada. **A reserva externa deixou de ser estimativa.** Os 24 px por lado eram decisão de layout técnica, registrada enquanto a proteção só existia como frase; com a p.10 em vetor a medida é `0,163254` da largura, ou **27,75 px** a 170 px. O texto “a norma é a altura do ‘t’” continua valendo, com a correção de que o “t” da norma é o marcador desenhado na prancha, 1,305× o “t” do wordmark. Ver **A área de proteção, medida**.

## Contrato de integração

Uma aplicação reutilizável deve definir variante, fundo, largura e nome acessível. Manter largura mínima de 170px, proporção intrínseca e `height:auto`; impedir flex-shrink da marca; usar comportamento equivalente a `object-fit:contain`. A região inteira, incluindo proteção, precisa caber. Reorganizar o layout em telas pequenas e manter controles funcionais na sidebar recolhida.

Não usar `object-fit:cover`, altura fixa menor que a arte, transformações de escala ou overflow que esconda a marca. Em links de início, o nome acessível pode ser “Troca Pontos — início”; evitar repetir nome por imagem e texto oculto simultaneamente.

Os assets originais TailAdmin (`logo.svg`, `logo-dark.svg`, `auth-logo.svg`, `logo-icon.svg`, `favicon.ico`) pertencem à base legada e não representam a Troca Pontos. Não conservar referências ativas a esses arquivos como identidade. Caminhos finais e partials reais estão registrados no índice e na documentação de componentes; manter extensões de arquivo coerentes com seus bytes.

## Fontes efetivamente disponíveis

> **Atualizado.** A família Passo passou a ser distribuída com o pacote, em WOFF, servida localmente. O inventário abaixo permanece como registro dos arquivos de origem; o estado atual, os limites e a questão de licença estão em `tipografia.md`.

O pacote **`2024-07-01 Passo TrocaPontos.zip`** foi fornecido pela Troca Pontos para esta execução. Está íntegro e contém recursos desktop e PDFs EULA.

SHA-256 do ZIP: `804abfd6c868719777eab25b567bbe3174e8d5919c9835679f2350c347328464`.

Pasta interna: `2024-07-01 Passo TrocaPontos/Passo/Desktop/TTF/`. Valores abaixo vieram das tabelas `name` e `OS/2` dos TTF, não de equivalência presumida:

| Família/estilo encontrado | Arquivo normal | Arquivo itálico | Peso real `usWeightClass` |
| --- | --- | --- | --- |
| Thin | `Passo-Thin.ttf` | `Passo-ThinItalic.ttf` | 250 |
| ExtraLight | `Passo-ExtraLight.ttf` | `Passo-ExtraLightItalic.ttf` | 270 |
| Light | `Passo-Light.ttf` | `Passo-LightItalic.ttf` | 300 |
| Regular | `Passo-Regular.ttf` | `Passo-Italic.ttf` | 400 |
| Medium | `Passo-Medium.ttf` | `Passo-MediumItalic.ttf` | 500 |
| SemiBold | `Passo-SemiBold.ttf` | `Passo-SemiBoldItalic.ttf` | 600 |
| Bold | `Passo-Bold.ttf` | `Passo-BoldItalic.ttf` | 700 |
| ExtraBold | `Passo-ExtraBold.ttf` | `Passo-ExtraBoldItalic.ttf` | 800 |

Há `Desktop/Variable/PassoVariable.ttf`, com família interna `Passo Variable`, eixo `wght` 100–800 e eixo `ital` 0–1. Recursos de InDesign incluem fontes com nome de teste; não usá-las como fonte de produção.

**Não há Black nos arquivos desktop desse ZIP e não havia WOFF/WOFF2.** O PDF pp.17–18 lista Thin, Light, Regular, Medium, Bold e Black; o pacote entrega ExtraBold 800 como peso máximo. `--font-weight-black` foi alinhado a 800, o peso que existe de fato — ExtraBold não foi renomeado para Black, e Thin não foi mapeado a 100.

Os WOFF distribuídos foram gerados **destes** TTF, por conversão de contêiner: contornos, tabelas `name` e métricas preservados. Nenhuma fonte foi extraída de PDF nem baixada de origem externa. **A licença web foi confirmada em 22/09/2026 por Guilherme Sydow (resposta M1): cobre o uso em site com hospedagem própria e o uso embarcado em aplicativo.** A pendência de licença está encerrada; ver `tipografia.md`.

## Intenção tipográfica e fallback

Passo é principal para expressão da marca (PDF pp.17–18); Inter é secundária digital (pp.19–20). O guia §07 orienta títulos e botões institucionais em Passo e leitura/interface em Inter. ERP usa Inter nos textos operacionais; fallback usa sistema/Arial quando indisponível. Não afirmar que Passo está renderizada apenas porque a declaração CSS contém o nome.

```css
--font-passo: "Passo", "Inter", Arial, sans-serif;
--font-inter: "Inter", system-ui, Arial, sans-serif;
```

Passo tem `@font-face` real neste pacote e foi confirmada renderizando em navegador. Inter continua sem binário e depende do fallback de sistema — ver `tipografia.md`. Não há URL apontando para arquivo ausente. Evitar peso sintético: a escala usa apenas pesos que existem nos arquivos.

Fallbacks de escritório do guia: Arial em Google Docs/Slides; Aptos ou Arial no Microsoft 365. São alternativas operacionais, não famílias oficiais novas.

## Ícones, grafismos e imagens

PDF pp.22–24, texto literal da prancha: “utilize o tamanho de **24x24 px** dentro de um artboard de **48x48 px**… considere sempre cantos arredondados entre **1 px e 4 px**… considere **2 px** para a espessura do traçado”. São **2 px**, sem “aproximadamente” — a palavra era nossa, não do manual. O artboard não exige controles ERP de 48 px em todos os contextos.

A grade passou a existir como token, e não só como frase: `--tp-icon-grid: 24px`, `--tp-icon-artboard: 48px`, `--tp-icon-stroke: 2`, `--tp-icon-corner-min: 1px` e `--tp-icon-corner-max: 4px`. Quem for desenhar um ícone próprio da marca encontra a grade no sistema.

**Duas famílias, e o critério que as separa.** `.tp-icon` é a família **da marca**: caixa de 24 px, `stroke-width` vindo de `--tp-icon-stroke` (2), terminais e junções arredondados, cor por contexto. É a única família usada nas superfícies institucionais — portal do design system e página institucional não trazem nenhum `stroke-width` embutido no markup. A segunda família é a **iconografia de interface do TailAdmin**, SVG inline nas páginas e partials do template, registrada como extensão técnica em **D15**; a varredura de 22/09/2026 conta **111 ícones de 24×24 nos partials, 98 deles abaixo de 2 px** (61 em `1.5`, 33 em `1.2`, 3 em `1.94437` e 1 em `1.8`). Esses 98 **não foram reescritos**: reescrever a iconografia de um template de interface é caro, arriscado e não torna nenhuma peça mais fiel ao manual, porque não é ali que a marca se apresenta. A divergência está medida e registrada em D15, com o número, em vez de resolvida por reescrita.

Material Symbols Rounded, 24px, peso 400, fill 0 é referência do site descrita no guia §10 — e as pranchas pp.21–23 trazem a nota “Google material design: material.io/design”, o que torna essa escolha alinhada ao **manual**, não apenas ao guia HTML. Preservar bibliotecas existentes e não instalar outra por associação. No ERP, revisar consistência da família existente e nomes acessíveis. Ícone funcional nunca vira símbolo improvisado da marca.

Arcos, linhas, pontos e gradientes são apoio; não competem com informação. Fotografia natural, diversidade e contexto brasileiro são recomendações do guia §11; não norma fotográfica detalhada do manual. Imagens da base são demonstrações, não equipe ou clientes reais da Troca Pontos. Fotografias e marcas de terceiros exigem origem e contexto antes de uso comercial.

## Pendências de marca

Resolvidas nesta execução: original vetorial do wordmark (positivo, negativo, `currentColor` e monocromático) e integração da família Passo como webfont local.

Resolvidas pela marca em 22/09/2026 (Guilherme Sydow): **licença web da Passo** (cobre site e aplicativo); **divergência dos fundos secundários** (vale o roxo); **co-branding** (Troca Pontos à esquerda, componente e premissas abaixo); **CTA amarelo** aprovado como extensão digital; **papelaria** fora do escopo do material digital.

Resolvido também em 22/09/2026, pelo **guia de marca em SVG** (34 pranchas): o **símbolo** em vetor (prancha 14), que fecha M2 e a divergência D01, e o **favicon** marcário regerado desse vetor. A mesma entrega corrigiu a medida do co-branding e trocou a premissa do divisor por norma medida (D32).

Em aberto: hospedagem própria de **Inter**; **homologação institucional** do uso, agora com responsável nomeado (Guilherme Sydow), ainda sem aprovação dada; e a **ordem das marcas no co-branding**, em que a prancha p.7 contradiz a decisão M3 (D32).

Nenhuma dessas pendências autoriza fabricar versões da marca ou declarar aprovação institucional.