# Leads Per Hour — Identidade completa para I.A.s

> Cole este arquivo inteiro no contexto de qualquer IA para gerar no padrão da marca.
> Versão 2026. Não invente cores, fontes ou termos fora do que está aqui.

---

# PARTE 1 — REGRAS DA MARCA (SKILL.md)

---
name: id-leadsperhour
description: >-
  Kit de marca, design system e domínio da plataforma Leads Per Hour (SaaS B2B
  de prospecção outbound, em português do Brasil), baseado na identidade visual
  OFICIAL 2026: Laranja Chama #f2552c, Azul Noite, tipografia Switzer
  (títulos) + Inter (interface), símbolo do raio e logos oficiais. Use SEMPRE que
  for criar, redesenhar ou prototipar qualquer coisa para o Leads Per Hour / LPH
  — telas, dashboards, gráficos, painéis, fluxos, extensões, landing
  pages, e-mails, componentes ou protótipos — mesmo que a marca não seja citada, bastando
  o contexto ser uma interface dark com laranja, um produto de leads/cadência/
  prospecção, ou continuar um projeto já iniciado nesse estilo. Garante identidade
  consistente (tema escuro + Laranja Chama + Switzer/Inter + raio), tokens, fontes
  e logos oficiais embutidos, componentes prontos, vocabulário de domínio e a
  direção de UX "Oráculo". Skill exclusiva da Leads Per Hour (versão 2026).
---

# Leads Per Hour — kit de marca, design system e domínio

**Skill exclusiva** para deixar qualquer projeto na **identidade oficial e atualizada
da Leads Per Hour** (LPH) — SaaS de **prospecção outbound B2B**, em **português do
Brasil**. Carrega a **identidade visual oficial
(versão 2026)** — cores, tipografia, logos e materiais-fonte — e a **linguagem visual
do produto**, para que qualquer artefato nasça inconfundivelmente LPH e nunca pareça
um "dashboard genérico de IA".

## Quando usar

Acione para **qualquer** trabalho de interface no universo LPH: nova tela, redesenho,
dashboard, protótipo navegável, extensão de navegador, landing, e-mail ou componente
isolado. Se soa como "uma tela dark com laranja para um produto de leads/cadência" ou
"continuar o projeto do Leads Per Hour / Oráculo", é aqui.

## A marca em 20 segundos (inegociáveis)

- **Tema escuro é o padrão do produto.** Base na família **Azul Noite** (`#1D262D`);
  tudo **flat sobre `--bg`**, estruturado por hairlines — não por painéis. Existe um
  **tema claro oficial** (`data-theme="light"`) para landings, docs, e-mails e
  preferência do usuário — ver seção "Tema claro".
- **Laranja Chama `#F2552C` é raro e por isso poderoso** — a ação primária da vista,
  o estado ativo, o "/" dos rótulos. Nunca fundo de área grande, nunca espalhado.
- **Tipografia manda: Switzer nos títulos e números, Inter no resto.** Hierarquia vem
  de peso/tamanho/cor de texto, não de caixas.
- **Logo = o raio.** Dois "L" que formam o raio (e sugerem dois funis) num quadrado
  arredondado coral; wordmark "Leads" + "PER / HOUR". Lockups em `assets/logos/`.
- **Frios da marca (Lago Refletido / Verde água)** pertencem ao **Oráculo** e à
  informação — o contraponto sóbrio do laranja.
- **Português do Brasil**, tom seco de ferramenta de vendas — *moderna, profissional,
  dinâmica, inspiradora, confiante*.

> Régua completa da identidade (cores + Pantone, tipografia, logos, tom de voz,
> persona) em **`references/identidade-visual.md`**; originais em `references/brand-source/`.

## Assinaturas visuais (o que torna uma tela LPH inconfundível)

Estes quatro elementos são a identidade em uso. Toda tela deve ter pelo menos dois:

1. **A barra "/"** — vem de "PER **/** HOUR" (alusão a km/h, velocidade). É o marcador
   de rótulos e grupos: eyebrows (`/ COCKPIT`), grupos da navegação, prefixo da linha
   do Oráculo e da paleta ⌘K. Classe `.slash-label` nos tokens.
2. **A régua espectral** — fio de 2px com o gradiente Chama→Rubi→Lago→Verde água
   (`--grad-spectrum`), vinda do board oficial. Aparece **uma vez por vista** (fio
   inferior do topo do app, ou sob o título em landings). É a assinatura cromática.
3. **Números em Switzer** — todo dado numérico relevante usa `.num` (Switzer,
   dígitos tabulares, tracking apertado). É o que faz um painel LPH parecer LPH.
