# Design Language for perso.news ## Aesthetics and Tone perso.news is **a one-copy newspaper, printed for exactly one reader, on a press that only runs once.** The conceit: somewhere there is a tiny print shop — a single risograph drum, a hand-set masthead, a compositor who has read your last six months of attention and laid out *tonight's edition of you*. The paper is called the same thing on every doorstep but it is never the same paper twice. Where most news design screams urgency in red sans-caps, perso.news whispers in the register of a **regional evening broadsheet from a parallel 1974** — warm newsprint, slightly-off registration, ink that smells faintly of solvent — and then quietly undermines that nostalgia by being *uncannily about you*: column rules that bend toward the article you'd actually read, a weather box that reports your local weather without ever having asked, marginalia that quote you back to yourself. The tone is **intimate, dry, faintly conspiratorial** — never breathless. Headlines are wry, not hot. There is no breaking-news ticker, no notification-red, no "trending now." The emotional target is the small startle of being *seen*: the feeling of opening a newspaper and finding your own name set in 8-point agate in the classifieds, where you did not put it. Think *Tinker Tailor Soldier Spy* opening titles crossed with a Sunday-supplement crossword page; think the typographic calm of a 1970s *Le Monde* front page run through a Gestetner; think a horoscope written by someone who has actually been reading your email. Warm, papery, a little haunted, never hostile. ## Layout Motifs and Structure The governing object is **the broadsheet fold**, not the feed. The canvas is a tall folded sheet — effective **1320 × 1860 at 1.0 zoom**, preserving a **≈1 : 1.41 (√2) page ratio** so it reflows like real paper. On wide viewports the sheet pins centered with broad **un-inked newsprint margins** (the deckle edge of the roll, not "whitespace"), with a faint horizontal crease-shadow at 38% down the page where the fold would be — content above the crease is the "front page" the eye sees folded on the mat; scrolling past it is the physical act of *unfolding*. - **Masthead band** — full-bleed across the top: the wordmark *perso.news* set enormous in a high-contrast didone, flanked by a left ear ("Vol. ∞, No. — your number, e.g. No. 2,041 — printed once") and a right ear (the actual current date, long-form, plus a fictitious "City Final" edition slug). A single thick rule + single hairline rule underneath — the classic two-weight newspaper sandwich. - **The five-column grid** — the body is a true **5-column letterpress grid** (not cards). Columns are 198px nominal with 14px gutters and vertical hairline rules *between* columns. Articles flow as **balanced multi-column text blocks** that span 1, 2, or 3 columns and *jog* — a 3-col headline drops to a 2-col deck which narrows to 1-col body that "jumps to page 4" (an in-page anchor scroll). Headlines straddle column rules with white knockout boxes punched through the rule behind them. - **The "About You" rail** — column 5 (rightmost) is a permanent vertical strip styled as the **agate column**: weather (your real local conditions), a tide table, a one-line horoscope, a "today in your history" date entry, a tiny stock-quote-style line for something personal. Set in 8–9px condensed type, justified hard, faint blue pencil rule down its left edge. - **Below the fold** — a wider, looser **magazine-spread** zone: a single dominant feature with a hand-cut halftone "engraving," pull-quotes set as **center-column display with em-dash attribution**, and a crossword/diagram block bottom-left that is actually a tiny interactive thing (see Prompts). - **The crease and the gutter shadow** are real layered depth: the page sits on a darker desk surface, with a soft drop-shadow on all four edges and a 1px lighter "paper edge" highlight on top/left. No hero-with-CTA. No bento. No stat grid. The structure is **broken-grid editorial-flow inside a rigid letterpress skeleton** — the rigidity is the joke; the page bends only where *you* would bend it. ## Typography and Palette **Type stack — Google Fonts only, four faces, each doing one newspaper job:** - **Playfair Display** (variable, weight 400–900, italic) — the **masthead and major headlines**. A true didone with violent thick/thin contrast and a tall x-height; at display sizes (clamp ~48–112px) it reads as a hand-engraved 19th-century broadsheet masthead. Tight tracking (−0.02em), optical sizing on. Italic Playfair carries the "edition slug" and pull-quote attributions. - **Spectral** (weight 300/400/500/600, italic) — the **body roman and decks**. Spectral is a Google-commissioned screen serif with newspaper DNA: sturdy slabby serifs, generous ink traps, designed for dense column setting. Body: **15px / 1.5 leading / 0.003em**, set **justified with hyphenation** in the column grid (this is non-negotiable — ragged-right would break the spell). Decks set in Spectral italic 18–22px. - **Bitter** (weight 400/600) — the **agate / "About You" rail / captions / bylines / kicker labels**. A slab-serif that holds up at 8–10px better than most; set ALL-CAPS for kickers (tracking +0.12em), justified for the agate column. - **IBM Plex Mono** (weight 400/500) — **only** for the things that betray the personalization: timestamps, your "subscriber number," the ticker-line in the rail, the crossword grid coordinates, and any number that the page knows about you that it shouldn't. Mono is the *tell* — wherever the paper slips and shows it's reading you, the type goes monospace for one beat, then snaps back to Spectral. **Palette — risograph newsprint, 6 inks + paper:** - `#EDE6D6` — **Newsprint** (the paper; warm, slightly grey-yellow, never white) - `#E3DAC6` — **Newsprint Shadowed** (the below-fold paper, the crease valley) - `#1C1A16` — **Press Black** (body ink — soft near-black, never #000) - `#7A2417` — **Oxide Red** (the single spot color — used like a riso second pass: section flags, the masthead rule, the "PERSONAL EDITION" stamp, error/correction notes; *never* for urgency) - `#2C3D52` — **Blue-Pencil** (editor's blue: hairlines, the agate rule, underlines on personalized links — the color of a sub-editor's mark) - `#B8AD92` — **Halftone Mid** (the grey of a worn engraving / the dot-screen mid-tone / disabled-ish secondary text) - `#8C6B2F` — **Foxing Gold** (age-spots, the deckle highlight, a sparing accent in the crossword block and tide table) Optional dark-edition (a "late night extra"): invert to `#1C1A16` paper with `#EDE6D6` ink, Oxide Red lifts to `#C9533C`, Blue-Pencil to `#7E9BC0` — same press, lights off in the shop. ## Imagery and Motifs **No photographs. No stock. No icon fonts. No emoji.** Everything is drawn at runtime so the page reads as one continuous print run. 1. **Halftone engraving generator.** The one big feature image is an SVG `` of dots whose radius is modulated by a coarse procedural function (a few stacked sine waves seeded per-page), producing a 1970s newspaper photo-engraving of an abstract subject — a city skyline, a face in 3/4 turn, a pair of hands, a window — rendered entirely in Press Black dots on Newsprint. It is deliberately *too contrasty*, with blown highlights and crushed shadows, like a photo screened too aggressively. 2. **Misregistration as a feature.** The Oxide Red layer is rendered ~1.5px offset from the black layer on the masthead and section flags — a tiny CSS `transform: translate()` on a duplicated text layer at low opacity — the riso "second drum didn't line up" look. On hover of a section flag, the red snaps *into* register with a quick spring, then drifts back out over 3s. 3. **Paper grain + foxing.** One `feTurbulence` layer (baseFrequency ~0.9, 2 octaves) at 6% opacity multiplied over the whole sheet for newsprint tooth; plus 5–8 procedurally placed soft radial "foxing" spots in Foxing Gold at 8–14% opacity, different every load. 4. **Column rules, fleurons, and the fold-crease** are the recurring graphic furniture: hairline blue verticals between columns; small `❧`-style fleuron dividers (drawn as SVG paths, not glyphs) between rail items; the horizontal crease as a 2px gradient shadow + 1px highlight at 38% page-height. 5. **The "agate stamp"** — a slightly crooked rubber-stamp impression reading **"PRINTED FOR YOU · No. {n} · {date}"** in Oxide Red, rotated −3.5°, with ink-bleed irregularity at the edges (SVG turbulence displacement on the stroke), sitting near the masthead like a press-room QC mark. 6. **Crossword / diagram block** as recurring motif: a 7×7 letterpress crossword grid, some squares pre-filled with letters that spell something the page knows; clue numbers in IBM Plex Mono. Echoed elsewhere as a tide-table grid and a tiny 5-day weather strip drawn the same way. ## Prompts for Implementation Build perso.news as **one HTML file, one CSS file, one ES module**. No framework, no router, no build step, no service worker, no fetch to a real backend. **Total uncompressed bundle under 95KB.** No raster images, no icon fonts, no Lottie, no canvas-heavy WebGL. SVG + CSS + a little vanilla JS only. The page must be a *finished printed object* on first paint, not a skeleton that fills in. **Page event timeline (first paint → steady state):** - **0.00s — first paint.** Newsprint (`#EDE6D6`) fills the canvas with the grain layer at 6% already on. The masthead "perso.news" is *already there* in full Playfair Display, but in **single-pass black only** — the Oxide Red layer has not "printed" yet. - **0.15s — the second drum runs.** The Oxide Red layer (masthead rule, section flags, the agate stamp) wipes on left-to-right over ~450ms with a slight vertical jitter, landing ~1.5px out of register. The crooked "PRINTED FOR YOU" stamp thumps down (scale 1.06→1, −3.5° rotation, 220ms spring) with a faint ink-spread bloom. - **0.4–1.1s — columns set.** Body columns reveal **column by column, left to right**, each as a fast top-down clip-path wipe (~180ms, 60ms stagger) — like sheets dropping into a galley. Hairline column rules draw downward via SVG `stroke-dashoffset` as each column lands. - **0.9s — the foxing appears.** 5–8 Foxing Gold spots fade in over 1.2s at random positions/opacities (seeded per load). - **1.2s — the tell.** *One* element on the page — the subscriber number in the left ear, or the date in the rail — does a 400ms beat where it's set in IBM Plex Mono, then crossfades to its serif. This is the only "loading shimmer" the page gets, and it's diegetic. - **steady state — almost nothing moves.** A newspaper is still. Allowed ambient motion: foxing spots drift ≤1px on a 20s sine; the crease-shadow breathes ±2% opacity on a 14s cycle; the misregistered red on the masthead has a barely-perceptible ±0.3px wander. Nothing else animates unless touched. **Interaction grammar (sparse, mechanical, paper-physical):** - **Hover a headline:** the knockout box behind it widens ~6px each side with a 140ms ease; the column rules it straddles dim to 40%; faint underline-draw in Blue-Pencil under the headline left-to-right (~200ms). No lift, no shadow, no color change to the type. - **Hover a section flag (e.g. "WORLD", "PERSONAL", "WEATHER"):** the Oxide Red snaps *into* register (translate→0, 180ms spring), then over 3s eases back out. Like pressing the flag flat with a thumb. - **Hover a "personalized" link** (the ones the page admits it chose for you — marked with a thin Blue-Pencil underline + a tiny mono superscript like `ⁿ`): a 1-line **marginalia note** unfurls in the gutter beside it, set in Bitter italic 10px, e.g. "— flagged because you read 3 like this in April." It's an editor's note, not a tooltip — it has a leader line, not a box. - **Click a "jump to page N" link:** smooth in-page scroll to the continuation block lower on the sheet, and the destination paragraph's first line briefly highlights with a Foxing-Gold wash (400ms) — "found it." - **The crossword block:** clickable cells; typing fills a letter in Press Black serif caps. Some cells are pre-locked with letters in Oxide Red that, read in order, form a short personal phrase. Solving it (or just clicking the lock cells) triggers a tiny correction-note line elsewhere on the page in Oxide Red: "CORRECTION: in our last edition we underestimated you." - **Scroll past the crease (38%):** a one-time ~600ms "unfold" — the below-fold area scales from 0.985→1 with the crease-shadow sweeping away downward; the wider magazine-spread furniture settles into place with a small stagger. - **Cursor:** plain. Maybe a faint 1px Blue-Pencil ring on the crossword grid only. No cursor-follow blobs, no magnetic buttons, no parallax-on-mousemove. This is a newspaper; you read it with your hands still. **Hard constraints / things to refuse:** - AVOID: CTA-heavy layouts, pricing tiers, "Sign up" hero buttons, stat-grids, testimonial carousels, app-store badges, sticky nav bars, hamburger menus, notification-red, glass cards, neon, gradients-as-backgrounds, drop shadows on text, parallax scrolling sections, infinite scroll, skeleton loaders (except the one diegetic mono-beat above). - The body MUST be justified with hyphenation inside the column grid. Ragged-right kills it. - Newsprint paper is `#EDE6D6`, never white. Body ink is `#1C1A16`, never `#000`. - Oxide Red is the *only* spot color and it is never used to signal urgency — only to mark "this was printed, by a press, for you." - Mobile (<720px): the 5-col grid collapses to a **single tall column** (it's a folded broadsheet read on a train); the agate rail moves to a bordered box below the lead story; the masthead shrinks but keeps the two-weight rule sandwich; the crease moves but stays. ## Uniqueness Notes Distinct departures from the corpus and from the seed's defaults: 1. **A genuine 5-column letterpress text grid with justified, hyphenated, column-jumping article flow** — the corpus is 91% card-grid and 89% full-bleed; almost nothing actually sets running text in real newspaper columns that *jog and jump pages*. The rigid letterpress skeleton is the structural conceit, not decoration. 2. **Risograph misregistration as an interaction primitive.** The Oxide Red "second drum" prints late and lands out of register, and hovering "presses it into register." No design in the registry uses two-pass print misalignment as a load animation *and* a hover affordance. 3. **The "tell": personalization is rendered as a typographic slippage** — wherever the paper admits it's reading you (subscriber number, weather, the marginalia notes, the crossword locks), the type briefly goes IBM Plex Mono, then snaps back to serif. The only "loading shimmer" on the page is diegetic and happens exactly once. 4. **No photographs, no icons, no emoji, no gradients, no glass, no parallax, no cursor-follow, no CTA** — a near-static *finished printed object*. Against a corpus that's 98% photography, 95% gradient, 91% parallax, 89% cursor-follow, this is a deliberate near-total abstention. Allowed motion is paper physics only (foxing drift, crease breathing, register wander). 5. **Editor's marginalia with leader lines instead of tooltips/popovers**, and a working 7×7 crossword whose locked cells spell a personal phrase and whose completion fires an in-page "CORRECTION" note. Interaction is mechanical and papery, never app-like. 6. **Palette is a 6-ink riso newsprint set built around `#EDE6D6` warm paper + a single `#7A2417` oxide-red spot + `#2C3D52` sub-editor's blue-pencil + `#8C6B2F` foxing gold** — warm/muted (matching the corpus's warm bias) but explicitly *print-process* colors, not the usual sunset-gradient warm. Chosen seed/style: **vintage newspaper layout** — aesthetic: editorial / vintage-newsprint; layout: magazine-spread + broken-grid inside a letterpress 5-column skeleton; typography: serif-revival (Playfair didone display + Spectral body + Bitter agate + IBM Plex Mono tell); palette: muted warm riso-newsprint duotone-plus-spot; patterns: spring (register-snap) + path-draw-svg (column rules) + fade-reveal (foxing) + underline-draw, all sparse; imagery: procedural halftone-engraving + noise/grain + foxing, no photography; motifs: vintage + book-scholarly + grid-lines (column rules) + the fold-crease; tone: dry / intimate-conspiratorial / scholarly-warm. Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (81%), card-grid (91%), full-bleed-as-default (89%), photography (98%), gradient (95%), parallax (91%), cursor-follow (89%), spring-everywhere (85%), magnetic (82%), tilt-3d (29%), mono-as-primary (94% — here mono is used *only* as the diegetic "tell"). Leaned toward underused: magazine-spread (6%), editorial-flow (4%), broken-grid (10%), vintage-photography→procedural-engraving instead, paper-aged (7%), grain-overlay (10%), serif-revival (14%).