Verificacao do design system
Esta pagina nao e tela de produto. Ela existe para provar que os tokens, as duas familias tipograficas e os nove primitivos de @vendaut/ui resolvem dentro do App Router com Tailwind v4 — e para servir de referencia de estado a quem construir Dashboard, Copiloto, Campanhas, Aprovacoes, Auditoria, Conexoes e Guardrails em M1 e M3.
referencia normativa · index.html
Button
Tres variantes, dois tamanhos, mais desativado e selecionado. Hover e foco visivel sao regra de CSS: passe o mouse e navegue por Tab.
Badge · tier de risco
O tier chega calculado pelo Policy Engine server-side; o componente so exibe.
Pill · status de entidade
Os seis valores da uniao canonica, com o rotulo em pt-BR.
PlatformChip · plataformas
Meta, Google e TikTok tem cor de canal; as outras tres caem no tratamento de plataforma ainda nao integrada.
Card
Card padrao
Superficie, borda hairline e raio do sistema. O titulo e label mono, nao o atributo title do HTML.
Card tone=danger
Marca a zona de acao destrutiva: so a borda muda, o fundo continua neutro.
Sem padding proprio: o conteudo sangra ate a borda, como no card de tabela.
Eyebrow e MonoLabel
A assinatura do sistema: mono, caixa alta e tracking de 0.16em. Eyebrow e o label que precede o h1 de cada view.
KpiCard
O sentimento e leitura de negocio, nao direcao da seta: um custo por aquisicao em alta usa o tratamento negativo com glifo de alta.
Delta positivo
Delta negativo
Sem delta e sem serie
Switch · kill switch
Controlado e sem estado interno. E o unico toggle do sistema — ligado significa suspender toda execucao da IA, por isso usa o tratamento danger.