--- title: Style contract description: Every custom property and class the dashboard runtime styles, which your page's own CSS can set or target to restyle every widget. updated: 2026-09-25 --- The runtime draws a widget wherever your page marks an element with `data-dash` (the roles are in [Runtime attributes](/reference/runtime-attributes)), and it styles what it draws with stylesheets of its own. This page is everything those stylesheets expose to your CSS: the custom properties they read, the classes they style, and the states they key on. A check in CI reads this page against the runtime and fails when a token here is not defined, when the runtime defines or styles something this page does not list, or when a class listed here is renamed. So the lists below are complete. ## Your CSS outranks the runtime's Every stylesheet the runtime injects sits in one cascade layer, `drt`, which it declares first in ``. A rule you write outside any layer outranks every layer, and a layer of your own is declared after `drt`, so it outranks it too. **Your CSS beats every runtime rule, whatever its specificity or position, with no `!important`.** The runtime writes no `!important` of its own. The one thing a rule of yours beats only with `!important` is an inline style, and the few colours the runtime writes inline are under [What no token or class reaches](#what-no-token-or-class-reaches). Two ways to restyle, and both work: - **Set the tokens** on your `:root`. Every colour and every font the runtime's stylesheets use comes from them. - **Write rules against the classes.** `.drt-table td { padding: 4px 8px; }` changes every table's cell padding. :::warning{title="A generic rule reaches the widgets too"} A rule such as `svg text { ... }`, `table td { ... }` or `button { ... }` wins over the runtime's class rules, so it restyles every widget as well as your own markup. If you mean it for your own markup only, scope it: `.my-chart svg text`, not `svg text`. ::: Two older-browser cases, which draw the defaults rather than your tokens: - **No cascade layers** (Chrome before 99, Firefox before 97, Safari before 15.4): the runtime's stylesheets go in unlayered, as they did before layers, and there only `!important` beats them. - **No `color-mix()`** (Chrome before 111, Firefox before 113, Safari before 16.2): focus rings, shadows, the detail dialog's backdrop and the fill under an area chart keep their default colours, whatever tokens you set. ## Tokens Set them on `:root`. A default is what the runtime draws when your page sets nothing, so **set every one**, and nothing is left at a default by omission. ### Accent | Token | Default | What it paints | |---|---|---| | `--drt-blue` | `#2563eb` | Bars, lines, points, gauge fills, focus borders and the pending bar, and, mixed with transparency, every focus ring and the fill under an area chart. | | `--drt-blue-700` | `#1d4ed8` | A bar or mark on hover, the View detail button on hover, and the selected mark of a cross-filter. | | `--drt-blue-soft` | `#eff6ff` | Nothing the runtime draws. Defined for your own CSS. | | `--drt-accent` | `currentColor` | The drill-down's breadcrumb links, and a row's descend control on hover. The default is the surrounding text colour. | | `--drt-on-blue` | `#fff` | Text and marks drawn on the accent: the treemap's labels and the check mark in a selected option. | ### Text | Token | Default | What it paints | |---|---|---| | `--drt-ink` | `#0f172a` | Primary text (table cells, figures, dialog text), a waterfall's total and a gauge's target. | | `--drt-muted` | `#475569` | Nothing the runtime draws. Defined for your own CSS. | | `--drt-subtle` | `#64748b` | Labels, captions, legends, the notes under a widget, and a waterfall's decreases. It is held to `4.5:1` contrast, because those notes are text a viewer has to read. | | `--drt-faint` | `#94a3b8` | Axis numbers, separators, disabled controls and control borders on hover. | ### Surfaces and lines | Token | Default | What it paints | |---|---|---| | `--drt-surface` | `#fff` | Card, control, table and dialog backgrounds, and the hairlines between scatter points and treemap rectangles. | | `--drt-sunken` | `#f8fafc` | Table headers, row hover, totals rows and pressed controls. | | `--drt-line` | `#e2e8f0` | Hairline borders, and every loading placeholder except a chart's. | | `--drt-line-strong` | `#cbd5e1` | Control borders, chart baselines and totals rules. | | `--drt-grid` | `#eef2f6` | Chart gridlines, table row rules, gauge tracks and the chart's loading placeholder. | | `--drt-shadow` | `#0f172a` | The colour every shadow and the detail dialog's backdrop are mixed from. It is not `--drt-ink`, so a dark page can lighten its text and keep dark shadows. | ### Type and motion | Token | Default | What it paints | |---|---|---| | `--drt-sans` | `'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif` | All prose and labels, including the notices on a page with page code. | | `--drt-mono` | `ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace` | Every figure, with tabular numerals. | | `--drt-ease` | `ease` | The timing of the runtime's transitions and entrance animations. The loading pulses and the pending bar keep their own. | | `--drt-chevron` | in [the full token block](#the-full-token-block): a 16px chevron stroked in `#64748b` | The arrow on the filter, date-range, sort and top-N dropdowns (`.drt-select`). It is an image, because CSS cannot recolour one: to change its colour, set it to your own `url("data:image/svg+xml;...")`. | ### Series Five slots for the series of a multi-series chart and the slices of a pie or donut. Each default clears `3:1` on white, the bar a mark has to clear, and the set is colourblind-checked as a group. Five is also the ceiling on slices, because a slice's identity is its colour. | Token | Default | What it paints | |---|---|---| | `--drt-series0` | `#2563eb` | The first series or slice. The same blue as `--drt-blue`, so set both. | | `--drt-series1` | `#0d9488` | The second. | | `--drt-series2` | `#d97706` | The third. | | `--drt-series3` | `#db2777` | The fourth. | | `--drt-series4` | `#65a30d` | The fifth. | ### Notices on a page with page code The runtime draws these only on a page whose own script calls `dashies.data`. | Token | Default | What it paints | |---|---|---| | `--drt-warn-ink` | `#7c2d12` | The text of the notice that says a result is partial. | | `--drt-warn-soft` | `#fff7ed` | Its background. | | `--drt-warn-line` | `#fed7aa` | Its border. | | `--drt-error-ink` | `#991b1b` | The text of the notice that says one of the page's own callbacks threw. | | `--drt-error-soft` | `#fef2f2` | Its background. | | `--drt-error-line` | `#fecaca` | Its border. | ### Status bars The bars fixed to the bottom of a page: the date a dashboard's data is from, when a refresh could not bring in more, and the note on an archived version's preview. They follow the viewer's colour scheme, so their three colours are the only tokens with a dark default, which applies under `prefers-color-scheme: dark`. A value you set applies in both schemes. | Token | Default | What it paints | |---|---|---| | `--drt-status-ink` | `#334155`, dark `#cbd5e1` | The bar's text. | | `--drt-status-soft` | `#f1f5f9`, dark `#1e293b` | Its background. | | `--drt-status-line` | `#cbd5e1`, dark `#334155` | Its top border. | | `--drt-status-font` | `system-ui,-apple-system,"Segoe UI",Roboto,sans-serif` | Its text, which is the viewer's system face by default rather than `--drt-sans`. | ## The full token block Every token at its default. Copy it into your page's `