# Color

Every colour a component may use, named by its job, with its value in light, dark and high contrast side by side.

Pick a token by its job, not by its colour. The name stays the same in every mode; the value changes.

- **Surfaces** for backgrounds, **text** for words, **lines** for borders and dividers.
- **Brand** for links and the main action; the **fill** tokens behind white text.
- **Status** for success, warning, danger and information, and nothing else.
- **Sidebar**, **inputs** and **code syntax** for those components only.
- **Charts** for the series, the empty bar and the grid of a chart, and nothing else.

Each token shows its job, then its value in light, dark and high contrast, side by side. One click on a name selects all of it, ready to copy. In Figma the same names are variables: see [Tokens in Figma](https://nandovejer.github.io/luz/docs/tokens/figma/).

**All 63 semantic tokens, in 10 groups**

Values: `tokens.json`, `classes.json`.