‹Central
LeadsPER / HOUR
Biblioteca
Design system · versão 2026

Biblioteca de componentes

Todos os componentes e gráficos oficiais da Leads Per Hour, prontos para copiar. Cada trecho funciona em qualquer produto que importe o lph.css — nos dois temas, sem ajuste. … componentes catalogados · use a busca para chegar rápido

Fundamentos

Cores, tipos, geometria e traços — a matéria-prima de toda tela LPH. Nada aqui se redesenha: tudo chega pelo token de lph.css.

Paleta oficialas seis cores institucionais — no produto, sempre via token
Chama acento primário — raro e poderoso #F2552C var(--chama)
Rubi par do Chama · perigo/destrutivo #D8321A var(--rubi)
Azul Noite base do tema escuro #1D262D var(--noite)
Lago Refletido superfície fria · seções calmas #203E49 var(--lago)
Verde água acento frio — a voz do Oráculo #115E66 var(--agua)
Obsidiana preto de marca · poços profundos #131313 var(--obsidiana)

Laranja é acento, nunca fundo de área grande. Hex cru no produto é bug — se não é var(--...) nem hex oficial, o auditor reprova.

Rampas funcionaiscomo a paleta vira superfície, tinta, linha e semântica
Superfícies o padrão é tudo flat sobre --bg; s1–s3 só com elevação real
--well
--bg
--s1
--s2
--s3
Tintas hierarquia por cor de texto — forte, média, fraca
Aa--tx
Aa--t2
Aa--t3
Linhas hairlines estruturam; divisor não é caixa
--ln
--ln2
Semânticas cor no glifo e na palavra, nunca em área
positivo--ok
atenção--warn
perigo--danger
ação--ac

No tema claro (data-theme="light") os mesmos tokens se invertem — nunca escreva um CSS paralelo.

Escala tipográficaSwitzer dá a voz; Inter faz o trabalho
Somos a velocidade.Switzer 700 · 34px · .display
Painel de DadosSwitzer 600 · 25px · .h1
1.247Switzer 700 · tabular · .num
A cadência JUR + SEO gerou 108 conversas em julho — terça às 11h concentra as respostas.Inter 400 · 13,5px · corpo
Atualizado há 4 minutos · 21 ferramentas ativas.Inter 400 · 13px · .sub
CockpitInter 600 · 10,5px caps · .eyebrow
Leads sem touch há 7 dias saem da fila automaticamente.Inter 400 · --t2 · .muted
Espaçamento, raios e sombrasa geometria contida da interface
Espaçamento
--sp-1 · 4px
--sp-2 · 8px
--sp-3 · 12px
--sp-4 · 16px
--sp-6 · 24px
--sp-8 · 32px
Raios
--r-sm · 8px
--r · 12px
--r-lg · 16px
Sombra
Elevação é privilégio de popover, ⌘K e toast — o resto é flat sobre --bg.--pop-shadow

Cantos moderados, respiro generoso: combata o aperto com espaçamento e hairlines, não com fontes menores.

Iconografiatraço fino herdando a cor do texto — nunca preenchido
busca
filtro
seta
check
x
mais
config
sino
usuário
e-mail
telefone
calendário
relógio
gráfico
raio
olho
lixeira
editar
copiar
download
link externo
kebab

Estilo Tabler: 24×24, traço fino, cantos redondos. Cole o <svg class="ic"> e ele herda tamanho e cor do texto — cor de canal só no glifo.

Assinaturas da marcaos quatro traços que tornam uma tela inconfundivelmente LPH — toda vista carrega pelo menos dois
Cockpit · ao vivo
A barra "/"

Vem de PER / HOUR — a medida de velocidade. Marca eyebrows, grupos da navegação e o prefixo do Oráculo: .slash-label.

Régua espectral

Chama→Rubi→Lago→Verde água em 2px. Uma vez por vista — fio inferior do topo do app ou sob o título da landing: .rule-brand.

1.247vs1.247
Números em Switzer

Todo dado relevante usa .num — Switzer, dígitos tabulares, tracking apertado. À direita, o mesmo número sem a classe: é o que separa um painel LPH de um genérico.

ao vivo
Raio vivo

O glifo da marca como indicador de atividade em tempo real — no lugar do pontinho verde genérico: .live-bolt.

Cheque antes de entregar: pelo menos duas assinaturas na tela — e a régua espectral nunca se repete na mesma vista.

Botões & ações

