Valloin Design System
Componentes, tokens e padrões visuais
Cores
Primary
#2196FF
Secondary
#6C63FF
Accent
#00D9FF
Background
#0B0F14
Surface
rgba(18,22,30,0.55)
Success
#34D399
Warning
#FBBF24
Danger
#F87171
Premium
#A78BFA
Info
#60A5FA
Text Primary
rgba(255,255,255,0.92)
Text Muted
rgba(167,175,192,0.45)
Tipografia
Sombras
Glow
Botões
Cards
Default Card
Variante padrão
Conteúdo do card com glass e blur.
Outlined
Sem preenchimento
Card com borda sutil.
Glass Card
Glow azul
Card com efeito glow premium.
Compact
Menor
Card compacto para listas.
Hero Card
Destaque principal
Card hero com gradiente e glow máximo.
Loading Card
Card com estado de loading.
Disabled Card
Card desabilitado.
Badges
Inputs
Campo obrigatório
Métricas
Receitas
R$ 12.500
Crescimento
+18%
Clientes
347
NPS
92
List Items
Meta concluída
Reserva de emergência
Item simples
Sem ação
Avatares
Hero
Valloin Design System
O sistema de design oficial do Valloin. Consistência, performance e elegância em cada pixel.
Empty State
Nenhum item encontrado
Comece adicionando seu primeiro registro ao sistema.
Loading
Tooltip
Dividers
Modal
Toasts
Espaçamento
Animações
Border Radius
Valloin Design System v1.0 — Apenas para desenvolvimento interno