# AI Guide — The Quiet Times · Editorial Serif

- **Slug:** `editorial-serif`
- **Category:** Editorial · Magazine
- **Vibe:** editorial-serif, long-form, warm paper
- **Format:** desktop magazine feature (2-column measure; 1 column ≤760px)
- **Reference implementation:** `reference.html` (same directory, self-contained)
- **Audience:** coding agents reproducing this design in any stack

## Mission

A magazine feature that makes reading feel like an event. Warm paper, a confident
serif, one red accent used like ink from a stamp. The design disappears so the prose
can carry — but the *rhythm* (masthead, deck, drop cap, pull quote, figure) is the
experience.

## Mood & voice

- Calm, literary, unhurried. Paper `#fbf9f4` is warm enough to feel like newsprint.
- Voice: reportorial, concrete details, sentences that breathe. No marketing verbs.
- The single red `#b3261e` is editorial restraint: drop cap, pull-quote rule, kicker,
  "Cities" tab, links. Nothing else is red.

## Color tokens

| Token | Hex | Use |
| --- | --- | --- |
| paper | `#fbf9f4` | page background |
| ink | `#1a1712` | headlines, masthead rules |
| ink-2 | `#3a352c` | body text |
| muted | `#4a4436` | byline, captions, issue line |
| hair | `#ddd6c6` | hairline rules, figure border |
| accent | `#b3261e` | drop cap, pull rule, kicker, active tab |
| fig-bg | `#f4f0e6` | figure placeholder with 45° hatch |

## Typography

Faces: **serif** (`Georgia / "Times New Roman" / "Iowan Old Style"`) for all reading
and display type; **mono** for masthead issue line, section tabs, byline, captions,
continue row. No grotesk in the article.

| Style | Size | Weight | Notes |
| --- | --- | --- | --- |
| masthead title | 40 | 700 | −0.01em |
| issue / tabs / byline / captions | 10–12 | 500–700 | mono · +0.1em · uppercase |
| h1 | 56 (40 ≤760px) | 700 | −0.025em · max 18ch |
| standfirst | 21 (18 ≤760px) | 400 | 1.5 · ink-2 · max 46ch |
| body | 17 | 400 | 1.65 · justify + hyphens |
| drop cap | 64 | 700 | float left, red, `line-height 0.82` |
| pull quote | 24 | 400 italic | 1.3 · `column-span: all` |

## Spacing & shape

- Masthead: max-width 980, top padding 26. Mast row: 3px ink top rule, 1px ink bottom
  rule; title left, issue right (mono, right-aligned, two lines).
- Section tabs: mono uppercase row under a hairline; active tab ("Cities") is red.
- Article gutter 32px; h1 56; standfirst 21; byline above a hairline rule with a 34px
  ink avatar (radius 50%) + mono meta ("Elena Marsh · Cities correspondent · 12 min
  read · Photographs by D. Okafor").
- Body: `column-count: 2`, `column-gap: 46px`, `text-align: justify`, `hyphens: auto`.
- Pull quote: 3px red left border, padding 4/0/4/22, italic 24, spans both columns
  (`column-span: all`), cite as mono uppercase below.
- Figure: `column-span: all`, 300px hatched placeholder (45° repeating gradient),
  caption mono uppercase with a bold "Fig. 1" lead.

## Copy (exact)

- Masthead: **The Quiet Times** / **No. 214 · Summer 2026 / A journal of cities &
  slow things**
- Tabs: **Reports · Field notes · Cities (active) · Archive · Letters · Subscribe**
- Kicker: **Cities / Infrastructure**
- H1: **A slow map of the city’s loudest corner**
- Standfirst: **Where the highway meets the river, ten thousand people pass each day
  and none of them stop. This is the story of the intersection — and of the plan to
  make it a place.**
- Pull quote: **“The block is never quiet. It merely changes its tune — and the city
  forgot how to listen.” — Rosa Delgado, ward 4 planner, 1971–2003**
- Figure: **Fig. 01 — Harbor & Main, 6:00 a.m.** / **Fig. 1** The intersection at
  dawn, before the first light changes. Count the cars in ninety seconds; the count is
  the argument.
- Continue: **Continue reading → The river returns, p. 42** · **Share · Save · Reply**

## Interaction

- Links (continue row): red underline, `text-underline-offset: 3px`.
- No hover animations, no scroll effects, no parallax. The only motion is the reader.

## Responsive behavior

- ≤760px: h1 → 40, standfirst → 18, body → single column (drop cap and pull quote
  still work inline; pull quote no longer needs `column-span`).

## Do / Don't

- DO justify + hyphenate body text — ragged right looks like a blog, not a magazine.
- DO keep the drop cap red and the pull-quote rule red; restraint is the point.
- DON'T add images, photos, or stock art — the figure is a hatched placeholder.
- DON'T switch to a grotesk anywhere in the article; the serif *is* the design.
- DON'T center the headline — it's flush left with the masthead, on the measure.

## Reproduction checklist

- [ ] Paper `#fbf9f4`, serif body 17/1.65 justified with hyphens
- [ ] Masthead with 3px/1px ink rules and mono issue line
- [ ] Red drop cap + red-bordered pull quote spanning both columns
- [ ] Hatched figure placeholder with mono caption
- [ ] Single column ≤760px

## Stack notes

- **HTML/CSS:** `reference.html` is fully self-contained (no external assets).
- **React:** the article is a long-form component; consider `columns` via CSS or a
  library — keep 2-col at ≥760px.
- **React Native / web:** use CSS `columns` on web; on native, a 1-column layout with
  a wider measure is the accepted port — note it in your PR.
- **Tailwind:** `columns-2`, `first-letter:` for the drop cap, `[column-span:all]` for
  pull quote/figure.