Fundamentos
Cor
Quatro cores de marca, uma escala de tom. O resto é neutro de Graffiti e cor de estado.
Cores de marca#
Black, Graffiti, Vivid Blue e White. Nenhuma outra cor é de marca.
#000000 · 0 · 0 · 0
Black
Robustez. Fim da escala corporativa, fundo da superfície escura.
#2E3440 · 46 · 52 · 64
Graffiti
Credibilidade. Tinta de texto, sidebar, dock e toda sombra.
#0061F1 · 0 · 97 · 241
Vivid Blue
Confiança e tecnologia. Ação principal, foco e luz.
#FFFFFF · 255 · 255 · 255
White
Transparência. Papel onde o dado mora.
Escala de tom#
Cada tela escolhe onde pousa. Relatório e dinheiro puxam para o corporativo; convite e ação puxam para o popular.
corporativo
Extrato, relatório, dinheiro.
equilíbrio
Navegação, agente, painel.
popular
Convite, ação, onboarding.
background: var(--hibou-gradient);Neutros e estado#
Funcionais, nunca de marca. Cor de estado aparece como ponto, brilho e anel; o texto usa a variante -ink.
canvas
#F3F5F8
hibou-bg
Fundo da aplicação. Nunca recebe dado direto; o dado mora no papel.
paper
#FFFFFF
hibou-card
Cartão, tabela, formulário, diálogo.
wash
#EEF0F3
hibou-wash
Skeleton e áreas rebaixadas.
muted
#686D75
hibou-muted
Texto de apoio, rótulo de máquina, ícone inativo.
success
#2BC155
hibou-success
Concluído, aplicado, liquidado. Texto usa success-ink.
warning
#FFBC11
hibou-warning
Aguardando decisão, variação ruim. Texto usa warning-ink.
danger
#F94687
hibou-danger
Falha, ação destrutiva. Texto usa danger-ink.
secondary
#A02CFA
hibou-secondary
Rascunho, experimento. Nunca como ação principal.
Contraste#
Calculado aqui, a partir dos tokens. Se um token mudar, esta tabela muda junto.
| Amostra | Par | Uso | Razão | WCAG |
|---|---|---|---|---|
| Aa 123 | ink / paper | Texto principal | 12.49:1 | AAA |
| Aa 123 | muted / paper | Texto de apoio | 5.21:1 | AA |
| Aa 123 | muted / canvas | Apoio sobre canvas | 4.77:1 | AA |
| Aa 123 | primary-deep / paper | Link, valor de filtro | 8.02:1 | AAA |
| Aa 123 | white / primary | Botão primário | 5.28:1 | AA |
| Aa 123 | white / graffiti | Noite, botão night | 12.49:1 | AAA |
| Aa 123 | success-ink / paper | Texto de sucesso | 5.42:1 | AA |
| Aa 123 | warning-ink / paper | Texto de aviso | 5.49:1 | AA |
| Aa 123 | danger-ink / paper | Texto de erro | 5.58:1 | AA |
| Aa 123 | success / paper | Só ponto e brilho, nunca texto | 2.37:1 | falha |
| Aa 123 | warning / paper | Só ponto e brilho, nunca texto | 1.69:1 | falha |
Success e warning puros não servem para texto sobre papel. Por isso existem success-ink, warning-ink e danger-ink: o Badge, o ErrorBanner e o delta do MetricWidget já usam essas variantes.
Todas as cores#
Tokens color.* com variável CSS e classe Tailwind.
| Token | Valor | CSS | Tailwind | |
|---|---|---|---|---|
| color.primary | #0061F1 | --hibou-primary | hibou-primary | |
| color.primaryDeep | #0048B8 | --hibou-primary-deep | hibou-primary-deep | |
| color.primaryLight | #1672FF | --hibou-primary-light | hibou-primary-light | |
| color.black | #000000 | --hibou-black | hibou-black | |
| color.graffiti | #2E3440 | --hibou-graffiti | hibou-graffiti | |
| color.white | #FFFFFF | --hibou-white | hibou-white | |
| color.night | #2E3440 | --hibou-night | hibou-night | |
| color.secondary | #A02CFA | --hibou-secondary | hibou-secondary | |
| color.secondaryInk | #6B21A8 | --hibou-secondary-ink | hibou-secondary-ink | |
| color.graffitiDeep | #15181E | --hibou-graffiti-deep | hibou-graffiti-deep | |
| color.graffitiLight | #383F4D | --hibou-graffiti-light | hibou-graffiti-light | |
| color.bg | #F3F5F8 | --hibou-bg | hibou-bg | |
| color.card | #FFFFFF | --hibou-card | hibou-card | |
| color.cardElevated | #FFFFFF | --hibou-card-elevated | hibou-card-2 | |
| color.wash | #EEF0F3 | --hibou-wash | hibou-wash | |
| color.ink | #2E3440 | --hibou-ink | hibou-ink | |
| color.muted | #686D75 | --hibou-muted | hibou-muted | |
| color.text | #2E3440 | --hibou-text | hibou-text | |
| color.success | #2BC155 | --hibou-success | hibou-success | |
| color.successInk | #157A38 | --hibou-success-ink | hibou-success-ink | |
| color.warning | #FFBC11 | --hibou-warning | hibou-warning | |
| color.warningInk | #8A6200 | --hibou-warning-ink | hibou-warning-ink | |
| color.danger | #F94687 | --hibou-danger | hibou-danger | |
| color.dangerInk | #C2256A | --hibou-danger-ink | hibou-danger-ink | |
| color.border | #E3E6EE | --hibou-border | hibou-border | |
| color.borderSoft | #EEF0F5 | --hibou-border-soft | hibou-border-soft | |
| color.ring | #0061F1 | --hibou-ring | hibou-ring |
Regras#
Faça
- Uma ação primária azul por área.
- Estado como ponto, anel e brilho.
- Texto de estado na variante -ink.
- Sombras tingidas de Graffiti.
Evite
- Criar cor nova para um domínio (estágio, plano, prioridade). Mapeie para um tom do Core.
- Texto em success ou warning puros.
- Hex solto no código de produto: use hibou-* ou var(--hibou-*).
- Black como sombra.