4. **O raio vivo** — o glifo do raio como indicador de "ao vivo"/atividade
   (`.live-bolt`), no lugar do genérico pontinho verde.

## Anti-padrões ("cara de IA" — proibido)

O que denuncia interface gerada e **não** pode aparecer:

- **Grade de cartõezinhos KPI** (4 caixas com número + delta). Use a **faixa de
  estatísticas** (`.stats`): números grandes separados por hairlines verticais, sem caixas.
- **Pílulas e badges por todo lado.** Temperatura é **glifo + palavra na cor**
  (`.temp`), filtros são **texto com sublinhado ativo** (`.filters`), canais são
  **botão neutro com glifo colorido** (`.chan`). Pílula colorida, só se não houver alternativa.
- **Caixa em cima de caixa.** Seção = título pequeno + hairline (`.section`), conteúdo
  flat. Superfície elevada é privilégio de popover/⌘K/toast/inputs.
- **Sparkles ✨ e caixinhas de "insight de IA".** A fala do Oráculo é uma **citação
  editorial** com fio verde-água à esquerda (`.oracle-note`) — voz de analista, não de chatbot.
- **Acento espalhado** (laranja em todo botão/ícone/borda). Um primário por vista.
- **Gradientes decorativos** fora das duas assinaturas (`--grad-chama` no símbolo/hero,
  `--grad-spectrum` na régua).
- **Microcopy de assistente** ("Como posso ajudar?", "Ótima pergunta!"). A voz é de
  ferramenta: números, fatos, próxima ação.
- **Dados de mentira óbvia** (Lorem, "John Doe", valores redondos demais). Use nomes
  pt-BR e números verossímeis.
- Emoji em UI, sombras dramáticas, cantos exagerados, ícones preenchidos.

## Como começar uma tela nova (workflow)

1. **Copie o esqueleto** `assets/screen-template.html` — shell flat completo: topo com
   logo oficial + nome da tela + régua espectral, navegação com grupos "/", rodapé de
   usuário. Arquivo único, sem build.
2. **Carregue as fontes.** O template já traz os `<link>` de CDN (Inter via Google,
   Switzer via Fontshare). Para **offline ou Artifact (CSP)**, troque por
   `<link rel="stylesheet" href="fonts.css">` com `assets/fonts/`. Ver `assets/fonts.css`.
3. **Marque o item ativo** da navegação (classe `.on`) e o **nome da tela** no topo.
4. **Estruture o `<main>` em `.section`** (título + hairline) e componha com os
   componentes de `assets/components.html` — faixa de estatísticas, funil, filtros,
   tabela full-bleed, linha do Oráculo, nota do Oráculo, tempo real, toast, ⌘K.
   **Gráficos** (linha/área, colunas, barras, empilhada, heatmap, sparkline) vêm de
   `assets/charts.html`, com as regras de cor e séries. **E-mail** usa
   `assets/email-template.html` (tabelas, inline, tema claro, sem webfont).
   Telas típicas — home Oráculo, caixa assistida, builder de cadência, painel,
   landing — têm **receitas prontas em `references/padroes-de-tela.md`** (incl.
   os gotchas de engenharia: `<use>` sem `<symbol>`, IO em webviews, canvas).
5. **Use os tokens** de `assets/tokens.css`. Nunca cravar hex fora da paleta; números
   com `.num`; um `btn-primary` por vista.
6. **Cheque contra os anti-padrões** acima antes de entregar.

Para um **projeto** (várias telas), use o template como base e reaproveite o mesmo
`<style>` em todas — só muda o `.on` da navegação e o conteúdo do `<main>`.

## Telas-padrão do produto (sempre iguais)

Algumas telas se repetem em **todo** software LPH e **não devem ser reinventadas** —
use as versões canônicas de **`assets/auth.html`** (copie o bloco `.scr` da tela que
precisar; troque textos/SSO conforme o produto, mas **mantenha o layout**):

- **Login** (`#login`) — a porta de entrada. Split: painel de marca à esquerda
  (Azul Noite + raio + manifesto + régua espectral), formulário à direita. E-mail +
  senha (com mostrar/ocultar), "manter conectado", "esqueci a senha", **um** botão
  Chama "Entrar", SSO (Google/Microsoft) e link para criar conta.
- **Criar conta** (`#signup`) · **Recuperar senha** (`#reset`) · **Verificação /
  código de 6 dígitos** (`#otp`) — mesmo shell do login, só muda o formulário.
- **Erro / 404** (`#erro`) e **Carregando / splash** (`#load`) — centradas, com o símbolo/raio.

