Chapbook

A chapbook was a distribution technology rather than a look — standard formats, shared stock, no design per title, cheap enough to give away. This system inherits that, including the parts that sound like limitations.

Chapbook is not a way to make your documents look distinctive. It is a way to stop having the conversation, so the writing can start — and it holds up when the page leaves the screen.

Nine rules, each already followed by two independently built sites before it was written down here. A rule that has survived one build is a preference; these survived two, with different palettes and different faces.

Eight colour tokens, and the names are the contract. Change every value you like; keep the names, so a diff between two sites built on this system shows only the differences that were intended.

Ratios are measured against the worst-case grain pixel, not against --paper. The overlay sits between the text and the page and moves the surface toward the text in both themes, so a ratio taken against the flat ground flatters itself. --rule and --sunk are exempt: they are edges and fills, and WCAG does not ask a hairline to be legible.

The build recomputes every number on this page from the stylesheet it ships, and exits non-zero if any text token drops below 4.5:1. A failing token cannot reach the site, and this table cannot go stale.

Layout tokens, reconciled across the three sites — they had drifted, and these are the settled values:
--gut clamp(1.25rem, 5vw, 2.75rem) · --wrap 62rem · --rail 10rem · --measure 34em · --ease cubic-bezier(0.22, 0.61, 0.36, 1). Rem everywhere.

Two faces do all the work. If a piece of text tells you what kind of thing you are looking at, it is mono, uppercase and tracked. If it says something, it is the language face. That test decides every case, which is why the system needs no third face.

Sizes live on classes, never on elements. A base h1 rule gets overridden on every page that uses it, and at that point it is not a base rule — it is a default nobody wants, written once and fought four times.

Three faces are declared: --mono, --language, and --display, which defaults to --language so most sites never think about it. Set it separately only when titles genuinely want a different face — the hub does, because Archivo Black sets its titles and Roboto sets its prose.

Every component below is live. Hover a row to see Rule 05, press the toggle in the masthead to see Rule 06, and print the page to see Rule 09.

The index row

The code field

.row:hover::after { transform: scaleX(1); }

The one bordered, filled object in the system. It earns the exception in Rule 02 by genuinely being a different surface, rather than being a card drawn around ordinary content.

The rail, and the margin note

You are looking at both. The number and the section name are sticky and stay beside their content for as long as that content is on screen; the mono paragraph under them is a margin note, which is the same column carrying prose instead of metadata. Narrow the window — or the container, which is what the system actually measures now — and the whole rail collapses to a line above the content.

The sub-heading

That is one, and it is the only one. An h3 used to arrive at 19.89px against 17px body text at the same weight, which is a difference no reader sees. It is mono and tracked instead, matching the rail’s own heading, because a sub-heading names the part of the document you are in rather than saying something — which is Rule 01’s test. One treatment, not a scale.

Lists and quotations

• A list item, with the marker in --faint because a bullet is punctuation rather than content.
• The gap between items is smaller than the gap between blocks, so a list reads as one object.

A quotation is opened by the document weight — the same 2px in ink that opens the page under the masthead. No fill and no italic: the rule and the indent are the whole treatment.

The system, about itself

The table and the text control

Both are above, in section 03. The table is hairlines and one 2px head rule, with no zebra fill — the system has one fill and it is the row hover, so a striped table would be the second. The skin buttons are the text form of Rule 08: a border, never a fill, and the pressed state deepens the border to ink rather than filling the box.

There is no install step, no package to configure and nothing to initialise. Link one file and use the class names.

<link rel="stylesheet" href="https://chapbook.page/v1.2.2/chapbook.css">

Two version paths, and they are not the same promise. /v1.2.2/ is exact: it never changes, and it is cached for a year. /v1/ follows the major line and picks up additive releases, cached for a day. Link the exact one unless you specifically want the updates.

Or vendor it, which is better

curl -O https://chapbook.page/chapbook.css

Copying the file into your own repo costs one request less, survives this domain disappearing, and lets you edit it — which you are meant to do. A system you cannot change is a dependency.

Or from npm

npm i chapbook

The minimum page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A page</title>
  <link rel="stylesheet" href="/chapbook.css">
</head>
<body>
  <header class="wrap bar">
    <a class="brand" href="/">site name</a>
  </header>

  <main class="wrap">
    <div class="hero">
      <p class="eyebrow">Label</p>
      <h1 class="name">The title</h1>
      <p class="intro">One sentence saying what this is.</p>
    </div>

    <section class="blk">
      <div class="rail">
        <p class="n">01</p>
        <h2>Section</h2>
      </div>
      <div class="body">
        <nav class="index">
          <a class="row" href="/somewhere">
            <span class="row-label">Status</span>
            <span class="row-title">The thing</span>
            <span class="row-mark" aria-hidden="true">→</span>
            <span class="row-desc">What it is.</span>
            <span class="row-meta">where it goes</span>
          </a>
        </nav>
      </div>
    </section>
  </main>

  <footer class="wrap">
    <div class="foot"><b>site name</b><span>A line.</span></div>
  </footer>
</body>
</html>

Working with an agent

Point it at system.md, which is the whole system as plain text — the nine rules, the token contract, the markup for every component, and the rules for extending it without drift. llms.txt is the short version for a small context window. There is also a skill, in the format weindie.com uses, in skill/ in the repository.

The system carries the version, not the site. /v1.2.2/ never changes, so a page that links it never breaks.

One rule decides a major bump: a token rename or a removed primitive. Those are the only two changes that can break a site downstream — everything else is additive, and additions ship as a minor version at the same URL.

What is deliberately not here: margin notes, tables as a styled component, form controls, and any kind of grid utility. Each is a real gap. None of them has been built twice yet, and the system stays small by refusing to describe anything it has not had to do.

The changelog is in the repository, and it records why a thing changed rather than only that it did.