Live output
44 running applications — 4 design systems compiled to 11 ecosystems. 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 systems 11 ecosystems 44 live builds 1 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 11. Each swatch is that build's real primary, surface and text colour.
| Target | Acme Invented · minimal | Cathode Invented · hostile | GOV.UK Real · public sector | Carbon Real · enterprise |
|---|---|---|---|---|
| shadcn/ui React · Tailwind v4 · Radix ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| daisyUI Tailwind v4 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Apache ECharts ECharts 5 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Bootstrap Bootstrap 5.3 · Sass ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Storybook Storybook 9 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Radix Themes React · @radix-ui/themes ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| PrimeNG Angular 22 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Mantine React · @mantine/core 9 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Chakra UI React · @chakra-ui/react 3 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| Material UI React · @mui/material 9 ⇄ compare all 4 | Open ↗ | Open ↗ | Open ↗ | Open ↗ |
| CSS variables No 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 · Mantine · Chakra UI · Material UI · CSS variables
Every demo for a given target is the same application — same markup, same components, same interactions. A CI check fails 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, 11 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 44 below
npm run demos:all # build all 44 + the site, as deployedacme-demo-shadcn4103acme-demo-daisyui4102acme-demo-echarts4104acme-demo-bootstrap4101acme-demo-storybook6101acme-demo-radix4106acme-demo-primeng4107acme-demo-mantine4108acme-demo-chakra4109acme-demo-mui4110acme-demo-css-variables4105cathode-demo-shadcn4203cathode-demo-daisyui4202cathode-demo-echarts4204cathode-demo-bootstrap4201cathode-demo-storybook6201cathode-demo-radix4206cathode-demo-primeng4207cathode-demo-mantine4208cathode-demo-chakra4209cathode-demo-mui4210cathode-demo-css-variables4205govuk-demo-shadcn4303govuk-demo-daisyui4302govuk-demo-echarts4304govuk-demo-bootstrap4301govuk-demo-storybook6301govuk-demo-radix4306govuk-demo-primeng4307govuk-demo-mantine4308govuk-demo-chakra4309govuk-demo-mui4310govuk-demo-css-variables4305carbon-demo-shadcn4403carbon-demo-daisyui4402carbon-demo-echarts4404carbon-demo-bootstrap4401carbon-demo-storybook6401carbon-demo-radix4406carbon-demo-primeng4407carbon-demo-mantine4408carbon-demo-chakra4409carbon-demo-mui4410carbon-demo-css-variables4405