Overview

Charts do not share the UI's semantic tokens. They have a layer of their own, with five canonical schemes. The separation is not aesthetic - it is technical: each shape of data needs a specific chromatic treatment, and mixing them produces wrong charts (a sequential gradient applied to nominal categories suggests an order that is not there).

This is layer 3 of 3: chart tokens reference primitives and change with light and dark mode, but, unlike semantic tokens, not with the theme (Status is the one exception, see below). The full picture lives in the three-layer model.

The five schemes

Why five and not three

The grounding for the first three comes from ColorBrewer (Cynthia Brewer, Penn State), the canonical dataviz reference since the 90s. The other two are contributions from product design systems:

• Status comes from Cloudscape (AWS) and Carbon (IBM), UI systems that had to name state colors for dashboards.
• Comparison is an internal Kalvner DS convention, covering a use case that is everywhere in dashboards (highlight one) but had no canonical name in the literature.

The decision matrix

To pick the right scheme, start from the shape of the data, not from taste:

See the Chart page in the UI section for each type rendered and the inverse matrix (choosing by the reader's question).

Variation per mode, not per theme

Chart tokens change with the mode, not with the theme. The base layer declares every scale twice: in :root for light and in .dark for dark. Categorical moves one step darker in dark mode; Sequential, Divergent and the Comparison mutes invert, so their strong end climbs towards light. No theme declares a chart token, so the scales are the same under every theme, except Status, which aliases --success, --warning, --destructive and --muted-foreground and follows a theme that overrides them (today the neutral series in Claude and Purple). A brand palette is for chrome, and series identity needs hues that separate (see Categorical).

That means a chart built with --color-chart-cat-1 paints the same series colors under every theme and switches only between light and dark, without the component knowing. For the designer, the implication is:

• Do not pick the chart scheme by chromatic taste; pick it by the shape of the data.
• Check accessibility in both modes and on each theme's surfaces: the series stay the same, but the background behind the chart changes per theme.
• The 5 schemes keep the same intent in both modes - Sequential is still "ordered by lightness", Status is still "semantic state", and so on. Only the concrete color changes.

Accessibility first

All five schemes were designed with color-blind safety at the center:

• Sequential reads through lightness, not hue.
• Divergent uses Red-Blue, not Red-Green - because Red-Green is inaccessible to 8% of men with color vision deficiency.
• Categorical uses hues that stay perceptually distinct under protanopia, deuteranopia and tritanopia simulation.
• Status must always be paired with a label, icon or pattern - color alone is never the only channel.

How to reference them in components

Chart tokens are bridged into the Tailwind utility generator via @theme inline. You can consume them in three ways:

// 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 Gremorie (consumido pelos helpers de tooltip / legenda)
const config = {
  revenue: { label: "Receita", color: "var(--color-chart-cat-1)" }
} satisfies ChartConfig;

For the complete charting system - ChartContainer, tooltip, legend and the six covered types - see Chart.