All tokens

Using a token

Tokens are plain CSS custom properties. Read one with var() in your own rules, and set one anywhere in the tree to change it from that element down.

@layer app.pages {
  .invoice-total { font-size: var(--text-xl); color: var(--text); }
}

<!-- one tenant, one number, no rebuild -->
<html style="--hue-brand: 265">

<!-- or scoped to a subtree -->
<section class="card" style="--brand-soft: var(--good-100)">

Reach for the semantic roles before the ramps. --surface resolves to a different step of the neutral ramp in light and dark; --ink-0 is the same colour in both, and using it directly is how a component ends up unreadable in dark mode.

Hue and chroma

The five numbers the whole palette is generated from. Change one and every shade, border, focus ring and shadow that derives from it follows, with no rebuild and no second stylesheet. This is the retheming story in ten tokens.

Brand ramp

Eleven steps in OKLCH, computed from --hue-brand and --chroma-brand. The numbers are perceptual lightness, so 500 is the same apparent lightness at every hue — which is what stops a yellow brand from looking washed out where a blue one looks solid.

Neutral ramp

Fifteen steps of near-grey, tinted toward --hue-neutral rather than pure grey. A truly neutral grey beside a saturated brand reads as dirty; a grey carrying a little of the brand hue reads as deliberate.

Status ramps

Good, warn, bad and accent, at the steps that actually get used: 100 for a fill, 500 for an icon or a border, 600 and 700 for text. Deliberately not a full eleven-step ramp each — the missing steps are ones nothing needed.

Semantic roles

The tokens you should actually be reaching for. Each one names a job rather than a colour, and each resolves through light-dark() — which is why the entire dark theme is one attribute rather than a second set of rules. Reference --surface, not --ink-0, and dark mode comes free.

Space

A 4px base in rem, plus two fluid steps for page rhythm. Seven of these have utilities; the rest are for your own rules. The scale is explained in full on the spacing reference.

Radius

Five steps in px rather than rem, because a corner is a property of the shape and should not grow when a reader raises their base font size.

Shadow and ring

Four elevations, an inset highlight, and the focus ring. The shadow colour is tinted toward the neutral hue rather than being black at low alpha, which is what keeps it from going muddy over a coloured surface.

Type

Three families, ten sizes and four line heights. The top five sizes are clamp() expressions, so display type scales with the viewport between a floor and a ceiling instead of stepping at a breakpoint.

Motion

Seven durations and ten easing curves, three of which are linear() springs — a real spring feel with no JavaScript. Thirteen of these live in src/16-motion.css rather than the token sheet, which is why they were missing from this reference until the extractor stopped selecting tokens by filename.

Controls

The three control heights and the minimum tap target. 44px is the floor a finger needs; every interactive thing in Deck is at least that tall on a touch device even where the visible box looks smaller.

Stacking

Five named layers, a hundred apart. Deck has exactly one z-index utility and five tokens, on the theory that stacking bugs come from competing numbers and the cure is fewer of them, not more.

Ungrouped

Overriding a token

Custom properties inherit, so where you set one decides how far the change reaches. On :root or the <html> element it is the whole document; on a component it is that subtree.

Specificity still applies to the declaration that sets the property, so a token set in your own @layer app beats Deck's :root without !important — the same rule that makes every other override in Deck work. What custom properties do not do is participate in the cascade at the point of use: var(--surface) resolves to whatever --surface is on that element, whichever layer set it.

A token that resolves to nothing makes its declaration invalid at computed-value time, which usually shows up as an inherited or initial value rather than as an error. If a colour comes out black or a size comes out zero, check the token name for a typo first — var() will not tell you.