Manual da Identidade
Este é o manual vivo da marca Leads Per Hour — e a documentação da skill id-leadsperhour — exclusiva para ajustar qualquer projeto à identidade oficial e atualizada da LPH, sem redescobrir cores, fontes ou termos a cada vez.
IntroduçãoO que a skill entrega
A skill é uma pasta instalada em ~/.claude/skills/id-leadsperhour que carrega a identidade oficial completa: paleta com Pantone, as fontes Switzer e Inter em arquivo, 13 versões do logo, tokens de design prontos, template de tela, galeria de componentes, o vocabulário do produto e a direção de UX "Oráculo" — mais os PDFs originais da marca como fonte de verdade.
Como usar: peça qualquer coisa do universo LPH ("cria uma tela de métricas", "redesenha o painel", "faz uma landing") e a skill dispara sozinha. Para forçar, digite /id-leadsperhour. Tudo o que sair — telas, dashboards, e-mails, extensões, protótipos — nasce consistente com o que está neste manual.
Garantia da skill
Nenhum hex fora da paleta, nenhuma fonte fora de Switzer/Inter, um só laranja por vista, vocabulário do produto correto e zero "cara de template de IA".
Para instalar a skill, peça o pacote
id-leadsperhour-skill.zip (vem com instalar.sh + LEIA-ME) e rode ./instalar.sh — no seu perfil (~/.claude/skills) ou no repositório do time. Este manual é a referência de leitura da identidade.MarcaEssência & conceito
Manifesto: "A velocidade define o futuro. E nós definimos a velocidade." · Somos a velocidade.
Tagline: "Mais leads, menos esforço. Simples assim." — a promessa é automatizar a pré-venda de ponta a ponta, da busca do lead ao agendamento, sem perder a conexão humana.
O símbolo — o raio: potência, eletricidade, energia e velocidade. É formado por dois "L" (de Leads) que juntos desenham o raio; as pontas deslocadas ao centro sugerem dois funis — "os leads entram na velocidade de um raio". O "/" de "PER / HOUR" alude à medida de velocidade (km/h) e virou marcador visual do sistema. "…é o raio que faz o trabalho." — Mark Twain, citação-conceito do projeto.
MarcaTom de voz
Atributos oficiais: Moderna · Profissional · Dinâmica · Inspiradora · Confiante.
Na prática: voz de ferramenta de trabalho de vendas em pt-BR — números, fatos e a próxima ação. Proativa, não reativa. O Oráculo fala como analista, nunca como chatbot ("Ótima pergunta!" é proibido). Persona de referência: Lucas, Diretor de Vendas em tecnologia (~12 anos de estrada), quer ROI claro e implantação fácil — escreva para ele.
FundamentosCores
Sete cores institucionais. Clique num cartão para copiar o hex. Regra de ouro: base sempre escura (família Azul Noite), Laranja Chama é raro — a ação primária da vista, o estado ativo e o "/" — e por isso poderoso. Os frios (Lago / Verde água) pertencem ao Oráculo e à informação.
Laranja Chama#F2552C
RGB 242·85·44 · PANTONE 17-1462 TCX
Acento primário: ações, ativo, destaques, logo
Acento primário: ações, ativo, destaques, logo
Laranja Rubi#D8321A
RGB 216·50·26 · PANTONE 18-1561 TCX
Par de gradiente do Chama; destrutivo
Par de gradiente do Chama; destrutivo
Azul Noite#1D262D
RGB 29·38·45 · PMS 433 C
Base do tema escuro (fundos e superfícies)
Base do tema escuro (fundos e superfícies)
Lago Refletido#203E49
RGB 32·62·73 · PANTONE 19-4326 TCX
Superfície fria / secundária
Superfície fria / secundária
Verde água#115E66
RGB 17·94·102 · PMS 5473 C
Acento frio: Oráculo, info, dados
Acento frio: Oráculo, info, dados
Obsidiana#131313
RGB 19·19·19 · PANTONE Black 6 C
Preto de marca: poços e sombras chapadas
Preto de marca: poços e sombras chapadas
Branco#FFFFFF
RGB 255·255·255 · White
Texto e artes sobre fundo escuro
Texto e artes sobre fundo escuro
Superfícies do produto (derivadas do Azul Noite; cada cor oficial tem régua de tons e sombras no PDF original):
well#0f1417
bg#141b1f
s1#1a2229
s2#1d262d
s3#26313a
FundamentosTipografia
Switzer é a voz tipográfica (Indian Type Foundry) — títulos, números-herói e destaques. Inter cuida do corpo e da interface. Regra prática: título = Switzer, resto = Inter; todo dado numérico usa Switzer com dígitos tabulares (.num).
A velocidade define o futuro.
AaRegular 400
AaMedium 500
AaSemibold 600 · títulos de UI
AaBold 700 · números
AaExtrabold 800 · display
1.240tabular nums
Inter no corpo: a plataforma automatiza a pré-venda de ponta a ponta — da geração da lista pelo seu ICP até o agendamento da reunião. Pesos 400/500/600 cobrem quase tudo; nada abaixo de 11px.
Carregamento: CDN (Google Fonts + Fontshare) nos protótipos com internet, ou os arquivos de assets/fonts/ via fonts.css para offline/Artifacts.
FundamentosLogotipos
O kit traz 25+ variações; a skill embarca as essenciais em SVG (assets/logos/). Convenção: _Escuro = arte clara para fundo escuro (padrão do produto); _Claro = arte escura para fundo claro. Área de proteção ≈ altura do símbolo; nunca distorcer nem recolorir fora da paleta.
Principais
LeadsPER / HOUR
Assinatura principal (horizontal) — uso diário
Símbolo (app-icon) — favicon, avatar, marca compacta
Todas as variações
LeadsPER / HOUR
Horizontal
LeadsPer Hour
Centralizado
LeadsPER / HOUR
Empilhado (blocado)
LeadsPER / HOUR
Tipográfico
LPH
Abreviação
Símbolo circular
Raio · chapado #F2552C
LeadsPER / HOUR
Mono branco (1 tinta)
LeadsPER / HOUR
Sobre fundo claro
LeadsPER / HOUR
Mono preto (1 tinta)
SVGs canônicos em assets/logos/: horizontal, centralizado, blocado, símbolos (arredondado/circular/raio) e mono claro/escuro. As 3 variantes vivas (3D, pontos, cristal) estão logo abaixo.
FundamentosVariantes vivas do raio
Três interpretações interativas do símbolo, feitas em CSS/SVG/canvas puros (sem bibliotecas), para heros, login, loading e momentos de marca — nunca em UI densa. As três abaixo estão rodando ao vivo:
Sólido 3D
extrusão em 18 fatias · rampa oficial de sombras
Nuvem de pontos
"cada lead é um ponto — juntos, são o raio"
Vidro-cristal
luz por dentro, lapidação por fora
Assets prontos para copiar: bolt-3d.html · bolt-pointcloud.html · bolt-crystal.html (em assets/logos/, com instruções no topo de cada arquivo). Todos respeitam prefers-reduced-motion.
SistemaAssinaturas visuais
Os quatro elementos que tornam uma tela LPH inconfundível. Toda tela deve ter pelo menos dois.
Cockpit · ao vivo
1 · A barra "/"De "PER / HOUR" (km/h). Marca eyebrows, grupos de navegação, a linha do Oráculo e a ⌘K.2 · A régua espectralChama→Rubi→Lago→Verde água. Uma vez por vista: fio do topo do app ou sob o título.
1.240/h
3 · Números em SwitzerTodo dado relevante em Switzer tabular, tracking apertado. É o que faz parecer LPH. ao vivo
4 · O raio vivoO glifo do raio como indicador de atividade — no lugar do pontinho verde genérico.SistemaComponentes
Biblioteca no tom da marca — a versão copiável completa está em assets/components.html. Estrutura por hairlines, não caixas; superfície elevada é privilégio de popover/⌘K/toast/inputs; um primário por vista.
Botões
Primário (Chama) · contorno · texto · destrutivo (contorno Rubi) · ocupado.
Campos & seleção
JUR + SEO
Selecione…
bruno@leadsperhour.com
Chips, filtros & segmentado
Quentes ×Não respondidasHoje
Abas · toggle · progresso
Automação ativa Pausar nos fins de semana
Cadência JUR + SEO passo 4/6
Faixa de estatísticas
Conversas hoje
7
+3 vs. ontem
Leads quentes
18
6 na última hora
Taxa de resposta
11%
+1,8 pts
Funil decantado — Outbound
Temperatura · fit · canais
quente
morno
frio
fit 92
Pessoas · pílulas de status
LSRTYB+9
Conectado
Aquecendo
Rascunho
Tabela
| Contato | Empresa | Temperatura | Próximo touch |
|---|---|---|---|
| Larissa Souza Head de Operações | Alesco | quente | |
| Diego Martins Diretor Comercial | Florestal | morno |
Oráculo — consulta · nota · ⌘K
/⌘K
Oráculo
Terça e quinta às 11h concentram suas respostas. Mover os disparos das 8h para 11h deve render ~2,3× mais conversas.
/
ConversasOperações
Painel de DadosCockpit
Feedback — toast · tooltip · estado vazio
Touch registrado
Atalho ⌘K
Fila limpa por aqui.
Nenhum touch pendente neste filtro.
SistemaTemas
Escuro é o padrão do produto (base Azul Noite). O tema claro oficial — derivado das rampas de tints do PDF de tons e sombras — serve a landings, documentos, e-mails e preferência do usuário. Ative com <html data-theme="light">; são os mesmos tokens sobrescritos, nunca um CSS paralelo. Experimente no ☀ do topo desta página.
No claro: texto vira Azul Noite, o hover do primário escurece (Rubi) em vez de clarear, e semânticos/canais/temperatura ganham versões mais escuras para manter contraste. Hierarquia, assinaturas e anti-padrões não mudam.
SistemaAnti-padrões ("cara de IA" — proibido)
O que denuncia interface genérica de template, e o que o sistema usa no lugar:
| Proibido | No lugar |
|---|---|
| Grade de cartõezinhos KPI (4 caixas com delta) | Faixa de estatísticas: números grandes + hairlines verticais |
| Pílulas e badges coloridos por todo lado | Glifo + palavra na cor; filtros com sublinhado; botão neutro com glifo colorido |
| Caixa em cima de caixa | Seção = título + hairline; conteúdo flat sobre o fundo |
| Sparkles ✨ e caixinhas de "insight de IA" | Citação editorial com fio verde-água (voz de analista) |
| Laranja espalhado em todo botão/ícone/borda | Um primário por vista; o resto é contorno, texto ou frio |
| Gradientes decorativos | Só os 2 de assinatura: Chama→Rubi (símbolo/hero) e a régua espectral |
| Microcopy de assistente ("Como posso ajudar?") | Números, fatos, próxima ação |
| Lorem ipsum, "John Doe", valores redondos | Nomes pt-BR e números verossímeis (seed em product.md) |
| Emoji em UI, sombras dramáticas, ícones preenchidos | Ícones de traço (Tabler, stroke 1.75), profundidade por hairlines |
AplicaçãoUX / UI — telas do produto
A identidade aplicada às telas reais do Leads Per Hour, na direção Oráculo (operar por intenção, não por navegação). Mockups no tema escuro do produto; as telas navegáveis completas vivem nos protótipos lph-*.html e nascem da skill.
Oráculo · terça, 21 jul ao vivo
Boa tarde, Bruno.
2 conversas esperam resposta · 18 leads quentes · reunião com a Florestal às 15h.
/⌘K
Larissa Souza (Alesco) propôs quinta às 10h — está quente.
Rafael Teixeira perguntou sobre implantação — resposta sugerida pronta.
Cadências JUR + SEO e TCU - Geral disparam no horário errado.
Home = Oráculo: saudação + estado do dia, barra de intenção e briefing acionável. Rail estreito no lugar da lateral de 21 itens.
Cockpit · ao vivo
Terça, 21 de julho — o funil está acelerando.
Conversas
7
+3
Quentes
18
6 novos
Reuniões
4
semana
Resposta
11%
+1,8
Funil decantado — Outbound
Oráculo
A queda forte está entre Impactado e Conversas. Ative o WhatsApp nos leads que abriram 2+ vezes.
Cockpit unificado: faixa de números, funil decantado e a leitura do Oráculo com ação — flat sobre o fundo, sem cartõezinhos.
Caixa de entrada assistida: lista com temperatura, thread que mistura automação e conversa humana, e a resposta sugerida pelo Oráculo.
Regras de aplicação
Toda tela tem pelo menos duas assinaturas (o "/", a régua espectral, números em Switzer, o raio vivo); um só laranja por vista; o Oráculo fala em verde-água. Receitas completas em references/padroes-de-tela.md.
ProdutoDomínio & vocabulário
A linguagem importa tanto quanto o visual. Termos exatos: lead, contato, empresa, cadência, ICP, touch, sinais, assinatura de envio, disparo, inbound, MQL, reunião; temperatura é quente / morno / frio; fit é um score 0–100.
A métrica-mãe é o funil decantado – outbound, sempre com estes 4 nomes: Leads → Impactado → Conversas → Reuniões (gargalo típico: Impactado → Conversas). A plataforma tem 21 ferramentas em 5 grupos: Operações, Criação, Cockpit, Contato e Configuração — nomes e grupos em references/product.md.
ProdutoDireção de UX: o Oráculo
A evolução do produto é operar por intenção, não por navegação. Três pilares: Pergunte (uma barra em linguagem natural que responde com dado + visual + ação), Briefing (ao abrir, o sistema já diz o que importa hoje) e Aja (toda resposta traz uma ação de 1 clique).
Padrões: home = Oráculo com briefing; rail estreito de 5 zonas no lugar da lateral de 21 itens; paleta ⌘K que preserva acesso a tudo ("nada foi removido"); caixa de entrada assistida com respostas sugeridas. Na interface, o Oráculo fala verde-água e em tom de analista. Bússola de decisão: isto reduz cliques? o sistema está dizendo o que importa? a próxima ação está a um clique?
ProdutoArquivos da skill
Mapa do que está instalado em ~/.claude/skills/id-leadsperhour/:
SKILL.md — instruções + regras (o "cérebro")
assets/
tokens.css — tokens canônicos (dark + light) e assinaturas
fonts.css · fonts/ — Switzer + Inter variáveis, uso offline
screen-template.html — app-shell pronto (topo, navegação, temas, favicon)
components.html — galeria de componentes copiáveis
charts.html — padrões de gráfico e regras de dataviz
email-template.html — e-mail de marca (tabelas, inline, tema claro)
logos/ — 13 versões:
logo-horizontal / centered / stacked · símbolos · mono
bolt-3d.html — raio sólido 3D (CSS puro)
bolt-pointcloud.html — raio em nuvem de pontos (canvas)
bolt-crystal.html — raio em vidro-cristal
references/
identidade-visual.md — fonte de verdade da marca (este manual, em texto)
product.md · glossary.md — 21 telas, domínio, vocabulário, dados-seed
oraculo-ux.md — a direção de UX completa
padroes-de-tela.md — receitas de telas típicas + gotchas de engenharia
brand-source/ — originais: apresentação da marca (PDF),
tons e sombras (PDF), paleta Adobe (JPEG)
Protótipos vivos deste projeto: lph-manifesto.html (marca) · lph-oraculo.html (home) · lph-conversas.html · lph-cadencia.html · lph-painel.html · lph-identidade-demo.html — todos navegáveis entre si.