Design tokens and themes
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 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 can override those.
{ "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 can restyle a dashboard as precisely as a designer can.