Design system v2
Tokens, base components e compostos do DSpay nos dois temas, lado a lado. Role para baixo em telas pequenas.
data-theme="tenant"
Marca Legacy
Brasão + wordmark, tamanhos e a faixa gradiente. Nunca recolorir o brasão — em fundo escuro, sempre com medalhão.
Legacy SchoolLegacy SchoolTipografia
Escala documentada em docs/design/redesign-2026-09.md §3.
Display
text-3xl sm:text-4xl font-heading font-bold tracking-tight
Título H1
Título H2
Título H3
Corpo padrão, usado em parágrafos e descrições longas.
Texto secundário (muted), para legendas e observações.
Caption/dado · pedido #DS-000123 · 000.000.000-00
Cores
Tokens de styles/tokens.css: nome e valor.
Botões
Variantes (shadcn + v2 brand/hud) e estados de hover/disabled/loading.
Campos
Input, Textarea, Select, Checkbox, RadioGroup, Switch — 44px por padrão, 52px no mobile.
Navegação e status
Stepper, Tabs, Badge e StatusBadge (todos os status de domain/status.ts).
Dados
PageHeader, KpiCard (ícone + sparkline), DataTable, SectionCard (ícone + accent) e EmptyState (ícone).
Vendas
Exemplo de PageHeader com breadcrumb.
Últimos pedidos
3 linhas de exemplo (dados fictícios).
| Pedido | Comprador | Status | Valor | Data |
|---|---|---|---|---|
| DSP-LEGACY-1039 | Carla Pereira | Pago | R$ 1.200,00 | 31/08/2026 |
| DSP-LEGACY-1029 | Fernanda Pereira | Pago | R$ 500,00 | 31/08/2026 |
| DSP-LEGACY-1027 | Carla Almeida | Parcialmente estornado | R$ 1.200,00 | 30/08/2026 |
Nenhum saque solicitado
Quando o tenant solicitar um saque, ele aparece aqui.
StickySummaryBar (fixado apenas em telas reais; aqui em posição estática)
Overlays
Dialog e Sheet abertos por botão.
Feedback
Tooltip, Skeleton, Progress e toast (sonner).
data-theme="platform"
Tipografia
Escala documentada em docs/design/redesign-2026-09.md §3.
Display
text-3xl sm:text-4xl font-heading font-bold tracking-tight
Título H1
Título H2
Título H3
Corpo padrão, usado em parágrafos e descrições longas.
Texto secundário (muted), para legendas e observações.
Caption/dado · pedido #DS-000123 · 000.000.000-00
Cores
Tokens de styles/tokens.css: nome e valor.
Botões
Variantes (shadcn + v2 brand/hud) e estados de hover/disabled/loading.
Campos
Input, Textarea, Select, Checkbox, RadioGroup, Switch — 44px por padrão, 52px no mobile.
Navegação e status
Stepper, Tabs, Badge e StatusBadge (todos os status de domain/status.ts).
Dados
PageHeader, KpiCard (ícone + sparkline), DataTable, SectionCard (ícone + accent) e EmptyState (ícone).
Vendas
Exemplo de PageHeader com breadcrumb.
Últimos pedidos
3 linhas de exemplo (dados fictícios).
| Pedido | Comprador | Status | Valor | Data |
|---|---|---|---|---|
| DSP-LEGACY-1039 | Carla Pereira | Pago | R$ 1.200,00 | 31/08/2026 |
| DSP-LEGACY-1029 | Fernanda Pereira | Pago | R$ 500,00 | 31/08/2026 |
| DSP-LEGACY-1027 | Carla Almeida | Parcialmente estornado | R$ 1.200,00 | 30/08/2026 |
Nenhum saque solicitado
Quando o tenant solicitar um saque, ele aparece aqui.
StickySummaryBar (fixado apenas em telas reais; aqui em posição estática)
Overlays
Dialog e Sheet abertos por botão.
Feedback
Tooltip, Skeleton, Progress e toast (sonner).