Themes
Use a theme when every panel should share one palette, font, and radius, with a preset as the baseline and tokens on top.
What you can do
- A dashboard
themehas three parts:preset(exec-light,exec-dark, orexec-brand),tokenswith the requiredprimitiveandsemanticmaps plus an optionalcomponentmap, andoverrides. - Every token value is a string: a hex or CSS colour, a size such as
8px, a font stack, or a reference to another token in braces, like{color.brand}. - Presets are a baked tier between the org baseline and your own tokens:
exec-lightandexec-darkset 25 keys (page, panel, text, six chart series, grid, axes, tooltip, semantics, font) andexec-brandsets 17, leaving page colour and chart series to your tokens. - Token families you will reach for:
page.background,panel.background,panel.border.color,panel.radius,text.primary,text.secondary,text.muted,chart.series.1tochart.series.6,semantic.positive,semantic.negative,semantic.warning, andtypography.fontFamily. - A page can restyle itself:
pages[].themetakes its ownpresetandoverrides, so one dashboard can mix a light report page with a dark canvas page. - Panels layer on top with
overridesof their own, andcolorfields anywhere accept a token reference such as{chart.series.2}.
Applies at the dashboard root (theme), per page (pages[].theme), and per panel (overrides); this is the one page in this section that documents a spec object rather than a panel type.
Spec
View spec
{
"theme": {
"preset": "exec-dark",
"tokens": {
"primitive": {
"color.brand": "#818CF8",
"color.brand-2": "#45C7BC",
"color.gold": "#E0B450",
"card.radius": "12px"
},
"semantic": {
"chart.series.1": "{color.brand}",
"chart.series.2": "{color.brand-2}",
"panel.radius": "{card.radius}",
"semantic.warning": "{color.gold}"
}
},
"overrides": {
"panel.border.color": "#334155",
"typography.fontFamily": "Inter Variable, Inter, sans-serif"
}
}
}preset: "exec-dark" supplies the dark baseline; the primitive map declares raw colours and one radius, the semantic map points spec-facing keys at them with {...} references, and overrides pins two values on top.
Try it live
Open the revenue-overview template in the Builder
Open the revenue-overview template: its theme sets preset to exec-dark with its own primitive palette ({color.gold}, {color.teal}) referenced from the canvas panels rev-rule, rev-stat-total, rev-stat-aov, rev-trend, and rev-candle.
Build it in dvt
Every block on this page is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.
Follow the build
dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.