Chapter IV
Rhythm.
A page is time as well as space. The gap between paragraphs is a pause; the transition between states is a breath. Nous treats them with the same care as letterforms — a small system of pauses, rehearsed in one direction.
§1 · Space
The scale.
The space scale begins at four pixels — the thickness of a hairline, the width of the smallest gap the eye still registers as a gap. It doubles patiently: 8, 16, 32, 64, cresting at 144 pixels for the space between chapters.
A geometric scale is not the only honest choice, but it is the one that matches how the reader actually experiences space. A pause half as long as the last one still feels like a pause; a pause twice as long feels like a turning.
§2 · Measure
The line, and what length it wants.
The measure is the line length at which reading is easiest. Bringhurst, after Tschichold, gives the figure as 66 characters of a Latin face, including spaces. Nous sets its default one step narrower, at 64 characters (--measure: 64ch), which accommodates the slightly wider set of CJK and the italic forms of the display face at scale.
Too narrow, and the eye moves more than it reads; too wide, and it loses the next line on return. The middle is not a matter of taste — only of practice.
One cannot step into the same river twice — for other waters are ever flowing on. The line breaks, then, are doing work the line itself should not do.
One cannot step into the same river twice — for other waters are ever flowing on. This is a sentence that has room to make its case, and the reader has enough runway to follow it without losing their place on the return. The measure disappears, which is what a good measure is for.
One cannot step into the same river twice — for other waters are ever flowing on. This line runs longer than the eye's easy arc, so when it returns to the left margin it cannot always find the next line where it expects to. The reader, after a while, notices the work.
§3 · Grid
A column, not a system.
Nous is not a grid system. It is a single column of reading, wide enough for the eye to find its rhythm, narrow enough for the margin to carry a note. Everything else — the gallery grids of Chapter II, the specimen grids of Chapter III — is built against this column, not prior to it.
The reading column sits at max-width: 64ch, centered. The faint blue lines behind it are the 12-column screen grid, shown only for the sake of this illustration. Production pages never show it.
If a page has decorative elements — a margin note, a pull quote, a figure wider than the column — they sit outside this column, in the gutter, and collapse inline below 1024 pixels.
§4 · Breath
Three durations.
Three durations. The first is the fastest a reader will register as a change without noticing it; the second is the pause between a sentence and its reply; the third is the time a footnote takes to surface from the page without hurry.
Any of these collapse to zero when the reader prefers reduced motion. @media (prefers-reduced-motion: reduce) sets every duration to 0ms at the token layer — Nous does not insist on animation.
§5 · Breakpoints
Three, not five.
Three, not five. Phone, tablet, laptop. A reading page needs fewer responsive edges than a dashboard because it has fewer shapes to maintain; it keeps its single column and allows the chrome to relax around it.
| Token | Width | At this edge |
|---|---|---|
| --bp-narrow | 640px | Phone. The top-nav chapter numerals fold away; the brand and theme toggle stay. Prev/next stack vertically. |
| --bp-wide | 1024px | Tablet, narrow laptop. Margin notes collapse inline under their referenced paragraph. Two-column grids become one. The column remains. |
| --bp-full | 1280px | Comfortable desktop. Margin notes return to the gutter; gallery grids fan out. The room opens. |
- The reading measure stays 64ch at every width. Legibility is non-negotiable.
- Margin notes collapse inline below 1024px — never hidden, never truncated.
- Multi-column grids (2–5 cols) become single column below 1024px.
- Desktop editor mockups scroll horizontally inside their frame below 1280px, rather than reflow. They are illustrations of desktop tools, not responsive apps.
- Display headings step down one rung below 640px; body text never does.