Colors
Pulso v3 é light-first, com dark mode editorial near-black. A identidade não depende do roxo: cor comunica estado, risco e origem; estrutura, tipografia e ritmo carregam reconhecimento.
Superfícies
| Token | Light | Dark | Uso |
|---|---|---|---|
--background | #F5F4FA | #0F0C1A | Fundo de página |
--foreground | #171629 | #F6F3FF | Texto principal |
--card | #FFFFFF | #151126 | Cards e painéis |
--muted | #F1EEFA | #1B1630 | Áreas secundárias |
--elevated | #ECE7F8 | #221B3D | Superfície acima do card |
--border | #DDD7EE | #302A50 | Hairlines e separadores |
Hierarquia de texto
| Token | Light | Dark | Uso |
|---|---|---|---|
--fg-strong | #0A0A14 | #FFFFFF | Títulos críticos |
--fg | #171629 | #F6F3FF | Texto padrão |
--fg-secondary | #4A4961 | #C9C3E6 | Labels e subtítulos |
--fg-muted | #73718A | #9891B8 | Suporte |
--fg-subtle | #706C88 | #9189B5 | Metadados discretos |
--fg-ghost | #C5C2D2 | #4E4775 | Elementos quase inativos |
Marca e ação
| Token | Light | Dark | Uso |
|---|---|---|---|
--primary | #6C46F5 | #8A63FF | Ação primária e origem IA |
--primary-hover | #5C39DA | #9B7BFF | Hover |
--primary-pressed | #4D2FD0 | #6C46F5 | Pressed |
--primary-soft | #EEE8FF | #2A1F55 | Fundo de baixa intensidade |
--ring | color-mix(...) | color-mix(...) | Focus ring |
Use roxo como acento de ação ou proveniência, não como banho visual da página.
Risco operacional
A taxonomia canônica é stable / monitor / attention / high / critical. safe e medium existem só como aliases de retrocompatibilidade.
| Nível | Tokens | Uso |
|---|---|---|
stable | --risk-stable-* | Situação sob controle |
monitor | --risk-monitor-* | Acompanhar sem escalada |
attention | --risk-attention-* | Atenção necessária |
high | --risk-high-* | Escalada provável |
critical | --risk-critical-* | Ação imediata |
Cada nível possui text, bg e border. Combine sempre cor + texto + forma; cor nunca é o único indicador.
Delta de métricas
Tokens --delta-success, --delta-warn, --delta-neutral, --delta-info e --delta-error descrevem movimento de métrica, não risco do caso.
<span style={{ color: "var(--delta-warn)" }}>+18% em 2h</span>Origem de IA
A v3 adiciona tokens para conteúdo assistido pela Cris:
| Token | Valor | Uso |
|---|---|---|
--ai-marker-border | 2px solid var(--primary) | Borda de bloco gerado/assistido |
--ai-marker-bg-mix | 4% | Fundo sutil com primary |
Use junto de kicker explícito (Escrito com Cris) e metadados auditáveis quando houver proveniência.
Sidebar
A sidebar usa chrome fixo near-black em light e dark: --sidebar: #0F0C1A. Ela é uma exceção intencional para estabilidade operacional e reconhecimento do produto.