Paleta
Cores
Paleta única da marca, sem modo claro. Fundo escuro predominante, dourado como acento, nunca como fundo de bloco grande. Ver também Princípios e proibições.
Dourado
rgb(212, 175, 55) · var(--color-dourado)
Ouro claro
rgb(242, 212, 122) · var(--color-ouro-claro)
Preto (fundo)
rgb(10, 10, 10) · var(--color-fundo)
Grafite
rgb(26, 26, 26) · var(--color-grafite)
Branco (texto)
rgb(255, 255, 255) · var(--color-texto)
Erro
rgb(192, 57, 43) · var(--color-erro)
Variações de opacidade
Tons intermediários usados o tempo todo na interface, sempre como fração de opacidade de um token já existente, nunca como cor nova.
dourado/10
Hover e fundo sutil de item ativo
dourado/20
Borda padrão de Card e divisores
dourado/40
Borda em estado ativo/selecionado
texto/70
Parágrafo e texto secundário
texto/50
Legenda e metadado
texto/40
Rótulo auxiliar (uppercase, tracking largo)
Quando usar cada cor
| Cor | Onde usar | Onde não usar |
|---|---|---|
| Dourado / Ouro claro | Acento: título, ícone ativo, borda de destaque, botão principal | Fundo de bloco grande, texto corrido extenso |
| Preto (fundo) | Fundo de página, base de todo o site | Texto sobre fundo já escuro |
| Grafite | Fundo de Card, painel lateral, superfície elevada sobre o preto | Fundo de página inteira |
| Branco (texto) | Corpo de texto, título sobre fundo escuro | Grandes áreas sólidas (vira excesso de contraste) |
| Erro | Ação destrutiva (remover, cancelar cadastro), alerta crítico | Qualquer uso decorativo ou de destaque positivo |