# Design Language for yesang.org ## Aesthetics and Tone yesang.org is **a risograph-printed almanac of predictions** — the kind of slim, mis-registered pamphlet a small-town forecasting office would have run off on a two-drum duplicator in 1974, except the forecasts here are not of weather but of *everything that might happen next*. "Yesang" (예상) is the Korean word for *anticipation, projection, the expected*, and the whole site behaves like a printed object that has been anticipating you: ink slightly fluorescent, paper slightly toothy, every line of type haloed by the faint mis-bite of a hand-cranked press. The aesthetic is **grainy-textured risograph print married to a grounded-earthy almanac voice**. This is *not* glassmorphism (86% in the corpus — refused outright), *not* hand-drawn whimsy (94% — refused outright), and *not* photography (97% — there is not a single photograph anywhere on this site). Instead: flat spot-color fills that don't quite line up with their own outlines, a permanent overlaid paper grain, a duotone of fluorescent-pink-over-dusk-blue that recalls Riso's signature FLUORESCENT PINK and FEDERAL BLUE drums, and the calm, slightly fussy tone of an almanac that has been printing the same way for fifty years and sees no reason to stop. Mood words: **pressed, toothy, mis-registered, patient, almanac-calm, fluorescent-but-quiet**. The site should feel like holding a freshly-printed zine that is still faintly warm and smells of solvent. Nothing glows on a screen here — everything *prints*. ## Layout Motifs and Structure The site is a **single vertical sequence of seven "plates"** — using "plate" in the printmaking sense: each plate is one pass of the press, one spread of the almanac. The layout is a deliberate **broken-grid** (13% in the corpus): a 12-column base grid is established and then *violated* on every plate — a heading bleeds two columns past its gutter, a caption sits half-on/half-off the page edge, a forecast block is rotated 1.5° because the paper went through the feeder crooked. The grid is real; it is just never obeyed. - **The registration-mark frame.** Every plate carries the four corner registration crosshairs (⊕) of a real print job, drawn as thin 0.75px SVG marks in the off-plate margin. They are *intentionally misaligned* — the pink crosshair sits 3–5px off from the blue one — and they are the only persistent chrome on the page. - **The two-drum offset.** Every text element is rendered twice: once in dusk-blue at the "true" position, once in fluorescent-pink offset by `translate(2px, -2px)` at ~55% opacity, `mix-blend-mode: multiply`. This is the entire visual signature. Headlines, body, captions, footnotes — all doubled, all mis-bitten. - **Margin marginalia.** The left margin of every plate carries vertical hand-set-style annotations (plate number, "예상 / yesang", ink-coverage percentage like "K 40% / F 22%") rotated 90°, the way a printer pencils notes onto the slug. - **No top nav, no hamburger, no footer, no logo lockup.** Navigation is a **right-edge "plate stack"**: seven tiny stacked rectangles, like the corner of a pile of just-printed sheets; the active sheet slides 6px left. That is the only navigation. - **Negative space as un-inked paper.** Roughly 40% of every plate is bare paper-toned ground with visible grain — the press simply did not lay ink there, and the emptiness is the point. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & plate headings — `Zilla Slab` (weights 500 / 700)** — a sturdy, slightly mechanical slab-serif with squared serifs that survive the risograph's ink-spread beautifully; set large (clamp ~44px → ~92px), tight leading, used for every plate title and the "yesang" wordmark. The doubled pink ghost makes its slabs look like they're trying to walk off the page. - **Body & forecast text — `Newsreader` (variable, opsz 18, weights 400 / 500, with italic)** — a literary, almanac-flavored serif with a warm bookish color on the page; carries all running prose, the forecast entries, and the "as recorded" notes. Optical size kept high so it reads like a printed page, not a screen. - **Marginalia, plate numbers, ink-coverage notes — `Spline Sans Mono` (weight 400, letter-spacing 0.08em)** — a humane monospace standing in for a printer's pencil-and-rule annotations. Used only at small sizes in margins and crosshair labels. (Yes, mono is 93% in the corpus — but here it is confined to *marginalia only*, never to body or headings, which is the inversion: mono as the press-operator's handwriting, not as the voice of the site.) **Palette — a Riso two-drum duotone plus paper, plus one quiet alarm:** - `#F4EFE3` — **un-inked paper.** Warm, toothy, slightly yellowed newsprint ground. The base of everything. - `#1F2A4A` — **dusk-blue (drum K-stand-in).** The "true" ink color: deep, slightly desaturated federal blue. All primary type. - `#FF5C8A` — **fluorescent pink (drum F).** The Riso signature; used only as the offset ghost layer at multiply blend, plus for the registration crosshairs and a few full-bleed pink "panel" plates. - `#3C3225` — **slug-pencil brown.** For marginalia text and hairline rules; the color of a 2B pencil on newsprint. - `#E8A33D` — **almanac amber.** A single warm spot color, used *sparingly* — for the highlighted forecast of each plate, a printed-stamp circle, the "today" mark. The almanac's one moment of emphasis per page. Contrast is honest dusk-blue-on-paper; the pink ghost is decorative and never carries information alone. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Every visual is SVG, flat-filled, and mis-registered on purpose.** - **Risograph grain overlay (site-wide).** A fixed, full-viewport SVG/`feTurbulence` noise layer at ~6–9% opacity, multiply blend, scaled large — the tooth of the paper. It never moves. - **The seven plate-emblems** — one per plate, each a single bold flat-color riso emblem, drawn twice (blue true + pink ghost): 1. **A barometer dial** with the needle drawn *between* two readings — the instrument of anticipation. 2. **A folded paper crane mid-fold** — the shape of a thing about to become a thing. 3. **A weather-vane rooster** silhouetted, pointing at no compass point in particular. 4. **An hourglass** whose sand is rendered as a column of tiny halftone dots, half fallen. 5. **A ledger column** of forecast checkmarks — some struck through (the predictions that came true), some open. 6. **A seed packet** torn open, seeds = scattered duotone dots. 7. **A rising-sun stamp** (the almanac's colophon), the amber spot color's one big moment. - **Halftone dot fields.** Wherever a "gradient" would normally go, use an honest halftone — rows of circles growing from 1px to 7px. Riso cannot do smooth gradients and neither will this site. - **Hand-ruled hairlines.** Section rules are 0.75px slug-pencil-brown lines with a 2px wobble baked into the path — a ruler held by a human. - **Printed-stamp circles.** Round rubber-stamp marks ("예상 1974", "AS RECORDED", "PLATE VII") in amber, slightly rotated, slightly under-inked at one edge. - **Crop marks & registration crosshairs** in every margin, deliberately offset between the two ink layers. ## Prompts for Implementation Build yesang.org as **a single HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a roughly 80-second amble through a seven-plate risograph almanac of anticipations. There is **no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email capture, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner**. There is only the plate sequence and its marginalia. **Storytelling structure (seven plates, vertical scroll):** 1. **Plate I — Colophon.** The "yesang / 예상" wordmark in huge Zilla Slab, doubled blue+pink, sitting crooked at 1.5°. Subtitle in Newsreader italic: *"an almanac of what is expected — printed since the press could turn."* The barometer emblem to the side, needle hung between two marks. Margin slug reads `PLATE I · 예상 · K 31% / F 18%`. 2. **Plate II — On Anticipation.** A short prose column (Newsreader) about the act of expecting — how a forecast is a promise the future may or may not keep. The paper-crane emblem mid-fold. One sentence highlighted in amber. 3. **Plate III — The Method.** Three "forecast entries" laid out like almanac rows: a heading, a body line, an "AS RECORDED" stamp. The grid is broken — the middle entry rotated, the third bleeding off the right edge. Weather-vane emblem. 4. **Plate IV — full-bleed pink plate.** The press over-inks the pink drum: the entire plate floods `#FF5C8A`, paper-toned type reversed out, the hourglass emblem in negative. A single line: *"some pages, the ink is generous."* A breather plate, pure print accident. 5. **Plate V — The Ledger.** A vertical column of past predictions, each with a checkmark — some struck through with a hand-ruled line (came true), some left open. The ledger emblem. Amber on the most recent struck-through line. 6. **Plate VI — Seeds.** Prose about predictions as seeds — scattered now, sprouting later. Seed-packet emblem torn open, halftone-dot seeds drifting (parallax-light, ≤8px). 7. **Plate VII — Rising-Sun Colophon.** The almanac signs off: the amber rising-sun stamp at full size, "예상 1974" stamp circle, a last Newsreader-italic line: *"thank you for reading what we expected. — the press."* Registration crosshairs one last time, still misaligned. **Animation & interaction (favor restraint — this is a printed object, not a UI):** - **Press-pass reveal.** As each plate scrolls into view, its content does *not* fade — it **prints**: the blue layer wipes in top-to-bottom over ~280ms (like a squeegee pass), then the pink ghost layer wipes in ~120ms later with its 2px offset. Use `clip-path` insets for the wipe. This is the signature motion. - **path-draw-svg** (50% in corpus but earned here): the hand-ruled hairlines and the plate-emblem outlines *draw themselves* with `stroke-dasharray` over ~600ms when their plate activates — a pen ruling a line. - **Halftone bloom.** On the pink full-bleed plate (IV), the halftone dots scale from 1px → full size in a staggered ripple from one corner. - **Marginalia stays put.** The left-margin slug annotations are `position: sticky` within their plate, sliding very slightly (≤4px) — a printer's note pinned to the running sheet. - **Plate-stack nav.** The right-edge stack of seven rectangles: active sheet slides 6px left with a short spring; clicking scrolls to that plate. On hover, the sheet shows its plate numeral in Spline Sans Mono. - **Cursor.** No cursor-follow blob, no magnetic buttons (corpus is saturated with both). The only cursor change: over the plate-stack, the cursor becomes a thin crosshair (CSS `crosshair`) — a registration mark. - **Grain never animates.** The site-wide turbulence overlay is static; motion that touches it would break the illusion of paper. - Respect `prefers-reduced-motion`: skip the squeegee wipe and path-draw, just show plates statically — still a perfectly good printed page. ## Uniqueness Notes Differentiators from other designs in this codebase, each a deliberate departure from the frequency analysis: 1. **Risograph two-drum mis-registration as the entire visual system.** Grainy-textured sits at 2% in the aesthetic frequency and grain-overlay at 10% in imagery; *no* corpus site (visible in this analysis) builds its whole identity on the doubled-ink, deliberately-offset duotone of a Riso press. Every text element doubled in blue+pink at multiply blend is, as far as the corpus shows, unique to yesang.org. 2. **Mono confined to marginalia only.** Mono typography is 93% — near-universal — but every other site uses it as a *primary* voice. Here `Spline Sans Mono` appears only as the press-operator's pencil annotations in the margins; body is `Newsreader`, headings are `Zilla Slab`. The convention is inverted, not followed. 3. **Zero photography, zero glassmorphism, zero hand-drawn, zero cursor-follow blob, zero magnetic buttons.** This site deliberately abstains from the five most saturated patterns in the corpus (photography 97%, glassmorphism 86%, hand-drawn 94%, cursor-follow 89%, magnetic 76%) and replaces "smooth gradient" with honest halftone dot fields throughout. 4. **The "print" reveal instead of the "fade" reveal.** Fade-reveal is 25% and the squeegee/clip-path two-pass print wipe is, in the corpus, unrepresented — content arrives by being *printed*, not by opacity. 5. **An almanac-of-predictions concept fitted to the Korean meaning of the domain** (예상 = anticipation/projection), framed as a fictional fifty-year-old forecasting pamphlet — a narrative frame distinct from any other site here. Chosen seed/style: **aesthetic: grainy-textured, layout: broken-grid, typography: slab-serif, palette: duotone, patterns: path-draw-svg, imagery: grain-overlay, motifs: vintage, tone: grounded-earthy** (fallback selection — no Planned Seed was supplied in the assignment; this combination is underused per the frequency analysis). Avoided patterns per frequency analysis: glassmorphism (86%), hand-drawn (94%), photography (97%), card-grid (93%), warm/gradient palette saturation (98%/92%), cursor-follow (89%), spring-everything (83%), magnetic buttons (76%), mono-as-primary-voice (93%).