Funil.

CRM de vendas escuro em violeta e coral: meta do mês em anel, previsão ponderada, ranking do time, pipeline em kanban com negócios quentes em borda gradiente e funil de conversão. Energia comercial sem virar joguinho.

Tipo: Painel admin
Tema: Escuro
Títulos: Onest
Texto: Onest

ParaTimes comerciais de 3 a 30 pessoas e gestores de vendas que acompanham meta, pipeline e rotina diária

Baixar .zip Você tem acesso aos arquivos

Abrir em tela cheia

/preview/funilTela cheia

Blocos da tela01/03Meta do mês

Todo o texto fica em content.ts e as cores em tokens.css.

Conceito

CRM de vendas escuro, violeta com coral. É sobre gente, negócio e dinheiro: a meta do mês em primeiro plano, o pipeline como quadro e a próxima ação sempre à vista. Motivador sem parecer jogo (nada de confete, medalha grande ou mascote).

ParaTimes comerciais de 3 a 30 pessoas e gestores de vendas que acompanham meta, pipeline e rotina diária

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Onest nos títulos, Onest no texto.

TítulosOnest

Aag!

Funil em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoOnest

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com

marca roxa, violeta, lilás ou coral
produto com funil de venda e meta mensal
time que trabalha com proposta e follow-up
gestor que quer o time olhando para a próxima ação

Evitar para

monitoramento técnico/infraestrutura
financeiro contábil sóbrio
clínica ou saúde com paciente
marca clara e minimalista em preto e branco
e-commerce focado em pedidos e estoque

Nichos

CRMvendas B2BagênciaimobiliáriaSaaS B2Bescola e cursoconsultoriacorretoracoworkingprestador de serviço com proposta

Tom

motivadorconfiantecomercialmodernohumano

O que faz ser Funil

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

01
Negócio quente com borda gradiente violeta → coral (.funil-cartao[data-temp="quente"], técnica padding-box/border-box).
02
Dias parado que esquenta: ponto + número + barrinha que vai de cinza (0–2) → âmbar (3–5) → laranja (6–9) → vermelho pulsando (10+). data-nivel 0–3.
03
Colunas com somatório no topo: filete com a cor da etapa, contagem, soma em mono grande e o valor ponderado embaixo.
04
"Arrastar" sugerido por hover, sem JS: o cartão sobe e inclina 0,8°, aparece a alça, cursor grab, e a coluna acende a área tracejada "Solte aqui".
05
Selo de negócio ganho: carimbo circular verde com texto em curva, que gira ao passar o mouse.
06
Meta em anel com a faixa clara da previsão ponderada por baixo (mostra se o pipeline cobre o que falta).
07
Funil deitado em SVG: patamares por etapa ligados por curvas, gradiente da cor de cada etapa e pílula de conversão entre elas.
08
Foco de hoje: faixa coral curta que transforma o dado em uma ação.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

Fundo #0e0f1a com dois brilhos difusos (violeta no canto esquerdo, coral no direito). Painéis #151627, cartões #1d1e34, bordas #282a45.
Texto #eceefe; secundário #9496b9.
Violeta #7c5cff = marca, ação, seleção. Coral #ff7a59 = calor, urgência boa (quente, foco do dia). O gradiente violeta → coral (--fu-gradiente) só em: botão principal, anel da meta, valor fechado, borda de negócio quente e barra de quem bateu a meta.
Verde #3ddc97 só para ganho/fechado. Vermelho #ff5d6c só para atrasado e negócio parado há 10+ dias.
Fontes: Onest para tudo; JetBrains Mono (.funil-num, com tnum e sem quebra) para todo valor, hora, contagem e porcentagem.
Cantos arredondados médios (--d-radius: 0.75rem, painéis 1.25rem).

Regras

Hierarquia: título do período > foco do dia > meta/previsão/ranking > pipeline > funil, ações, atividade.
Cor da etapa é fixa e repete em todo lugar (coluna, barra da previsão, funil): Novo ardósia, Contato violeta, Proposta roxo, Negociação coral, Ganho verde.
Temperatura sempre em pílula com a própria cor (quente coral com chama, morno âmbar, frio azul). Nunca só pela cor: o texto vai junto.
Pessoa sempre com avatar de iniciais na cor dela (a mesma no ranking, nos cartões, nas ações e na atividade).
Estado só com CSS: marcar ação como feita é input[type=checkbox] + peer-checked. Nada de JS de drag no mostruário.
Animação: data-sobe no título, foco e KPIs; data-revela do pipeline para baixo; anel e barras crescem; funil varre da esquerda. Tudo para com prefers-reduced-motion.
Celular: lateral vira topo com marca + navegação em pílulas roláveis; o kanban vira colunas roláveis com snap dentro de overflow-x-auto (pai min-w-0), nunca rolagem da página.
Ícones lucide size-4, traço 1.8–1.9.

Adaptar à marca do cliente

Marca roxa/azul-violeta: troque --d-primary e as paradas violeta do --fu-gradiente e dos SVGs (#7c5cff, #b15fe0).
Marca laranja/vermelha: use-a como --d-accent (coral) e mantenha o violeta.
Não mude as cores semânticas (verde ganho, vermelho atrasado, escala dos dias parado).
Marca verde ou tema claro obrigatório: este design não é o certo.

Como usar

Dois arquivos.
Um prompt.

O Funil vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.