ux-patterns
Essay and Paper Pages
How to make great pages for long-form essays, research papers and reports on the web: the long read itself, a paper’s own page, and the index that holds a body of work.
Start here: the Essay and Paper Pages board — picks, registers, layout vs style, essay vs blog post, and a gallery of 43 pages with screenshots.
Mockup: In Tech We Trust in three styles, v2 (polished; v1 kept). Academic, magazine, personal; desktop and phone. Source in mockups/in-tech-we-trust.
Reusable: the Reading System stylesheet (demo).
This collection is the one home for long-form page inspiration. It absorbed Report Inspirations (the Are.na channel) on 2026-10-26; every item from there has its own page here, tagged #report-inspirations. Started 2026-10-23, widened 2026-10-24. Some notes come from the SoR Papers moodboard. Related: Docs and Explainer Sites, Research Sites, Typography.
What makes a great essay page
- Measure. One column of about 60–75 characters; serif or a warm grotesque at 18–21px.
- The opening. Decide how much image: art first (Emergence), art beside the title (Noema), photo under the title (Aeon), or none (Gwern). Get title, summary and the PDF on the first screen.
- The claim up front. A summary or standfirst, with the key sentence findable at a glance (Anthropic sets it in bold).
- Contents in reach. A sticky sidebar or a slim chapter bar for anything over a few thousand words.
- Notes beside the line. Sidenotes in the margin on desktop, at section end or toggles on phones (Tufte CSS, Gwern).
- Figures in three widths: margin, column, full width. Figures that explain, not decorate (Distill, Bret Victor).
- Metadata out of the reading line. Authors, date, status and team in a side column or a compact block.
- Where it sits. For a series, show the parts and this one’s place (Situational Awareness, Noema’s series box).
- Scholarly end matter. References, cite-as, version and licence (arXiv is the floor; Distill does it beautifully).
- One image system so every piece has its own art and still reads as one house (Anthropic, Works in Progress).
Essay or blog post?
Not length. A piece is an essay if it stands alone without the feed, argues one thing to a real end, and is something you would revise rather than follow up. Then give it essay apparatus (summary or dek, contents, notes, dates and revision history, cite-as, a real end) and drop feed chrome (tags, recent posts, share bars). Layout sets the genre (paper, essay, post); style sets the register (academic or magazine).
Also in this repo
- Meaning Alignment Institute (from the Are.na channel) lives in Research Sites: it is an organisation’s site, not a long read.
- Archive: infuse.univ-amu.fr (academic article layout), Medium 2013 (the text-first editorial layout that set the tone), nan.fyi (clean black-and-white blog).
- Journal: Substack’s ultra-simplicity.
Research papers
Scholarly and figure-led: byline grid, abstract, numbered figures, cite block.
Anthropic · Formal verification paper
A research paper as one page: chapter bar, centred title, one big figure, summary with the claim in bold, then the text.
anthropic.com →Distill · Why Momentum Really Works
The model research article for the web: interactive figures in the text, a byline block, footnotes and a full citation apparatus.
distill.pub →eLife · Respiration brain network
Research paper. Peer review and figures-and-data as tabs.
elifesciences.org →Epoch AI · How predictable is LM benchmark performance?
Compute-focused extrapolations as a way to forecast AI capabilities: a research report as a web page.
epoch.ai →Ink & Switch · Embark
Gradually enriching a text outline with interactive planning tools: a vision for living documents.
inkandswitch.com →Ink & Switch · Local-first software
Research essay as long-form web page: contents list, numbered ideals, wide figures and tables, and a PDF.
inkandswitch.com →METR · Long tasks
Research paper. Cite and arXiv buttons in the header. The versioning banner.
metr.org →Matuschak and Nielsen · Tools for thought
Research paper. Visible, dated corrections.
numinous.productions →Thinking Machines · Defeating nondeterminism
Research paper. Warm serif body with one odd accent face. The cite block.
thinkingmachines.ai →Transformer Circuits · Attribution graphs
Research paper. Interactive figures as the core evidence.
transformer-circuits.pub →Reports
Institutional and chaptered: summary first, sections, PDF twin, revision history.
Ember · Global Electricity Review 2025
Report. Chapter paging for a long report. Headline stat tiles.
ember-energy.org →Forethought · AI-enabled coups
How a small group could use AI to seize power: a serious policy research report as a web page.
forethought.org →International AI Safety Report 2026
Report. The evidence-gaps closer. A report that is truly a web page, not a PDF wrapper.
internationalaisafetyreport.org →Our World in Data · Awful, better, can be better
Report. The gold standard for end matter: revision history, reuse terms, per-chart download.
ourworldindata.org →Explorables
The figure is the argument.
Bartosz Ciechanowski · Moon
Explorable. Prose that drives the figure. A one-line instruction under each figure.
ciechanow.ski →Bret Victor · Up and Down the Ladder of Abstraction
The interactive essay: live figures you can drag sit in the text and are the argument.
worrydream.com →Magazine essays
Art-directed and literary: a frame before the title, one image system, epigraphs.
Aeon · The disruption nexus
Classic essay magazine: title and standfirst over a wide photo, author bio and word count in the margin.
aeon.co →Asterisk · How co-ops electrified America
Magazine essay. Oversized byline. One accent colour, used everywhere.
asteriskmag.com →Cabinet · Dolls and idols
Magazine essay. The issue bar. Feels like a printed object.
cabinetmagazine.org →Emergence Magazine · Dendrochronology
Art first: a large artwork fills the first screen, then title, audio version, bold standfirst and a centred column.
emergencemagazine.org →Lapham's Quarterly · The knife's edge
Magazine essay. A painting as hero, with a credit strip.
laphamsquarterly.org →Noema · The Cycle of Civilizations
Art beside the title: title and illustration share the first screen, then a series box and author notes in the margin.
noemamag.com →Orion · A spider's portion of joy
Magazine essay. Department label and the rule under the title.
orionmagazine.org →Public Domain Review · Fear and fragility
Magazine essay. Epigraph before paragraph one. Sources and collapsible notes.
publicdomainreview.org →Works in Progress · Age of the bacteriophage
Magazine essay. Serif plus mono pairing.
worksinprogress.co →Works in Progress · The housing theory of everything
Magazine essay with a scholarly spine: an illustration per essay, footnotes, contents and house-style charts in a calm column.
worksinprogress.co →Personal essays and long posts
One voice, quiet craft: good type, one signature device, a real end.
Craig Mod · Fast Software, the Best Software
A writer's essay page: one calm column, generous measure, nothing in the way of the text.
craigmod.com →Tufte CSS
The reference stylesheet for essays: sidenotes, margin notes, margin figures and full-width figures in plain HTML and CSS.
edwardtufte.github.io →Geoffrey Litt · LLMs and end-user programming
Personal essay. Two-tier further reading.
geoffreylitt.com →Alexey Guzey · How life sciences work
Personal essay. Paper-grade end matter on a personal site.
guzey.com →Gwern · The Scaling Hypothesis
All apparatus, no image: abstract, status and dates, contents, sidenotes, link popups, backlinks and bibliography.
gwern.net →Henrik Karlsson · Looking for Alice
Personal essay. Writing and a few devices carry it.
henrikkarlsson.xyz →Maggie Appleton · A brief history of digital gardens
Essay in a garden: planted and tended dates up top, drawn illustrations, sidenotes and backlinks.
maggieappleton.com →Matthew Butterick · The bomb in the garden
Personal essay. Stepped fluid sizing. The dinkus before end matter.
practicaltypography.com →Robin Sloan · Specifying Spring '83
Personal essay. Art plates as section dividers. A Discussion section.
robinsloan.com →Situational Awareness
A long essay as a series of chapters: the parts run across the top of every chapter, with the full series as a PDF.
situational-awareness.ai →Reports as PDFs
Designed print reports: the PDF twin a web report should feel like. Mostly from the Are.na report inspirations channel.
CRI Reality Check (PDF)
Civilization Research Institute's first Reality Check: a serious report on civilisational trends.
civilizationresearchinstitute.org →Life-Ennobling Economics (PDF)
Introduction to Life-Ennobling Economics: a framework for an economy that serves human flourishing.
drive.google.com →.pdf)
PCI · A New Framework for Planetary Futures (PDF)
Position paper proposing a framework for thinking about planetary-scale futures.
cdn.prod.website-files.com →The Mindfulness Initiative report (PDF)
Policy-oriented research bridging contemplative practice and public life.
themindfulnessinitiative.org →A paper’s own page
The short page to share and cite: summary, formats, citation.
arXiv · abstract page
The bare record: title, authors, abstract, formats, how to cite, versions. The floor every paper page must clear.
arxiv.org →Open Book Publishers · book page
Everything gathered: Read online, Download and Print as three equal buttons, then description, reviews, stats and contents.
openbookpublishers.com →Stripe Press · The Dream Machine
The book as object: cover as hero, about 150 words beside it, ways to get it, then the book opens on scroll.
press.stripe.com →Indexes
How a body of papers or essays is shown as a whole.
80,000 Hours · Career guide
A guided path: each part is a question with a short answer, plus a one-minute summary and the same guide as book and audio.
80000hours.org →Anthropic Research
Research index with taste: one sentence on what the work is for, areas with one line each, then a staggered gallery of illustrated papers.
anthropic.com →LessWrong · Rationality A–Z
A body of essays as a book's contents: each part a wide band with an engraved plate, a paragraph on what it argues, and its essays.
lesswrong.com →OpenAI Research
Research index as a grid of art cards with a list view toggle. Clean, but less distinctive than Anthropic's.
openai.com →