Quatro níveis de ênfase e um acento só: o Chama marca a ação principal da vista — o resto trabalha em contorno, texto e link.

VariantesUm btn-primary por vista; destrutivo é contorno Rubi, nunca sólido.
Tamanhosbtn-sm em linhas densas e toolbars; btn-lg em auth e momentos de decisão — combinam com qualquer variante.
Com íconeGlifo de traço à esquerda reforça a ação e herda a cor do texto.
Só ícone (btn-ic)Ações compactas em toolbars e linhas de tabela — aria-label é obrigatório.
Grupo (btn-group)Ações irmãs coladas, bordas fundidas — para alternar vista, prefira .seg.
Carregando (btn-busy)Raio pulsando, texto esmaecido, cliques bloqueados enquanto a ação roda.
DesabilitadoAção indisponível — deixe o motivo por perto, nunca só o botão apagado.
Sem créditos de disparo · recarregar créditos
Largura total (btn-full)Formulários e telas de auth — o botão fecha a coluna inteira.
Links (lnk)Ação inline em texto corrido e rodapés — verde-água, sublinha só no hover.

Formulários

Campos flat sobre o fundo, foco em Chama e validação em tinta — o formulário pede pouco e confere tudo.

Campo de textoentrada de uma linha — o foco acende a borda em Chama; desabilitado baixa a opacidade

Gerado pela plataforma — não editável.

Validaçãoo estado mora na hairline e na mensagem — nunca em caixa colorida

Endereço incompleto — confira o domínio depois do @.

SPF e DKIM verificados — pronto para disparar.

Área de texto + contadormensagens de cadência — o contador fica discreto, alinhado à direita
170/280
Seleçãoescolha única que abre popover ou paleta — o valor atual sempre visível
Diretores de Vendas — SaaSalterar
Brasília (GMT−3)
Buscaícone à esquerda com .inp-ic — o atalho aparece como kbd, não como botão
/
Grupo com addonprefixo fixo ou ação colada ao campo — um bloco só, uma borda só
https://
Caixa de seleçãoopções independentes — regras da cadência, consentimentos
Rádioescolha exclusiva entre poucas opções visíveis de uma vez
Interruptorliga/desliga com efeito imediato — nada de salvar depois
Ligação por IA no passo 5 Disparos no fim de semana
Slidervolumes e limites — o valor atual em Switzer, extremos discretos
2080200

Caixa em aquecimento: mantenha até 100 por dia.

Uploadimportação de base — arrastar ou procurar, requisitos à vista
Código de verificaçãoseis dígitos em Switzer — confirmação de identidade e de domínio

Enviado para camila.ribeiro@vettasistemas.com.br — vale por 10 min.

Linha de 2 colunaspares curtos lado a lado; abaixo de 640px vira coluna única
Formulário completocriação de cadência — um primário por vista, cancelar como texto
Nova cadência
Diretores de Vendas — SaaSalterar
Camila Ribeiro — Vettaalterar
131/280
Ligação por IA no passo 5

Feedback & overlays

O produto avisa como analista: um fio, uma frase, uma ação. Elevação de verdade só quando a decisão interrompe o trabalho.

Alerta inlineAviso editorial dentro do fluxo — fio semântico à esquerda, nunca fundo colorido.
Assinatura de envio verificada

SPF e DKIM ativos em vendas@vetorsys.com.br — os disparos voltam ao ritmo normal.

Créditos perto do limite

Restam 340 créditos. No ritmo atual de disparos, encerram na quinta-feira.

Disparo interrompido

42 e-mails da cadência Expansão Sul voltaram com erro permanente. Revise a lista antes de reativar.

Janela de silêncio ativa

Touches de WhatsApp não saem entre 20h e 8h — ficam agendados para a próxima manhã útil.

Banner de páginaFaixa de largura total no topo do conteúdo, para avisos que valem a vista inteira.
ToastConfirmação passageira com desfazer — reuso direto do lph.css.
Cadência pausada para 12 leads
Modal — confirmação destrutivaInterrompe só decisão sem volta; destrutivo é contorno Rubi, nunca sólido.
Modal — formulárioCriação curta sem sair do contexto; mais de dois campos merece tela própria.
TooltipUma linha, no máximo um atalho — flutua sobre o alvo com seta.
Taxa de resposta dos últimos 30 dias Pausar cadência⇧P
PopoverContexto ancorado num clique — título, lista curta e uma saída.
Sinais de Larissa SouzaAlesco
Abriu o e-mail 3×
Visitou a página de preços
Baixou a proposta em PDF
Skeleton — tabelaCabeçalho real, linhas em shimmer — a estrutura chega antes do dado.
ContatoEmpresaTemperaturaSinal
Skeleton — cardReserva do espaço de um painel: identidade, área de gráfico e ações.
Spinner de marcaO raio pulsa enquanto o sistema pensa — reuso do .spin das telas-padrão.
Consultando o Oráculo…
ProgressoTarefas com fim conhecido: rótulo, valor tabular e trilho fino.
Enriquecendo a lista Expansão Sul794/1.240
Estado vazioUma frase e uma ação — sem ilustração, sem drama.
Fila limpa por aqui

