Skip to content

New: Chartory 1.0. 100 charts free in React, MIT licensed

Read the changelog
DocsFoundationsTokensLast updated Nov 2, 2026

Tokens

Every Hearth chart binds to Foundations variables: 220 tokens for surfaces, text, data, status and effects. Change the mode and all 100+ follow. Signal binds to its own token set. No chart holds a hex.

Foundations4 modes

TokenChartory DarkChartory LightEmberEmber Light
bg/canvas
surface/panel
text/primary
data/primary
data/cat-2

Token groups

GroupExamplesUsed for
Surfacesbg/canvassurface/panelstroke/cardPage, panels, lines
Texttext/primarytext/secondarytext/on-dataLabels and values
Datadata/primarydata/seq-*data/cat-1…10Marks and series
Statusstatus/successwarningdangerinfoStates and deltas
Effectseffect/*shadow/*Elevation and focus

Rules

  • Bind a token, never a hex. A chart with a raw colour stops following the mode.
  • Text on saturated marks uses text/⁠on-data; quiet labels on light ramp cells use text/⁠on-tint.
  • Categories take data/⁠cat-1…n in order; one measure against its target takes data/⁠primary and data/⁠seq-2.

Data colours

TokenUse it for
data/primaryThe main series, or one measure
data/seq-1…nOrdered ramps: heat, intensity, rank
data/cat-1…10Categories, in order
status/*Meaning: up, down, warning, info
data/area-top · bottomArea fades under a line
text/on-data · on-tintLabels on marks and on light cells
surface/skeletonLoading blocks

Stay in the loop

New charts, by email.

Get an email when new chart types and releases ship.

Unsubscribe any time.