Visão geral
Cinco esquemas canônicos para visualização de dados — cada um para uma forma específica de dado, validados em fundamentação acadêmica e prática de DS de produto.
Charts não compartilham os tokens semânticos da UI. Eles têm uma camada própria, com cinco esquemas canônicos. A separação não é estética — é técnica: cada tipo de dado precisa de um tratamento cromático específico, e misturá-los produz gráficos errados (um gradiente sequential aplicado a categorias nominais sugere ordem onde não há).
Os cinco esquemas
Sequential
Gradiente de uma matiz para dados ordenados — heatmaps, choropleths, intensidade.
Categorical
Oito hues distintos para categorias nominais — regiões, departamentos, tipos.
Divergent
Bipolar com pivô neutro — variação acima/abaixo, NPS, sentiment.
Status
Estado semântico discreto — sucesso, aviso, erro, info, neutro.
Comparison
Destaque-um-mute-os-outros — você vs pares, atual vs baseline.
Por que cinco e não três
A fundamentação dos três primeiros vem do ColorBrewer (Cynthia Brewer, Penn State) — referência canônica em dataviz desde os anos 90. Os outros dois são contribuições de DS de produto:
- Status vem do Cloudscape (AWS) e Carbon (IBM) — UI systems que precisaram nomear cores de estado para dashboards.
- Comparison é uma convenção interna do Kalvner DS, para cobrir um caso de uso onipresente em dashboards (destaque-um) que não tinha nome canônico na literatura.
A matriz de decisão
Para escolher o esquema certo, comece pela forma do dado, não pelo gosto:
| Forma do dado | Esquema | Tipo de gráfico recomendado |
|---|---|---|
| Ordenado, low → high (densidade, intensidade) | Sequential | Heatmap, choropleth, Bar com gradiente |
| Nominal sem ordem (regiões, departamentos, tipos) | Categorical | Bar, Line, Area multi-série, Pie |
| Bipolar com pivô (acima/abaixo da média, variação) | Divergent | Bar com baseline, matriz de correlação |
| Estado discreto com semântica (sucesso/erro/aviso) | Status | KPI tile, dashboard de saúde, alert |
| Dois grupos sem polos semânticos (atual/anterior, A/B) | Comparison | Bar / Line com 1 série em destaque |
Veja a página Chart na seção de UI para ver cada tipo renderizado e a matriz inversa (escolha pela pergunta do leitor).
Variação por tema
Os tokens chart mudam por tema, não só os tokens semânticos da
UI. Cada um dos quatro temas (Default, Amber Minimal, Amethyst Haze,
Claude) sobrescreve os valores das variáveis chart no seletor
[data-theme="<id>"] correspondente.
Isso significa que um gráfico construído com --color-chart-cat-1
pinta diferente dependendo do tema ativo no momento do render —
sem o componente saber. Para o designer, a implicação é:
- Não escolha o esquema chart pelo gosto cromático, escolha pela forma do dado. A cor exata vai variar.
- Verifique acessibilidade em todos os 4 temas + 8 modos (light/dark), não só no tema padrão. Um esquema que tem contraste OK no Default pode falhar no Amber.
- Os 5 esquemas mantêm a mesma intenção entre temas — Sequential continua sendo "ordenado por claridade", Status continua sendo "estado semântico", etc. Só a cor concreta muda.
Os Storybook decorators do KDS rodam todos os charts em cada tema × modo (8 combinações), e o Chromatic gata visualmente em cada uma — quando uma combinação ficar inacessível, o build falha.
Acessibilidade primeiro
Todos os cinco esquemas foram desenhados com color-blind safety no centro:
- Sequential lê pela claridade, não pela matiz.
- Divergent usa Red-Blue, não Red-Green — porque Red-Green é inacessível para 8% dos homens com deficiência de visão de cor.
- Categorical usa hues perceptualmente distintos sob simulação de protanopia, deuteranopia e tritanopia.
- Status sempre deve vir acompanhado de label, ícone ou padrão — cor sozinha nunca é o canal único.
Anti-padrão. Não use Red-Yellow-Green (RdYlGn) para Divergent. A KDS não fornece esse esquema nem como opt-in. Adapte para Red-Blue (RdBu).
Como referenciar nos componentes
Os tokens chart são bridgeados para o gerador de utilitários do
Tailwind via @theme inline. Você pode consumi-los de três formas:
// 1. CSS variable direto (recomendado para Recharts)
<Bar fill="var(--color-chart-cat-1)" />
// 2. Utilitário Tailwind gerado automaticamente
<rect className="fill-chart-cat-1" />
// 3. ChartConfig do KDS (consumido pelos helpers de tooltip / legenda)
const config = {
revenue: { label: "Receita", color: "var(--color-chart-cat-1)" }
} satisfies ChartConfig;Para o sistema de gráficos completo — ChartContainer, tooltip,
legenda e os seis tipos cobertos — veja
Chart.