Theme tokens

The runtime injects its own stylesheets into every published dashboard, scoped under .drt so they never fight your page CSS. Their colours, greys and type stacks come from custom properties on :root, which is the retint surface.

This page is the exhaustive list. The step-by-step is Brand and design a dashboard.

The core palette

Defined in the stylesheet every dashboard loads.

Token	Default	What it paints
--drt-blue	#2563eb	Bars, lines, dots, focus borders, hover accents.
--drt-blue-700	#1d4ed8	The hover state of a bar.
--drt-blue-soft	#eff6ff	Tinted backgrounds.
--drt-ink	#0f172a	Primary text, KPI figures, table cells.
--drt-muted	#475569	Secondary text.
--drt-subtle	#64748b	Labels, captions, the disclosure lines under a tile.
--drt-faint	#94a3b8	Axis numbers, disabled states.
--drt-line	#e2e8f0	Hairline borders.
--drt-line-strong	#cbd5e1	Control borders and chart baselines.
--drt-sunken	#f8fafc	Table headers, row hover, pressed states.
--drt-surface	#fff	Card and control backgrounds.
--drt-grid	#eef2f6	Chart gridlines and table row rules.
--drt-sans	'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif	All prose and labels.
--drt-mono	ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace	Every figure, with tabular lining numerals.

Keep the grey ramp descending. --drt-subtle carries text held to WCAG AA (4.5:1), so lightening it past --drt-faint makes several disclosure lines fail contrast.

The multi-series palette

Five slots, defined in the stylesheet a multi-dataset dashboard loads. Each is checked at 3:1 or better on white, which is the bar a mark has to clear, and the set is colourblind-checked as a group.

Token	Default
--drt-series0	#2563eb
--drt-series1	#0d9488
--drt-series2	#d97706
--drt-series3	#db2777
--drt-series4	#65a30d

--drt-series0 is the same blue as --drt-blue, so retinting one and not the other leaves a single-series chart and the first slot of a multi-series chart disagreeing.

Five is also a hard ceiling on a pie or donut, because a slice's identity is carried by its colour and there is no sixth validated slot. Past five slices the tile refuses rather than reusing a colour.

Two tokens are read but never defined

Token	Where it is read	What happens if you leave it
--drt-accent	The drill-down's in-table descend control	It is read with no fallback, so the declaration is dropped and the control keeps its inherited text colour.
--drt-ease	Every transition, and every animation but one	It is read as var(--drt-ease, ease), so the fallback applies and motion is unaffected. The loading pulse is the exception: it hardcodes ease-in-out and your value will not reach it.

Defining --drt-accent is the only way to colour that control. Both are ordinary author hooks: set them on :root like any other token.

Colours that are not tokenized

In the core stylesheet there are exactly two, and both are the blue at low alpha, so a retint that changes --drt-blue alone leaves them behind:

Rule	Literal value	What it is
.drt-area	rgba(37,99,235,.10)	The fill under an area chart.
.drt-select:focus-visible	rgba(37,99,235,.30)	The focus ring on a filter dropdown.

Override both by class, not by token:

<style>
.drt-area { fill: color-mix(in srgb, var(--drt-blue) 12%, transparent) !important; }
.drt-select:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--drt-blue) 22%, transparent) !important;
}
</style>

Beyond the core stylesheet there are more. The sheets loaded by the newer tiles carry their own literals: the same low-alpha blue on the focus ring of the multi-select, the drill-down modal and the reset pill; the heatmap's two colour ramps; the treemap's white label fill; and the slate used in modal and pill shadows. None of those is retintable by a token, and the heatmap ramps in particular are chosen for the ordering they encode rather than for brand fit.

If a retint has to reach them, target the classes the same way, and re-check contrast afterwards: a mark needs 3:1 against its background and text needs 4.5:1.

The cascade

The runtime injects its stylesheets last, at boot. A plain :root { --drt-blue: ... } in your document head therefore loses to the runtime's own :root on source order. Mark every declaration !important, which wins regardless of order.

Check it worked

Publish, open the dashboard, and look at four things a partial retint leaves behind: the fill under an area chart, the focus ring when you tab into a filter, the first slot of a multi-series legend, and the descend control inside a drill-down. Each is served by one of the surfaces above rather than by --drt-blue.