Application demos

Whole products.
One token layer.

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, for the five kinds of money software people use most, one of them a mobile web app, and nothing shared but the tokens.

Demos
05
Surfaces
36
Primitives
51
Phone-first
01

The lineup

Five products, five archetypes

Each demo is a separate application with its own routes and its own chrome, built around the way people actually work with that kind of money. None pins a colour — all five wear the accent you chose and have to hold in every scheme.

Operations consoleWears the accent you pick
01

Meridian

Live

Every card swipe, reviewed without a mouse

A finance team's spend console: an inbox of what needs a decision today, a transaction table in the hundreds of rows, cards with limits and policies, and the month-end close. Built for the controller who lives in it eight hours a day.

Spend management
Shell
Inked rail
Density
Highest — the stress test
Workspace
Hollis Robotics · USD

Primitives under test

data-tablecommandfilter-chipsheetkbddropdown-menustatus-dotstat-tilestacked-bar-chartcheckboxtabstooltip

A 400-row transaction table reviewed entirely from the keyboard — j and k to move, r to request a receipt, a to approve — with the row's receipt, memo, and policy verdict opening in a side sheet that never steals the list.

Receipt matching and memo drafting: a receipt in the inbox is matched to its swipe, the memo written from the merchant and the calendar, the policy check shown with its reason. Each is a proposal the reviewer accepts with one key.

src/app/demos/meridianOpen Meridian
Chart-first dashboardWears the accent you pick
02

Orchard

Live

A portfolio that explains its own chart

One person's investments: a performance chart that holds its footing from one day to all time, holdings with cost basis and gain, a watchlist of sparklines, and an order ticket that shows its fees. Every one of the twelve chart components, in one product.

Wealth and investing
Shell
Light rail
Density
Medium — the charts carry the page
Workspace
Amara Osei · USD

Primitives under test

line-chartarea-chartdonut-chartsparklinecompare-barsheatmap-calendardeltaamounttoggle-grouphover-cardslidernumber-input

One performance chart that keeps its footing from 1D to All: the range pill changes the data, the delta, and the headline number in a single motion, and the crosshair figure is tabular so nothing on the page jumps.

The morning brief: three sentences on why the portfolio moved, every figure carrying a citation to the position behind it. Read-only by design — it never places an order.

src/app/demos/orchardOpen Orchard
Guided flow and documentWears the accent you pick
03

Roster

Live

Payroll is a job, not a place

Payroll for a fourteen-person business: a home that says what is due, people and their pay, time off, taxes and filings — and the run itself, which drops the chrome for a focus frame and ends in the pay stub each person receives.

Payroll
Shell
Header shell · focus frame for the run
Density
Low — forms and documents
Workspace
Lark Coffee Roasters · USD

Primitives under test

stepperformfieldquestionnairemoney-inputdate-pickercalendardescription-listtimelinedialogalertprogress

Running payroll collapses the chrome to the focus frame: four steps, a review that reads exactly like the pay stub it becomes, and a way out that says how much of the run would be kept.

Hours that look wrong are listed before review with the reason in one line each — a double shift, an overtime week out of step with the last twelve. It never edits an hour.

src/app/demos/rosterOpen Roster
Sidebar and documentWears the accent you pick
04

Quill

Live

The document, and the API that sends it

A studio's invoicing platform on a sidebar of its own: what is outstanding and how old it is, a composer that writes the document beside you, retainers that cut their own invoices, a chase that runs on rules, and the public link the client opens to pay. The same document, three times over.

Invoicing
Shell
Its own — a spelled-out sidebar
Density
Medium-high
Workspace
Kestrel Studio · EUR

Primitives under test

description-listtimelinecomboboxmoney-inputnumber-inputdate-pickerhorizontal-barsgrouped-bar-chartswitchcopy-buttonbreadcrumbtable

One document, three times over: the composer writes it live beside the line editor, the record shows the studio's copy, and the public link shows the client's — the same component, so a rate typed on the left is on the client's screen a second later.

The chase, drafted. An overdue invoice gets a reminder written from what the ledger already knows — how many times this client has paid, how late they usually are, what was said last time — shown beside those facts. Nothing sends without a click.

src/app/demos/quillOpen Quill
Phone columnWears the accent you pick
05

Harbor

Live

A bank that fits in one thumb

A neobank as a mobile web app: balance and cards on the home screen, pay someone in three taps, savings pots that round up, and every picker a bottom sheet. It stays a phone column on a 27-inch display.

Personal banking
Shell
Phone · dock
Density
Lowest — one thumb
Workspace
Ines Moreau · GBP

Primitives under test

drawermoney-inputinput-otpcarouselmetersparklinedonut-chartitemavatar-groupemptysonner

Send money in three taps and a sheet: pick a person, type the amount on a keypad that never leaves the thumb zone, confirm with a six-digit code — the whole thing under the fold of a real phone.

A merchant you have not seen before gets one caption: who it probably is, and whether the amount is normal for you. A line of text under the row, never a block, never a decision.

src/app/demos/harborOpen Harbor