This page is a typography specimen, not an essay. It exists so the layout can be tuned against real shapes: paragraphs, headings, quotations, lists, footnotes, code. The quick brown fox jumps over the lazy dog. The text continues for a few lines so leading, measure, and rhythm can be judged on something longer than a single sentence.
A second paragraph. Notice the vertical spacing between blocks — the rhythm token is 1.5rem, set in tokens.css. Inline strong and emphasis should feel like changes in weight and slant, not in size. A link back home should be quiet by default and lift to the vermilion stamp on hover.
A heading at level two
Headings sit slightly tighter than body, and never wider than the column. They use the optical-size axis to firm up at larger sizes.
A heading at level three
Subordinate sections take a smaller heading, still serif, still ink.
You must change your life. Every observation about an object turns into an imperative directed at the observer.
Sloterdijk, Du mußt dein Leben ändern
Above is a blockquote with a citation. The left rule is faint mist; the text is sumi grey; the citation is set in Inter at UI size.
Lists
An unordered list of practices the site is interested in:
- sleep regularity
- resting heart rate
- weekly aerobic minutes
- posture under load
An ordered list of milestones:
- scaffold and typography
- landing page
- essay layout
- deploy
Code
Inline code like --leading-body: 1.65 sits flat against the surrounding text. A block of code uses the same family at a comfortable size:
:root {
--ink: #1A1814;
--paper: #F5F1E8;
--stamp: #B23A2C;
}Footnotes
A reference in running text can carry a footnote1. A second reference can come a sentence or two later2. The notes themselves sit at the bottom of the essay, separated by a hair rule.
Footnotes
— Berlin, mmxxvi.