Design system · referência viva
Estilo do Radar
Referência viva do design system. Toda cor, tamanho e superfície do produto sai daqui. Se um token quebrar em claro ou escuro, quebra visivelmente nesta página antes de quebrar numa tela de verdade.
Onde o build está
- Passo 0Toolchainprontorepo, Vercel e radar-dev verificados
- Passo 1ScaffoldprontoNext 16 · React 19 · Tailwind 4 · Vitest
- Passo 2Temaprontotokens, tipografia, claro e escuro
- Passo 3Shellprontomenu por verbo, barra superior e busca ⌘K
- Passo 4Bancopronto29 tabelas, RLS em todas, seeds
- Passo 5Auth e papéisprontomagic link e teste cross-tenant
- Passo 6As telasprontonenhuma rota usa PaginaVazia
- Passo 7O motorprontoregras determinísticas e camada de IA
- Passo 8Acabamentoprontocabeçalhos, check:segredo e e2e
- Passo 9Redesenho v5prontoaplicado no produto inteiro em 15/08/2026
Paleta
Toda cor do produto sai daqui. Componente que escreve hexadecimal na mão está errado por definição.
Spruce 900
texto principal, seção escura
Spruce 700
superfície elevada no escuro
Spruce Mist
texto secundário
Cream Warm
canvas claro
Verdant 300
só CTA e anel de foco
Wave Frost
tinta de seção
Zest Blush
tinta de seção
Charcoal 100
borda de 1px
Tipografia
Peso 475 em tudo, inclusive em título grande — é a assinatura da referência. Negrito acima de 600 não existe neste produto.
Superfícies e ação
Superfície
Cartão sobre o canvas. Raio de 2px, borda de 1px, sem sombra.
Tinta
Faixa de seção. Não é cor de status — no escuro ela vira superfície.
Inversa
Seção dramática. Alterna com o canvas ao longo da página.
Papéis acrescentados no redesenho v5
Eyebrow · foreground-subtle
Texto principal
Corpo pequeno · foreground-muted
border-strong
Borda com peso: input, divisor de ênfase e contorno tracejado.
nav
Item ativo da navegação
Item inativo
skeleton
Os quatro blocos acima devem continuar legíveis com o tema trocado. Se algum sumir, o papel foi definido só num dos temas — que é o defeito clássico de token.