Regras dessas telas: **dark por padrão** (claro via `data-theme`), Switzer nos
títulos e Inter no resto, **um só laranja por vista**, e abaixo de 920px o painel de
marca some e o formulário centraliza (o logo aparece no topo do form). São a primeira
impressão da marca — trate-as como parte fixa da identidade, não como tela livre.

## Tokens (resumo — fonte completa em `assets/tokens.css`)

```css
/* cores de marca (oficiais) */
--chama:#f2552c; --rubi:#d8321a; --noite:#1d262d; --lago:#203e49; --agua:#115e66; --obsidiana:#131313;
/* superfícies: o padrão é flat sobre --bg; s1–s3 só p/ interação/elevação real */
--bg:#141b1f; --s1:#1a2229; --s2:#1d262d; --s3:#26313a; --well:#0f1417;
--ln:rgba(255,255,255,.07); --ln2:rgba(255,255,255,.14);      /* hairlines */
--tx:#f4f7f8; --t2:#9aa7ad; --t3:#6d7a81;                     /* texto forte/médio/fraco */
--ac:#f2552c; --ac2:#f57756; --ac-press:#da4d28; --acsoft:rgba(242,85,44,.12);
--cool:#115e66; --cool2:#2a8a91; --coolsoft:rgba(17,94,102,.16);  /* Oráculo/info */
--ok:#2fbf71; --warn:#f5a623; --danger:#d8321a;               /* semânticos (no glifo/texto) */
--wa:#25d366; --li:#3b82c4; --call:#2a8a91;                   /* canais (cor SÓ no glifo) */
--hot:#f2552c; --warm:#f5a623; --cold:#4a9ba6;                /* temperatura (glifo+palavra) */
--r:12px; --r-sm:8px; --r-lg:16px;                            /* raios contidos */
--grad-chama:linear-gradient(135deg,#f2552c,#d8321a);
--grad-spectrum:linear-gradient(90deg,#f2552c,#d8321a 26%,#203e49 70%,#115e66);
--font-display:'Switzer',…;  --font:'Inter',…;
```

Texto sobre laranja: branco, peso 600+. Ícones: traço estilo Tabler, `stroke-width:1.75`,
herdam a cor do texto; sprite `<symbol>` no `<body>` (o template traz um conjunto).

## Tema claro (variante oficial)

O produto é escuro por padrão, mas a marca tem **tema claro oficial** — derivado das
rampas de tints de `references/brand-source/tons-e-sombras.pdf`. Use-o em landings,
documentos, e-mails, impressão, ou como preferência do usuário (o template já traz o
toggle ☀/☾ no topo, com persistência em `localStorage`).

- **Como funciona**: um bloco `[data-theme="light"]` sobrescreve os tokens (já incluso
  em `tokens.css`, no template e na galeria). Ative com `<html data-theme="light">`.
  **Nunca crie um CSS paralelo** — é o mesmo design, só os tokens mudam.
- **O que muda**: superfícies claras (`#fcfcfd`/`#f2f4f5`), texto em **Azul Noite**
  (`#1d262d`), hairlines escuras translúcidas, semânticos/canais/temperatura
  **escurecidos para manter contraste** (ex.: hover do primário escurece para Rubi em
  vez de clarear). Acento continua **Laranja Chama**; régua espectral continua a mesma.
- **O que NÃO muda**: hierarquia, assinaturas ("/", régua, Switzer nos números, raio),
  anti-padrões, um primário por vista.
- **Logo**: o lockup do template adapta sozinho (wordmark em texto herda a cor). Ao usar
  arquivos estáticos, troque para as variantes `*_on-light.svg` / `mono-black` de
  `assets/logos/`.

## Anatomia do app-shell

- **Topo (54px)**: logo oficial (símbolo + wordmark) à esquerda, **"/" + nome da tela**
  ao lado, créditos como texto discreto, a **ação primária da vista** e o avatar à
  direita. O fio inferior é a **régua espectral** — não uma borda laranja chapada.
- **Barra lateral (224px)**: mesmo fundo da página, hairline à direita. Grupos com
  rótulo `/ GRUPO`; item ativo = **barra Chama de 2px à esquerda** + texto claro
  (nada de pílula de fundo). Rodapé: usuário + sair.
- **Conteúdo**: eyebrow `/ contexto`, H1 em Switzer, uma linha de contexto. Depois,
  blocos `.section` (título + hairline) — máx ~1040px, respiro generoso (30px+).

As 21 telas e seus grupos (Operações, Criação, Cockpit, Contato, Configuração) estão
em `references/product.md` — consulte para usar o nome e o grupo certos.

## Regras de layout e qualidade

