Cores
Base neutra extrema: a UI vive na escada preto → cinza → branco. Violet AI é o único hue vivo e permanece residual. Tons derivados via color-mix — não são cores de marca. Fonte: brand/tokens/colors.css.
Cores-base (marca)
- obsidian
#0D0D0DBase escura e profundidade - steel
#3A3A3CEstrutura e superfícies - mist
#98989DTexto secundário e elementos neutros - white
#F2F2F2Texto principal sobre escuro e fundo claro - paper
#FFFFFFPapel: card e overlay no tema claro - ponto-lavanda
#C084ECPonto — o pingo do i do wordmark; assinatura no tema escuro - violet-ai
#7C3AEDPonto no tema claro (violeta profundo)
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 18% + whiteHover/fill no claro; surface-elevated clara - mist-strong
mist 70% + obsidianBorda sutil e fills no escuro - neutral-100
white 92% + obsidianSuperfície elevada no claro - neutral-200
white 82% + obsidianSeleção e hover forte (claro) - neutral-300
white 70% + obsidianAcento neutro no escuro - neutral-400
white 56% + obsidianTexto secundário no escuro - neutral-500
white 42% + obsidianBase do fill de campo no escuro - neutral-600
white 30% + obsidianSérie de gráfico e separadores - neutral-700
white 20% + obsidianSeleção no escuro - neutral-800
white 12% + obsidianSuperfície elevada no escuro - neutral-900
white 6% + obsidianSuperfície base no escuro - violet-soft
violet-ai 10% + whiteAcento residual no claro — uso mínimo - violet-muted
violet-ai 24% + obsidianAcento residual no escuro — uso mínimo - violet-strong
violet-ai 82% + obsidianHover do acento residual
Papéis semânticos
Escuro
- bg
- obsidian
- surface
- white 9% + obsidian
- surfaceElevated
- white 14% + obsidian
- surface3
- white 18% + obsidian
- text
- white
- textMutedForeground
- white 64% + obsidian
- border
- transparent
- borderSubtle
- transparent
- field
- neutral-500 22% + transparent
- accent
- neutral-300
- accentSoft
- neutral-800
- action
- white
- actionForeground
- obsidian
- actionSoft
- neutral-500 22% + transparent
- actionHover
- neutral-200
- signal
- neutral-300
- hover
- white 7% + transparent
- selection
- neutral-700
- focus
- signature
- scrim
- obsidian 64% + transparent
- contour
- 0 0 0 1px color-mix(in srgb, white 8%, transparent)
- signature
- ponto-lavanda
- signatureSoft
- ponto-lavanda 16% + transparent
- signatureForeground
- obsidian
- selected
- white 10% + transparent
- pressed
- text 10% + transparent
- divider
- white 6% + transparent
Claro
- bg
- white
- surface
- paper
- surfaceElevated
- obsidian 5% + paper
- surface3
- paper
- text
- obsidian
- textMutedForeground
- steel
- border
- transparent
- borderSubtle
- transparent
- field
- neutral-100
- accent
- steel
- accentSoft
- neutral-200
- action
- obsidian
- actionForeground
- white
- actionSoft
- neutral-400 20% + transparent
- actionHover
- neutral-800
- signal
- steel
- hover
- obsidian 5% + transparent
- selection
- neutral-200
- focus
- signature
- scrim
- obsidian 32% + transparent
- contour
- 0 0 0 1px color-mix(in srgb, obsidian 7%, transparent)
- signature
- violet-ai
- signatureSoft
- violet-ai 10% + transparent
- signatureForeground
- paper
- selected
- obsidian 7% + transparent
- pressed
- text 10% + transparent
- divider
- obsidian 6% + transparent
A UI vive na escada neutra pura (sem matiz). A cor de marca é o Ponto: sinal pequeno de ativo, foco, ao vivo ou destaque de dado — nunca superfície.
Ponto (--rf-signature) passa AA para texto nos dois temas (lavanda 7,2:1 no escuro; violeta 5,1:1 no claro). Sobre o overlay escuro fica em 4,5:1 — lá use só como sinal, não texto pequeno.
Direção flat: sem bordas de layout (--rf-border = transparent). A delimitação vem de superfície, fill de campo e sombra.
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 neutros. O acento é a escada de cinza; Violet AI fica reservado a detalhes mínimos.
Status (funcionais)
Sempre com texto ou ícone. São as únicas cores 'de verdade' da UI — fora da identidade.
Sucesso
Atenção
Erro
- Escuro
- #4ADE80 / #FBBF24 / #FB7185
- Claro
- #147639 / #92400E / #BE123C
Contraste (WCAG)
| Combinação | Razão | Uso | Nota |
|---|---|---|---|
| White → Obsidian | 17,36:1 | Texto normal (≥4,5:1) | Texto principal no tema escuro |
| Mist → Obsidian | 6,77:1 | Texto normal (≥4,5:1) | Texto secundário no tema escuro |
| White → Steel | 10,14:1 | Texto normal (≥4,5:1) | Texto em superfície Steel |
| Mist → Steel | 3,95:1 | Texto grande (≥3:1) | Só texto grande ou ícone sobre Steel |
| Obsidian → White | 17,36:1 | Texto normal (≥4,5:1) | Texto principal no tema claro |
| Steel → White | 10,14:1 | Texto normal (≥4,5:1) | Texto secundário no claro |
| Ponto lavanda → Obsidian | 7,18:1 | Texto normal (≥4,5:1) | Ponto no escuro: foco, rótulo e série herói |
| Violet AI → White | 5,09:1 | Texto normal (≥4,5:1) | Ponto no claro sobre o fundo |
| Violet AI → Paper | 5,70:1 | Texto normal (≥4,5:1) | Ponto no claro sobre card e overlay |
| White → Violet AI | 5,09:1 | Texto normal (≥4,5:1) | Texto sobre bloco de assinatura (claro) |
| Obsidian → Ponto lavanda | 7,18:1 | Texto normal (≥4,5:1) | Texto sobre bloco de assinatura (escuro) |