The screen library proves a pattern. A demo proves the system — a complete application that has to stay coherent across routes, hold its layout at every viewport, and survive being clicked. Five of them, five layout archetypes, and nothing shared but the tokens.
Looking for single patterns instead? Browse the screen library
The lineup
Each demo is a separate application with its own routes, and none pins a palette — all five wear whatever you pick and have to hold in every scheme.
An agent workspace that shows its work
A three-pane console: a streaming conversation with inline tool calls and approval gates, a resizable inspector, and replayable runs with full traces.
Surfaces · 4
Primitives under test
The AI primitives hold a real conversation — long transcripts, streaming, interruption — not a posed one.
src/app/demos/trellisOpen TrellisA shop with no images in it
A print studio where the size and frame you choose redraw the mock-up and move the price; the cart survives reloads, checkout is three steps, and every print is drawn from the theme's chart tokens.
Surfaces · 5
/demos/alder/demos/alder/prints/demos/alder/print/[slug]/demos/alder/cart/demos/alder/checkoutPrimitives under test
The token layer reaches the artwork, not just the chrome — and the pill language is at its best choosing between four things, not filtering sixty.
src/app/demos/alderOpen Alder PressA phone-first care companion
A patient companion that stays a phone column at any width: movable appointments, an autosaving intake, a one-time check-in code, and swipeable visit summaries. Every picker is a bottom sheet, never a dropdown.
Surfaces · 5
Primitives under test
That the system works thumb-first — 48px controls, bottom sheets, and one column — without a separate mobile theme.
src/app/demos/fernOpen FernThe watch room for a fleet of services
An operations console: a watch room of service tiles with error budgets, incidents that page straight to their runbook, an alert stream you can route and mute, and a handover log for the night shift.
Surfaces · 5
Primitives under test
The dense end of the ramp — 32px rows, mono numerals — is a first-class surface, not a concession.
src/app/demos/marramOpen MarramA calendar a team can live in
A team calendar where appointments drag, pull, and resize without ever losing their colour, plus a capacity month view, a conflict-resolving agenda, and a booking link that needs no account.
Surfaces · 5
Primitives under test
The date primitives survive being lived in — dragged, conflicted, rescheduled — and an appointment keeps its colour everywhere it turns up.
src/app/demos/willowOpen WillowHouse rules
A screen can be posed. A demo cannot — it has to answer every click, in every mode, on every palette. These four rules are the difference.
No hardcoded colour, radius, shadow, or duration. Switch the mode or the palette in the demo drawer and the whole product follows, mid-session.
Demos carry state across routes and reloads, so an audience can filter, approve, book, and come back to it.
No shared demo shell. Every demo ships its own layout under src/app/demos, exactly as a real product would — the tab on the right edge is the only vine chrome that follows you in.
Not one demo pins a preset. All five wear the mode and scheme you picked, so every screen has to hold in eight themes rather than the one it was drawn in.