Quiet by default, sharp on purpose.
Tokens are the core. Color, type, spacing, radius, motion. They map straight to CSS, Odoo, Android and Figma. Components use only tokens, so re-theming is a one-line change.
The whole thing holds together because a few decisions are non-negotiable. Break one and it stops being reusable.
Components use var(--c-accent) and var(--sp-4), never hex or px. That's what turns a re-theme into a one-line change.
Spacing, type, radius and motion are shared and fixed. A theme only changes the --c-* color tokens. Nothing else moves.
A new reusable pattern goes back into the system, never a one-off in some project. Every build leaves it a bit better than it found it.
Emoji render differently on every platform and can't be themed. Everything uses Lucide via .ds-icon. It inherits currentColor and sizes to the text.
Most of what I build now starts with a prompt. A design system keeps the output mine, not the model's.
Ask an LLM for a screen and it picks new colors and spacing every time. Point it at the tokens and it builds from one vocabulary. The system is the memory the model doesn't have.
Headless splits the backend that serves data from the frontends that render it. A web app, an Odoo portal, docs, an Android screen. They all read the same tokens, so they match without anyone syncing hex codes by hand.
Stand up a client portal or a microsite and it's themed and AA-accessible from the first commit. Swap the theme and every surface follows. No restyling from scratch.
The raw values every project shares. These swatches read live from the active theme. Flip the toggle and watch the whole core re-map.
Every primitive is built from tokens alone. Buttons, cards, tiles, badges, callouts, forms, tables. All themeable for free.
| Project | Owner | Status | Progress |
|---|---|---|---|
| Research hub | Douwe | Live | 100% |
| Xapti assessment | Douwe | In review | 82% |
| My Stack site | Douwe | Draft | 40% |
Dark is the default, for dashboards and internal tools. Light is tuned to WCAG AA for docs and web. Only the color tokens differ. Spacing, type, radius and motion never move.
Deep near-black surfaces, a blue→violet signature gradient, verified AA text contrast at 16.9:1.
Soft off-white surfaces, small-text contrast lifted to AA. Same components, re-mapped through the light color tokens.
The whole system is three small CSS files, about 25 KB. No build step, nothing to install. This is the actual source this page runs on.
Loading…