the bridge
The desktop, a Figma file and a web project as the same palette object rather than three copies that drift.
one source, every consumer
45 colours in design/tokens.json generate a Quickshell
desktop, an SDDM login theme, a terminal theme, a VS Code extension, a Spotify
theme, GTK 3 and 4, an audio visualiser, hyprlang variables, a CSS module, this
site — and the two below. A separate script derives the cursor from the same
accent. --check fails the build if any of them falls behind.
Figma, without a copy
design/tokens.dtcg.json is W3C Design Tokens format: what Tokens
Studio imports to create Figma Variables. Derived rather than hand-maintained,
because a second file describing the same colours is exactly the duplication
the generator exists to prevent.
It carries $description where there is a reason — that the
accent has exactly three homes, that shadows cannot come from the lightest
surface on a light palette. That is the part that does not survive a
copy-paste, and the part that stops someone spending the accent on a
fourth thing six months later.
typed, so mistakes are loud
design/tokens.ts exports the palette as const with
key unions. Importing tokens rather than retyping a hex means a mistake is a
type error instead of a slightly-wrong blue nobody notices for a month:
const typo: ColorToken = "acccent";
→ TS2820: Type '"acccent"' is not assignable to type
'"accent" | "accent-dim" | …'. Did you mean '"accent"'?
Verified under tsc --strict, not asserted.