Nenhum touch pendente neste filtro. O Oráculo avisa quando um lead esquentar.

Nota do OráculoVoz de analista em verde-água: citação editorial com ação de 1 clique.
Oráculo

Terça às 9h é a sua janela. Respostas no WhatsApp sobem 32% nesse horário no setor industrial — o próximo disparo da Expansão Sul está agendado fora dela.

Tabelas & listas

O dado vive em linhas, não em caixas: hairlines estruturam, Switzer dá peso ao número e a cor só aparece onde pede decisão.

Tabela de leadsa vista padrão de dados: full-bleed, hairline entre linhas, hover discreto — nunca caixa em volta.
Minha carteira × SaaS Últimos 30 d 7 de 132 leads
LeadEmpresaCanalTemperaturaÚltima respostaDono
Larissa SouzaHead de Operações Alesco quente respondeu há 2 h RB
Camila RochaGerente de Marketing Nexo Contábil quente pediu proposta ontem RB
Diego MartinsDiretor Comercial Florestal LinkedIn morno abriu o e-mail 3× MC
Fernanda LimaDiretora de RH Talentar LinkedIn morno conexão aceita há 1 d TS
Paula NunesCFO HR4Results E-mail morno visitou a página de preços MC
Otávio FerreiraSócio-diretor Vetta Logística Ligação IA frio sem resposta há 12 d TS
Henrique DiasCOO Braspack E-mail frio sem resposta há 21 d RB
Tabela densaquando a densidade importa mais que o respiro: monitorias, cockpits e listas longas.
CadênciaStatusPassosAtivosEnviadosRespostaReuniões
JUR + SEOativa6841.24011,2%6
SaaS — CFOsativa5679408,7%5
Logística Sulrevisar7456107,4%2
Indústria — Q3pausada51181.8706,8%3
TCU - Geralativa41322.4805,1%4
Tabela ordenávelcabeçalho clicável com direção visível — a seta só ganha cor onde há ordenação ativa.
Camila RochaNexo Contábil946há 2 h
Larissa SouzaAlesco918há 4 h
Diego MartinsFlorestal865ontem
Paula NunesHR4Results784há 2 d
Otávio FerreiraVetta Logística639há 12 d
Tabela com seleçãoações em massa: coluna de seleção, linha marcada em Chama suave e a barra de ações acima.
2 selecionados
LeadEmpresaTemperaturaDono
Larissa SouzaAlesco quente RB
Diego MartinsFlorestal morno MC
Camila RochaNexo Contábil quente RB
Paula NunesHR4Results morno MC
Henrique DiasBraspack frio TS
Kanban de cadênciao pipeline em colunas: cartões com hairline, temperatura no pé e responsável à direita.
Cadência · SaaS — CFOs
RBMCTS
7 leads

A contatar

3
Henrique DiasBraspack · COO
frioTS
Otávio FerreiraVetta Logística · Sócio-diretor
frioTS
Fernanda LimaTalentar · Diretora de RH
mornoMC

Em conversa

2
Larissa SouzaAlesco · Head de Operações
quenteRB
Diego MartinsFlorestal · Diretor Comercial
mornoMC

Reunião marcada

