# Revendabot — Manual de marca

> **Sua próxima revendedora começa numa conversa.**

O Revendabot é a plataforma em que marcas de semijoias cadastram revendedoras
por uma conversa no WhatsApp e acompanham cada etapa do funil. É um produto da
Troven e fala a mesma língua visual: geometria simples, cor chapada e um
detalhe que parece em movimento.

A Troven aparece só como assinatura discreta ("Desenvolvido por Troven"), nunca
como nome do produto.

## Conceito

Um **r** feito de blocos, no mesmo grid do símbolo da Troven (bloco de 24,
vão de 4, raio de 5). A haste são dois blocos. O ombro do r é um **balão de
conversa**, ainda girando para encaixar: a revenda que se completa quando a
conversa começa.

## Nome

- Escreva sempre **Revendabot**, com R maiúsculo e o resto junto, em minúsculas.
- Nunca use "RevendaBot", "Revenda Bot" ou "REVENDABOT" em texto corrido.
- No logo, a palavra aparece toda em minúsculas.

## Arquivos

| Pasta | Arquivo | Uso |
| --- | --- | --- |
| `logo/` | `logo-positivo` | **Principal.** Fundos claros |
| | `logo-negativo` | Fundo verde ou noite (balão em ouro) |
| | `logo-preto` / `logo-branco` | Uma cor: impressão, carimbo, gravação, sobre foto |
| | `logo-vertical-*` | Espaços quadrados ou altos (capa, cartão, rodapé centralizado) |
| `simbolo/` | `simbolo-*` | Só o r, sem fundo: avatar, marca d'água, espaços pequenos |
| `favicon/` | `favicon.svg`, `favicon-16…512.png` | Aba do navegador e PWA |
| | `apple-touch-icon.png` | Atalho no iPhone (fundo opaco, sem cantos) |
| `redes/` | `icone-verde` / `icone-noite` | Ícone com cantos arredondados |
| | `icone-app-1024.png` | Lojas de app (quadrado; a loja aplica a máscara) |
| | `avatar-1080.png` | Foto de perfil (Instagram e WhatsApp cortam em círculo) |
| | `og-image.png` | Imagem de compartilhamento de links (1200×630) |

Todos os SVGs têm o texto convertido em curvas: não dependem de fonte instalada.

**Respiro:** deixe em volta do logo um espaço livre de, no mínimo, a largura de
um bloco do símbolo.

**Tamanho mínimo:** logo horizontal com 96 px de largura na tela (25 mm
impresso). Abaixo disso, use só o símbolo.

**Não faça:** esticar, girar, aplicar degradê, sombra ou contorno, trocar as
cores das peças, ou endireitar o balão (a inclinação é parte da marca).

## Cores

| Nome | Hex | Uso |
| --- | --- | --- |
| **Verde-conversa** | `#0A7C59` | Cor principal: fundos de marca, botões, o balão no logo positivo |
| **Ouro** | `#FFC73A` | Destaque em pequenas doses: o balão sobre verde ou noite, selos, um número em destaque |
| **Noite** | `#0C1A15` | Textos, logo positivo, fundos escuros |
| **Papel** | `#F6F5F0` | Fundo claro padrão |

Tons de apoio do verde (interface e gráficos):

| Token | Hex |
| --- | --- |
| `verde-50` | `#E9F5F0` |
| `verde-100` | `#CDEBDF` |
| `verde-200` | `#9DD6C0` |
| `verde-400` | `#2E9E78` |
| `verde-600` | `#0A7C59` (principal) |
| `verde-700` | `#08654A` |
| `verde-800` | `#074F3A` |
| `verde-900` | `#063D2E` |

**Ouro sobre branco não tem contraste.** Use ouro só sobre verde ou noite, como a
lima da Troven. Texto branco sobre o verde principal passa no contraste AA
(5,2:1).

## Tipografia

| Papel | Fonte | Onde |
| --- | --- | --- |
| Logo e títulos | **Unbounded** Bold (600 em títulos longos) | Logo (já em curvas), títulos do site e de materiais |
| Interface e texto | **Inter** 400–600 | Todo o resto do app e dos materiais |

As duas são gratuitas no Google Fonts e são as mesmas da Troven, o que mantém as
duas marcas da mesma família.

## Voz

- Fale com a dona da marca de semijoias: próxima, clara, sem jargão técnico.
- Prefira "revendedora" a "lead" e "conversa" a "sessão".
- Frases curtas. Português do Brasil, com tratamento por "você".

## Para aplicar no app

O app (`E:\Projetos\revendabot`) ainda usa a identidade antiga. Para trocar:

- Cores: trocar `--brand` por `#0A7C59` e `--brand-soft` por `#E9F5F0` em `src/index.css`.
- Fontes: trocar Plus Jakarta Sans por Inter (texto) e Unbounded (títulos) no `index.html`.
- Logo e favicon: copiar `logo/logo-positivo.svg`, `logo/logo-negativo.svg`,
  `favicon/favicon.svg`, `favicon/apple-touch-icon.png` e `redes/og-image.png`
  para `public/` e atualizar as referências no `index.html`.
- Título da aba: "Revendabot · Formulários via WhatsApp".

## Regerar os arquivos

`gerar-assets.mjs` gera todos os SVGs e PNGs a partir do código (símbolo, cores
e proporções ficam lá). Ele precisa de `opentype.js` e `@resvg/resvg-js` e das
fontes `unbounded-700.woff`, `inter-500.woff` e `inter-600.woff` numa pasta:

```bash
node gerar-assets.mjs <pasta-das-fontes> .
```