Cores
O Pulso v2 trata cor como sinal, não como decoração. Fundo neutro frio, marca apenas em acento, hairlines no lugar de sombras pesadas. Cinco tons de risco calibrados em modo matte para legibilidade contínua.
Superfícies
Hierarquia de fundo. Da camada mais distante (page) à mais próxima do usuário (popover). No premium, raramente usamos mais que 2 camadas — densidade vem de bordas, não de elevação.
Texto
Cinco níveis de hierarquia. Nunca use opacidade para criar hierarquia — sempre os tokens.
Marca
Acento operacional — só aparece em ação primária, foco e métricas-chave. Nunca como tinta de fundo geral (era o erro do v1).
Níveis de Risco
Cinco níveis. Cada um com bg / border / text. Cores calibradas em matte — não confiamos só em cor: sempre acompanhamos com texto e ícone.
| Nível | Token | Preview | Uso |
|---|---|---|---|
| Stable | --risk-stable | Estável | Sem atividade relevante |
| Monitor | --risk-monitor | Monitorar | Atividade abaixo do limiar |
| Atenção | --risk-attention | Atenção | Atenção operacional |
| Alto | --risk-high | Alto | Alerta significativo |
| Crítico | --risk-critical | Crítico | Crise ativa |
Semânticas
Feedback de ação. Cada cor traz seu par *-bg e *-border.
Paleta de Charts
Oito tons calibrados para visualização de dados — começam em marca e se distanciam em hue de forma perceptualmente linear.
Como usar
Em CSS direto, via Tailwind 4, ou em componente.
/* CSS direto */
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
/* Tailwind 4 — todas as classes derivam dos @theme tokens */
<button class="bg-primary text-primary-foreground">Action</button>