2
Camila RochaNexo Contábil · Ger. de Marketing qui · 31 jul · 10:00
quenteRB
Paula NunesHR4Results · CFO seg · 4 ago · 15:30
mornoMC
Timeline de atividadeso dia em ordem: hora em Switzer à esquerda, ponto na linha, próximo compromisso em Chama.
Disparo da cadência JUR + SEO120 e-mails enviados · assinatura Rafael Braga
Larissa Souza respondeu no WhatsApp“Pode me ligar depois do almoço?” · Alesco
Ligação IA concluída · Otávio Ferreirasem atendimento · nova tentativa amanhã às 10h
Camila Rocha pediu a propostaNexo Contábil · proposta enviada às 12:05
Reunião — Nexo Contábilem 20 min · Google Meet · Rafael e Marina
Mini-calendárioas reuniões do mês de relance: hoje sólido em Chama, dia com evento ganha o ponto.
julho 2026
DSTQQSS 2829301234 567891011 12131415161718 19202122232425 2627282930311
reunião marcada
Lista feedreuso do .feed canônico: hora tabular + evento — o coração da tela Em Tempo Real.
Tempo real ao vivo
Larissa Souza · Alesco · respondeu
Diego Martins · Florestal · abriu o e-mail
Paula Nunes · HR4Results · concluiu a cadência
Camila Rocha · Nexo Contábil · reunião confirmada

Display de dados

O número carrega a vista: Switzer no dado, cor só onde há significado — o resto é hairline.

Faixa de estatísticas + deltaTopo de painel: números grandes separados por hairlines, variação com seta — nunca grade de caixinhas.
Conversas hoje
12
+3 vs. ontem
Impactados na semana
486
+8,2% vs. semana anterior
Reuniões na semana
6
−2 vs. semana anterior
Taxa de resposta
11,4%
+1,8 pts
Número-heróiQuando a vista inteira responde a uma pergunta só: um número, um delta, uma meta.
Conversas no mês
342 +18%
Meta de 400 até 31 jul · faltam 58
Meter de metaProgresso contra objetivo declarado: trilho fino, rótulo e valor nas pontas.
Conversas · julho342 / 400
Reuniões · julho — meta batida14 / 12
Score de leadFit em 1–5 raios para varrer listas sem ler números — o valor exato fica ao lado.
Paula Nunes · HR4Results 23
Diego Martins · Florestal 61
Larissa Souza · Alesco 92
Chips e pillsChips filtram (removíveis, com estado ativo); pills declaram estado de cadência — e nada além disso.
ativa pausada rascunho
TemperaturaGlifo + palavra na cor, sem pílula; em linhas densas, só o ponto.
quente morno frio
Larissa Souza Diego Martins Paula Nunes
AvataresPessoas em três escalas; a pilha resume quem responde pela cadência.
LS av-sm · 24
DM av · 28
PN av-lg · 40
LSDMPN+4
avstack
Teclas de atalhoReferência de atalhos em texto corrido, menus e no rodapé da paleta ⌘K.
⌘K paleta de comandos ⌘⏎ enviar touch G depois C abrir Conversas Esc fechar
Bloco de códigoPayloads e snippets de integração: título de arquivo, cópia rápida, scroll horizontal.
webhooks/lead-respondeu.json
{
  "evento": "lead.respondeu",
  "cadencia": "JUR + SEO",
  "touch": 4,
  "lead": {
    "nome": "Larissa Souza",
    "empresa": "Alesco",
    "temperatura": "quente",
    "fit": 92
  }
}
Sparkline em fraseA tendência dentro do texto, onde o argumento acontece — sem eixos, sem pontos.

A cadência JUR + SEO vem subindo há duas semanas e fechou ontem em 11,2% de resposta.

Gráficos — tendência e volume

A tendência fala antes do total — grade em fio, Chama na série que importa, rótulo direto no dado.

Linha com áreaUma métrica ao longo do tempo; a área em gradiente dá peso ao volume sem virar decoração.
80604020 S18S22 S26S29 74
Respostas por semana melhor semana: 74 (S29)
Linhas comparadasDuas séries no máximo: Chama na que importa, verde água no contraponto.
161284 S20S24S29
JUR + SEO TCU - Geral taxa de resposta · 10 semanas
Área empilhadaComposição que muda no tempo — canais somando o volume total de toques.
S22S25S29 S29: 1.200 toques
e-mail 740 LinkedIn 330 ligação IA 130 valores da S29
Colunas — volume diárioContagens por dia em janela curta; o valor aparece no destaque, não em eixo denso.
5025 14 jul20 jul27 jul 46 23 jul
Conexões no LinkedIn recorde do período: 46
Colunas agrupadasPar de medidas lado a lado por período — marcadas contra realizadas.
302010 fevmar abrmai junjul 2621
marcadas 116 realizadas 89 no semestre
Barras horizontais — rankingComparação entre poucas categorias com rótulo longo — quem entregou mais no mês.
Mariana Costa28reuniões
Rafael Duarte23reuniões
Camila Nunes19reuniões
Felipe Santana16reuniões
Aline Moreira11reuniões
Empilhado horizontalComposição de um total único — o substituto oficial da pizza.
e-mail 2.412 LinkedIn 1.128 ligação IA 617 4.157 toques em julho
Combo colunas + linhaVolume e taxa na mesma vista, cada um na sua escala — as colunas dão contexto, a linha dá a leitura.
900600 12%8% S22S23 S24S25 S26S27 S28S29 9,6%
Envios Taxa de resposta S22–S29
Sparkline em tabelaTendência de relance dentro da linha — sem eixos, sem pontos; cor só quando pede atenção.
CadênciaRespostasTaxaTendência
SaaS — Diretores de Vendas14811,2%
Logística — Operações Sul968,4%
Fintech — CFOs414,7%