- **Hierarquia**: um H1 por tela; dado mais importante = maior/mais pesado (Switzer).
  Rótulos pequenos em caixa alta espaçada (`--t3`), nunca competindo com o dado.
- **Densidade com ar**: combata o aperto com espaçamento e hairlines, não com fontes
  minúsculas (nada < 11px).
- **Estados sempre**: carregando, vazio (`.empty`: uma frase + uma ação), erro.
- **Uma ação primária óbvia** por contexto; o resto é `btn-line`/`btn-text`.
  Destrutivo = `btn-danger` (contorno Rubi), nunca sólido.
- **Acessibilidade**: contraste real, `aria-label` em botões só-ícone, foco visível.
- **Fontes de marca**: Switzer + Inter (CDN ou `assets/fonts/`). Sem fonte de sistema
  como padrão.

## Domínio e vocabulário

Use os termos exatos do produto (lead, contato, empresa, **cadência**, **ICP**,
**funil decantado**, **touch**, **temperatura** quente/morno/frio, **sinais**,
assinatura de envio, disparo, inbound, MQL, reunião). O **funil decantado – outbound**:
**Leads → Impactado → Conversas → Reuniões**. Glossário em `references/glossary.md`;
modelo de dados e telas em `references/product.md`.

## Direção de UX: "O Oráculo"

A evolução do produto é **operar por intenção, não por navegação**: perguntas em
linguagem natural, briefing proativo do dia, ações sugeridas com 1 clique, paleta ⌘K
preservando acesso a tudo. Na interface, o Oráculo fala **verde-água** e em tom de
**analista** (citação editorial `.oracle-note`, linha de consulta `.oracle-line`) —
nunca em caixinha de chatbot. Princípios em `references/oraculo-ux.md`.

## Checklist de entrega

Antes de entregar qualquer tela/peça, confirme:

1. Fundo e superfícies só dos tokens; **nenhum hex fora da paleta**.
2. Título/números em **Switzer** (`.num` nos dados), resto em Inter; nada < 11px.
3. **Um único `btn-primary`** (Chama) na vista; destrutivo é contorno Rubi.
4. Pelo menos **duas assinaturas** presentes ("/", régua espectral 1×, números
   Switzer, raio vivo) — e a régua espectral **não** repetida.
5. Estrutura por **hairlines e `.section`** — sem caixa dentro de caixa.
6. Temperatura/semânticos como **glifo + palavra**; canais com cor **só no glifo**.
7. Oráculo em **verde-água, voz de analista**, sempre com uma ação de 1 clique.
8. Gráficos seguindo `assets/charts.html` (ordem de séries, grid hairline, sem pizza).
9. Microcopy pt-BR de ferramenta; dados verossímeis do seed (`product.md`);
   nomes de tela/grupo corretos.
10. Estados vazio/carregando/erro previstos; `aria-label` em botões só-ícone;
    testado nos **dois temas** (toggle) e em largura estreita (colapsos).

## O que evitar (resumo)

- Tema claro **como padrão do produto** (escuro é o padrão; claro é variante consciente
  via `data-theme`, nunca um CSS paralelo); laranja como fundo; `#ff6b00` ou laranja
  genérico (o da marca é `#F2552C`).
- Trocar as fontes (título = Switzer, corpo = Inter).
- Qualquer item da lista de **anti-padrões "cara de IA"** acima.
- Title Case em inglês; nomes de tela fora de `references/product.md`.
- Reinventar cores/raios/tipografia fora dos tokens.

---
# PARTE 2 — IDENTIDADE VISUAL

# 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.

---
# PARTE 3 — PRODUTO E DOMÍNIO

# Leads Per Hour — produto, telas e modelo de domínio

O que é: um SaaS de **prospecção outbound B2B** (pt-BR). Gera leads
por ICP, roda **cadências automáticas** (e-mail interno, WhatsApp e **ligação por
IA**), centraliza as conversas e mede o funil. O vendedor opera em cima desses
sinais. Usuário de referência: Bruno Brauns (bruno@pertodigital.com.br).

## As 21 telas e seus grupos

A barra lateral é agrupada nestas 5 seções. Ao criar uma tela que conviva com as
existentes, reutilize o nome e o grupo exatos.

**Operações**
1. Conversas — caixa de entrada multicanal (WhatsApp/e-mail), com status
   (Respondido / Não respondido), vendedor responsável, classificação, origem
   (campanha/cadência) e reunião agendada.

