Cores
Seis hex oficiais intactos. Tons derivados via color-mix — não são cores de marca. Fonte: brand/tokens/colors.css.
Cores-base (marca)
- obsidian
#0B0F19Base escura e profundidade - steel
#334155Estrutura e superfícies - mist
#94A3B8Texto secundário e elementos neutros - white
#F8FAFCTexto principal sobre escuro e fundo claro - violet-ai
#7C3AEDIdentidade e destaque - cyan-pulse
#06B6D4Sinal técnico e apoio visual
Tons derivados
Método: color-mix(in srgb, brandHue P%, white|obsidian) at fixed stops with identified UI roles only. Cada tom tem papel UI identificado — não expandir sem uso.
- obsidian-soft
obsidian 88% + whitePainel elevado no escuro - steel-soft
steel 55% + whiteBorda/input no claro; superfície neutra suave - steel-strong
steel 82% + obsidianHover e surface-elevated no escuro - mist-soft
mist 32% + whiteHover/fill no claro; surface-elevated clara - mist-strong
mist 70% + obsidianBorda sutil e fills no escuro - violet-soft
violet-ai 16% + whiteSeleção / accent-soft no claro - violet-muted
violet-ai 32% + obsidianSeleção / accent-soft no escuro - violet-strong
violet-ai 82% + obsidianHover de identidade - cyan-soft
cyan-pulse 16% + whiteAction-soft no claro - cyan-muted
cyan-pulse 32% + obsidianAction-soft no escuro - cyan-strong
cyan-pulse 82% + obsidianHover de ação (ambos os temas)
Papéis semânticos
Escuro
- bg
- obsidian
- surface
- steel
- surfaceElevated
- steel-strong
- text
- white
- textMuted
- mist
- border
- mist
- borderSubtle
- mist-strong
- accent
- violet-ai
- accentSoft
- violet-muted
- action
- violet-ai
- actionSoft
- violet-muted
- actionHover
- violet-strong
- hover
- steel-strong
- selection
- violet-muted
- focus
- violet-ai
- signal
- cyan-pulse
Claro
- bg
- white
- surface
- white
- surfaceElevated
- mist-soft
- text
- obsidian
- textMuted
- steel
- border
- steel-soft
- borderSubtle
- mist
- accent
- violet-ai
- accentSoft
- violet-soft
- action
- violet-ai
- actionSoft
- violet-soft
- actionHover
- violet-strong
- hover
- mist-soft
- selection
- violet-soft
- focus
- violet-ai
- signal
- cyan-pulse
Large titles only (≥3:1). Never body, label, caption, or small links.
Dark UI chrome uses Mist borders; light uses Steel-soft. Do not paint Steel border on Steel surface.
Exemplo de título Violet (grande)
Exemplos no tema ativo
Texto principal
Texto secundário
Clear sobre mídia (experimento local) — alternativa legível: glass regular.
Bordas usam --border / --input alinhados a Mist (escuro) e Steel (claro). Cyan Pulse em texto pequeno sobre branco permanece alerta conhecido — use em acentos/gráficos, não em corpo.
Status (funcionais)
Always pair with text or icon. Not brand palette.
Sucesso
Atenção
Erro
- Escuro
- #4ADE80 / #FBBF24 / #FB7185
- Claro
- #15803D / #92400E / #BE123C
Contraste (WCAG)
| Combinação | Razão | Uso | Nota |
|---|---|---|---|
| White → Obsidian | 18,30:1 | Texto normal (≥4,5:1) | Texto principal no tema escuro |
| Mist → Obsidian | 7,47:1 | Texto normal (≥4,5:1) | Texto secundário no tema escuro |
| Cyan Pulse → Obsidian | 7,89:1 | Texto normal (≥4,5:1) | Link / ação em texto no escuro |
| White → Steel | 9,90:1 | Texto normal (≥4,5:1) | Texto em superfície Steel |
| Mist → Steel | 3,90:1 | Texto grande (≥3:1) | Borda Mist sobre Steel — chrome UI escuro |
| Obsidian → White | 18,30:1 | Texto normal (≥4,5:1) | Texto principal no tema claro |
| Steel → White | 9,90:1 | Texto normal (≥4,5:1) | Texto secundário / input no claro |
| Violet AI → White | 5,45:1 | Texto normal (≥4,5:1) | Identidade em claro |
| White → Violet AI | 5,45:1 | Texto normal (≥4,5:1) | Texto em bloco de identidade |
| Obsidian → Cyan Pulse | 7,89:1 | Texto normal (≥4,5:1) | Texto em botão de ação |
| Violet AI → Obsidian | 3,36:1 | Texto grande (≥3:1) | Só títulos grandes — nunca body/label/caption/link pequeno |
| Success dark → Obsidian | 10,99:1 | Texto normal (≥4,5:1) | Status success no escuro (+ texto/ícone) |
| Warning dark → Obsidian | 11,47:1 | Texto normal (≥4,5:1) | Status warning no escuro |
| Error dark → Obsidian | 7,12:1 | Texto normal (≥4,5:1) | Status error no escuro |
| Error dark → Steel | 3,85:1 | Texto grande (≥3:1) | Error sobre Steel: só grande ou evitar |
| Success light → White | 4,79:1 | Texto normal (≥4,5:1) | Status success no claro |
| Warning light → White | 6,78:1 | Texto normal (≥4,5:1) | Status warning no claro |
| Error light → White | 6,01:1 | Texto normal (≥4,5:1) | Status error no claro |
| Mist → White | 2,45:1 | Só decorativo / evitar texto | Evitar Mist como texto em claro |
| White → Cyan Pulse | 2,32:1 | Só decorativo / evitar texto | Evitar White sobre Cyan — use Obsidian |