How Transtyle works

Design tokens gave you one decision layer; the problem left over was translating it into every framework’s dialect, by hand, forever. Transtyle’s answer is to treat your design system like source code: you write it once, and a compiler builds it for each platform.

You write Your decisions, your names the tokens you already maintain — a standard format any design tool can read

Transtyle compiles translate · fill gaps · check binds your names to a shared vocabulary of meanings, completes what you didn't decide, verifies contrast

You ship A native theme per framework files a Bootstrap or shadcn practitioner would recognize as their own — plus an honesty report

Four ideas make that middle box trustworthy.

1. A pivot language, like translators use

Translating between twenty languages doesn’t need translators for every pair — it needs one shared interlingua everyone translates through. Transtyle’s version is the catalog: a fixed vocabulary of meanings — “the action color”, “the raised surface”, “destructive, at rest, as a filled button”.

Your names map into the catalog once — you declare “our flame is the action color” — and each framework’s names map out of it, maintained by the people who know that framework. You never learn Bootstrap’s dialect; you state your meanings once.

This is also the defense against false friends: your “secondary” and Bootstrap’s “secondary” share a spelling, not a meaning. Binding happens by meaning, never by name similarity — so the collision becomes harmless.

2. Derivation fills what you didn’t decide

Frameworks need far more values than you’d ever want to hand-author: hover shades, pressed shades, readable text on every colored background, subtle tinted washes, a chart palette, the whole dark-mode mirror. Transtyle computes every one of these from the decisions you did make, using fixed, versioned rules — the hover shade is a defined nudge of your color, the foreground paired with your blue is chosen to pass contrast, the chart palette is rotated from your brand hue.

Two properties keep this safe:

Deterministic. Same input, same output, byte for byte, forever. No AI, no randomness, no surprises in Friday’s build.
You always win. Every derived value is a proposal, not a verdict. Decide any of them yourself — down to a single dark-mode hover shade — and the rule steps aside.

3. Every value can explain itself

Ask the compiler about any value in the output and it answers with the value’s ancestry: which rule produced it, from which of your decisions, in which order. Nothing is magic; everything has a paper trail. Designers can audit the system without reading any code — the walkthrough on the next page shows this live.

4. It’s honest about what doesn’t fit

Translation between real frameworks is never lossless, and pretending otherwise is how trust dies. So every build grades its own output, value by value:

native — your decision, expressed losslessly in the framework’s own terms
derived — computed from your decisions by a named rule
approximated — expressed, but the meaning bent to fit; the reason is recorded
dropped — this framework simply can’t say it; omitted, with a note, instead of faked

The goal is not 100% native — that’s impossible across real ecosystems. The goal is a report that matches your intent: your decisions authored, coherent derivation for the rest, every compromise known.

What it deliberately doesn’t do

Transtyle ships no code into your product — output is plain theme files; delete the tool and the files still work. It doesn’t rename your system — the catalog is compilation plumbing your designers never see. And it doesn’t promise pixel-perfect equivalence across frameworks — it promises measured, explained fidelity instead.

Next: Your first build — ten minutes, real commands, real output.