Skip to content
A comparator stand in hairline isometric on a surface plate: a dial indicator on a post over an anvil, with a graded stack of gauge blocks beside it.
B·01 · Case study2026 – now

design:os

Owner · sole maintainer

The design system running this page, built to prove its own claims rather than to be taken on trust.

jangtrinh/design-osView on GitHub
Stars
10
Forks
0
Open issues
18
License
MIT
Language
TypeScript
Last push
2026-08-25

Source: the repo's own GitHub API, observed 2026-08-26.

The situation

Every other case on this site describes a system built for someone else, with outcomes measured after I left. design:os is different: I am still its only maintainer, and the page arguing for it is drawn by the thing it argues for. That closeness is the risk this case has to answer, not hide.

01
Measure before you rule

Write the soul from measurements, not from taste.

Blocked byA rule stated as preference, with nothing behind it to check.

design/soul.md is the project's declared visual stance, and every clause in it carries a measurement rather than a preference: a chroma reading, a line-height ratio held across two typefaces, a histogram of what the site's own sheets actually do. A rule with no evidence line does not ship.

That discipline caught its own violation once: the soul had already banned a second accent color, and the accent's literal value drifted anyway when the theme flipped from dark to light. The clause is still the rule; the drift is why it now cites its own evidence rather than asserting the color.

UnlockedEvery clause now cites the measurement that justifies it.

design/soul.md: Never, with its own measurement

  • Hued neutrals: every grey is zero-chroma. Evidence: 11/11 measured surface+text tiers are lab(L 0 0).
  • Mixed text rhythm: one line-height ratio (1.625) governs body and mono. Evidence: 16/26, 13/21.125, 15/24.375 all resolve to 1.625 exactly.
  • A second accent color: one chromatic voice, --c-accent. Evidence: a single display-p3 blue across every measured page.
  • A rule between two sections: whitespace separates, ink does not. Ruled by the owner 2026-08-22.
Four clauses from the ratified soul, each carrying a measurement rather than a preference.
02
One registry, every surface

A component exists when the registry says so.

Blocked byComponents tracked by memory and by folder, not by anything a script could read.

design/component-registry.json is the one place a component is declared to exist: not a folder of files, not a name someone remembers, a JSON array a script can read. The gate and the parity harness both walk it rather than the filesystem, so a component missing from the registry is a component the site cannot claim.

The registry is a promise, not a guarantee: declaring a kind in the type system is not the same as giving it somewhere to render, and that gap is this case's most literal open failure. A `specimen` artifact kind is declared in the type and still has no renderer: components/artifact/artifact-view.tsx has no branch for it, so the registry says it exists and the page draws nothing where it should.

UnlockedOne JSON array the gate and the harness both walk: a component is real only if it's listed there.
39components in the registry
The component registry's own length, read at build time, not typed by hand.
03
The gate, not the reviewer

Parity is verified by a harness, never by eye.

Blocked byMatching a component to its reference meant a person looking and deciding.

`npm run ds:verify` resolves every registered component's rendered CSS against its measured reference and fails on a mismatched value (padding, stroke, radius) rather than waiting for someone to notice it in a screenshot. `npm run gate` runs the wider net beside it: route coverage, token sync, the metrics registry's own source-link contract.

A harness proves the shape it was told to check, and nothing outside that shape. That is this chapter's argument, and its own strongest evidence is what the harness did not catch: parity passed, and the interface audit still found the primary button's own focus indicator at 1.95:1 against its outer ring, short of the 3:1 an escalation trigger requires, unfixed as of this chapter shipping.

The same audit surfaced a different kind of miss on `.ds-tab`, rendered 67 by 32 pixels in the shell nav on every route: it clears WCAG 2.5.8's 24 by 24 baseline but falls under the 40 by 40 desktop target. That one was left as recorded, not fixed. Chapter one's own rule, that density earned through 2px-granular spacing is deliberate rather than accidental, argues directly against widening it: the harness has no way to tell a chosen trade-off from an unnoticed failure, so both still wait on a person to decide which this one is.

UnlockedA script resolves rendered CSS against the measured reference and fails on any mismatch.
3,699kernel tests passing
The kernel test suite this repo's parity harness sits on top of, run in full.
04
The site is the test run

This page is the evidence, and the evidence can fail.

Blocked byFour claims about this system, asked to be believed on the page's own word.

Four claims this site makes about itself are each backed by a test that runs on every change, not a sentence asking to be believed: no rendered number is a hand-typed literal, every route the gate lists still renders, every registered component still matches its reference, every metric still carries a source a reader can follow.

The focus-indicator failure named above is held to the same test discipline: a test goes red the moment it is fixed, forcing either a new open failure onto this page or the claim's own removal. A confession nobody can retire is decoration; this one can be retired, by fixing it.

UnlockedFour tests, each one able to go red: a claim that can't fail isn't evidence.
Claim this site makesTest that fails if it lies
No number on this site is a hand-typed literalno-literal-metrics.test.mjs
Every rendered page is reachable from a route the gate knows aboutroute-coverage.test.mjs
Every registered component matches the reference geometry it claimsds-parity.test.mjs
Every metric carries a source a reader can followsource-labels.test.mjs
Four claims this page makes about itself, each paired with the test that would catch it lying.
Prototypes

The toolchain also shipped nine other pages.

Four sites built end to end with design:os's own workflow, and five more shipped by the same studio using the same toolchain. Each one is real and live, not a mockup.

  • OPAH ONE · A drone product page, its exploded-view diagram scrubbed by scroll.

  • AURA · A headphone product film, scrubbed by one scroll value under liquid glass panels.

  • Robotic Arm · A Three.js arm assembling from wireframe into a labeled blueprint.

  • Rill Architecture · A premium residential service page, image-led under GSAP parallax.

  • EaseUI · Describe a UI, get production code: the same studio's own design tool.

  • Trái Cây Bến Tre · A direct-to-Hanoi fruit brand's editorial storefront.

  • GravityHive · A plugin marketplace for WordPress, Shopify and Framer.

  • HVS · A bilingual villa-care service, with a live inspection-report card.

  • SổDeal · A deal-management tool for real-estate brokers.

design:os, MIT, and the sites it shipped: Jang Trịnh. The strip scrolls sideways.

Reflection
This system can prove parity: that a component matches the reference it claims, that a route renders, that a number carries a source. It cannot prove taste. Two failures are still open, caught by a human where the harness could not: a `specimen` artifact kind declared with no renderer, and the primary button's focus indicator measured at 1.95:1 against the 3:1 an escalation trigger requires. They stay open on purpose: a case that only lists what got fixed is not evidence, it is a highlight reel. Two more were caught and repaired; all four keep their block in the registry, each pointing at a tracked provenance file, and none of them print on the page: the record stays, the printing does not. The convention outlives this page: the shipped CLI's own README carries the same kind of list, in its own words, not a marketing summary of it.
design:os