**Criação**
2. Bases Neurais — bases de conhecimento que alimentam a IA/assistentes.
3. Geração de Leads (ICP) — perfis de cliente ideal; gera listas de leads.
4. Lista de Contatos — listas/mailings de contatos.
5. Assinaturas de Envio — identidades/remetentes usados nos disparos.
6. Cadência — templates de sequência (passos por e-mail/WhatsApp), ex.: "JUR + SEO".
7. Automação de Disparos — automação dos envios da cadência.
8. Disparo Direcionado — envio pontual e segmentado.
9. Inbound — entrada de leads inbound.

**Cockpit**
10. Em Tempo Real — contadores ao vivo (Empresas, Contatos, Cadências, Conversas,
    MQL, Reunião) + feed de atividade.
11. Painel de Dados — Totalizadores (Empresas, Contatos, E-mails, Telefones,
    Conversas, Reuniões, Reuniões Indiretas) + Funil Decantado – Outbound, com filtro de período.
12. Métricas de Automação — desempenho das cadências (enviados, abertura, resposta).

**Contato**
13. Social — sinais sociais (LinkedIn etc.).
14. Contatos — base de pessoas.
15. Empresas — base de empresas (setor, contatos, envios, disparos).

**Configuração**
16. Assistentes Virtuais — agentes de IA.
17. WhatsApp — conexão/conta de WhatsApp.
18. BlackList — supressão.
19. Todas as Agendas — agendas/calendários.
20. Usuários — gestão de usuários.
21. Configurações — ajustes gerais.

> Dica de UX: o Cockpit hoje está dividido em 3 telas (10/11/12). Na direção
> "Oráculo", o recomendado é **unificá-las em uma só**. Ver `oraculo-ux.md`.

## Funil decantado – Outbound (4 etapas)

`Leads → Impactado → Conversas → Reuniões`, cada etapa com contagem e % de
conversão da anterior. É a métrica-mãe do produto; o gargalo típico fica em
**Impactado → Conversa**. Sempre que mostrar funil, use exatamente estes nomes.

## Modelo de domínio (entidades)

- **Lead / Contato**: pessoa (nome, cargo, empresa, e-mail, telefone E.164,
  LinkedIn) com um **fit** (0–100) e uma **temperatura** (quente/morno/frio).
- **Empresa**: organização (setor, nº de contatos, envios, disparos).
- **Cadência**: sequência de passos automáticos multicanal (e-mail/WhatsApp/
  ligação IA), com `step` atual / `total` e status (em andamento / concluída).
- **Sinal**: evento que dispara ação — ex.: "abriu o e-mail 3× e não agendou",
  "visitou a página de preços", "concluiu a cadência sem interagir", "respondeu",
  "aceitou conexão". O sinal define a temperatura e a próxima ação.
- **Touch**: um toque (manual ou automático) num canal. Canais manuais do
  vendedor: LinkedIn, WhatsApp, Ligação. Canais da automação/cadência: e-mail,
  WhatsApp, ligação por IA.
- **Histórico da cadência**: timeline do que a automação já fez por um lead
  (cada e-mail/WhatsApp/ligação, com status e a mensagem enviada).

## Dois sinais canônicos (úteis em telas de ação)

1. **Abriu e-mail mas não agendou** → lead quente/morno → tarefas de avanço
   (conectar no LinkedIn, WhatsApp consultivo, ligar).
2. **Passou pela cadência inteira sem interagir** → lead **frio** → mostrar o
   histórico do que já foi tentado (com as mensagens) + uma **sugestão de avanço**
   com um ângulo novo (ex.: conexão pessoal no LinkedIn, sem pitch).

## Dados de exemplo plausíveis (para protótipos)

- Créditos exibidos: `10.824`. Período típico: "01–10 jun, 2026".
- Cadências reais do seed: "JUR + SEO", "NVC2026", "TCU - Geral",
  "Mailing completo HR4Results".
- Funil exemplo: Leads 1.240 → Impactado 470 (38%) → Conversas 108 (9%) →
  Reuniões 14 (1,1%).
- Pessoas de exemplo: Larissa Souza (Alesco), Rafael Teixeira (HR4Results),
  Yasmin Borges (Indorama), Pedro Alves, Diego Martins, Camila Reis.
- Empresas: Alesco, HR4Results, Indorama, Florestal, Vetra Log.

---
# PARTE 4 — GLOSSÁRIO

# Glossário Leads Per Hour (pt-BR)

Use estes termos exatos na interface. A linguagem é parte da marca.

