Design
Most teams can name a design system. Fewer can hand you a screen built to one, in its real colors, at its own density, with its own idea of what a table is, and show you what it measured. These are ours, one per system, with the brief and the numbers beside each.
The order
Ordered by how much of each screen a reader can judge from the frame alone: the six where the design itself is the argument, then the system this firm runs on, then the enterprise work in descending order of what it asks of the system it is built in. Not a ranking of how well each one is made.
29 of 29 screens
01 – 08
A photographer’s masthead that still owes a results table, a restaurant where the photograph carries the page, a midwifery practice set in the quietest register here, a chapter under translation whose two halves do not correspond, an editorial spread built on utilities alone, a club site that refuses its framework’s default template, a delivery depot planned overnight in a car maker’s own language, and a race stopped four laps early in another’s.
Apex brand (house style)
A competitor's own brand site, where the season is the subject rather than the decoration. The near-black and the acid accent are one colour at two strengths, two typefaces split one name between them, and every heading arrives out from under a bar of the accent. Three rows of the results ladder carry no bar at all, for three different reasons.
Luxury hospitality
The least dense page here by a wide margin. Photography carries it, type gets out of the way, and every scrim came from a measurement.
Calm practice (house style)
A page built to be calm that still has to work at three in the morning. Position and size carry the urgency; the critical hue appears twice.
Claude brand style (house style)
A chapter under translation, source and English in one grid so a paragraph and its translation cannot drift apart. The hard state is the thing a split pretends cannot happen: one paragraph rendered as three, a sentence with no source, and a stanza that cannot ship. There is no toolbar: every control sits in the margin at the segment it changes.
Tailwind CSS v4 design system, official site (opens in a new tab)
A landing page that refuses the defaults Tailwind makes no promise about. No indigo, no gray-400 body text at 2.60:1, no gray-300 borders at 1.47:1.
Bootstrap 5 design system, official site (opens in a new tab)
A club site that does not look like Bootstrap, built only from --bs-* variables. It still upgrades, which a custom stylesheet would not.
Tesla (brand language)
A depot's overnight charge plan in a language built for a showroom. The brand publishes one chromatic colour and forbids a second, so the three vans that will not reach their departure charge are marked by a bar that stops short, a hatched gap and a number, never by red.
Ferrari (brand language)
A race stopped four laps early by a red flag, so the classification is the order at the end of the previous lap. The sheet carries both orders (what the result is, and what the grandstand watched) because the second one is the question every results table starts and none of them answers.
09 – 17
A launch manifest with no colour in it at all, a coffee order on the morning the milk ran out, and the console this firm runs itself on beside the landing page that sells it. Then a research cluster’s queue that tells a job which will never run apart from the ones merely waiting, a condensed grid at the density its operator actually works in, a service a stranger reaches in a bad week, a route still correct at the largest type the platform offers, and a merchant’s bulk action gated behind a typed confirmation.
SpaceX (brand language)
Two launches holding the same downrange corridor, on a range manifest whose language publishes no chromatic colour at all, so the conflict is marked by inverting the tile, with the word in it as the second signal.
Starbucks (brand language)
Ordering coffee on the morning the shop has run out of the milk your saved drink is made with. The shortage is named at the step it breaks rather than at the till, and the option stays on screen, disabled, saying why.
Centauri Console (house system)
The console profile of the house system: the screen the firm runs itself on. The reading ladder reserves a step called datum for the size a value is read at, which no vendor system names. Absence gets three distinct marks. The page that sells this is a separate specimen on the same spine.
Centauri Marketing (house system)
The same spine as the console, in the one profile the house allows a gradient. It leads with a sentence rather than a table, states where the division's own work stops and names the sibling that owns the other half of each seam, and carries no number it does not publish a definition for.
NVIDIA (brand language)
A research cluster's queue, where the job that can never run is separated from the jobs that are merely waiting. Every scheduler calls both of them pending; one starts tonight and the other will still be there on Friday.
IBM Carbon design system, official site (opens in a new tab)
Thirty-two substation feeders at condensed density, and no card around the table. Zero, null, and not reporting are three different marks.
GOV.UK Design System design system, official site (opens in a new tab)
One thing per page, a check-your-answers step, and a server-rendered error summary. Nothing on screen needs JavaScript to work.
Apple HIG design system, official site (opens in a new tab)
One route, its elevation profile, its splits. Built at Large and still correct at AX5, which is where truncation actually breaks.
Shopify Polaris design system, official site (opens in a new tab)
A merchant's order index. Selecting rows swaps the header for a bulk-action bar in place, and a typed confirmation gates the destructive one.
A service agreement where the path is a real state machine. A ward handover where the thread takes the primary column. A posture wall that refuses the eleventh tile. A teacher reading the day in a corridor. An approval queue split down the middle. A schema change reviewed the way code is, with the lock analysis attached. A canvas whose panels genuinely close. A twelve-step scale used as visible roles. A faceted index over a physical material. The densest page in the set, at a hundred and forty consignments, a board where every drag has a keyboard twin, and a public lookup that has to work first time.
Material catalog
How they were judged
A screenshot proves nothing about whether a screen holds up. These four documents are what the set was built and measured against.
The one that is not a screen
Twenty-two of the screens above are documents. This one is a WebGL render of four teaching assemblies, built to the same generated palette, measured against the same contrast floors, and reachable by keyboard for everything the pointer can do. Pick a division and it opens.
Real-time render · WebGL
Each assembly is modelled from the work its division actually does, comes apart along designed axes, and names its own parts as it opens. The materials, the lighting and the camera are the scene’s own; nothing here is a photograph and nothing is stock.
Illustrative model
Click an object to explore that division.
Next step
If your team already has one, Computing America builds to it. If it does not, the first thing we hand over is the one above: tokens from a generator, the states nobody looks at, and the measurements that settled each decision.
