Cores primárias
As três cores que mais aparecem e que tornam a marca reconhecível. Clique em uma cor para copiar o HEX.
Petróleo
#226789
rgb(34, 103, 137)
--primary
Ações, links e destaques
Petróleo profundo
#1b4c64
rgb(27, 76, 100)
--backdrop
Blocos de cor e brilho de fundo
Preto
#0c0c0c
rgb(12, 12, 12)
--background (escuro)
Fundo do tema escuro
Cores de apoio
Petróleo claro
#3a8fba
rgb(58, 143, 186)
--link (escuro)
Links e ícones no tema escuro
Branco
#ffffff
rgb(255, 255, 255)
--background (claro)
Fundo do tema claro e texto sobre petróleo
Cinza
#a0a0a0
rgb(160, 160, 160)
--muted-foreground (escuro)
Texto secundário no tema escuro
Vermelho ênfase
#dc2626
rgb(220, 38, 38)
--destructive
Alertas e erros
Tokens no código
As cores vivem em brand/theme.css como variáveis HSL. Os componentes nunca usam cor fixa: trocar um token muda o sistema inteiro.
| Token | Valor | Descrição |
|---|---|---|
| --primary | 200 60% 34% | Petróleo — botões, foco e destaques (tema claro) |
| --primary (escuro) | 200 57% 38% | Petróleo um pouco mais claro para o tema escuro |
| --link | 200 60% 34% | Links e ícones; no tema escuro muda para 200 52% 48% |
| --background | 0 0% 100% | Branco — fundo do tema claro; escuro usa 0 0% 5% |
| --foreground | 0 0% 9% | Texto do tema claro; escuro usa 0 0% 93% |
| --backdrop | 200 57% 25% | Petróleo profundo — brilho radial do tema escuro |
| --destructive | 0 72% 51% | Vermelho — erros e ações destrutivas |