Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
DashboardLightdirectoperationaltrustworthy
FFunil

Funil.

Lead CRM in ice white with bottle green, at the level of daily-use software: a single KPI strip with comparison, lead intake per day in SVG with axes, funnel by stage, inbox with SLA clock, estimated kWp, filters and bulk actions, and tables with totals, sorting and a pinned column. Dense, tabular, no decoration; burnt orange only for alerts.

Type
Admin dashboard
Theme
Light
Headings
Geist
Body
Geist

ForSmall service companies that buy or capture leads (form, ads, referrals, WhatsApp) and live on responding fast and not dropping follow-ups

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/funil

Screen blocks01/03Meta do mês

All the copy lives in content.ts and the colors in tokens.css.
Concept

Painel de captação e gestão de leads para uma pequena empresa de serviço (aqui, energia solar residencial). Não é livro de razão nem quadro de kanban vestido de metáfora: é software real de CRM/leads — caixa de entrada, tempo de resposta, funil e tarefa de hoje —, com identidade na tipografia, na cor e na densidade da tabela, não em ilustração.

From DESIGN.md, which is in Portuguese for now.

ForSmall service companies that buy or capture leads (form, ads, referrals, WhatsApp) and live on responding fast and not dropping follow-ups

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Geist for headings, Geist for body text.

HeadingsGeist

Aag!

Funil in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyGeist

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • dark green, forest green or petrol green brand
  • company that buys paid leads (Google/Facebook Ads)
  • small operation serving by phone, WhatsApp and site visits
  • manager who tracks the team's response time and follow-ups
Avoid for
  • catalog/inventory e-commerce
  • technical infrastructure SaaS
  • vibrant, purple or neon brand
  • operation with no lead generation (fixed client base only)
  • mandatory dark theme
Niches
residential solar energyreal estate brokerageinsurancerenovation and constructionaesthetics clinicgym and studiolocal service providerfranchisecourse and schoolpaid lead generation

Tone

directoperationaltrustworthydenseprofessional

What makes it Funil

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  1. 01

    Caixa de entrada com relógio de SLA: "N min" + rótulo (no prazo → atenção → fora da meta) e uma régua fina (.funil-regua) que mostra quanto do dobro da meta já passou (.funil-sla[data-nivel], 0–3). Ordenada por espera, com filtros "Sem responsável" e "Fora da meta" e seleção em lote, tudo só com CSS (:has() nos rádios e checkboxes; o contador de selecionados é um counter() CSS e por isso a barra de lote vem depois da tabela no DOM).

  2. 02

    Dimensionamento na própria fila: a conta de luz vira "sistema estimado" em kWp (content.dimensionamento: tarifa, horas de sol, eficiência). É o dado que o consultor solar olha antes de ligar.

  3. 03

    Faixa única de KPIs: um painel com células divididas por fio de 1px (gap-px sobre bg-border), cada uma com valor, variação contra o mesmo intervalo do mês anterior ("vs 162") e uma linha de contexto. Nada de card por KPI, ícone ou sparkline.

  4. 04

    Entrada por dia em SVG próprio: colunas empilhadas (mídia paga × outras), eixo Y com grade tracejada, faixa de fim de semana/feriado, dia de hoje hachurado ("parcial") e linha da média do dia útil. Hover realça a coluna e mostra o total; <title> dá o detalhe.

  5. 05

    Funil em barras retas de um único matiz com "Passou" (conversão da etapa anterior).

  6. 06

    Tabelas de verdade: cabeçalho em faixa gelo, coluna ordenada com seta, total em tfoot, participação em barra dentro da célula (.funil-participacao), fio verde de 2px na margem da linha no hover/foco/seleção, primeira coluna fixa na rolagem lateral do celular (.funil-fixa).

  7. 07

    Lateral com item ativo em texto forte + marca curta na borda (::before de 3px), ícone do ativo em verde. Nada de pílula tingida. No celular a lateral vira gaveta (popover nativo).

  8. 08

    Estados visíveis: erro de integração com causa e saída ("Reconectar"), dia sem visita como vazio que ensina ("36 qualificados ainda esperam visita · Agendar"), histórico carregando em esqueleto (.funil-esqueleto, aria-busy).

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View DESIGN.md

