Taste-driven, agentic-first design tokens. One source of truth for color, typography, spacing, and motion — pushed into every app with a single command.
| Feature | Description |
|---|---|
| Single source of truth | All tokens live in tokens/*.json, compiled to CSS custom properties |
| Multi-app push | --push injects tokens between LEONARDO-START / LEONARDO-END markers in every connected app |
| Dry-run diffs | --diff previews exactly what would change before writing |
| Tailwind v4 output | Generates both leonardo.css and leonardo-tw4.css |
| App-specific extensions | Override tokens per-app via extensions/ |
| Zero dependencies | Just Node.js — no build tools, no bundler |
node build.js # build dist/ from tokens
node build.js --push # build + inject into all connected apps
node build.js --diff # dry run — see what would change| Token | File | Details |
|---|---|---|
| Color | tokens/color.json |
Forest green accent #2A7A5B, warm neutrals, semantic palette |
| Typography | tokens/typography.json |
Cormorant Garamond (display), DM Sans (body), DM Mono (labels) |
| Spacing | tokens/spacing.json |
Consistent spatial scale |
| Motion | tokens/motion.json |
Easing curves & duration tokens |
| App | Framework | CSS Target |
|---|---|---|
| Fermi Ops | Vite + TW4 | src/index.css |
| Feedback Hub | Vite + TW4 | src/index.css |
| Brane | Vite + TW4 | src/index.css |
| Leonardo Notes | Next.js + TW4 | src/app/globals.css |
| MiroFish | Vite + TW4 | src/index.css |
Configure targets in apps.json.
tokens/ JSON token definitions
extensions/ app-specific overrides
dist/ compiled CSS (leonardo.css, leonardo-tw4.css)
apps.json connected app registry
build.js compiler + injector
Editorial minimal. Quiet confidence. Information-dense without feeling crowded.
| Axis | Choice |
|---|---|
| Palette | Warm neutrals + single forest green accent #2A7A5B |
| Type | Serif headlines (Cormorant Garamond), sans body (DM Sans), mono labels (DM Mono) |
| Decoration | None — no gradients, no illustrations, no blobs. Texture from typographic contrast + subtle noise |
| Mood | Calm, precise, trustworthy — like a well-typeset journal |
| References | Linear (density), Notion (editorial calm), Stripe (typographic precision) |
Node.js · CSS Custom Properties · Tailwind v4 · JSON tokens
MIT