Gráficos — proporção e especiais

O que cada forma responde: quanto do todo, quão perto da meta e onde o padrão — e a exceção — se escondem.

Donut — mix de canaisExceção consciente à regra "sem pizza": no máximo 3 fatias e um total que mereça o centro — composição corriqueira continua sendo a empilhada 100%.
2.847 touches em julho
WhatsApp 1.310 · 46% E-mail 1.082 · 38% Ligação IA 455 · 16%
Anel de progressoProgresso contra uma meta única — cockpit, meta do mês, cabeçalho de cadência.
68%da meta
Meta de julho
34 de 50 reuniões agendadas
faltam 16 · no ritmo atual o mês fecha em 38
Gauge — meio-anelUma taxa dentro de uma escala fixa, quando o "quanto falta" importa tanto quanto o valor.
9,4%taxa de resposta
escala 0–20% · média das cadências ativas: 7,1%
Funil de cadênciaEtapas de uma cadência específica — mesmo padrão do funil decantado, com a conversão etapa a etapa embaixo.
Cadência · Indústria Sul — julho
Enviados1.180100%
Entregues1.12695%
Abertos51243%
Respostas968,1%
Reuniões121,0%
conversão sobre a etapa anterior: 95% · 45% · 19% · 12,5%
Bullet — meta × realizadoMeta × realizado por pessoa ou cadência — a faixa de referência dá contexto sem virar ranking cru.
Reuniões no mês · por SDR
Marina Lopes
14meta 12
Juliana Freitas
11meta 12
Rafael Costa
9meta 12
faixa clara: caminho até a meta · traço vertical: meta (12) · escala até 16
Dispersão — porte × respostaDuas medidas por empresa — para achar o padrão e, principalmente, a exceção que vale um touch hoje.
20%15%10%5% 0200400600800 funcionários Metalfrio · 18%
1 ponto = 1 empresa impactada taxa de resposta × porte · julho
Oráculo

Abaixo de 200 funcionários, a resposta quase dobra. A exceção é a Metalfrio (620 funcionários, 18%): o decisor visitou a página de preços antes do primeiro touch. Porte pesa menos que sinal.

Waterfall — pipeline do mêsMovimentação entre dois momentos: o que entrou, o que saiu e por quê — saída boa é verde-água, não vermelha.
128 +64 −38 −29 125 InícioNovasReuniãoEsfriaramFim
entraram em conversa saíram para reunião esfriaram leads em conversa · julho
Radar — perfil de lead idealPerfil multidimensional (ICP, fit) em até cinco eixos — mais que isso, o polígono vira mancha.
Fit ICP Sinais Cargo Porte Momento
perfil médio dos leads que viraram reunião escala 0–100 · base: 214 reuniões
Heatmap — melhor horário de respostaIntensidade em duas dimensões — o recorde ganha contorno e vira decisão de horário de disparo.
8h9h10h11h12h13h14h15h16h17h18h Seg Ter Qua Qui Sex
menosmais respostas · recorde: qua 9h
Coortes — retenção de respostaCada linha é uma turma de leads; cada coluna, uma semana desde o primeiro touch — mostra se as cadências novas seguram mais tempo.
Coorte · leads S0S1S2S3S4 23 jun 348 54% 38% 26% 18% 14% 30 jun 402 57% 41% 29% 21% 07 jul 375 61% 44% 32% 14 jul 428 63% 47% 21 jul 391 66%
Oráculo

As coortes de julho abrem 12 pts acima das de junho. O assunto novo do e-mail 1 está no ar desde 07 jul — replicá-lo nas cadências de indústria deve segurar o engajamento além da S2.

Nenhum componente com esse nome — tente outra palavra (ex.: “funil”, “skeleton”, “paginação”).