Live output · side by side
The same page, every way at once.
Put two demos beside each other, or a whole ecosystem's row of 4. One mode control drives all of them and they scroll together, so the only thing left moving between panes is what the compiler emitted. All 32 builds →
What this view is claiming
One target, every design system
The markup in every pane of a row is byte-identical — a CI checkfails the build if it ever isn't. Everything you can see differ is compiled output.
One design system, two targets
Put two panes on different ecosystems and the claim inverts: the markup is now completely different, and the colours, corners and type are the same tokens twice.
The mode control is the demos' own
This page does not restyle anything. It presses each demo's own mode toggle — the one in its chrome bar — so what you get is the target's native mechanism (data-bs-theme, .dark, data-theme) with compiled values behind it.
A light-only system stays light
GOV.UK publishes no dark theme, so its config declares one mode and its pane says so rather than falling through to the framework's own dark defaults. The walkthroughs cover the rest of the seams.