# 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.

## Token groups

| Group | Examples | Used for |
| --- | --- | --- |
| Surfaces | `bg/canvas`, `surface/panel`, `stroke/card` | Page, panels, lines |
| Text | `text/primary`, `text/secondary`, `text/on-data` | Labels and values |
| Data | `data/primary`, `data/seq-*`, `data/cat-1…10` | Marks and series |
| Status | `status/success`, `warning`, `danger`, `info` | States and deltas |
| Effects | `effect/*`, `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

| Token | Use it for |
| --- | --- |
| `data/primary` | The main series, or one measure |
| `data/seq-1…n` | Ordered ramps: heat, intensity, rank |
| `data/cat-1…10` | Categories, in order |
| `status/*` | Meaning: up, down, warning, info |
| `data/area-top · bottom` | Area fades under a line |
| `text/on-data · on-tint` | Labels on marks and on light cells |
| `surface/skeleton` | Loading blocks |

- [Sizes](https://usechartory.com/docs/sizes): What changes as a chart gets smaller.