# Design Language for renai.review ## Aesthetics and Tone renai.review — *renai* (恋愛, "romantic love") joined to *review* — is **the surviving Sunday "Affairs of the Heart" desk of a broadsheet evening newspaper that folded in 1971**, reset cold-type and rehung as a single scrolling page. The conceit: in this paper, romances were *reviewed* the way other desks reviewed opera, restaurants and motor-cars — by a named critic, in column-inches, with a star verdict struck in letterpress and a standfirst that gave away the ending. The aesthetic is **vintage broadsheet with the gravity of a kept clipping**: not the meme "vintage" of distressed Polaroids and faux-VHS scanlines, but the *slow* vintage of a newspaper morgue — rag-paper gone the colour of weak tea, halftone screens you can count the dots in, rules hairline-thin and ruler-true, a fold-crease running horizontally through the page like a healed scar. Nothing glows. Nothing is glassy. Nothing bounces. The mood is **wry, tender and a little funereal** — a critic who has read ten thousand love affairs and reviews each new one with affection, exactness, and the faint melancholy of someone filing the morning edition alone. Inspirations: the *Manchester Guardian* arts pages c.1958, *France-Soir* faits-divers columns, the Linotype slug, the proof-marked galley, the obituary page treated as a love letter, Edward Gorey's cross-hatch frames, the hand-set wood-type of a jobbing printer who only owned three founts. ## Layout Motifs and Structure The composition is a **magazine-spread broadsheet** (~6% in layout frequency — deliberately underused) crossed with **single-column** prose runs (~16%) and a true **multi-column newspaper grid** that the corpus almost never builds. The page is sized as one continuous **broadsheet web**: a 1200px-max text-block ruled into a **6-column grid with a 14px gutter**, every column edge a 0.5px hairline rule the way a real paste-up board carried column guides. A **masthead** sits at the top — the words *renai.review* in wood-type display, a fake "Vol. LIV · No. 12,041 · Price Fourpence" dateline beneath, a double-rule (thick-thin, 3px/1px) closing it off. Below the masthead, content is poured into asymmetric newspaper "wells": - **The lead review** runs 3 columns wide with a 4-line drop-cap, a 14-word standfirst in italic, and a byline in small caps ("BY THE LOVE CRITIC"). - **A boxed "Verdict" panel** floats right, 2 columns, ruled with a 1px box, holding the star-rating struck as five hand-drawn SVG asterisk-stars (filled / half / outline), plus a one-line summary set in bold condensed type — the kind of pull-box a real arts page used. - **"From the Postbag"** is a single narrow column of reader letters, each prefaced "SIR, —" and signed with a place-name. - **"Also Showing This Week"** is a short multi-item list set in two columns of small type with hanging indents — capsule reviews of three more affairs, two stars each. - **A correction notice** ("In last week's edition we described the courtship as 'brief'. It was, we are now informed, eternal. We regret the error.") set in 7px italic, bottom-left, the way papers buried their climb-downs. Between wells: **horizontal fold-crease bands** — a 2px band of paper 4% darker, with a 1px highlight above it, spanning the full width — that read as the physical creases of a folded paper and act as section breaks. The whole page is set on a **rag-paper field** (#ECE3D0) with a faint repeating halftone-dot texture; the text-block has a 1px box-rule around it like a galley proof. No hero image. No card grid. No bento. No dashboard. The grid *is* the design — the discipline of cast-metal column rules holding warm prose. ## Typography and Palette **Fonts — Google Fonts only, four families, each doing one newspaper job:** - **Display masthead & section headers — *UnifrakturMaguntia* (used sparingly) for the masthead wordmark only, at ~88px, weight 400 — the blackletter "title page" gravity of an old paper's nameplate.** Used once, at the top, and never again — exactly as a real masthead behaves. - **Headlines & standfirsts — *Old Standard TT* (weights 400, 400 italic, 700).** A Modern/Didone revival cut from early-20th-century Russian and European book faces — high contrast, true italics, the look of hot-metal headline founts. All review headlines (28–40px, weight 700), all standfirsts (italic 400, 19px), the "Verdict" summary line. - **Body prose — *Lora* (weights 400, 400 italic, 500).** The reading face for all review columns, postbag letters, capsule reviews — a contemporary serif with calligraphic roots and a generous x-height that holds up at the 16px / 1.62 line-height of newsprint body text without tiring. Drop-caps are Lora 500 at 4 lines tall. - **Furniture, datelines, bylines, folios, corrections — *Bitter* (weights 400, 600), small caps and small sizes.** A slab-serif designed for screen body that doubles here as the "ITC-style" furniture face: the "Vol. LIV" dateline, "BY THE LOVE CRITIC" byline (letter-spaced small caps, 11px), page-folio numbers, the 7px correction notice, "SIR, —" letter openers. *(Note: "mono", which sits at 94% in typography frequency, appears nowhere — a newspaper morgue has no terminal text.)* **Palette — ink on aged rag, with one red the colour of a proof-marker:** - `#ECE3D0` — **rag paper.** The page field. Warm, slightly grey-yellow, like a 1960s clipping. - `#E2D6BD` — **fold-shadow / box-fill.** 4% darker paper for crease bands and the inside of the Verdict box. - `#1C1A14` — **press ink.** Near-black with a brown undertone — all body text, rules, headlines. Never pure #000; cast metal never printed pure black. - `#5A5240` — **faded ink.** Bylines, datelines, captions, secondary furniture — ink that has oxidised toward sepia. - `#A8201A` — **proof-red.** The single accent: the correction-mark red of a sub-editor's pencil. Used for the *renai.review* masthead's middle dot, the filled stars in the Verdict box, the "★★★★½" verdict line, hover-underlines on links, and a thin top-rule on the Verdict panel. Sparingly — a real paper printed one extra colour at most. - `#7B7257` — **halftone screen.** The dot colour of the faint background texture and of any cross-hatched SVG illustration shading. - `#3A4B3E` — **olive marginalia.** A muted ink-green for the "Also Showing" list bullets and the tiny printer's-flower dingbats — the second-cheapest ink a jobbing shop kept. ## Imagery and Motifs **No photography. No 3D. No stock illustration. No icon set.** Every visual on the page is hand-drawn SVG rendered as 1960s **line-illustration** (~14% in imagery frequency) and halftone — the kind a staff artist would ink for a column when no photograph was available, plus the working furniture of a paste-up board. **Halftone screen** and **paper-aged** texture do the rest, in CSS only. **The recurring motifs:** - **The five-star verdict** — five SVG asterisk-stars (six-pointed printer's asterisks, not Disney stars), drawn in proof-red, available filled / half / outline. The lead review's verdict ("★★★★½ — *Reckless, overlong, and worth every minute*") is the page's emotional crescendo and its single boldest spot of colour. - **The fold-crease** — the horizontal 2px-dark-band-plus-1px-highlight that runs full-width between sections; it is the page's *only* divider, repeated like the creases of a paper folded into eighths. - **The galley-proof box** — every "panel" (Verdict, Postbag, corrections) is a 1px ink rule with a 2px internal padding-rule, the look of a story "boxed" on the stone. Corners are square; metal furniture had no radius. - **The drop-cap** — a 4-line Lora capital opening the lead review and each capsule, the universal newspaper signal for "feature begins here." - **The printer's flower** — a small SVG fleuron / pointing-hand (☞) dingbat in olive, used to end a column, mark the postbag, and separate capsule reviews. Three variants, no more — a real shop owned three. - **The censored line** — in the Postbag, one or two phrases struck through with a solid ink bar ("the night of the [████]") — the look of a copy-editor's deletion, used for comic-tender effect. - **The staff-artist vignette** — at most three small ink-and-halftone line drawings across the whole page: a single rose past its best; two coffee cups, one with lipstick on the rim; an empty park bench. Each ≤180px, cross-hatched in halftone-grey, captioned in 9px italic Bitter ("*An impression by our artist.*"). ## Prompts for Implementation Build renai.review as **a single static page** — `index.html`, `style.css`, one small ES module (`press.js`, ~5KB) — with the Google Fonts link the only external dependency, total weight (excluding fonts) under 95KB. No images, no icon fonts, no frameworks, no canvas, no WebGL. **The grid is the architecture.** Establish a 6-column CSS Grid (`grid-template-columns: repeat(6, 1fr)`, 14px gap) on a 1200px-max centred text-block, and *show its bones* — render the column-edge hairlines as a fixed background of repeating 0.5px vertical `#1C1A14` lines at 22% opacity, so the reader sees the paste-up guides under the type. Set the whole body on `#ECE3D0` with a CSS-only halftone texture: a tiny `radial-gradient` dot tiled at ~3px on a `background-size`, in `#7B7257` at ~6% — visible only if you lean in. Wrap the text-block in a 1px `#1C1A14` box-rule (the galley edge). **Storytelling, top to bottom — one Sunday edition, read once:** 1. **The masthead** — *renai.review* in UnifrakturMaguntia, the middle dot in proof-red; below it the fake dateline ("Vol. LIV · No. 12,041 · Sunday Edition · Affairs of the Heart") in letter-spaced small-caps Bitter; closed by a thick-thin double rule. On load, the masthead **types the dateline character by character** at ~28ms/char (`typewriter-effect`) — the only "animation" with any speed to it, evoking a Linotype clattering out a slug — then never moves again. 2. **The lead review** — 3-column well, 4-line proof-red-tinted drop-cap, headline in Old Standard TT 700, a 14-word italic standfirst that spoils the ending, byline "BY THE LOVE CRITIC" in small caps. The prose is a genuine, affectionate review of one love affair as though it were a long play: pacing, casting, "the second act sagged," "an ending the author clearly improvised." Long-form. Warm. Funny in two places, aching in one. 3. **The Verdict box** — floats right of the lead, 2 columns, 1px box with a proof-red top-rule; the five SVG stars; a bold-condensed one-liner. The stars should **strike onto the page on scroll-into-view** — each star fades from outline to filled, left to right, ~120ms apart (`stagger` + `fade-reveal`), like a stamp coming down. No spring, no overshoot — a stamp does not bounce. 4. **A fold-crease band** — full width, the 2px-dark + 1px-highlight crease. Every section break is one of these. Nothing else divides the page. 5. **From the Postbag** — narrow single column, three reader letters opening "SIR, —", each signed with a place and a wry pseudonym ("— Disappointed, of Lyon"; "— Still Hopeful, Crouch End"). One letter has a phrase struck out with a solid ink bar. A printer's-flower dingbat closes the column. 6. **Also Showing This Week** — two columns of small type, hanging indents, three capsule reviews of other affairs, each with its own tiny 2-of-5 or 3-of-5 star line and a one-sentence verdict ("*Promising lead, weak ensemble — see it if you must.*"). 7. **An artist's vignette** — one small ink-and-halftone SVG line drawing (the rose past its best, say), captioned "*An impression by our artist.*" in 9px italic. 8. **The correction notice** — bottom-left, 7px italic Bitter, the buried climb-down about "brief" vs "eternal." 9. **The colophon line** — a single rule and one line: "*Set in cold metal. Printed on the night air. renai.review — the only desk that reviews the heart.*" Then the page ends. No footer, no links, no CTA, no signup, no pricing, no stat-grid, no testimonial row, no contact form, no chat bubble, no cookie banner. **Motion — restrained to the physics of paper and press.** Allowed: the masthead's typewriter dateline (once, on load); the Verdict stars stamping in on scroll (`stagger`/`fade-reveal`, no overshoot); a **very slight paper-grain shift** — the halftone background nudges 1–2px on scroll via `transform: translateY()` at 0.04× scroll speed (`parallax`, but barely — like newsprint settling); link hovers draw a 1px proof-red underline left-to-right over 180ms (`underline-draw`); the artist's vignette fades up over 500ms on scroll. **Forbidden** (these dominate the pattern frequency and would break the conceit): `cursor-follow` cursor companions, `magnetic` buttons, `spring`/`elastic` bounce, `tilt-3d` card tilts, `card-flip`, `glassmorphism` blur, `glitch`, neon glow, ripple. A 1965 newspaper does not bounce, blur, glow, or chase your mouse. If `prefers-reduced-motion`, the dateline appears instantly and the stars are pre-filled. **Tone of copy:** the Love Critic writes in clean, slightly old-fashioned English — first-person plural ("we found the courtship hurried"), precise, fond, occasionally devastating, never cute. Every heading is a real arts-page heading. Every star verdict comes with a quotable one-liner. The reader should finish feeling they have read one perfect, melancholy Sunday column about love — and want to write in. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **A real multi-column newspaper grid with its column-rules made visible.** Magazine-spread sits at ~6% in layout frequency and almost always means a few oversized spread images, not cold-type column discipline. renai.review builds an actual 6-column paste-up board — 0.5px hairline column guides showing through the type, asymmetric "wells," boxed stories on "the stone." Card-grid (91%) and bento-box (16%) appear nowhere; the grid here is editorial, not modular. 2. **"Review" taken literally — love affairs reviewed like stage plays, with letterpress star verdicts.** No other interpretation in the corpus turns a romance domain into a *critic's column* with a five-asterisk verdict box, a standfirst that spoils the ending, capsule reviews of "other affairs," a postbag, and a buried correction notice. The conceit drives every section. 3. **Blackletter masthead + Didone headlines + slab furniture — a newspaper type system, with mono banished.** Mono dominates typography frequency at 94%; here there is none — a 1965 morgue has no terminal. UnifrakturMaguntia (used once, masthead only), Old Standard TT (headlines), Lora (body), Bitter (furniture) is the exact role-cast of hot-metal newspaper composition, which the corpus does not assemble. 4. **Motion limited to press physics — a typewriter dateline, a stamping verdict, settling newsprint — no cursor-follow, no spring, no tilt-3d, no glass.** The four most overused interaction patterns (parallax 90%, cursor-follow 89%, spring 84%, magnetic 79%) are either absent or stripped to a near-imperceptible 0.04× paper drift. Glassmorphism (82%) and hand-drawn-as-default (95%) are rejected for a flat ink-on-rag surface. 5. **The page's only divider is a physical fold-crease, repeated like a paper folded into eighths** — a 2px-dark + 1px-highlight band, not a full-bleed colour section, not a card boundary, not whitespace. The structure is the memory of a folded broadsheet. Chosen seed/style: **vintage newspaper layout** — expressed via aesthetic: editorial (vintage-newspaper), layout: magazine-spread, typography: serif-revival (Didone + blackletter masthead), palette: sepia-nostalgic (ink-on-rag with one proof-red), patterns: typewriter-effect, imagery: line-illustration (halftone ink drawings), motifs: vintage (cold-type furniture), tone: elegant-sophisticated (the wry, tender Love Critic). Avoided patterns from the frequency analysis: glassmorphism (82%), hand-drawn-as-house-style (95%), card-grid (91%), parallax-heavy (90%), cursor-follow companions (89%), spring/elastic bounce (84%), magnetic buttons (79%), tilt-3d (30%), warm-gradient palettes (gradient 94%), mono typography (94%), photography imagery (98%).