A compiler for design systems
Transtyle takes a framework-agnostic description of your design system — tokens, semantics, modes — and compiles it into native, ready-to-use theme artifacts. Eight targets ship today: shadcn/ui, daisyUI, Apache ECharts, Bootstrap, Storybook, Radix Themes, PrimeNG, and plain CSS variables.
Describe your design system once. Change it in one place. Regenerate every target.
Alpha — how to read these docs
Transtyle is at an experimental alpha. Breaking changes ship without a deprecation cycle, and nothing described here carries a stability promise yet — pin an exact version if you try it.
These pages document what the compiler does today. Where a page describes something designed but not yet built, it says so inline: compiled means it runs now, specced means it exists in the specification and not yet in the compiler. The roadmap is the authority on the difference.
cd examples/acme
npx transtyle build
# → dist/shadcn/globals.transtyle.css (complete shadcn theme, light + dark)
# → dist/bootstrap/_variables.transtyle.scss (idiomatic Bootstrap Sass)
# → dist/echarts/theme.acme-light.json (chart theme, derived palette)
# → …one directory per configured target, each with usage.md + report.jsonThree ways in
transtyle init scaffolds a project; author a handful of decisions and derivation fills the rest.
Extend
Write an exporter
All eight official exporters use the same public plugin API — the core knows nothing about any target.
Why another token tool?
Existing token pipelines (Style Dictionary, Terrazzo) transform token files into variables. Transtyle understands what your design system means — that danger maps to shadcn’s --destructive and daisyUI’s --color-error, that a subtle background needs its own readable foreground, that a data-viz palette must be derived from your brand, not copy-pasted — and produces configuration a framework practitioner would recognize as idiomatic.
| Principle | What it means for you |
|---|---|
| DTCG superset | Your token files are valid W3C Design Tokens. Figma, Tokens Studio, Style Dictionary can read them. No lock-in. |
| Deterministic derivation | Missing tokens (hover states, on-colors, a secondary color) are filled by inspectable rules — never magic. Authored values always win. |
| Honest lossiness | Every build reports what mapped natively, what was derived, what was approximated, what was dropped — per variable. |
| Native output | You get a globals.css a shadcn user would write, not a pile of generic variables. Generated files are disposable: regenerate, never edit. |
| No runtime | Transtyle ships nothing into your app. Files out, nothing in. |
If you run a design system, this is for you
In your vocabulary: option tokens are your primitives, semantic tokens are your alias/decision layer, and the catalog is a published interface over that decision layer which frameworks plug into. You keep your names, your Figma sync, your governance; Transtyle compiles the decision layer outward — and reports, per variable, what was your decision (), what was inferred from it (derived), and what got bent in translation (approximated).
Seeing is believing. From one authored brand color oklch(0.55 0.18 255), the standard rules derive the full role set:
…and an 8-color categorical data-viz palette, hue-rotated from the brand, shared verbatim between shadcn’s --chart-* and ECharts’ color[]:
Every one of these is deterministic, provenance-tagged, contrast-checked where it pairs with text, and overridable by authoring one token. Nothing here is a mockup — these are the compiled values from the Acme example, and npx transtyle explain will show you each one’s derivation chain.
Proof it generalizes
The Acme example authors 40 tokens — nine of them actual design decisions — and compiles complete themes for all eight targets. Cathode proves the hostile direction: alien vocabulary (crt.ink, crt.tube), dark-native, bound through the same catalog with one-line aliases. And two real, independently-designed systems — GOV.UK and IBM Carbon — compile to every target with zero warnings or errors, using only their published values (Carbon draws informational notes where its dark theme reuses a light value — the compiler saying so rather than hiding it). For the full worked proof — source values, judgment calls, and per-target coverage all shown — see GOV.UK, end to end.
Status honesty: Transtyle is published as an alpha (
@transtyle/cli@alpha) — early enough that the token vocabulary, the generated output and the CLI surface can each change between releases. What’s real today: the full pipeline, the derivation engine (role grids, elevation, scales, modes),build/check/explain/init/add/diff, eight exporters, four examples with runnable demo projects for every target, and CI-verified deterministic builds. What’s specced but not implemented:import,preview, and the importers. The roadmap tells the truth about which is which.
Start with the path card above that matches your situation — or read Core concepts first if you want the mental model before touching files: three token tiers, the catalog as pivot language, modes, and the provenance/coverage trust system.
New to design tokens entirely? Take the short course: What is a design token? → How Transtyle works → Your first build — the first two are code-free.