The specimen

Design System

A book page delivered by a visibly modern machine. The text is set in a classical book grammar and left alone; every piece of furniture around it is Bauhaus and brutalist — rules, exposed grid, letterspaced capitals, flat blocks of a second colour. The seam between the two is never blended, because the seam is the argument.

Everything below reads its live custom property. If a swatch is wrong, the token is wrong. Flip the paper or the reading size in the view options and this page answers. The colophon states the sources.

01 — Colour

Three colours and an ink scale. That is the whole palette, and adding a fourth means amending docs/brand/IDENTITY.md first.

The mark

--pg-accent

Rules, ornament, folios, the drop cap. Never text.

Accent ink

--ml-accent-ink

Accented text. Clears 4.5:1 on both papers.

Machine

--ml-machine

Everything a model made. Nothing else, ever.

The doctrine. --pg-accent is a second colour on a title page. It marks, it rules, it ornaments — it is never set as type. Accented text uses --ml-accent-ink, which must clear 4.5:1 against the paper it sits on. This is why the Workhorse yellow could never be typography: at 1.3:1 it is unreadable as type and perfectly good as a rule.

Blue is the machine, and it is load-bearing. Any mark whose origin is a model — a proposed connection, a synthetic narration, sync state — is rendered in --ml-machine and nothing else is. Colour carries the human/machine seam so a reader can tell at a glance which claims came from a person. It is never decorative.

Ink --pg-ink

Ink soft --pg-ink-soft

Ink faint --pg-ink-faint

Rule --pg-rule

Paper --pg-paper

02 — Type

Three voices. Blacker Pro is the house serif and sets the text, the display and the structural type; Stratos is the interface voice and does every control. Maison Neue Mono carries every label, folio, timecode and reference, and is the most Bauhaus element in the system. The print tier keeps Libre Caslon until the editions are re-proofed.

Mnemosyne

--ml-display-1 Page and work titles

Mnemosyne

--ml-display-2 Section openers

Mnemosyne

--ml-display-3 Entry titles

Mnemosyne

--ml-display-4 Subheads

The images in myths are not borrowed between cultures but generated, repeatedly, by the same structure — which is a claim about people and not about libraries.

--pg-size-text Text · Blacker Pro · 55–65 characters

Label · uppercase · letterspaced

.ml-label Maison Neue Mono

Proposed connection — unreviewed

.ml-label--machine Machine provenance. Dot plus words, always both.

Small caps, letterspaced

.ml-sc Capitals are always letterspaced; lowercase never

No. 1 · 33 min · 312

.ml-folio Bracketed, tabular figures

03 — Rules

Depth is made of rules, offset, and flat colour. No shadow, no radius, no gradient — hierarchy that an elevation model would carry elsewhere is carried here by weight, which is what a printed page has always done. Rules are welcome at major breaks only: “a succession of unmeaning rules… soon wearies the reader.”

.ml-rule--hair Hair · 0.5px · Within a card; between list rows.

.ml-rule Rule · 1px · The default. Section separators.

.ml-rule--strong Strong · 3px · Major sections; under the masthead.

.ml-rule--heavy Heavy · 6px · Page-level division. Rare.

.ml-rule--mark Mark · 3px · The second colour, drawn as a line.

.ml-rule--double Double · 3+0.5 · Above a colophon. The one ornament.

04 — Grid & space

Mobile is the base case, not the fallback. The measure is the viewport minus the trim, and there is no margin column; the marginal apparatus appears at 62rem, which is the first width where a note column can exist without stealing from the text. Every @media in the system is min-width.

There are two frames. --ml-width is the READING frame — measure plus the margin column — and every prose-led page caps at it. --ml-width-broad is the BROAD frame, trim to trim, and the library, the catalog, the index and a serial's contents take it by setting frame="broad", which lands data-frame on the document. Prose inside a broad page is not told anything: it caps at the measure on its own, and check:responsive measures that it still does.

--ml-s1

--ml-s2

--ml-s3

--ml-s4

--ml-s5

--ml-s6

--ml-s7

--ml-s8

Live at this viewport

05 — Primitives

The named parts every page is built from. A control is never an icon alone: this system has no icon set, so a glyph without a word is a guess the reader has to make.

Buttons

Marks — typographic, never an icon font. The label always stays.

A character where the face has one — the triangle the player already uses — and a drawn mark where it does not. Drawn marks are geometry, not illustration: straight segments, mitred joins, currentColor, sized in em, so they inherit weight and colour from the button exactly as a glyph would. Not an icon font: a second vocabulary to keep in step with the first, for a handful of marks, is a bad trade. The span is always aria-hidden — the word beside it is the label.

Button row — justified, like the masthead

Read

Equal columns, edge to edge, no ragged tail — the same argument as the masthead, at the scale of a card.

Slab — the only place type is reversed out

No. 1 Meaning Layer Machine-found

06 — The rules that hold

No box-shadow. A hairline and a 1px offset is the substitute.
No border-radius. Everything is square.
No gradient. Flat colour or paper.
No icon-only control. Marks are typographic and the word always stays.
Everything is border-box. Otherwise a 44px touch target renders at 66.
Reading size sets on body, never html — or every rem token scales with it.
Display type declares its own leading. Inherited reading leading is nearly two blank lines at 34px.
A part class is scoped under its block (.ml-cover .ml-cover-title). A bare one is a name someone else is already using.
Every @media is min-width. Mobile is the base case.
Capitals are always letterspaced. Lowercase never is.
--ml-machine marks machine work and nothing else.
Prose is never wider than the measure. 55–65 characters — including on a broad frame, where the page is not.
Touch targets are at least 44px.
Focus is a mark-coloured outline with an offset, on :focus-visible. A glow is a shadow by another name.