# Design tokens and themes

> A design token is a named variable for a visual value such as a color, size, or font; a theme is a set of tokens that styles a whole dashboard at once.

Canonical: https://dvt.dev/glossary/design-tokens/

A design token is a named variable for a single visual value, such as a color, font, size, or spacing, and a theme is a complete set of tokens that defines the look of a dashboard or an entire organization.

Tokens replace hard-coded styling. Instead of each chart carrying its own hex codes, charts refer to names like `chart.series.1`, and changing the token changes every chart that uses it.

## How it works in dvt

In dvt, every visual property is a named token, down to the gap between an axis and its title. A theme lives in the [dashboard spec](https://dvt.dev/glossary/dashboard-spec) and resolves in tiers: primitive tokens hold raw values (a specific blue), semantic tokens express intent and point at primitives (the series palette, the primary text color), and component tokens set defaults for a panel type. A dashboard can then set explicit overrides, and a single [panel](https://dvt.dev/glossary/dashboard-panel) can override those.

```json
{ "theme": {
    "tokens": { "primitive": {}, "semantic": {} },
    "overrides": { "chart.series.1": "#5BBFBA", "text.primary": "#1F2933" }
} }
```

Org and dashboard themes cascade, so a brand color set once at the org level reaches every dashboard. Built-in presets such as `exec-light` and `exec-brand` restyle a whole dashboard with one property, `theme.preset`, and because themes are plain data in the spec, an [agent](https://dvt.dev/glossary/agent-built-dashboard) can restyle a dashboard as precisely as a designer can.

## Related terms

- [Dashboard spec](https://dvt.dev/glossary/dashboard-spec)
- [Panel (dashboard element)](https://dvt.dev/glossary/dashboard-panel)
- [Spec validation](https://dvt.dev/glossary/spec-validation)
- [Dashboards as code, the dvt implementation](https://dvt.dev/solutions/dashboards-as-code)