@deramond.dev/tokens

The design tokens behind Julien Déramond's surfaces: website, talk slides, tool docs, READMEs. Written in DTCG 2025.10 format, built with Terrazzo, validated with dtgraph.

One theme, dark: cyan as the structure colour, gold as the decision colour, every text pairing at WCAG 2.2 AA or better.

Install

npm install @deramond.dev/tokens

Use

CSS custom properties, all on :root:

@import "@deramond.dev/tokens/tokens.css";

a { color: var(--color-primary); }

JS/TS, the full token set with types:

import { resolver } from "@deramond.dev/tokens";

const tokens = resolver.apply({});
tokens["color.primary"].$value.hex; // "#3AB9BF"

The DTCG sources ship too, for tools that read tokens directly: @deramond.dev/tokens/brand.resolver.json and @deramond.dev/tokens/tokens/*.json.

The CSS

One file, one theme. Every value resolves on :root, which also sets color-scheme: dark so form controls and scrollbars match. There is no data-theme attribute, no prefers-color-scheme branch and no toggle anywhere in the brand: a surface that cannot be dark — a README banner, a badge, an avatar, an OG card — carries the dark field inside the asset.

Variable names are the token ids with dots replaced by dashes: color.primary → --color-primary, type.eyebrow → --type-eyebrow (a font shorthand) plus --type-eyebrow-font-size and friends.

Token tiers

| Tier | Prefix | Rule | |---|---|---| | Primitive | palette.* | Named hues (cyan 300/500/700, gold, azure, violet, rose, emerald, lilac, coral) and neutral.*. Never referenced by a component. | | Semantic, interface | color.bg, color.panel, color.line, color.line-strong, color.fg, color.fg-reading, color.muted, color.primary, color.primary-dim, color.primary-lift, color.on-primary, color.accent, color.on-accent, color.success, color.warning, color.danger, color.grid, color.tint | Everything clickable, readable or focusable. No other hue appears in a control. | | Semantic, illustration | color.illustration.{cyan,azure,violet,rose,gold,lift,dim} | Artwork, posters, social, README headers, dense mode, charts (categorical order: cyan, azure, violet, rose, gold). Never in a control; azure, violet and rose never touch chrome at all. |

Three rationing rules live in the token descriptions: cyan is structure, one gold per decision (not per screen), secondaries are artwork only.

Contrast targets

scripts/contrast.mjs enforces WCAG 2.2 AA (4.5:1) for text and link colours on bg and panel, for text on cyan and gold fills, and for the three states on both; 3:1 for primary-dim on bg, for line-strong on bg and panel, and for every illustration hue on the field (graphics, not text); and 4.5:1 for ink-or-paper on top of every illustration hue. line on bg is reported only.

Current lowest enforced pairing: line-strong on panel, 3.53. Lowest text pairing: muted on panel, 5.70.

Not designed yet

Full neutral scales (50–950), per-tool accent mapping, and the fluid type clamps (expressed in CSS on top of the size tokens). Added when a surface needs them.

Licence

The code and the token files are MIT. The licence does not cover the name "Julien Déramond", the Missing Tile mark or the brand artwork, which are all rights reserved.