# Design Language for saram.quest ## Aesthetics and Tone *Saram* (사람) means "person." **saram.quest** is built as a **risograph-printed civic broadsheet for a census of people who were never counted** — a single oversized newspaper page, folded once, that someone has been keeping in a coat pocket. Not a product. Not a portfolio. A *gazette of strangers*: short entries about people glimpsed once and never again — the woman who held a door, the man asleep on the last train, the kid who drew on a bus window — each set in type, given a registry number, and pressed into cheap warm paper with two or three ink drums that never quite line up. The governing texture is **risograph misregistration**: every color is a separate pass, and the passes are *off* by a millimeter or two, so cyan ghosts past the edge of magenta, headlines wear a soft chromatic halo, and rules double themselves faintly. This is not a glitch effect — it is the honest fingerprint of a duplicator drum, and the whole site should feel like it came off one: ink sitting *on* the paper, never *in* it; flat spot colors, no photographic gradients, visible halftone dots where tone is needed. The tone is **quiet, attentive, a little elegiac, never maudlin** — the register of a good local obituarist who writes about ordinary lives with exact, unsentimental care. Warm but not cozy. Plain-spoken. The page treats anonymous people the way a broadsheet treats notable ones: with a column, a dateline, a standfirst, and the dignity of being set in proper type. Think *a parish newsletter crossed with a risograph zine*; think *the "Lives Lived" page of a newspaper, but for the living and unnamed*; think *a printed lost-and-found where the lost things are moments*. ## Layout Motifs and Structure The site is **one continuous broadsheet page**, scrolled top to bottom — no SPA chrome, no nav bar of links, no hero-then-cards rhythm. It is a **newspaper front-and-inside spread** rendered as a single tall document, and it obeys real broadsheet mechanics: - **A strict multi-column text grid** — 6 columns on wide viewports, collapsing to 3, then 1. Body copy flows in **genuine narrow columns** (CSS `columns` where it suits, explicit column blocks elsewhere), justified, with hyphenation on. Columns are separated by **hairline rules**, not whitespace alone. - **The masthead** sits at the top: the word *saram* (and its hangul, 사람) set enormous in a slab serif, flanked by a fake dateline ("Vol. — · No. ∞ · the edition that is always today"), a thin double rule beneath, and a one-line "weather" that is actually a mood ("Today: overcast, the kind that makes faces look kind"). - **Entries are articles**, not cards. Each person-entry has: a **registry number** in mono (e.g. `№ 0417 — counted once`), a **headline** in display serif ("The Woman Who Held The Door"), a **standfirst** in italic, then 2–4 short paragraphs in a column or two. Some entries get a **box rule** around them ("FROM OUR CORRESPONDENT"); some are a single sentence in a wide measure; one or two run as a **classifieds column** of one-line micro-entries ("№ 0931 — hummed something on the platform; gone before the chorus"). - **Pull quotes** break the grid: a sentence blown up to 4–6vw, set across two columns, with a heavy rule above and below — exactly as a newspaper sets a pull quote. - **The fold** is real: roughly one screen-height down, a **horizontal crease** runs across the whole page — a soft printed shadow, a faint discolored band, the paper's grain slightly disturbed — and the masthead-side content above it is denser, the "below the fold" content looser, as a real front page is. - **Marginalia**: tiny mono notes pinned in the gutters and at column feet — corrections ("a correction: it was the *other* door"), a printer's mark, a page-number that counts upward as you scroll, an "errata" footnote that quietly contradicts an earlier entry. - The page **ends like a newspaper ends**: a thin colophon strip — "set in cheap type · printed in three colors · circulation: you" — and a final blank ruled box captioned "for the one you'd add." No card-grid. No bento. No centered max-width content well floating in empty space. The structure is *a printed page*, and it is busy the way a printed page is busy. ## Typography and Palette **Typefaces — all on Google Fonts:** - **Zilla Slab** (700, 400) — the **masthead and headlines**. A sturdy, slightly humanist slab serif with the right newsprint authority; set tight at the top (`clamp(3rem, 11vw, 9rem)`, letter-spacing `-0.02em`), and at 1.6–2.4rem for entry headlines. This is the "newspaper logo" voice. - **Source Serif 4** (400, 400 italic, 600) — **body copy and standfirsts**. A transitional serif designed for screen text columns; set at 1.0625rem, line-height 1.6, **justified with hyphens**, in narrow measures (~30–42 characters per column). Italic carries every standfirst and every editorial aside. - **Spectral SC** (small caps, 400/500) — **section labels, datelines, "FROM OUR CORRESPONDENT" tags, the colophon**. Small caps give the dry institutional-broadsheet tone without shouting. - **Fragment Mono** (400) — **registry numbers, marginalia, corrections, the scrolling page-number, the classifieds micro-entries**. The "typewritten annotation" layer that sits in the margins; small (0.72–0.82rem), slightly faded. **Palette — flat risograph spot inks on warm paper, no photographic gradients:** - `#F2EBD9` — **Newsprint Cream**: the paper. Warm, slightly uneven; the base for everything. A faint paper-grain noise lives on it. - `#1A1714` — **Press Black**: not pure black — a warm near-black, the way newsprint ink reads. All body text, rules, masthead. - `#C8362B` — **Riso Red** (FG: "Bright Red"): the primary spot color — registry numbers' underscores, pull-quote rules, box outlines, the masthead's hangul, the final blank box. Used boldly but in small areas. - `#2D5E8C` — **Riso Blue** (FG: "Federal Blue"): the secondary spot — section labels, the fold's discoloration band, certain marginalia, the "weather" line. The cooler counterweight. - `#E8A23D` — **Riso Yellow**: the third drum, used *only* as a soft highlight wash behind one or two pull quotes and as the halftone tone in any illustrated bullet — small, warm, never structural. **Misregistration rule:** colored elements get a 1–2px ghost offset of a *second* spot color (red text → faint blue or yellow shadow `1px 1px 0` at low opacity), and the masthead gets a soft 3-channel split (`text-shadow` red + blue offsets, ~1px each). Halftone where tone is wanted: a `radial-gradient` dot pattern, not a smooth fill. ## Imagery and Motifs - **No photographs.** This is a printed page; it uses **drawn marks, not images**. Where an entry "has a picture," it is a **single-color line illustration** rendered as a coarse **halftone** — a chair, an umbrella, a pair of shoes, the back of a head — flat, posterized, with visible dots, sitting in a ruled box with a Spectral SC caption. - **Newspaper furniture** is the decorative system: **hairline rules, double rules, box rules, column dividers, the masthead's heavy underline, "jump" arrows** ("continued, somewhere ↘"), **section bullets** (■ □ ▲), a **fake barcode** in the footer, a **circulation stamp**, a **fold crease**, **bleed marks** at the page corners. - **The registry number** (`№ 0417`) is the recurring icon — it appears on every entry, in the scrolling page-counter, in the favicon-spirit of the thing. Numbers are never sequential in an obvious way; they imply a vast unseen ledger. - **Marginalia & corrections** as ongoing texture: small mono notes that amend, second-guess, or footnote — "(we are told her name; we are not telling)" — giving the page the feel of something edited by a careful, fond hand. - **Ink artifacts**: faint roller-streaks at one page edge, a slightly heavier ink build at the top of a column, one corner where the yellow drum ran low. Subtle. Never cute. ## Prompts for Implementation Build **saram.quest** as **one long single-document HTML page** — a risograph broadsheet you scroll through. No framework, no router, no modal, no cookie-banner styling, no nav chrome, **no CTA, no pricing block, no stat-grid, no testimonial carousel, no feature comparison, no FAQ accordion, no signup form** beyond the final ruled blank box (which is decorative — a caption, not a real input). The reader is *reading a paper*, not using an app. - **Establish the press immediately.** On ``: Newsprint Cream `#F2EBD9` with a tiled paper-grain (a tiny SVG/`data:` noise at ~6% opacity). A faint vignette of uneven ink at the page's left edge. The whole page wrapped to a broadsheet measure (~min(94vw, 1180px)) with generous but *printed-margin* gutters, not floating whitespace. - **The masthead** types/sets itself on load: *saram* in Zilla Slab snaps in oversized with a 3-channel misregistration split that settles by ~1px over 600ms; the hangul 사람 fades up in Riso Red beside it; the double rule **draws** left-to-right (path-draw); the dateline and "weather" line fade in last. After that, the masthead is static — no looping animation. - **The fold** is a fixed feature, not a scroll trick: a horizontal band ~95vh from the top — a soft `box-shadow` crease, a ~10px Riso-Blue-tinted discoloration at ~12% opacity, the grain slightly intensified along it. Content density visibly drops just below it. - **Entries reveal as the press runs them**: as each `
` scrolls into view, do a **two-stage ink-down** — first the Press Black text fades in (`fade-reveal`, ~12px rise, ease-out, ~500ms), then ~120ms later the entry's **spot-color elements** (the red underscore under its registry number, a box rule, a section bullet) **print on top** with a tiny `1px` jump-into-place (a tiny misregistration "kachunk"). Stagger entries down the page. `prefers-reduced-motion`: everything just appears, already printed. - **Pull quotes**: when one enters view, its **heavy rules draw outward from the center** (path-draw / scaleX), the giant sentence fades up, and the optional Riso-Yellow halftone wash behind it fills in last with a halftone-dot reveal. - **The page-counter / registry-ticker**: a small fixed Fragment Mono readout in a bottom corner — `№ ____` — whose digits **tumble** (counter-animate, like an odometer/CMYK counter) as you scroll, never settling on a clean round number. It's the only persistent UI. - **Marginalia & corrections** fade in late, after their host paragraph, slightly translucent, in the gutter — a couple of them, on hover/`pointerenter`, do a tiny **strike-and-amend** (old word strikes through, new word slides in beneath in mono). One "errata" note at the bottom quietly contradicts an entry near the top — discoverable, not announced. - **Halftone line-illustrations**: each is an inline SVG of flat shapes filled with a CSS halftone `radial-gradient` dot pattern in one spot color; on entering view, the **dots scale up from 0** so the picture "develops." Coarse on purpose — you can see every dot. - **Cursor**: faint `cursor-follow` — a small soft ink-smudge that trails the pointer over the paper, like a fingertip; when over a pull quote or registry number, it deepens slightly. No magnetic buttons (there are no buttons). - **Ending**: the colophon strip in Spectral SC, the fake barcode, the circulation stamp ("circulation: you" — the *you* in Riso Red, very slightly rotated), and the final ruled blank box captioned "for the one you'd add" — empty, waiting, doing nothing. Then a last hairline rule and *— end of edition —* centered in mono. - Prioritize **the feel of a real printed page** over interactivity: density, justified narrow columns, hyphenation, hairline rules, misregistered spot color, halftone, paper grain. Storytelling lives in the *entries themselves* — the small, exact lives of strangers — and in the running corrections that show the page being lovingly edited. Atmosphere over information; one slow read down a single broadsheet over any branching, dashboarding, or carousel. ## Uniqueness Notes Differentiators from sibling designs in the batch: 1. **The site is a risograph-printed broadsheet, misregistration and all** — flat spot inks, halftone dots, off-by-1px color passes, paper grain, a real horizontal fold — not a parallax-storytelling scroll, not a card-grid, not glassmorphism, not a dashboard. The structure *is a printed page* and behaves like one (justified narrow columns, hairline rules, pull quotes, marginalia, a colophon). 2. **Zero photography** in a corpus where 98% of designs lean on photographs — all "images" are coarse single-color halftone line drawings that "develop" dot-by-dot. Likewise **zero gradients as illustration** (94% of the corpus is gradient-heavy): the only gradients here are halftone dot patterns and a paper vignette. 3. **The content premise is a census of uncounted people** — registry-numbered obituary-style micro-articles about anonymous strangers, edited live by a fond hand via running corrections and an "errata" note that contradicts an earlier entry. No other sibling is a "gazette of strangers," and it deliberately has **no CTA, no pricing, no stat-grid, no testimonials, no FAQ** — the only "form" is a decorative blank ruled box. 4. **Editorial/newspaper aesthetic taken literally and structurally**, not as a loose "magazine layout" mood — actual masthead mechanics, datelines, standfirsts, jump arrows, classifieds columns, a barcode, a circulation stamp — distinct from the editorial sites that just use a serif and wide margins. Documented chosen seed: **"vintage newspaper layout"** — effective vocabulary: *aesthetic: editorial + grainy-textured (risograph print, halftone, misregistration), layout: editorial-flow / single-column broadsheet with a strict multi-column text grid (not card-grid, not bento, not centered-float), typography: slab-serif (Zilla Slab) + serif-revival (Source Serif 4) + small-caps (Spectral SC) + mono (Fragment Mono), palette: warm risograph spot inks (Newsprint Cream #F2EBD9, Press Black #1A1714, Riso Red #C8362B, Riso Blue #2D5E8C, Riso Yellow #E8A23D) — flat, no photographic gradient, imagery: line-illustration as coarse halftone + grain-overlay + paper-aged (NO photography), patterns: fade-reveal + path-draw-svg + counter-animate + typewriter-effect + cursor-follow (NO magnetic, NO tilt-3d, NO parallax), motifs: vintage / newspaper furniture (rules, fold, barcode, marginalia), tone: warm-inviting with an elegiac, scholarly-obituarist undertow.* References to avoided patterns from the frequency analysis: deliberately avoids **glassmorphism (83%)**, **card-grid (92%)**, **photography (98%)**, **gradient palettes (94%)**, **parallax (90%)**, **cursor-follow-as-magnetic-buttons / magnetic (79%)**, **tilt-3d (30%)**, **dashboard (34%)**, and the **pastoral-romantic (34%)** tone — and instead leans into corpus-quiet territory: **grainy-textured (~2%)**, **paper-aged imagery (~7%)**, **line-illustration (16%)**, **editorial-flow layout (~5%)**, **slab-serif (~4%)**, **counter-animate (16%)**, and a literal printed-broadsheet structure that does not appear in the surveyed siblings.