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-font-pixelify-sans,
--dd-font-press-start-2p, --dd-font-silkscreen.
<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.
The user's Animation speed setting (Settings > General: off, fast, normal,
slow) multiplies both durations after the theme, so a theme's retime and the
user's choice compose, and Off makes everything instant. You read the result
through the tokens like any other value; there is nothing to declare.
| 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). One more layer is per widget: a user can override any token on a
single widget instance from the Style tab of its settings window, and the
shell merges that map over the effective one for that instance's documents
only. Your widget sees it as a different var() value, previews included,
and dd.theme.tokens() returns the same merged map. Widgets never read
theme files: the current map is always just var(--dd-*) in CSS or
dd.ui.token() in JS.
