The Broadsheet
Protocol
A design system built for reading, not for engagement. Long-form prose, marginal voice, and the restraint of a serious quarterly. These pages document the type, color, and components that make the journal cohere.
What we believe
Four commitments that precede every token. When a decision is unclear, these are the tiebreakers.
The paragraph is the unit.
Not the page, not the component, not the screen. Every choice — from measure to leading to margin — exists to serve the paragraph and the reader's relationship to it.
Typography does the heavy lifting.
Color, shadow, and motion are ornamental. Weight, scale, measure, and rhythm carry the meaning. If a design only works because of its color, the typography is not yet finished.
Whitespace is not empty.
It is the most important element on the page. Generous margins signal confidence; tight margins signal scarcity. We design with confidence.
One accent is enough.
A single vermilion, used rarely, carries more weight than a palette of semantic colors. Restraint is the aesthetic; restraint is the message.
A quiet palette
Three neutrals, one ink, one accent. The paper is warm — a soft bone that softens contrast and makes long reading feel calm. The accent is used for marginalia, kickers, and the occasional drop-cap flourish.
A modern serif, a quiet grotesque
Newsreader for running prose — a contemporary serif designed explicitly for screens, with optical sizing that blooms at display sizes. Inter for labels, metadata, and anything that must defer. IBM Plex Mono for data.
Letter-spacing −0.03em
Line-height 0.95
Letter-spacing −0.025em
Line-height 1.0
Letter-spacing −0.015em
Line-height 1.1
Line-height 1.5
Line-height 1.7
Measure 62ch
The body copy is where the system either succeeds or fails. Set in Newsreader at a generous 19 pixels with 1.7 line-height, it is optimized for extended sessions of reading — not skimming, not scanning. A single measure of about sixty-two characters keeps the eye from fatiguing at either end of the line.
Letter-spacing 0.18em
Uppercase
The vocabulary
A small, deliberate set. Most essays use only five or six of these. The rest exist for moments of emphasis — a pull quote once per piece, a footnote sparingly, an aside when the argument needs air.
Pull Quote
Every second of attention a person gives to your content is a second they are not giving to something else. From the essay
Aside & Footnote Reference
A footnote reference looks like this1 — a small vermilion numeral nestled into the line.
Ornament
Do, and don't
A short list of house rules. When in doubt, the don'ts override the dos.
Do
- Set body text at 19px or larger. Smaller than that is disrespectful to the reader.
- Use marginalia for editorial voice; let the author speak only in the main column.
- Pair every image with a caption in small caps — context is part of the image.
- Leave the first line of a paragraph un-indented; indent subsequent paragraphs.
- Use the vermilion accent for no more than three elements on any given page.
Don't
- Do not use drop shadows. Ever. This is not a mobile app.
- Do not animate on scroll. The reader is reading, not watching.
- Do not use a second accent color — one vermilion is the budget.
- Do not center body copy. Left-aligned with a natural ragged right.
- Do not use icons in place of words where words will do.
How readers reach us
Every contact link on the journal resolves to a single Gmail address with a +tag suffix for routing. No address appears in the page source — the mailto: is assembled at runtime from split strings, so scrapers harvest nothing.
The pattern
assets/js/mail.js loads on every page. It finds every [data-mail] element and sets its href on DOMContentLoaded. Visible text is whatever the author wrote; the address never appears in source.
Tag registry
| Tag | Used for | Where it appears |
|---|---|---|
+subscribe | Newsletter signup | Masthead, on every page |
+newsletter | Newsletter footer link | Footer, on every page |
+hello | General correspondence | About page, contact strip |
+speaking | Speaking enquiries | About page, contact strip |
+work | Paid engagement enquiries | About page, contact strip |
New tags are cheap — invent one per inbound stream. In Gmail, filter on to:…+tag@… to route, label, or auto-reply. Never publish the un-tagged address anywhere — it is a write-only inbox routed entirely through tags.
Do
- Use
data-mailon every contact link, even single-click ones. - Set
data-mail-subjectto a short, human, pre-filled subject line. - Keep the visible link text neutral (“Speaking enquiries →”) — not the address itself.
- Invent a new tag for any new intake surface before wiring a link.
Don't
- Do not hard-code
mailto:in HTML source. Ever. - Do not display the raw address on the page — visible addresses get scraped.
- Do not reuse one tag for two streams — routing silently collapses.
- Do not link to a contact form unless the form posts to a real server endpoint.
A note on craft
This journal runs on Jekyll, deployed to GitHub Pages, and relies on a long list of inherited traditions.
The Broadsheet Protocol borrows liberally from three sources: the quiet elegance of the London Review of Books, the rigorous grid of Die Zeit, and the margin-note tradition of Edward Tufte's visual-display books.
Type is set in Newsreader by Production Type — a contemporary serif with a full optical-size axis, designed specifically for digital reading. Sans-serif elements use Inter by Rasmus Andersson; monospace data uses IBM Plex Mono by Mike Abbink. All three are distributed under the Open Font License and loaded from Google Fonts.
Measurements are expressed in rems against a 16-pixel root. Spacing follows a modular scale. Colors are declared as CSS custom properties, and dark mode, warm paper, and cool paper are supported as data-* attributes on the root element.
The site is built with Jekyll 4.3 on GitHub Pages; layouts and styles live in narendranag/narendranag.github.io. This document is version 1.0 of the protocol.