Funil.

• marca verde oscuro, verde bosque o verde petróleo
• empresa que compra leads pagos (Google/Facebook Ads)
• operación pequeña que atiende por teléfono, WhatsApp y visita técnica
• gestor que exige tiempo de respuesta y seguimiento del equipo

• e-commerce de catálogo/stock
• SaaS técnico de infraestructura
• marca vibrante, morada o neón
• operación sin generación de leads (solo cartera fija)
• tema oscuro obligatorio

Tono

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.