Fundamentos
Cores
Todas as cores são variáveis CSS com o mesmo nome do token (--primary) e viram classes do Tailwind com qualquer prefixo de cor: bg-primary, text-primary, border-primary, ring-primary.
Regras
Use o token pelo papel, não pela cor
bg-primary, text-muted-foreground, border-border; nunca bg-green-600, text-gray-500 ou hex no código.
Status sempre pelo par suave
bg-success-soft text-success-soft-foreground (e warning, info, destructive) para badges, avisos e linhas de status.
Sólido só para ênfase
bg-destructive, bg-success etc. em ações e alertas que precisam chamar atenção.
Cor do logo só para decorar
bg-brand e text-brand em ícones, ilustrações e destaques. Botões, links e texto usam primary, que tem contraste AA.
Gráfico nunca só pela cor
Séries em chart-1 a chart-6, nesta ordem, sempre com rótulo ou legenda.
Mostrando: LeadCultura (troque a marca no topo).
Superfícies
Superfícies e texto principal
| Claro / escuro | Token | Valor |
|---|---|---|
bg-background | ||
bg-foreground | ||
bg-card | ||
bg-card-foreground | ||
bg-popover | ||
bg-popover-foreground | ||
bg-border | ||
bg-input | ||
bg-ring Anel de foco; acompanha a cor da marca |
Marca
Cores da marca. É o grupo que cada marca ajusta.
| Claro / escuro | Token | Valor |
|---|---|---|
bg-brand Verde-esmeralda do logo. Só decorativa. | ||
bg-primary Verde-esmeralda do logo: já tem contraste AA com texto branco | ||
bg-primary-foreground | ||
bg-primary-glow Verde-claro do logo (#86cb7b) | ||
bg-secondary Ação secundária | ||
bg-secondary-foreground |
Neutros
Neutros de apoio
| Claro / escuro | Token | Valor |
|---|---|---|
bg-muted | ||
bg-muted-foreground Texto de apoio: descrições, legendas | ||
bg-accent Hover e seleção em menus e listas | ||
bg-accent-foreground |
Status
Status sólidos (ênfase)
| Claro / escuro | Token | Valor |
|---|---|---|
bg-destructive Erro e ação destrutiva | ||
bg-destructive-foreground | ||
bg-success | ||
bg-success-foreground | ||
bg-warning | ||
bg-warning-foreground | ||
bg-info | ||
bg-info-foreground |
Status suave
Status em superfície suave: badges, avisos, linhas de status. Substituem pares crus como bg-amber-100 text-amber-700.
| Claro / escuro | Token | Valor |
|---|---|---|
bg-success-soft | ||
bg-success-soft-foreground | ||
bg-warning-soft | ||
bg-warning-soft-foreground | ||
bg-info-soft | ||
bg-info-soft-foreground | ||
bg-destructive-soft | ||
bg-destructive-soft-foreground |
IA e automação
IA e automação: agente ativo, cadência, sugestão do bot
| Claro / escuro | Token | Valor |
|---|---|---|
bg-ai | ||
bg-ai-foreground | ||
bg-ai-soft | ||
bg-ai-soft-foreground |
Gráficos
Séries de gráfico, nesta ordem. Paleta validada contra o fundo branco dos cards (separação para daltonismo; pior par adjacente ΔE 9.1). chart-3, chart-4 e chart-5 ficam abaixo de 3:1 com o branco: toda série precisa de rótulo ou legenda, nunca só a cor.
| Claro / escuro | Token | Valor |
|---|---|---|
bg-chart-1 | ||
bg-chart-2 | ||
bg-chart-3 | ||
bg-chart-4 | ||
bg-chart-5 | ||
bg-chart-6 |
Sidebar
Navegação lateral dos sistemas
| Claro / escuro | Token | Valor |
|---|---|---|
bg-sidebar | ||
bg-sidebar-foreground | ||
bg-sidebar-primary | ||
bg-sidebar-primary-foreground | ||
bg-sidebar-accent | ||
bg-sidebar-accent-foreground | ||
bg-sidebar-border | ||
bg-sidebar-ring |
Chat
Conversas no estilo WhatsApp
| Claro / escuro | Token | Valor |
|---|---|---|
bg-chat-outgoing | ||
bg-chat-outgoing-foreground | ||
bg-chat-selected |
Redes sociais
Cores oficiais das redes sociais (iguais nos dois temas)
| Claro / escuro | Token | Valor |
|---|---|---|
bg-social-whatsapp | ||
bg-social-instagram | ||
bg-social-tiktok | ||
bg-social-youtube | ||
bg-social-linkedin | ||
bg-social-facebook |