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