STELLA / DESIGN SYSTEM / 0.1
Numbers you can
read across the room.
A dark rail against warm off-white paper. Newsreader for page titles and every metric, Inter at 14px for the labels, rows and controls you read a hundred times.
See the components- Editable source
- Light and dark
- 44px on a coarse pointer
63 primitives · 63 stories · 5 palettes · 64 screens
Graphite · active palette
On-time delivery · Northern network · last 30 days to 14 Sep 2026
95.8%up 0.5 pts
against a 95.0% target, and 95.4% eight weeks ago
01 / THE PRINCIPLES
Six rules the system does not bend.
Stella is built for screens whose subject is a number. These six decide what the rail does, which face carries a figure, and what a colour is allowed to mean.
Colour has three jobs.
The palette owns the neutral spine, the brand family and the focus ring. Accents label what a thing is. Status labels how it is going. None of the three ever borrows from another.
The corner does not scale.
4px on every control, from a 28px chip to a 44px button. 8px on every surface. Circles are for avatars and palette swatches, and nothing else.
Two faces, two jobs.
Newsreader at weight 400 carries page titles and every metric. Inter at 14px carries labels, rows, controls and captions — the text you read a hundred times.
The rail does not flip.
The rail is a chip with its own surface and its own ink, so #14120f holds in both modes. Light mode is a dark rail on warm paper; dark mode is the same rail, one step deeper than the page.
A number carries its unit.
49.5%, 305 users, 31 days — 305 alone is a riddle. A delta carries its sign, so ↑5% reads before the colour does, and every figure is tabular.
Grey the baseline, colour the subject.
One series is the answer; the rest are context, drawn in --chart-neutral. Four series is the ceiling, zero is on the axis, and the chart survives being printed in grey.
02 / COLOUR
Five palettes. One set of meanings.
A palette owns the neutral spine, the brand family and the focus ring — nothing else. Graphite is the default, and its primary action is near-black ink rather than a colour, so the only saturated things on the page are the numbers. Choose one to repaint the page.
A palette never changes the meaning.
Status is fixed across all five palettes, and every status carries a word as well as a colour. Colour is the second signal here, never the only one.
The three surfaces you build on.
--background
--card
--muted
21 palette slots · generated contrast · no component hexes
03 / TYPOGRAPHY
Two faces. Two jobs.
Newsreader takes page titles and every metric. Inter takes labels, rows, controls and captions. Both are variable, open-licensed and self-hosted, and both load in the app and in Storybook.
Newsreader Variable / 400 / -0.02em
A number you can
read across the room.
The display weight is 400, never bold — size and tracking carry the emphasis. The serif takes titles and figures and nothing else: a table header, a row and a form label are Inter.
Page title / text-h1 · 28 / 1.2 · serif 400
Provider match rates
Section title / text-h3 · 16 / 1.4 · sans 600
Rows that failed enrichment
Body / text-body · 14 / 1.55 · sans 400
4 of 120 rows failed — the provider returned no match.
Supporting / text-body-sm · 13 / 1.5 · sans 400
Last run 14 Sep 2026, 09:12 UTC.
04 / SHAPE
One corner for controls. One for surfaces.
Buttons, inputs, selects, tabs and chips all take 4px. Cards, popovers, sheets and dialogs take 8px. Two values, not a ladder that grows with the component — proportion is the signature, so a 32px button and a 44px button carry the same corner.
05 / ELEVATION
One hairline. One shadow. One ring.
A card is a border and no shadow. Only overlays lift, and every one of them uses the same --shadow-overlay. Focus is a separate 2px ring on --ring — press Tab to see it. Depth states a relationship; it never fills empty space.
06 / LAYOUT
One gutter per container.
Space states the relationship: 4 and 8px inside a group, 12 to 24px between related parts, 32px between decisions. A container owns one gutter — 16px, or 24px above md — so its heading, its content and its footer land on the same edge.
Shared tracks, no guesswork.
The grid is a tool, not a decoration. Turn it off and the alignment should still hold.
At the narrow end the composition changes, not just the scale. Cards stack, filters fold into a sheet, and a wide table becomes a list of records. The page itself never scrolls sideways.
320px minimum / controls lift to 44px below 768px
07 / MOTION
A response, not a performance.
Motion in Stella confirms that something changed. It never moves the thing you are about to press, and it never animates a number into looking like a trend.
Ready on scroll. The four recipes take turns while this section is on screen.
WHERE MOTION STOPS
Three cases the system refuses
Immediate
Focus and live values tell the truth without delay.
Still
Targets never shift, scale or bounce away from the cursor.
Restrained
No ambient loop competes with reading or comparing.
Inclusive
Reduced motion keeps every final state and its meaning.
08 / THE COMPONENTS
Every primitive, doing real work.
Three rows of live primitives. Try the forms, open the overlays, change the filters. Every colour comes from the palette you chose; not one of them is a hex.
09 / DATA
You, against everyone else.
Five forms, one organisation, one seeded table. The subject is always the coloured mark and the comparison is always grey — a quantity with no opinion attached. Every figure carries its unit, every series carries its name, and nothing here needs colour to be read.
Appointments offered within seven days
72.8%
up ↑ 5.4 ptsover the twelve months to September 2026
8.5 points above the peer median, which finished the year at 64.3%.
- Your network72.8%
- Peer median64.3%
Per cent of appointments
Twelve months to September 2026. The axis starts at 55% because nothing here is a bar; the reading is the distance between the two lines, and it is labelled.
Median wait, by service
Two series per category: yours in colour, the peer median in grey.
Days
- Your network
- Peer median
Zero is on the axis, so a bar's length is its whole value, and the unit is named once beside the axis rather than on every tick. Skin is the one service where the network waits longer than its peers — the chart is allowed to say so.
Top 6 sites
Ranked by the share offered within seven days.
Six of 22 sites. Bars start at zero and the scale runs to 100%, so the ranking and the gaps are both readable. Every value is printed, so the axis would only repeat it.
How the network is spread
All 22 sites, counted into five-point bands.
Sites
Per cent offered within seven days, in five-point bands
Median site 73.7%. The middle half sits between 66.9% and 80.0%, and the whole range runs 52.8% to 88.6%. One average would have hidden all of that.
When the week is busy
One measure, ordered by magnitude — the one place a ramp is correct.
| Weekday | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
|---|---|---|---|---|---|---|---|---|---|
| Mon | 08:00 — 18 appointments | 09:00 — 26 appointments | 10:00 — 31 appointments | 11:00 — 29 appointments | 12:00 — 22 appointments | 13:00 — 14 appointments | 14:00 — 21 appointments | 15:00 — 25 appointments | 16:00 — 17 appointments |
| Tue | 08:00 — 24 appointments | 09:00 — 33 appointments | 10:00 — 38 appointments | 11:00 — 35 appointments | 12:00 — 26 appointments | 13:00 — 16 appointments | 14:00 — 24 appointments | 15:00 — 28 appointments | 16:00 — 19 appointments |
| Wed | 08:00 — 21 appointments | 09:00 — 29 appointments | 10:00 — 34 appointments | 11:00 — 31 appointments | 12:00 — 24 appointments | 13:00 — 15 appointments | 14:00 — 22 appointments | 15:00 — 26 appointments | 16:00 — 18 appointments |
| Thu | 08:00 — 20 appointments | 09:00 — 28 appointments | 10:00 — 33 appointments | 11:00 — 30 appointments | 12:00 — 23 appointments | 13:00 — 15 appointments | 14:00 — 23 appointments | 15:00 — 27 appointments | 16:00 — 18 appointments |
| Fri | 08:00 — 16 appointments | 09:00 — 23 appointments | 10:00 — 27 appointments | 11:00 — 25 appointments | 12:00 — 19 appointments | 13:00 — 12 appointments | 14:00 — 17 appointments | 15:00 — 20 appointments | 16:00 — 13 appointments |
1,055 appointments across the week. Busiest hour: Tuesday at 10:00, with 38 booked. The lunch column is the pale stripe down the middle.
Grey the baseline, colour the subject.
The peer median is drawn in --chart-neutral in every form it appears — line, bar, legend. A comparison given a sixth hue would compete with the five that mean something.
It has to survive being printed in grey.
Position, label and order carry the reading; hue only reinforces it. Two series at most in any comparison, both named, and the ramp is ordered so its steps still read as steps with the colour taken out.
A number carries its unit.
The unit is named once at the axis rather than on every tick, the delta carries its sign before it carries a colour, and every figure is tabular so columns line up.
--chart-1 · --chart-neutral · --chart-grid · --chart-seq-1 … --chart-seq-6 · text-metric-2xl · text-delta
10 / IN SITU
Six real screens, running inside this page.
Everything above is inventory: colour, type, shape, motion, components. This is what they add up to. Each panel is a live route from the screen library, on the palette and mode you are reading in right now.
Command centre
The reference surface: a collapsing dark rail, four charts that grey the peer series and colour the subject, and a summary row where every figure carries its unit and its comparison.
These six are a sample. The library carries 64 built screens across 13 groups, every one a route in this repository on these tokens.
Browse the screen library11 / PUT IT TO WORK
From one primitive to a whole console.
Open a pattern in the composition canvas, then watch the same tokens carry a complete screen. Every available example is built from Stella’s own primitives — no hexes, no one-off components.
Compositions
8 groups: metrics, charts, tables, rails, forms, overlays and feedback.
Open the canvas64 AVAILABLE SCREENSScreens
13 categories, from a first sign-in to a command centre and the states where something has gone wrong.
Browse live screens5 LIVE DEMOSDemos
Whole applications that share state across routes: a command centre, a metered console, a research workspace, a metric dictionary and a phone-first reader.
Open the demos