data visualization
color palettes
4 paletas dedicadas a dataviz: categórica (séries sem ordem), sequencial (intensidade ordenada), divergente (extremos + neutro), status (estados de sistema). Tokens prefixados --dv-*.
categórica · 8 cores
Pra séries qualitativas (categorias sem ordem natural). Cores ordenadas por contraste mútuo — use sempre da 1 pra cima.
01
02
03
04
05
06
07
08
| token | hex | nome brand | quando usar |
|---|---|---|---|
| --dv-cat-1 | #32FA96 | Code | série principal · destaque |
| --dv-cat-2 | #AA78E6 | Purple | série secundária |
| --dv-cat-3 | #D79B2E | Script | terceira |
| --dv-cat-4 | #B3D9FE | Sec Blue | quarta |
| --dv-cat-5 | #FF9ECF | Sec Pink | quinta |
| --dv-cat-6 | #3C433C | Dos | sexta (escura — usa em fundo claro) |
| --dv-cat-7 | #5CFFAA | Code Light | sétima |
| --dv-cat-8 | #D3BAF5 | Purple Light | oitava |
aplicação — multi-line categórica
as 4 primeiras cores em uso real
hackerclubesinclusãominasmão massa
demonstração
sequencial · 7 steps · verde
Pra dados ordenados (intensidade, frequência). Gradiente do mais claro ao mais escuro, sem cor neutra no meio.
01
02
03
04
05
06
07
Tokens --dv-seq-1 a --dv-seq-7
divergente · 7 steps · vermelho→neutro→verde
Pra dados com ponto neutro e dois extremos opostos (ex: variação positiva/negativa, satisfação 1-5).
01
02
03
04
05
06
07
Tokens --dv-div-1 a --dv-div-7 · meio (04) é o neutro
status · 4 cores
Estados de sistema. Use sempre acompanhados de ícone ou texto.
success
warning
error
info
Tokens --support-success / warning / error / info
regras
use
não use
código
/* uso direto via token */
.bar-1 { fill: var(--dv-cat-1); }
.bar-2 { fill: var(--dv-cat-2); }
/* heatmap sequencial */
.cell-low { background: var(--dv-seq-1); }
.cell-mid { background: var(--dv-seq-4); }
.cell-high { background: var(--dv-seq-7); }