Identidade

  • Fundo branco-gelo #f5f7f2; painéis em branco puro #ffffff, com fio #dce2d7; lateral num segundo neutro #ecefe7 (--funil-lateral). Sem sombra de card: a separação vem do fio e do contraste de superfície. A única sombra é a de 1px da opção marcada no controle segmentado.
  • Texto #17201a; secundário #5b675c; terciário #6f7b70 (fim de semana no eixo, riscos).
  • Verde garrafa #123c2c = a única cor de ação e de "bom": botão principal, marca do item ativo, fio de foco da linha, checkbox, mídia paga no gráfico, "Vendido" e toda variação positiva de KPI. Verde claro #8fb09e só como segunda série do gráfico (outras origens).
  • Laranja-queimado #b8420f é o único segundo tom, e só aparece em alerta real: lead fora da meta de resposta, tarefa atrasada, consultor acima da meta, etapa do funil que passa menos de 62%, variação ruim de KPI, integração com erro e o ponto de notificação.
  • Fontes: Geist para todo texto; JetBrains Mono (.funil-num, tnum) só em número, hora, telefone, valor e kWp. Texto nunca vai em mono (nem botão, nem rótulo).
  • Escala fixa de produto: título da página 24px, título de painel 15px, corpo de tabela 13,5px, apoio 12–12,5px. Cantos quase retos (--d-radius: 0.375rem, painéis 0.5rem).

Regras

  • Hierarquia: KPIs do período > entrada por dia e funil > caixa de entrada (ação agora) > origem e campanha > follow-ups e equipe > visitas e atividade.
  • Os números fecham: leads do KPI = soma das origens = soma da equipe = soma dos dias; qualificados e contratos batem entre funil, origens e equipe; a média de resposta é a média ponderada da equipe. Tudo que dá para derivar é calculado no Landing.tsx (atrasos, contagens, totais, médias).
  • Número mono, alinhado à direita; moeda em reais inteiros com separador de milhar ("mil" só no resumo do funil e na comparação do KPI).
  • Avatar é cinza neutro com iniciais e fio de 1px — sem cor por pessoa e sem aro colorido.
  • Ícone é traço simples, cor neutra, nunca em quadradinho colorido. Ações de linha (ligar, WhatsApp) são botões de ícone com aria-label.
  • Foco de teclado: um anel de 2px em verde garrafa em todo controle; seleção de texto em verde.
  • Tabela larga entra em overflow-x-auto dentro de painel min-w-0 (grades com grid-cols-1); o painel é position: relative para segurar os .sr-only. A página nunca rola de lado.
  • Animação: data-sobe no título e na faixa de KPIs; data-revela do gráfico para baixo. Colunas do gráfico sobem e barras do funil crescem da esquerda uma vez; o ponto "ao vivo" e o SLA estourado pulsam devagar. Tudo para com prefers-reduced-motion.
  • Ícones lucide size-4/size-3.5, traço 1.8–2.

Adaptar à marca do cliente

  • Marca verde (qualquer tom escuro o bastante para texto branco em cima): troque só --d-primary.
  • Marca clara, azul ou neutra escura (azul-marinho, grafite): pode virar --d-primary se tiver contraste alto com --d-primary-fg; mantenha o laranja como o único alerta.
  • Marca laranja/vermelha: não vire --d-accent sem repensar — o laranja aqui é o alerta; se a marca do cliente for laranja, use-a só no logo e mantenha o verde garrafa e o laranja de sistema separados visualmente (ex.: tom mais claro para a marca).
  • Marca vibrante, roxa ou neon, ou exigência de tema escuro: este design não é o certo.
How to use

Two files.
One prompt.

Funil becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

More dashboards

More admin dashboards from the catalog.

Browse catalog
DashboardLightView design

Prateleira

DashboardLightView design

Rota

DashboardLightView design

Canteiro

DashboardLightView design

Turma