| Termo | O que é |
|---|---|
| **Lead** | Pessoa prospectada que ainda não converteu em reunião. |
| **Contato** | Pessoa na base (pode ou não estar em cadência). |
| **Empresa** | Organização-alvo (setor, contatos, envios, disparos). |
| **ICP** | Ideal Customer Profile — perfil de cliente ideal que gera as listas. |
| **Cadência** | Sequência automática de toques (e-mail/WhatsApp/ligação IA) ao longo de dias. |
| **Touch / Toque** | Um contato único num canal (manual do vendedor ou automático). |
| **Disparo** | Envio (em massa ou direcionado) de uma mensagem da cadência. |
| **Assinatura de envio** | Identidade/remetente usado nos disparos. |
| **Sinal** | Evento de comportamento do lead (abriu, clicou, respondeu, sumiu) que dispara ação. |
| **Temperatura** | Quão "pronto" está o lead: **quente** / **morno** / **frio**. |
| **Fit** | Aderência do lead ao ICP, 0–100. |
| **Funil decantado** | Funil outbound em 4 etapas: Leads → Impactado → Conversas → Reuniões. |
| **Impactado** | Lead que recebeu e abriu/visualizou (topo do meio do funil). |
| **Conversa** | Lead que respondeu / entrou em diálogo. |
| **Reunião** | Reunião agendada (objetivo do funil). |
| **Reunião indireta** | Reunião gerada por caminho indireto (indicação, etc.). |
| **MQL** | Marketing Qualified Lead — lead qualificado. |
| **Inbound** | Lead que chega por iniciativa própria. |
| **Bases Neurais** | Bases de conhecimento que alimentam a IA. |
| **Assistente Virtual** | Agente de IA do produto. |
| **Ligação por IA** | Ligação automática feita por voz de IA dentro da cadência. |
| **Cockpit** | Conjunto de telas de monitoramento (Tempo Real, Painel de Dados, Métricas). |
| **Créditos** | Saldo de uso exibido no topo. |
| **BlackList** | Lista de supressão (não contatar). |

## Tom de voz

Direto, prático, de ferramenta de quem vende. Frases curtas, verbos de ação
("Conectar no LinkedIn", "Enviar WhatsApp", "Ligar", "Marcar feito", "Ver funil").
Sem jargão corporativo vazio. Pode ter calor humano pontual (um emoji só quando
fizer sentido numa mensagem para o lead), mas a UI em si é sóbria.

---
# PARTE 5 — DIREÇÃO DE UX: ORÁCULO

# Direção de UX: "O Oráculo"

A evolução acordada do Leads Per Hour. Não é um tema novo — é uma **mudança de
modelo de interação**: o usuário deixa de **caçar a tela certa** (navegação) e
passa a **operar por intenção** (pergunta/objetivo). Aplique estes princípios ao
desenhar qualquer home, cockpit, caixa de entrada ou fluxo de decisão.

## O problema que resolve

A plataforma tem 21 telas em 5 grupos. O usuário precisa saber *onde* mora cada
resposta antes de chegar nela; os dados de cockpit ficam espalhados em 3 telas; e
tudo é reativo (o sistema espera você perguntar). Isso cansa.

## Três pilares

