# Identidade visual — Leads Per Hour (oficial 2026)

> **Versão da identidade: 2026.** Kit e design system mantidos e versionados nesta skill (`id-leadsperhour`).

Fonte de verdade da marca. Os arquivos originais (PDF de apresentação, régua de
tons/sombras, paleta Adobe) estão em `references/brand-source/`. Fontes em
`assets/fonts/`, logos em `assets/logos/`, tokens prontos em `assets/tokens.css`.

> Regra de ouro: se uma cor, fonte ou raio não estiver aqui (ou nos tokens),
> provavelmente não deve existir no produto.

## Essência

- **Tagline:** *"Mais leads, menos esforço."* / *"Nós otimizamos suas vendas para que você foque no que importa."*
- **Manifesto:** *"A velocidade define o futuro. E nós definimos a velocidade."* → **"Somos a velocidade."**
- **Promessa:** automatizar a pré-venda de ponta a ponta — da busca de leads ao agendamento de reuniões — com **velocidade, potência e eficiência**, sem perder a conexão humana.
- **Símbolo — o raio:** representa potência, eletricidade, energia e velocidade. É formado por **dois "L"** (de *Leads*) que juntos desenham o raio; as pontas deslocadas para o centro sugerem **dois funis** — "os leads entram na velocidade de um raio". O "/" em "PER / HOUR" alude à medida de velocidade (km/h). Citação-conceito: *"…é o raio que faz o trabalho."* (Mark Twain).

## Tom de voz

Atributos oficiais: **Moderna · Profissional · Dinâmica · Inspiradora · Confiante.**

- Direta e de ferramenta de trabalho de vendas — pt-BR, sem rodeios.
- Proativa, não reativa; desafia o status quo ("não aceitamos o convencional").
- Inspiradora sem ser vazia: fala de velocidade, controle e resultado.
- Evite: jargão technês desnecessário, Title Case em inglês, promessas mágicas.

**Persona / ICP:** "Lucas Almeida", Diretor de Vendas de uma empresa de tecnologia
(~12 anos liderando times comerciais). Quer ferramentas que otimizem processos,
tragam ROI claro e sejam fáceis de implementar e adaptar. Escreva o produto para ele.

## Cores institucionais

| Nome | HEX | RGB | CMYK | Pantone | Papel no produto |
|---|---|---|---|---|---|
| **Laranja Chama** | `#F2552C` | 242, 85, 44 | 0/65/82/5 | 17-1462 TCX | **Acento primário** — ações, estado ativo, destaques, logo |
| **Laranja Rubi** | `#D8321A` | 216, 50, 26 | 0/77/88/15 | 18-1561 TCX | Acento profundo, gradiente com o Chama, perigo/destrutivo |
| **Azul Noite** | `#1D262D` | 29, 38, 45 | 36/16/0/82 | PMS 433 C | **Base do tema escuro** (fundos e superfícies) |
| **Lago Refletido** | `#203E49` | 32, 62, 73 | 58/15/0/71 | 19-4326 TCX | Superfície fria / secundária, chips, seções calmas |
| **Verde água** | `#115E66` | 17, 94, 102 | 83/8/0/60 | PMS 5473 C | **Acento frio** — Oráculo, info, dados, botão secundário |
| **Obsidiana** | `#131313` | 19, 19, 19 | 0/0/0/93 | Black 6 C | Preto de marca — poços profundos, sombras chapadas |
| **Branco** | `#FFFFFF` | 255, 255, 255 | — | White | Texto/artes sobre fundo escuro |

**Uso essencial**
- **Laranja é acento, nunca fundo de área grande.** Aparece em um CTA por contexto, estado ativo, destaque de dado. Se pintar uma tela inteira de laranja, errou.
- **Base sempre escura** (família Azul Noite). Tema claro só em materiais impressos/mockups, não no produto.
- **Chama × Rubi**: use o Rubi como par do Chama em gradientes (`--grad-chama`) e como cor de perigo — nesse caso pareado com contorno/ícone para não competir com o CTA primário.
- **Frios (Lago / Verde água)** são o par sóbrio do laranja: ótimos para o **Oráculo**, estados informativos, séries secundárias de gráfico e botões secundários.

**Superfícies do tema escuro** (derivadas do Azul Noite, já nos tokens):
`--bg #141b1f` → `--s1 #1a2229` → `--s2 #1d262d` (Azul Noite puro) → `--s3 #26313a`; poço `--well #0f1417`.

**Tema claro oficial** (`data-theme="light"`, derivado das rampas de tints):
fundo `#fcfcfd`, elevações `#f2f4f5`/`#ffffff`, texto em Azul Noite `#1d262d`,
hairlines `rgba(29,38,45,.10/.20)`. Acento continua Chama; hover do primário escurece
(Rubi) em vez de clarear; semânticos/canais/temperatura ganham versões mais escuras
para contraste (ver bloco `[data-theme="light"]` em `assets/tokens.css`).

**Tons e sombras:** cada cor tem régua de 0–100% (mistura com preto) e de 0→branco.
Régua completa em `references/brand-source/tons-e-sombras.pdf`. Exemplos do Chama:
sombras `f2552c › da4d28 › c24423 › a93b1f …`; tints `f2552c › f36641 › f57756 › f6886b …`.

## Tipografia

Duas famílias, papéis distintos:

