Vitrine de componente — todos os numeros desta pagina sao INVENTADOS. Nada aqui vem do Supabase. O objetivo e provar que o design system do GAVI (18 temas · 5 tipografias · 15 graficos · motor de layout · tabela-planilha) esta vivo no nosso app, com dado de forma plausivel so pra as silhuetas ficarem realistas. Fonte: src/app/lab/demo-data.ts.
O chassi
2.893 linhas copiadas do GAVI: Next 15 + React 19 + Tailwind 4 + Recharts 3. Troque o tema ou a tipografia la em cima — tudo nesta pagina reage junto, porque nenhum componente conhece cor: todos leem token.
Prova das 3 armadilhas
Medido no browser agora, nao afirmado. As tres quebram o clone em silencio — se alguma virar vermelha, o chassi regrediu.
medindo no browser…
Os 18 temas
Clique pra trocar; a estrela fixa o padrao de boot pra este navegador. Cada tema redefine ~20 tokens-base — os ~90 derivados (--bl-*, --line, --panel) re-adaptam sozinhos por color-mix, sem tocar em componente nenhum. Repare que os 15 graficos abaixo recolorem junto.
Escuros14
Bilhon
Midnight Blue
Synthwave
Solarized Dark
Catppuccin Mocha
Dracula
Nord
Vercel
Retro Terminal
Tokyo Night
Gruvbox Dark
Rosé Pine
One Dark
Arkom Dark
Claros4
Clean Bilhon
Light
Paper
Arkom
As 5 tipografias
Trocar de fonte = trocar o valor de --font-sans / --font-mono por uma classe no <html>. Nenhum componente muda. Os 6 arquivos woff2 sao servidos do proprio dominio (armadilha #3).
Escala do @theme inline
A coluna da direita e o valor que o @theme inline promete. Compare com o tamanho renderizado.
Implantacao ECF — 98 leads no funil.text-xs14px
Implantacao ECF — 98 leads no funil.text-sm16px
Implantacao ECF — 98 leads no funil.text-base18px
Implantacao ECF — 98 leads no funil.text-lg23px
Implantacao ECF — 98 leads no funil.text-xl29px
Implantacao ECF — 98 leads no funil.text-2xl39px
--font-sans (corpo)
Reuniao realizada · 19
--font-mono (numeros e rotulos)
R$ 45.000,00
Rampa categorica ativa
Os 15 graficos nunca pedem um hex: pedem pal(i), que devolve var(--chart-N, fallback). Um tema que defina --chart-1..10 recolore tudo sem tocar em JS.
--chart-1
fallback #22c55e
--chart-2
fallback #60a5fa
--chart-3
fallback #a855f7
--chart-4
fallback #fb923c
--chart-5
fallback #ef4444
--chart-6
fallback #06b6d4
--chart-7
fallback #fbbf24
--chart-8
fallback #ec4899
--chart-9
fallback #a1a1aa
--chart-10
fallback #e85600
Os 15 graficos do chart-kit
Um de cada. Todos theme-aware por CSS var (zero hex nos eixos), todos comisAnimationActive=false— dashboard nao anima. Passe o mouse: o tooltip tem fundo e borda (armadilha #1 resolvida).
01KitArea
Temporal · leads que entraram por dia · cor via pal(0) (o default do componente e hex fixo)
02KitLine
Temporal multi-serie · lead -> qualificado -> reuniao
03KitStackedArea
Temporal empilhado · composicao do funil no dia
04KitBar
Comparacao · volume por dia da semana, com rotulo no topo · cor via pal(0)
05KitBarRanked
Comparacao horizontal · ranking de campanha, altura automatica e degrade por barra
06KitStackedBar
Comparacao empilhada · desfecho por semana
07KitWaterfall
Ponte do mes · entrada usa a cor primaria do tema, saida usa vermelho
08-10Proporcao (3 em 1)
Donut · Rose · Treemap — a escolha fica salva no navegador (useVizType)
11KitSunburst
Proporcao em 2 aneis · canal por dentro, campanha por fora
12KitSankey
Fluxo · por onde o lead entra e onde ele para
13-14KitGaugeProgress · KitGaugeSpeedometer
KPI em SVG puro · cor automatica por faixa (>=90 verde, >=60 ambar)
54%
da meta de reunioes
KitGaugeProgress
71
saude do funil
KitGaugeSpeedometer
15KitFunnelTriangle
Fluxo · trapezios conectados, viewBox 1:1 por ResizeObserver, rotulo sai pra fora se nao couber
As 3 pecas fora do chart-kit
O grafico gemeo do Pace (o que o CEO pediu), o funil de vazamento (so Tailwind, zero Recharts) e a tabela-planilha com colunas arrastaveis.
16PaceLineChart
Realizado x Meta x Projecao x Pace linear · pilula de valor no fim de cada linha, halo neon, delta do pace no tooltip
Meta Projecao Pace linear Realizado
Meta do ciclo R$45kProjecao R$31.9kPasse o mouse no dia 12 ve o delta vs pace
17LeakFunnel
Onde o funil vaza · etapa + conector de conversao colorido (verde saudavel, vermelho critico)
Leads
82% da meta
98
R$ 31
custo/lead
43,9%
lead -> qualificado
Qualificados
61% da meta
43
R$ 71
custo/qual.
62,8%
qualif. -> agendada
Agendadas
54% da meta
27
R$ 113
custo/agend.
29,6%
no-show
Realizadas
48% da meta
19
R$ 160
custo/real.
21,1%
realizada -> venda
Vendidas
40% da meta
4
R$ 762
CAC
saudável vazamento crítico
18SheetTable
Arraste o cabecalho pra reordenar · arraste a alca da borda direita pra redimensionar · clique pra ordenar. Ordem e largura ficam salvas.
Lead
Empresa
Canal
Etapa
Valor
Parado (d) ↓
Score
Cliente Demo 06
Escola Aprender
Parceria
Perdido
—
23
F
Cliente Demo 03
Auto Pecas Silva
Meta Ads
Respondeu
—
11
C
Cliente Demo 02
Otica Visao
Indicacao
Qualificado
R$ 7.500
5
B
Cliente Demo 01
Padaria do Centro
Meta Ads
Reuniao agendada
R$ 7.500
2
A
Cliente Demo 04
Clinica Sorriso
Organico
Reuniao realizada
R$ 7.500
1
A
Cliente Demo 05
Mercado Bom Preco
Meta Ads
Novo
—
0
D
O motor de layout (ArrangeStack)
Cada usuario monta o proprio painel. Ligue Editar layout e passe o mouse num bloco: aparecem a alca de arrastar, o menu de tamanho e o excluir. Arraste tambem a borda direita ou a inferior. O arranjo fica salvo neste navegador — desligar o modo mantem o que voce salvou, e Restaurar volta ao canonico.
Ciclo atualTodos os canaisTodos os donosFixado no topo (pinned): redimensiona e remove, mas nunca desce.
AEntrada por dia
Bloco arrastavel · metade da largura (span 3)
BOrigem dos leads
Bloco arrastavel · metade da largura (span 3)
CRanking de campanhas
Bloco arrastavel · dois tercos (span 4)
DMeta do ciclo
Bloco arrastavel · um terco (span 2)
71%
da meta
O que esta pagina NAO e
Nao e a tela de Pace, nem a de Receita, nem o Kanban. E o chassi: o design system inteiro funcionando com dado inventado, pra a discussao de "nao chega perto" acabar antes de portar tela. As telas de verdade entram uma por vez na F5, cada uma com matriz de paridade contra o painel atual.