1. **Pergunte** — uma barra única em linguagem natural ("como está meu funil este
   mês?", "quais leads estão quentes?"). Responde com os dados que **já existem**,
   reapresentados como resposta + visual + ação. Comece simples: mapeie as ~10
   perguntas mais comuns para consultas que o backend já faz (sem IA); a camada de
   LLM por cima vem depois.
2. **Briefing** — ao abrir, o Oráculo já diz **o que importa hoje**: resumo do
   funil, conversas paradas, leads quentes, reuniões. Substitui abrir 3 telas de
   cockpit. É proativo, não reativo.
3. **Aja** — toda resposta/insight vem com **uma ação de 1 clique** (responder,
   aprovar disparo, ver leads, ligar). O caminho do dado à ação é curtíssimo.

## Padrões de tela

- **Home = Oráculo**: saudação + estado do dia em 1 linha → barra "Pergunte ao
  Oráculo" + chips de sugestão → painel que alterna entre **briefing** (default) e
  **resposta** quando se pergunta → "Próximas ações".
- **Paleta ⌘K**: um atalho que lista **todas as 21 ferramentas** (agrupadas,
  buscáveis). Nada se perde — as telas continuam acessíveis, só param de disputar
  a entrada. Rodapé reforça "nada foi removido".
- **Rail estreito** em vez da lateral de 21 itens: ~5 zonas com ícone (Conversas,
  Criação, Cockpit, Contatos, Config) + a home Oráculo no topo. Menos carga cognitiva.
- **Cockpit unificado**: juntar Em Tempo Real + Painel de Dados + Métricas numa
  só tela (funil decantado + totalizadores + feed ao vivo + métricas de cadência).
- **Caixa de entrada assistida**: em Conversas, filtros inteligentes (chips:
  Não respondidas, Quentes, Minhas, Hoje) no lugar de muitos dropdowns; e um bloco
  **"Oráculo sugere uma resposta"** com texto pronto + ações rápidas.
- **Agenda por dia + cards de lead**: para trabalho de touches, organize por
  Hoje/Amanhã/Semana; cada lead é um card com sua temperatura, o sinal que o
  trouxe, as tarefas separadas e acionáveis, o histórico do que a automação já
  fez (com as mensagens) e uma sugestão de avanço.

## Migração sem big-bang

Lance o Oráculo como **nova home**, mantendo as telas atuais atrás do ⌘K. Meça
adoção e modernize **tela a tela** (Conversas e Cockpit primeiro — as mais usadas
e densas). Frontend-only: tudo que o Oráculo mostra já é produzido pelo backend.

## Bússola de decisão

Ao desenhar, pergunte: *isto reduz cliques? o sistema está dizendo o que importa,
ou esperando o usuário descobrir? a próxima ação está a um clique?* Se a resposta
empurra para "menos navegação, mais intenção", está no caminho do Oráculo.

---
# PARTE 6 — RECEITAS DE TELA (inclui telas-padrão/auth)

# Padrões de tela — receitas prontas

Receitas das telas típicas do LPH, com a estrutura e os padrões-chave de cada uma.
Use junto com `assets/screen-template.html` (shell), `assets/components.html`
(componentes), `assets/charts.html` (gráficos) e `assets/email-template.html`
(e-mail). Protótipos vivos de referência podem existir no projeto do usuário
(`lph-*.html` na raiz de "LPH - OS") — se existirem, copie trechos deles.

## 1 · App-shell padrão (telas de ferramenta)

`assets/screen-template.html`. Topo 54px (logo + "/" + nome da tela + créditos +
ação primária + toggle de tema + avatar) com a **régua espectral** como fio
inferior; lateral 224px com grupos `/ GRUPO` e ativo por **barra Chama de 2px**;
conteúdo com eyebrow → H1 Switzer → `.section` (título + hairline). Colapsos:
duas colunas viram uma <1120px; lateral some <860px.

## 2 · Rail estreito (direção Oráculo)

Para a home e telas de foco: em vez da lateral de 21 itens, um **rail de 60px**
só com ícones — Oráculo (raio) no topo, ~5 zonas (Conversas, Criação, Cockpit,
Contatos, Config), usuário no rodapé.

```css
.rail{width:60px;border-right:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0}
.rail a{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--t3)}
.rail a.on{background:var(--acsoft);color:var(--ac)}
```

## 3 · Home Oráculo (briefing → resposta)

Coluna única centrada (~680px): eyebrow `/ ORÁCULO · data` + **raio vivo** →
saudação editorial (H1 30px) + estado do dia em 1 linha com destaques em `<b>` →
**linha de consulta** (`.ask`: "/" verde-água + input grande + kbd ⌘K) +
sugestões com bullet "/" → painel **briefing** (padrão) → "Próximas ações" →
"O dia em números" (faixa de stats).

**Item de briefing** (o padrão-chave — hora + declaração + ação):
```html
<div class="bi">
  <time>14:32</time>
  <div class="bd">
    <div class="tt"><b>Larissa Souza (Alesco)</b> propôs <b>quinta às 10h</b> — está <span class="hotw">quente</span>.</div>
    <div class="sb">Linha de apoio com o contexto e o que o Oráculo já preparou.</div>
    <div class="acts"><button class="btn-primary">Ação principal</button><button class="lnk mut">Secundária</button></div>
  </div>
</div>
```
O **único `btn-primary` da tela** vai no item mais urgente do briefing.

**Alternância briefing ↔ resposta**: submeter a linha de consulta esconde
`#briefing` e mostra `#resposta` (pergunta ecoada em `.q-echo` verde-água,
resposta editorial em Switzer 20px, visual — ex.: funil — e `oracle-note` com
ação). `Esc` ou "← voltar ao briefing" reverte; `⌘K` foca o input.

## 4 · Caixa de entrada assistida (Conversas — 3 painéis)

Grid `224px | 320px | 1fr | 300px` (lateral · lista · thread · contexto).
Colapsos: contexto some <1280px; lateral some <960px.

- **Lista**: filtros por sublinhado; item com avatar, nome + hora tabular,
  empresa, prévia com glifo do canal + **ponto de temperatura** (`.tdot`);
  não lida = ponto Chama após o nome; ativa = fundo `--s1` + barra Chama.
- **Thread**: divisor de dia (`.day` com hairlines); bolhas — recebida `--s1`
  + hairline; enviada `--acsoft` + borda chama fraca, à direita; **automática**
  = borda tracejada + tag `CADÊNCIA X · PASSO N · AUTOMÁTICO` (mostra o que a
  automação fez, direto na conversa).
- **Resposta sugerida**: `oracle-note` acima do composer com "Usar resposta /
  Editar antes"; composer = canal + assinatura de envio à esquerda, input,
  `btn-primary` Enviar (o único da tela).
- **Contexto do lead**: fit grande em Switzer + temperatura; "Sinais" com
  bullets "/" (quente = Chama, frio = cold); progresso na cadência (barra
  fina); **histórico da automação** como timeline com nós (feito = ok,
  próximo = Chama); "Próximo touch" com botões de canal.

## 5 · Builder de cadência

Duas colunas: **stepper vertical** (400px) + editor do passo.

- Stepper: trilho `border-left` + nós redondos posicionados; cada passo tem
  `D+N · HORA` (tabular), glifo do canal, título e métricas na linha de baixo;
  ativo = nó Chama + wash `--acsoft`; "+ Adicionar passo" com borda tracejada.
- Editor: cabeçalho "Passo N — canal · D+N"; **abas A/B** (sublinhado);
  mensagem com **variáveis** `{{primeiro_nome}}` como chips mono
  (`.var`: fundo `--coolsoft`, texto `--cool2`); assinatura de envio e condição
  de saída como selects; `oracle-note` com insight do passo.
- Rodapé da coluna 1: funil da própria cadência (`.fbar`).

## 6 · Painel de dados

Filtros de período (sublinhado) → faixa de stats → grid `1.5fr 1fr` com gráfico
principal (linha/área) e secundários (barras por canal, empilhada) → heatmap →
tabela com sparklines. **Todo gráfico termina numa leitura do Oráculo** com
ação. Padrões e regras de cor em `assets/charts.html`.

## 7 · Landing / manifesto (capa da marca)

Página de scroll comprometida com o escuro: topo mínimo, **régua espectral como
barra de progresso de leitura**, hero com uma **variante viva do raio**
(`assets/logos/bolt-3d.html`, `bolt-pointcloud.html` ou `bolt-crystal.html`),
contador vivo ("N leads / hora"), manifesto em Switzer 800 revelado no scroll,
CTA magnético. Malha de pontos sutil ao fundo (radial-gradient 1px em máscara).
Sempre `prefers-reduced-motion`.

## 8 · Telas-padrão (auth + sistema) — sempre iguais

Ficam prontas em `assets/auth.html` e **não se reinventam**: **Login** (`#login`),
**Criar conta** (`#signup`), **Recuperar senha** (`#reset`), **Verificação/OTP**
(`#otp`), **Erro/404** (`#erro`) e **Carregando/splash** (`#load`). Copie o bloco
`.scr` da tela desejada.

- **Shell do auth**: split `grid-template-columns:1.02fr .98fr` — painel de marca
  (Azul Noite `#12181c`, malha de pontos + glow, raio d'água, logo em cima,
  manifesto no meio, régua espectral embaixo) + `.form-side` com o `.card` (~384px).
- **Formulário**: `.fld` (label caixa-alta + `.inp` com ícone à esquerda), senha com
  botão mostrar/ocultar (`[data-eye]`), `.rowbetween` (checkbox + link), **um**
  `.btn-primary` full-width, `.divider` "ou", `.sso` (Google/Microsoft), `.altfoot`.
- **OTP**: 6 inputs (`[data-otp]`) com auto-avanço/backspace em JS.
- **Erro/Carregando**: `.scr.solo` (centrado); 404 usa número em gradiente Chama;
  splash usa o raio com `@keyframes pulse` (respeita `prefers-reduced-motion`).
- Dark por padrão, claro via `data-theme`; abaixo de 920px o painel de marca some.

## Gotchas de engenharia (aprendidos em produção)

- **`<use>` deve referenciar o `<path>` direto, nunca `<symbol>`** — symbol
  cria viewport novo e remapeia para 0,0; o path oficial do raio começa em
  (500,480) e some do viewBox.
- **IntersectionObserver falha em webviews/painéis embutidos** — para gatear
  animação de canvas, teste visibilidade por frame
  (`getBoundingClientRect().bottom>0 && top<innerHeight`); IO só como
  progressive enhancement (reveals).
- **Redimensionar `<canvas>` limpa o desenho** — redesenhe após `resize`.
- **`scroll-behavior:smooth` atrasa capturas/medidas** — para scroll
  programático confiável use `behavior:'instant'`.
- **Desenhe o primeiro frame imediatamente** (antes de qualquer gate de
  visibilidade) — evita canvas vazio na carga.
