---
title: Theme tokens
description: Every --drt- custom property the dashboard runtime defines, its default value, and the colours that are not tokenized.
updated: 2026-08-05
---

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](/guides/brand-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:

```html
<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`.