- **Switzer** — *"a nossa voz tipográfica"*. Indian Type Foundry (fontshare.com/fonts/switzer). **Títulos, números-herói, chamadas e destaques.** Personalidade com tom sóbrio. Variável (100–900); no produto use sobretudo **600 (Semibold)** para títulos de UI e **700–800** para display/hero.
- **Inter** — **corpo de texto e interface**: parágrafos, rótulos, tabelas, inputs, navegação. Pesos 400/500/600 cobrem quase tudo.

Regra prática: **título = Switzer, resto = Inter.** Já está ligado nos tokens
(`--font-display` e `--font`) e na base (`h1..h4` herdam Switzer).

**Como carregar** (ver `assets/fonts.css`):
- Offline / Artifact (CSP): `<link rel="stylesheet" href="fonts.css">` usando `assets/fonts/` (Switzer-Variable.woff2, Inter-Variable.ttf).
- Protótipo com internet: Inter via Google Fonts + Switzer via Fontshare (`https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700,800&display=swap`).

## Logo e assinaturas

Arquivos em `assets/logos/` (curadoria dos oficiais). Convenção de nome do kit:
**`_Escuro` = para fundo escuro** (arte clara), **`_Claro` = para fundo claro** (arte escura).
Como o produto é escuro, o padrão é a variante **on-dark**.

| Arquivo | O que é | Quando usar |
|---|---|---|
| `logo-horizontal-on-dark.svg` | Lockup principal (símbolo + "Leads PER/HOUR"), texto branco | Cabeçalhos, topo de telas/telas de login, e-mails — sobre fundo escuro |
| `logo-horizontal-on-light.svg` | Mesmo lockup, texto escuro | Sobre fundo claro (impressos, docs) |
| `logo-centered-on-dark.svg` | "Leads [símbolo] Per Hour" centralizado | Peças centradas, capas |
| `logo-stacked-on-dark.svg` | Empilhado (símbolo em cima) | Espaços verticais/quadrados |
| `symbol-rounded.svg` | Raio no quadrado arredondado (estilo app-icon), gradiente coral | Favicon, avatar do app, marca na barra lateral |
| `symbol-circular.svg` | Raio em círculo | Selos, avatares redondos |
| `bolt.svg` | Só o raio, chapado `#f2552c` | Ícone/detalhe pequeno, marca d'água |
| `logo-horizontal-mono-white.svg` / `-mono-black.svg` | Versões 1 cor | Fundos difíceis, gravação, 1 tinta |
| `bolt-mono-white.svg` | Raio branco 1 cor | Sobre foto/cor cheia |
| `bolt-3d.html` | **Raio 3D interativo** — extrusão em CSS 3D puro (18 fatias/~56px de espessura na rampa oficial de sombras, gradiente Chama→Rubi na face, flutuação + inclinação com o cursor + giro no clique; respeita `prefers-reduced-motion`) | Heros de landing/manifesto, login, loading, momentos de marca — nunca em UI densa. Copie os 3 blocos do arquivo; referencie o path via `<use>` direto (não `<symbol>`) |
| `bolt-pointcloud.html` | **Raio em nuvem de pontos** — ~2.000 pontos amostrados do path oficial, projetados em 3D num canvas 2D puro; profundidade colore da rampa Rubi→Chama com faíscas claras; oscila, vibra e o cursor repele os pontos. Narrativa: *"cada lead é um ponto — juntos, são o raio"* | Heros/storytelling, loading/processamento, fundo de login — sobre Azul Noite; nunca em UI densa. Teste de visibilidade por frame (não usar IntersectionObserver em webviews) |
| `bolt-crystal.html` | **Raio em vidro-cristal** — fatias translúcidas que acumulam densidade + núcleo de luz desfocado dentro do volume + rim light branca→âmbar + varredura de brilho + cáustica laranja no chão (em vez de sombra preta). CSS/SVG puros, sem JS obrigatório | A peça "premium": heros, login, prêmios/marcos ("troféu da velocidade"), loading especial — sobre Azul Noite; nunca em UI densa |

O símbolo usa um **gradiente coral** (`#e06c3b → #e05e3b → #e04131`); a versão chapada
é `#f2552c`. Na barra lateral do produto, o `screen-template.html` já embute o símbolo
arredondado inline (sem depender de arquivo externo).

**Boas práticas:** dê respiro ao redor (área de proteção ≈ altura do símbolo), não
distorça, não recolore fora da paleta, não aplique o coral sobre fundos que matem o
contraste. Para 1 cor, use as versões mono.

## Mapa dos arquivos da skill

- `assets/tokens.css` — tokens canônicos, dark + light, assinaturas e cores de gráfico.
- `assets/fonts.css` + `assets/fonts/` — Switzer e Inter para uso offline.
- `assets/logos/` — 13 versões: 10 oficiais (SVG) + as vivas `bolt-3d.html`,
  `bolt-pointcloud.html` e `bolt-crystal.html`.
- `assets/screen-template.html` — app-shell pronto (temas, favicon embutido).
- `assets/components.html` — galeria de componentes no tom da marca.
- `assets/charts.html` — padrões de gráfico e regras de dataviz.
- `assets/email-template.html` — e-mail de marca email-safe (tabelas, inline, claro).
- `references/padroes-de-tela.md` — receitas de telas típicas + gotchas de engenharia.
- `references/brand-source/` — originais: `apresentacao-marca.pdf`, `tons-e-sombras.pdf`, `paleta-oficial.jpeg`.
- `references/product.md`, `references/glossary.md`, `references/oraculo-ux.md` — domínio, vocabulário e direção de UX.
