Prototypes
Working product prototypes, built entirely from this design system. Each one runs live in your browser with its full source alongside it, so you can click the flow through and read the code that produces it.
What a prototype is
A reference implementation of a product's screens, authored by design. Every control comes from the design system — nothing here restyles a component. If something looks wrong in a prototype, the design system is wrong, and finding that out is the point.
Prototypes are useful in three ways: they show the design intent running rather than as a static picture, they give engineering a readable starting template for the UI layer, and they test the design system against a real product before it reaches production.
What a prototype is not
Do not ship a prototype. They run on mock data held in memory, with no API integration, no authentication or authorisation, no error or loading handling, no tests, and no performance or security review. A prototype is a starting skeleton for the user interface layer only — not a foundation for a deployable application.
Using a prototype
Each one opens full-screen, with no design-system navigation around it — the bar at its top is the whole of its chrome: a link back to this page on the left, its name in the middle, and a Preview/Code toggle on the right. The preview pane runs the prototype; the file tree and editor behind the Code toggle hold the exact same source, generated fresh from the actual design-system components every time this website is built. There is no hand-maintained copy to fall out of date.
Running one locally instead
Clone the repository and run it from the repository root, not the prototype's own folder — its design-system dependencies are unpublished workspace members, resolved by symlink, so installing from inside the folder alone will fail.
Case Note Tracking:
npm install
npm run dev:prototype