Patterns

Patterns describe how the foundations and components come together into complete page experiences. Where a component like “navigation” or “content” can be examined in isolation, a pattern is always contextual — it’s the article page as a whole, the listing page as a whole, the homepage as a whole.

These are the places where the design system’s opinions become most visible. The article pattern, for instance, combines the drop cap, the lede paragraph, the margin notes, the pull quotes, and the section breaks into a single reading rhythm. None of those components were designed independently — they were tuned together, in the context of long-form prose, until the page felt like a page.

Article

The reading experience is the site’s primary pattern. A drop cap opens the first paragraph. A lede paragraph in slightly larger type sets the tone. Margin notes and footnotes provide commentary without interrupting flow. Pull quotes punctuate long sections. Section breaks use a three-asterisk dinkus. The breadcrumb, header, prose container, and footer assemble into a single, seamless reading rhythm.

Listing

Index pages prioritize scannability. Clear typography-based section labels replace decorative affordances. Each content type — writing, links, shortlist, media, books — gets an appropriate list pattern tuned to its density and metadata needs, all sharing the same structural grid and the same principle: help the reader find what they’re looking for without visual noise.

Homepage

The front door establishes identity and signals liveness. The nameplate appears at display scale rather than breadcrumb size — the only page where it does. An intro section with a live indicator shows where the author is and what they’re working on. Below it, recent work from across the site surfaces in a unified feed, giving returning readers a reason to come back.