The system behind
the archive.
One source of truth for the Systems Archive — tokens, a three-weight line system, type and spacing scales, components, and the principles that hold them together. Cool-neutral palette, patent-drawing restraint, transit-map structure. FIG. 01–07 set the editorial foundation; FIG. 08 adds the app / data primitives adopted from the OB1 dashboard; FIG. 09 documents the callout component; FIG. 10–12 cover the three glyph families — node, utility, and work marks.
Cool-neutral, with one warm note.
The ground is a genuinely neutral cool — drafting film, not blue. Every value is WCAG-checked on the paper. Four route colors carry the transit-map vocabulary; rust is the single warm accent, used sparingly.
The System says the palette is settled. The System is being generous with the word “settled.” I have a folder called reds-2, a folder called reds-2-FINAL, and a folder called reds-2-FINAL-actual that I made on a Tuesday at 1 a.m. feeling fantastic about it. I haven’t opened any of them. — H.
Vary weight and value inversely.
A thin line is darker — a precise instrument. A thick line is lighter — a soft structural band, not a hard stroke. Three weights give the page rhythm without adding visual weight. One surface tone separates panels without a border.
Two typefaces, eight steps.
Space Grotesk for content, Space Mono for labels, data, and annotation. The content floor is 13px — anything smaller is mono ornament only.
One 4px base. No more guesswork.
Every margin, gap, and padding value resolves to one of these ten steps. There have only
ever been ten. In early 2026 a value of 14px was proposed; it was entered into the record
as Proposal 14, reviewed by a committee of one, and declined by the same committee, who
then went for a walk. The archive considers the matter of the 14 fully behind it.
It is not behind it.
Built once, in styles.css.
The shared component layer. Every page links it; per-page styles only describe what is genuinely unique to that page.
The .plate component: a bordered figure box with a corner notch driven by data-fig. Give it data-status and the notch reports draft or planned instead. It has been with the system since the first commit, has never missed a day, and does exactly one thing. In MMXXVI it was named, by the archive, the archive's Most Dependable Component. There is no such award. The archive just says it sometimes.
“I rebuilt this design system three times so I would never again have to decide what shade of grey a divider should be. It worked completely. I now use the time I saved to decide other things, at one in the morning, on a Tuesday.”
— Hadley SoffeQuiet, consistent, optional.
Three durations and one easing curve. Diagram animations — pulsing nodes, flowing data packets — run slow and low-contrast. All of it stops under prefers-reduced-motion.
Five rules the system runs on.
Simplicity from complexity.
The work is dense; the frame is calm. Thin lines, generous margins, restrained color. The design never competes with what it holds.
Inverse weight and value.
Thin lines run dark and precise; thick lines run light and soft. Hierarchy comes from how a line is drawn, not from adding another color.
Accent discipline.
One warm note — rust — in a cool field. At most one instance per viewport. A spark, never a theme.
Ornament is not content.
The tiny mono labels are texture, like a blueprint's title block. Anything a reader must actually read sits at 13px or larger, at body contrast or better.
One source of truth.
Tokens and shared components live in styles.css. If a pattern appears twice, it belongs in the system — not copied into a second page.
Same restraint, denser surfaces.
v1.0 covered the editorial / case-study side of the archive. v1.1 adds the vocabulary needed for app and data-dense surfaces — first adopted by the OB1 dashboard. Same tokens, same line system. Two parallel button families now coexist: pill .btn for portfolio CTAs, square .action for app surfaces. Don't mix on one surface.
Every interior page opens exactly like this. The archive checked.
A mono kicker, a display headline, and a reading-width body — the three things a page says before it has said anything. The archive finds the ritual steadying.
| Ref | Pattern | Family | Added |
|---|---|---|---|
| SYS-08.1 | editorial-header | Editorial | v1.1 |
| SYS-08.2 | type-chip | Atom | v1.1 |
| SYS-08.3 | data-plate | Container | v1.1 |
| SYS-08.4 | action | Control | v1.1 |
Discard draft?
The modal: the same plate language as the rest of the page, scaled down and lit from the front so you cannot reasonably claim you didn't see it.
Four ways to say “look at this.”
A callout is the system raising one finger. Each variant pairs a utility glyph with a register — information, warning, tip — and, on rare and well-documented occasions, the handwriting of whoever built this. The archive would like to note, entirely unprompted, that none of this bears on the matter of the 14, which remains closed.
The system has noticed something it considers worth noticing. You may act on it or scroll past it; the system has prepared itself for both.
Reserved for the genuinely broken. The system does not cry wolf — it finds the wolf undignified — so when this glyph appears, something is, in fact, wrong. (In live use this copy goes plain. This is a specimen, and specimens are allowed to talk.)
A small, optional improvement. Take it or leave it. The system made its peace, some time ago, with being a suggestion.
I picked the typeface on this page eight days ago. By my own historical average I have about four days left before I pick a different one. The System does not know this. The System believes the typeface situation is, and I quote, “settled.” Please let it have this. — H.
Eight nodes for the parts of the system.
HS-SYS-003 — the brand node set. Eight glyphs naming the working parts of the archive's own infrastructure: Open Brain, Cowork, the MCP layer, the agents, the vaults. Built to glyph-spec.md on the same burgundy scientific-plate recipe as the utility set, they appear wherever the system draws itself — the OpenBrain Loop on the homepage, the architecture maps in the case studies.
Twenty in-style icons, instead of emoji.
HS-SYS-005 · v1.0.0 · locked 2026-05-16. A burgundy scientific-plate set built to glyph-spec.md — the same recipe as the brand node glyphs (HS-SYS-003), but oriented at workaday use. They replace common emoji in system output — the daily brief, job-pipeline reports, and anything else Claude generates. Like system-elements.html, they intentionally diverge from the cool-neutral chrome — burgundy mono inside a paper plate is the illustration register, not the page register.
Skills consume the set by reading system-glyphs-utility/v1.0.0/manifest.json — look up by emoji (replaces_emoji) or by ID, then inline the SVG file. Each glyph carries its own <defs> with id-scoped names, so multiple can coexist in one document without collision.
Six companies, in the system's own hand.
HS-SYS-006 · v1.0.0 · locked 2026-05-19. The work marks — six company-attribution glyphs, one per place the work happened: Access, Nav, Sift, SalesRabbit, ChargeZoom, CheddarUp. Each redraws a real company logo in the burgundy scientific-plate register, so a case study or a career diagram can name its employer in the system's own hand rather than borrowing someone else's.
The archive has read every note in the margins. It read each one the day it was written. It never said anything back, because it had a page to run. But you've read this far — past the ornament you were warned about, past the 14 — so: the notes are the best part. They always were.