Reference
Token reference
All --dd-* design tokens by category: surfaces, text, accent, status, charts, fonts, radii, spacing, elevation, and motion.
Every visual in DeskDash rides the --dd-* design tokens: the shell, the
built-in widgets, and yours. Style with tokens and your widget follows every
theme automatically; hardcode a color and it sticks out the moment the user
switches themes.
The values below are the defaults (a dark baseline). Themes may change any
of them at runtime: plain CSS picks changes up automatically, and JS that
resolved a token (canvas, inline SVG) should re-read via
dd.ui.token() inside
dd.theme.onChange.
| Token | Default | Used for |
|---|
--dd-bg | transparent | the widget document background; keep it transparent |
--dd-surface | rgba(17, 22, 31, 0.72) | the standard panel surface |
--dd-surface-strong | rgba(13, 17, 24, 0.92) | emphasized surfaces (popovers, panes) |
--dd-surface-transparent | rgba(17, 22, 31, 0.35) | the barely-there glass panel style |
--dd-border | rgba(148, 163, 184, 0.16) | hairline borders |
--dd-surface-transparent is transparent by contract: widgets using it
should read as floating on the desktop, and the user's surface-opacity
setting deliberately leaves it alone (that knob solidifies the solid
panels).
| Token | Default |
|---|
--dd-text | #e7edf5 |
--dd-text-muted | #94a3b8 |
| Token | Default | Used for |
|---|
--dd-accent | #7dd3fc | the theme accent |
--dd-accent-strong | #38bdf8 | emphasized accent |
--dd-accent-contrast | #0b1220 | text on accent fills |
--dd-success | #4ade80 | good / done |
--dd-warning | #fbbf24 | caution |
--dd-danger | #f87171 | errors / critical |
A data-series palette, themable as a set. Use them in order.
| Token | Default |
|---|
--dd-chart-1 | #6ee7a0 (green) |
--dd-chart-2 | #6cb2f7 (blue) |
--dd-chart-3 | #b18af8 (purple) |
--dd-chart-4 | #f5a962 (orange) |
--dd-chart-5 | #5fd4d0 (teal) |
| Token | Default |
|---|
--dd-font-sans | "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif |
--dd-font-display | var(--dd-font-sans) |
--dd-font-mono | "Cascadia Mono", Consolas, monospace |
--dd-font-display is the headline face: themes point it at a character
font while everything else stays sans. The dd-text variants title and
value use it. A widget with a
manifest font pin gets these rewritten in
its own documents, and each bundled catalog face also exists as a
convenience var: --dd-font-audiowide, --dd-font-nunito,
--dd-font-nunito-sans.
<dd-text size="..."> maps to these; any widget can override.
| Token | Default |
|---|
--dd-font-size-xs | 11px |
--dd-font-size-sm | 12px |
--dd-font-size-md | 14px |
--dd-font-size-lg | 18px |
--dd-font-size-xl | 24px |
--dd-font-size-2xl | 32px |
<dd-text weight="..."> maps to these.
| Token | Default |
|---|
--dd-font-weight-normal | 400 |
--dd-font-weight-medium | 500 |
--dd-font-weight-semibold | 600 |
--dd-font-weight-bold | 700 |
| Token | Default | Used for |
|---|
--dd-tracking-wide | 0.08em | uppercase label tracking (the one letter-spacing in the system) |
| Token | Default | Used for |
|---|
--dd-radius-sm | 6px | small controls |
--dd-radius-md | 10px | buttons, chips |
--dd-radius-lg | 16px | panels |
--dd-radius-full | 999px | pills and circles |
| Token | Default |
|---|
--dd-space-1 | 4px |
--dd-space-2 | 8px |
--dd-space-3 | 12px |
--dd-space-4 | 16px |
--dd-space-6 | 24px |
There is no --dd-space-5; the scale jumps from 16 to 24.
| Token | Default |
|---|
--dd-shadow | 0 8px 24px rgba(0, 0, 0, 0.35) |
--dd-opacity-dim | 0.6 |
Durations plus the house easing (fast start, soft landing). Component
transitions ride these, and themes can retime them. The OS reduced-motion
preference disables the built-in motion regardless.
| Token | Default |
|---|
--dd-anim-fast | 140ms |
--dd-anim-slow | 260ms |
--dd-ease | cubic-bezier(0.2, 0, 0, 1) |
| Token | Default | Used for |
|---|
--dd-z-popout | 10 | popouts paint above their neighbors |
For widgets whose one big readout should scale with the widget: the target
font size is a fraction of the container's smaller edge, capped at a
maximum. Overridable per widget by setting the vars on any element inside
the container.
| Token | Default |
|---|
--dd-autoscale-size | 36cqmin |
--dd-autoscale-max | 44px |
The host computes the effective map as defaults, then the active theme's
tokens, then the user's own overrides, and broadcasts the result to every
widget document (the theme.tokens event; the SDK re-applies it to
:root). Widgets never read theme files: the current map is always just
var(--dd-*) in CSS or dd.ui.token() in JS.
