Design system
Estética Apple/Notion (Documento Mestre §10): fundo claro, bordas discretas, sombra quase invisível, cor só quando carrega significado. Todo componente aqui recebe dado por prop e emite evento por callback — nenhum busca dado sozinho.
Tokens
Documento Mestre §10.1 — a única fonte de cor permitida em todo o produto.
Layout
A composição completa (AppShell) precisa do viewport inteiro para a MobileBottomNav se comportar — ela é fixa à janela, não a uma caixa. Por isso o preview ao vivo mora numa página própria.
AppShell — Sidebar + TopBar + MobileBottomNav + área de conteúdo, trocando de forma no breakpoint lg (1024px).
TopBar
Persistente nas duas larguras — é onde a identidade (workspace/conta) mora, não na Sidebar.
PageHeader
Cabeçalho de CONTEÚDO — rola com a página, diferente da TopBar.
Projetos
Tudo que está em produção neste mês.
Primitivos
Sobre Radix UI, não do zero. Cor e forma vêm só dos tokens.
Input + Label
Todo input tem Label associado por htmlFor/id — requisito de acessibilidade, não polimento.
Select
Card
Pacote Essencial
6 horas de cobertura + 200 fotos editadas.
Badge
Pílula com fundo tingido — para tag/contador, não para status de linha (isso é StatusBadge, na seção Domínio).
Dialog / Sheet / Drawer
Mesmo comportamento de foco/ESC/clique-fora (Radix); a diferença é geometria de origem: centro, lateral, ou fundo.
ConfirmDialog
O único jeito de pedir confirmação neste produto — controlado de fora, não fecha sozinho enquanto onConfirm está pendente.
Outros primitivos
Avatar, DropdownMenu, Tabs, Separator, Skeleton, Tooltip — usados por dentro dos componentes de Layout e Domínio, mostrados aqui soltos para conferência isolada.
Domínio
Compostos sobre os primitivos. Cada um recebe dado por prop — nenhum chama Supabase.
EmptyState
A description ENSINA o próximo passo — nunca 'nenhum registro encontrado'.
Nenhum lead ainda
Cadastre seu primeiro lead manualmente ou compartilhe o link público do seu formulário de contato.
DataCard
Item de lista genérico — é também em cima dele que DataTable vira lista em 375px.
StatCard
Único componente com os 4 estados numa prop só (state) — um indicador é, por natureza, um valor assíncrono.
Sem lançamentos neste mês ainda.
StatusBadge
Ponto + texto, sem fundo — mais discreto que Badge de propósito, para não competir em listas densas.
MoneyDisplay + DateDisplay
Mesma API (value/tone/size/className) de propósito — quem usa um já sabe usar o outro.
DataTable
Tabela em ≥768px, lista de DataCard abaixo disso. A troca é feita por media query real (md:), não simulada.
Nenhum lead
Cadastre o primeiro lead para começar.
| Nome | Evento | Valor | Status |
|---|---|---|---|
Não foi possível carregar os dados.
| Nome | Evento | Valor | Status |
|---|---|---|---|
| Camila Rocha | Casamento | R$ 8.500,00 | Quente |
| João Pedro Alves | Ensaio | R$ 1.200,00 | Novo |
Tabela completa, com todas as linhas:
| Nome | Evento | Valor | Status |
|---|---|---|---|
| Camila Rocha | Casamento | R$ 8.500,00 | Quente |
| João Pedro Alves | Ensaio | R$ 1.200,00 | Novo |
| Studio Vento Norte | Corporativo | — | Convertido |
| Beatriz Nunes | Aniversário | R$ 2.400,00 | Perdido |
KanbanBoard
Desktop: colunas lado a lado com scroll horizontal. Mobile: abas trocando a coluna ativa — grade de colunas de 70px não seria legível.
Pipeline vazio
Assim que houver itens, eles aparecem organizados por coluna aqui.
Não foi possível carregar o quadro.
Novo
2Novo
2Board completo (3 colunas):
Novo
2Em contato
1Convertido
1Novo
2KanbanColumn
Standalone, com o menu "mover para" — a escolha de acessibilidade no lugar de arrastar (drag-and-drop HTML5 não é operável por teclado). Ver handoff.
Novo
2EntityDrawer
Sheet lateral em ≥1024px, Drawer de fundo abaixo disso — mesmo corte de breakpoint do AppShell.
Timeline
A trilha vem do BANCO (gatilhos AFTER UPDATE) — este componente só recebe a lista pronta.
Sem histórico ainda
As próximas mudanças aparecem aqui automaticamente.
- Lead criado pelo formulário público
- Status alterado para "Em contato"
SmartSuggestion
Único jeito de uma sugestão de IA aparecer no produto (§8.9): nunca executa sozinha. O vocabulário de status espelha ai_suggestions (A1, Lote 5) de propósito.