Stella

STELLA / DEMOS

Whole applications.
One token layer.

A screen proves a pattern. A demo proves the system — a complete application whose figures have to agree across routes, hold their layout at every viewport, and stay readable after someone has clicked around in them. Five of them, four desktop and one phone-first, and nothing shared but the tokens.

Demos
05
Surfaces
21
Primitives
27
Phone-first
01

Demo library

Five products, five archetypes

Each demo is a separate application with its own routes and chrome, shipping on a different accent preset — and every one still has to hold in the mode and brand you pick.

Command centreShips on the graphite preset
01

Sextant

Live

An operations command centre for a 2,400-site logistics network. Every figure carries its period, its unit and the peer median it is measured against.

Surfaces · 5

Command centre · Sites · Site detail · Incidents · Reports

Primitives under test

charttableselectsheetcommanddialogtabstoast

One period control governs ten charts and five tables across five routes — change it anywhere and every figure, axis and footnote follows, including on a route you have not visited yet, and a reload keeps it.

src/app/demos/sextantOpen Sextant
Metered usage consoleShips on the storm preset
02

Caliper

Live

A metered usage console. Spend, quota and burn-down for an API billed by the request, with the invoice that matches what the chart shows.

Surfaces · 4

Usage · API keys · Billing · Limits

Primitives under test

charttableinput-groupswitchalertdialogkbdskeleton

A quota changed on Limits re-draws the burn-down on Usage and the projected total on Billing in the same interaction — the three routes read one number, not three copies of it.

src/app/demos/caliperOpen Caliper
Three-pane workspaceShips on the midnight preset
03

Plumb

Live

A research workspace. Sources on the left, the working note in the middle, and the figures it cites kept live on the right.

Surfaces · 5

Workspace · Notes · Note · Sources · Figures

Primitives under test

resizablescroll-areacommandmessagehover-cardseparator

A citation inserted in the note pins its source in the left pane and its figure in the right — three panes holding one selection, across a resize and a reload.

src/app/demos/plumbOpen Plumb
Reference siteShips on the taupe preset
04

Almanac

Live

The metric dictionary. What each figure means, how it is computed, who owns it, and which dashboards would change if the definition did.

Surfaces · 4

Overview · Metrics · Definition · Changelog

Primitives under test

accordionbreadcrumbtableresponsebadgecollapsible

Prose and figures share one source — the definition page renders the same numbers the dashboards do, so a documentation site cannot drift from the product it documents.

src/app/demos/almanacOpen Almanac
Phone columnShips on the sage preset
05

Gauge

Live

A phone-first reader for the four numbers someone checks before a meeting. It stays a phone column on a 27-inch display, on purpose.

Surfaces · 3

Today · Pinned · Alerts

Primitives under test

carouseldrawertoggle-groupchartavatarswitch

The metric scale survives a 320px column — a 56px serif figure, its unit and its delta all fit on one line, and the chart beside it keeps its axis labels.

src/app/demos/gaugeOpen Gauge

Every demo will be built from tokens and shipped UI

Demos compose the primitives in components/ui — tables, sheets, toasts, avatars, badges — and resolve every colour, radius, shadow, and motion to a design token, so the whole experience follows the light/dark theme and the accent preset without a single hardcoded value. State persists locally so audiences can experiment and reload.

One theme.
Five products.

Every demo is a complete application in a different domain — its own layout, its own workflows, its own accent preset. The only thing they share is the token layer. That is the point: one theme, and five products that prove it.

  • Sextant

    Overview, sites, incidents, scorecard

  • Caliper

    Usage, keys, billing, limits

  • Plumb

    Sources, working note, live figures

  • Almanac

    Metrics, definitions, changelog

  • Gauge

    Today, pinned, alerts — on a phone