Design Book
A reactive TypeScript engine that stores the rules behind a design system — "the highest-contrast text on a surface, the next bigger gap in a scale, the most vivid color that still passes WCAG" — not frozen hex/px values, and renders them to CSS variables, JSON, W3 Design Tokens, or Tailwind.
What it is
Design Book, by David Aerne (David Aerne (Meodai)), reframes tokens as a dependency graph: a token is a node, a rule is an edge. Change one input and the library knows exactly what to recompute — accessibility included — and refuses cycles at write time. The traditional approach stores fixed answers (a hex picked here, a spacing chosen there); Design Book stores how the answer is decided, so the system re-resolves itself when inputs change. Source: meodai/design-book, https://github.com/meodai/design-book, 2026-06-12
| Aspect | Detail |
|---|---|
| Model | Reactive constraint graph (nodes = tokens, edges = rules); watch(key, fn) subscriptions, batched recompute |
| Render targets | css-variables, json, w3-design-tokens, svg, Tailwind (custom) — all via book.render(name, options?) |
| Color helpers | bestContrastWith, colorMix, relativeTo — WCAG-aware by construction |
| Stack | TypeScript · ESM · two deps (culori, dittotones); npm i design-book |
| License | AGPL-3.0 (free for OSS; commercial license available) · 88★ |
| Current package | design-book@0.5.0 (published 2026-05-19) |
Why it matters for Kevin
Design Book is the closest open-source expression of "encode design intent as values an agent can apply, not pixels." It slots directly behind Design Tokens and Design System: prototype a palette with the swatch tools in Color Palette & Gradient Tools, then encode the relationships (contrast, scale steps, derived roles) in Design Book and export tokens. It pairs naturally with OKLCH workflows (OKLCH in Production) since color rules resolve perceptually rather than by frozen hex. It even ships a skills/design-book.md to teach an agent to classify tokens into value / reference / procedural layers. Source: meodai/design-book, https://github.com/meodai/design-book, 2026-06-12
A practitioner-driven approach to tokens rather than a spec-only one — though it can emit the W3C Design Tokens format when you need interop (see also meodai's token-beam). Source: X/@meodai, 2026-05-15
Artifact observation
The reviewed demo shows a token graph driving a live component preview: a color wheel with editable anchors, ramp controls, generated palette output, and token links that recompute as inputs move. The durable idea is procedural tokens: agents should preserve the rule graph (bestContrastWith, ramp relationships, semantic references) instead of flattening the system into static colors. Static token exports are an output format, not the source of truth. Source: local media artifact, 2026-06-30
Timeline
- 2026-06-30 | Deep-reviewed the local image/video artifact and refreshed versioning:
design-book@0.5.0, repomainat39a398b0240fe145b85877f6e31a540a8acd8191, 88 stars. Promoted the procedural-token lesson to the compiled page. Source: X/@meodai, 2026-05-15; npm; GitHub, 2026-06-30 - 2026-06-12 | Enriched from repo read: reactive constraint graph, render targets (CSS/JSON/W3/SVG/Tailwind), WCAG-aware color helpers, AGPL-3.0, ~64★. Linked to author page David Aerne (Meodai) and Color Palette & Gradient Tools. Source: meodai/design-book, https://github.com/meodai/design-book, 2026-06-12
- 2026-05-15 | Announced on X by @meodai — "a small lib that helps me implement how I think about design tokens." 324 likes, 392 bookmarks. Source: X/@meodai, 2026-05-15