# Design Language for pmt.report ## Aesthetics and Tone **pmt.report** is built as **The Standing Broadsheet** — a fictional evening newspaper that exists only to publish *one running story: the reader's own ledger of payments, settled and pending, day after day*. Imagine a 1930s metro daily — the *Evening Ledger*, the *Clarion-Dispatch* — whose entire press run has been quietly repurposed to chronicle the small economy of a single life: the rents paid, the invoices cleared, the subscriptions lapsed, the IOUs still hanging. The aesthetic is **vintage newspaper layout** rendered with the gravity of a front page that never goes to bed — hot-metal headlines, hairline column rules, a masthead with a date that updates itself, ink that has soaked very slightly into the fibre of the paper. The tone is **scholarly-intellectual crossed with raw-authentic**: dry, factual, faintly wry, the voice of a typesetter who has seen every kind of money come and go and refuses to be impressed by any of it. There is no excitement here, no confetti, no "you're crushing it" — only the steady, dignified clack of a story being set in lead. Nostalgia is the carrier wave, not the message: the message is that a payment record deserves the same respect as a public record. This deliberately rejects the corpus defaults. No glassmorphism (81% of designs), no hand-drawn doodle layer (96%), no warm-gradient hero. The page is **press-ink monochrome on newsprint cream**, with a single editorial accent reserved for the way urgent items are stamped — like a wire bulletin slugged "FLASH" in a second colour because the compositor only had one extra ink drum. ## Layout Motifs and Structure **The fixed broadsheet column grid — six columns, hairline-ruled, never breaking the gutter.** The base lattice is `grid-template-columns: repeat(6, 1fr)` with a constant `2.4rem` gutter, and **vertical hairline rules (1px, ink at 28% opacity) live in the gutters**, drawn as background elements so the whole page reads as set type, not as cards. Content spans columns the way a newspaper story does: a headline runs 6-up, a "lede" paragraph runs 4-up and is inset, a "sidebar" runs 2-up against the rule, a feature drops to 3-up and 3-up facing columns. **Nothing is centered in a hero band; everything is set into the page.** Sectional structure as **newspaper anatomy, read top-to-bottom as one continuous edition**: 1. **The Masthead** — full-bleed nameplate: `PMT.REPORT` set enormous in a fat blackletter-adjacent slab, flanked by a left ear ("Vol. MMXXVI — No. 132") and a right ear ("Late Final Edition · settled in confidence"), with a thin date line and a single horizontal rule (3px, then a hairline below it — the classic "double rule") sealing the masthead off. 2. **The Above-the-Fold Story** — the dominant headline, a deck (sub-headline), a byline ("Filed by the standing ledger"), then a 4-up lede column with a **drop cap** (Roman, 5 lines deep), the paragraph wrapping into a 2-up jump that "continues below." 3. **The Ledger Columns** — three to five stacked stories, each one a category of payment, set in true newspaper columns (text actually flows multi-column via CSS `columns`), separated by hairline rules, each with its own slug ("HOUSING," "UTILITIES," "OBLIGATIONS OUTSTANDING"), each headlined in descending point sizes like a real page hierarchy. 4. **The Box Score** — a bordered "agate" table area, ruled like a stock-listings page, where pending vs. settled amounts sit in a fixed-width tabular grid with leader dots. (This is the *one* place numbers cluster — it is framed explicitly as the listings page, not a stat-grid.) 5. **The Stop Press / Wire Bulletin** — a single inset box, ruled all around, slugged "FLASH" in the accent ink, carrying the most urgent unpaid item, set as if it came over the wire ten minutes before the page locked. 6. **The Colophon Footer** — printer's imprint: "Set in lead and pixels · Published continuously · This edition will not be reprinted," a tiny pressmark glyph, the column rules finally terminating in a heavy bottom rule. Asymmetry comes from real newspaper makeup: an odd column count, stories that don't bottom-align, a sidebar that runs short and leaves the rule visible below it. Negative space is the **gutter and the column-end white**, never a fashionable void. ## Typography and Palette **Fonts — Google Fonts only, hand-confirmed available:** - **Nameplate & Major Headlines — `UnifrakturCook` (weight 700)** for the masthead wordmark only (the blackletter "PMT.REPORT" nameplate, set ~120–180px, tight tracking) — used *once*, the way a newspaper uses its gothic nameplate exactly once per page. Paired immediately below with `Playfair Display` (weights 700–900, including 900 italic) for all actual headline decks at 64px / 40px / 28px, with `-0.01em` tracking and tight `line-height: 1.04` — the high-contrast Didone face that reads as "1930s front page." - **Body, Ledes, Columns — `PT Serif` (regular 400, italic 400, bold 700)** at 17px, `line-height: 1.5`, set ragged-justified in true multi-column flow; this is the workhorse "wire copy" face — sturdy, slightly inky, made for screens but newspaper-grained. - **Slugs, Kickers, Datelines, Agate — `Roboto Condensed` (weights 400, 700, uppercase)** with `letter-spacing: 0.14em` for the all-caps category slugs, datelines, and table headers — the condensed "department label" voice. - **The Listings / Box Score numerals — `JetBrains Mono` (weights 400, 500)** for the tabular money figures only, so columns of amounts align perfectly with leader dots, like an actual stock-price page. - **Drop caps** are `Playfair Display` 900, sized to span exactly 5 body lines, `float: left`, with a 0.06em right margin. **Palette — newsprint monochrome plus one wire-bulletin accent:** - `#F4EFE3` — **Newsprint Cream** (page ground; very faintly warm, like cheap pulp stock) - `#EAE3D2` — **Edition Buff** (secondary ground for the box-score and stop-press panels) - `#1C1A17` — **Press Ink** (near-black, slightly brown-shifted; all body type and headlines) - `#3A352D` — **Smudged Ink** (secondary text, datelines, captions) - `#8C8678` — **Hairline Grey** (the 28%-opacity column rules, table rules, expressed as this colour at full opacity for borders) - `#A82822` — **Wire Red** (the *only* chromatic accent — the "FLASH" slug, the heaviest "PAST DUE" stamp, the double-rule under the masthead's lower hairline; used on well under 5% of the page's ink area) - `#5C5848` — **Etched Olive** (rare third tone for the pressmark glyph and the colophon, so the footer feels like a different ink drum entirely) Texture: a subtle paper-grain (very low-opacity SVG turbulence or a tiled noise PNG at ~3% opacity) over the whole `body`, plus an even subtler ink "spread" — body text gets a near-invisible `text-shadow: 0 0 0.4px` to mimic ink wicking into fibre. No drop shadows anywhere except this. ## Imagery and Motifs **No photography. No 3D. No gradient-mesh. Every visual is letterpress-grammar SVG and CSS rule-work.** The imagery vocabulary is the furniture of a print shop: - **Rules and dashes** — hairline column rules in gutters; the masthead "double rule" (a 3px bar with a 1px hairline beneath); section-dividing rules that are *broken in the middle by a tiny diamond glyph* (a typesetter's "fleuron" / dinkus: ❧ or a hand-set ◆), the way old papers separated unrelated items. - **The pressmark** — a custom SVG colophon device: a small circular printer's mark combining a "P" and a coin's milled edge, drawn in `#5C5848`, appearing in the masthead ear and again in the footer, never anywhere else. - **Slug tags** — category labels rendered as little "kicker" units: an em-dash, then condensed all-caps text, then a hairline that runs to the column edge. - **The agate table** — leader dots (`·······`) bridging label and amount; horizontal hairlines every row; a heavier rule above the totals line — pure stock-listings iconography. - **"Stamped" states** — paid items get a faint, slightly-rotated (−4°) outlined stamp reading "SETTLED" in Roboto Condensed; overdue items get a `#A82822` stamp reading "PAST DUE," also rotated, sitting *over* the figure with `mix-blend-mode: multiply` so it looks rubber-stamped onto the paper. - **Halftone-free portraiture** — where a "byline mug" would go in a real paper, instead place a tiny coin-engraving-style SVG roundel (a generic profile in hairline strokes, like a worn coin), reinforcing that *money* is the subject being reported on. - **Edition furniture** — a live "weather box" replaced by an "as of" timestamp box; a "page X of Y" indicator in the footer styled like newspaper continuation lines ("Continued from the top"). ## Prompts for Implementation Build pmt.report as **a single, continuous broadsheet edition** — one HTML document, one CSS file, one small JS module — that the reader scrolls through top to bottom the way they'd read a newspaper page from nameplate to imprint. It is **not** a SaaS marketing page. There must be **no pricing tiers, no feature cards, no testimonial wall, no logo bar, no stat-counter grid, no rectangular signup CTA, no comparison table.** Any "action" the product needs is folded into the editorial fiction: a "subscribe" becomes a single line in the colophon set as a classified ad ("Standing subscription: enquire within"), and that is the only call-to-action permitted, rendered in body type, not a button block. **Narrative spine (one scroll, ~70 seconds of reading):** 1. **The page goes to press.** On load, the masthead "prints in": the blackletter nameplate fades up letter by letter with a faint ink-spread, the date line types itself out in Roboto Condensed (`typewriter-effect`), and the double rule draws left-to-right (`path-draw-svg`) — once it lands, the rest of the page is "set." 2. **The fold lifts.** The above-the-fold headline (`Playfair Display` 900) rises in with a short, weighty `fade-reveal` + a few-pixel upward settle (`spring`, low bounce — type doesn't bounce, it *seats*); the drop cap snaps in a half-beat after its paragraph. 3. **Columns set themselves.** As the reader scrolls, each ledger story's text does a subtle `stagger` reveal *by column* — left column first, then the next — as if the compositor is filling galleys in order. Section dinkus diamonds spin in 90° on arrival (`scroll-triggered`). 4. **The box score tallies.** When the listings table enters view, the amounts roll up with `counter-animate` from zero, leader dots extending to meet them; the totals rule above the bottom line draws last. 5. **Stop press.** The "FLASH" bulletin box slides in from the right margin (`slide-reveal`), its red slug pulsing exactly once (a single, restrained `pulse-attention` — a newspaper flashes a wire alert, it doesn't blink at you). 6. **The imprint.** The colophon fades up plainly; the column rules visibly terminate in the heavy bottom rule; the pressmark glyph does a single quiet rotation and stops. **Interaction texture:** a custom cursor styled as a thin printer's reglet / pica rule (a tiny ruled tick) rather than an arrow; hovering a ledger row underlines its label with a hairline that *draws* (`underline-draw`) in the row's own colour; hovering the masthead very subtly increases the paper-grain opacity, as if you leaned closer to the page. Use `prefers-reduced-motion` to drop everything to plain fades. Keep all motion *slow and inky* — easings around 600–900ms, no overshoot on text. The whole site should feel like it was set in lead the night before and is simply, quietly, true. **Sound is silent. Layout is law. The newsprint is the brand.** ## Uniqueness Notes Differentiators against the existing corpus: 1. **Vintage-newspaper layout as the literal information architecture** — not "newspaper-*ish* hero," but real six-column rule-ruled makeup, true CSS multi-column body flow, datelines, slugs, agate listings, continuation lines, a once-per-page blackletter nameplate. The corpus is saturated with card-grid (91%) and full-bleed centered heroes (89% / 83%); this design uses *zero* cards and *zero* centered hero band. 2. **Aggressively monochrome on warm newsprint with a single wire-red accent** — directly opposing the corpus's 95% gradient / 98% warm-gradient palettes and 81% glassmorphism. Ink-on-pulp, one extra ink drum, paper grain — no glass, no glow, no mesh. 3. **Letterpress-grammar imagery only** — rules, fleurons, a printer's pressmark, rubber-stamp state badges, coin-engraving roundels — and explicitly *no photography*, against a corpus where 98% of designs lean on photography. 4. **A "report" reframed as a never-reprinted standing edition** — the narrative conceit (a daily paper that publishes only your ledger and "will not be reprinted") gives a dry, scholarly-raw tone that avoids the corpus's dominant pastoral-romantic / warm-inviting registers, and bans every conversion-block pattern outright. Chosen seed / style: **vintage newspaper layout** (aesthetic: editorial, layout: magazine-spread / editorial-flow, typography: slab-serif + playfair-elegant, palette: sepia-nostalgic / monochrome, patterns: typewriter-effect + path-draw-svg + counter-animate, imagery: line-illustration, motifs: vintage, tone: scholarly-intellectual + raw-authentic). Avoided overused patterns flagged by frequency analysis: hand-drawn (96%), glassmorphism (81%), photography imagery (98%), card-grid (91%), full-bleed centered hero (89%/83%), warm-gradient palette (95%/98%), cursor-follow blob + magnetic + heavy spring overshoot — replaced here with slow inky fades, a pica-rule cursor, restrained single-beat motion, and structural newspaper rule-work.