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-1Page and work titles

Mnemosyne

--ml-display-2Section openers

Mnemosyne

--ml-display-3Entry titles

Mnemosyne

--ml-display-4Subheads

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-textText · Blacker Pro · 55–65 characters

Label · uppercase · letterspaced

.ml-labelMaison Neue Mono

Proposed connection — unreviewed

.ml-label--machineMachine provenance. Dot plus words, always both.

Small caps, letterspaced

.ml-scCapitals are always letterspaced; lowercase never

No. 1 · 33 min · 312

.ml-folioBracketed, 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--hairHair · 0.5px · Within a card; between list rows.
.ml-ruleRule · 1px · The default. Section separators.
.ml-rule--strongStrong · 3px · Major sections; under the masthead.
.ml-rule--heavyHeavy · 6px · Page-level division. Rare.
.ml-rule--markMark · 3px · The second colour, drawn as a line.
.ml-rule--doubleDouble · 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 landsdata-frame on the document. Prose inside a broad page is not told anything: it caps at the measure on its own, andcheck: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. 1Meaning LayerMachine-found

Tags

Sourced1929Proposed

Field

Meter — position in a text, not a percentage

Read · passage 118 of 312
Narrated · 21:04 of 32:49

Cards

No. 1 · Sourced

The Aims of Education

A. N. Whitehead

Marked at the head

A coloured tab in a ledger. The card equivalent.

Cover — typographic, generated. No stock photography, ever.

No. 1The Aims of EducationA. N. WhiteheadMeaning Layer
No. 2Weimar GermanyEric D. WeitzMeaning Layer

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.
0:00–0:00