Live output
32 running applications — 4 design systems compiled to 8ecosystems. Within a row the markup is byte-identical, enforced in CI. Everything you see change between columns was compiled from that design system's tokens: no theme CSS was written by hand for any of them.
4 design systems8 ecosystems32 live builds1 set of token files each
Compare two side by side →Two of them in one viewport, one mode control and one scroll position driving both.
Two invented as opposites, two real systems nobody here designed. Each card below is painted with values read out of a live compile of that example — the same values the demos it links to are wearing.
Invented · minimal
The smallest believable design system: one brand blue, a few neutrals, one radius. Everything else in the output is derived.
What to look for: Blue, rounded, conventional — the baseline every other column is a departure from.
Invented · hostile
A retro CRT terminal system built to attack every default: alien vocabulary, dark-native, brand colour that is also the text colour, radius 0.
What to look for: Phosphor green on tube black, monospace, hard corners. Toggle to light for the paper-printout mode.
Real · public sector
The UK government's design system, adopted through the binding layer — its published colours and its own functional-colour names, untouched.
No dark theme — GOV.UK publishes none, so the config declares one mode.
What to look for: Flat, high-contrast, unmistakably GOV.UK. Light only: the real system publishes no dark theme.
An independent demonstration of Transtyle. Not affiliated with, endorsed by, or produced by the UK Government Digital Service.
Real · enterprise
IBM's Carbon Design System, bound the same way — with its real per-theme values, White → light and G100 → dark.
What to look for: IBM Plex, square corners, Carbon blue. A real dark theme, carrying Carbon’s own G100 values.
An independent demonstration of Transtyle. Not affiliated with, endorsed by, or produced by IBM.
Read across a row to see one ecosystem wearing four different design systems. Read down a column to see one design system compiled into eight. Each swatch is that build's real primary, surface and text colour.
| Target | AcmeInvented · minimal | CathodeInvented · hostile | GOV.UKReal · public sector | CarbonReal · enterprise |
|---|---|---|---|---|
| shadcn/uiReact · Tailwind v4 · Radix⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| daisyUITailwind v4⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Apache EChartsECharts 5⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| BootstrapBootstrap 5.3 · Sass⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| StorybookStorybook 9⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Radix ThemesReact · @radix-ui/themes⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| PrimeNGAngular 22⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| CSS variablesNo framework⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
Each target's page explains what it emits and why:shadcn/ui · daisyUI · Apache ECharts · Bootstrap · Storybook · Radix Themes · PrimeNG · CSS variables
Every demo for a given target is the same application — same markup, same components, same interactions. A CI checkfails the build if one drifts, so any visible difference between columns is attributable to the design system and nothing else.
dist/Each project consumes only the artifacts transtyle build writes — the generated Sass, the generated CSS, the generated theme JSON. No demo contains a colour value. Switch a page to dark and you are watching compiled output, not a stylesheet someone tuned by hand.
Every demo carries a switcher: jump to the same page in another design system, or to another ecosystem in the same one. That comparison is the point of the exhibit — one token source, eight idiomatic outputs.
Cathode's --radius: 0rem makes shadcn's calc(var(--radius) - 4px)negative, and the browser clamps it to 0 — brutalism by accident of CSS. GOV.UK renders in its documented Arial fallback because its real typeface is licensed to crown services. The walkthroughs name every one of these.
The demos are npm workspaces in the repo. Each rebuilds its example's tokens before it starts, so what you see is always what today's compiler emits.
git clone https://github.com/transtyle/transtyle
cd transtyle && npm install
npm run dev -w acme-demo-bootstrap # or any of the 32 below
npm run demos:all # build all 32 + the site, as deployedacme-demo-shadcn4103acme-demo-daisyui4102acme-demo-echarts4104acme-demo-bootstrap4101acme-demo-storybook6101acme-demo-radix4106acme-demo-primeng4107acme-demo-css-variables4105cathode-demo-shadcn4203cathode-demo-daisyui4202cathode-demo-echarts4204cathode-demo-bootstrap4201cathode-demo-storybook6201cathode-demo-radix4206cathode-demo-primeng4207cathode-demo-css-variables4205govuk-demo-shadcn4303govuk-demo-daisyui4302govuk-demo-echarts4304govuk-demo-bootstrap4301govuk-demo-storybook6301govuk-demo-radix4306govuk-demo-primeng4307govuk-demo-css-variables4305carbon-demo-shadcn4403carbon-demo-daisyui4402carbon-demo-echarts4404carbon-demo-bootstrap4401carbon-demo-storybook6401carbon-demo-radix4406carbon-demo-primeng4407carbon-demo-css-variables4405