# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz — *yesang* (예상), Korean for **a forecast, an expectation, the shape a thing has before it arrives** — is built as a **surreal meteorology of the not-yet-real**: a fictional Bureau of Anticipations that does not predict weather but *predicts predictions*, charting the cloud-cover of human guesses, the barometric pressure of public mood, the wind speed of a rumor before it lands. The site reads like the daily bulletin of an institution that takes the future seriously enough to render it in beautiful, slightly impossible diagrams. The tone is **dreamy-ethereal yet clinically composed** — the visual register of a 1970s scientific atlas crossed with a half-remembered dream of a planetarium. Nothing here screams. Everything floats. Surfaces are pale, cold, faintly luminous, like paper held up to a window at dusk. Where most "predictive" or "analytics" sites lean on dashboards, glowing graphs, and confident neon, yesang.xyz does the opposite: it makes prediction feel **soft, provisional, hand-drawn-in-light** — a probability is shown as a translucent overlapping disc, a forecast as a constellation of faint dotted arcs, a confidence interval as literal *fog*. The premise: the future is not a number, it is a weather. We are inside it. We are slightly damp. Reference points (mood only): the cold pastel color films of Tarkovsky's *Solaris* control rooms; old isobar maps photocopied one too many times; the marginalia of an astronomer's notebook; the way frosted glass holds a shape without revealing it; Rilke's "the future enters into us, in order to transform itself in us, long before it happens." Avoid: chirpy SaaS optimism, casino-bright "your odds!" energy, cyberpunk grit, corporate trust-blue. ## Layout Motifs and Structure The page abandons the card-grid entirely. Instead it is a **vertical atmospheric column** — a single long scroll organized as a *vertical sounding through the atmosphere*, the way a weather balloon's data is plotted from ground level up through the troposphere. The reader descends (scrolls) not through "sections" but through **strata**: GROUND (the question being asked), HAZE (raw guesses gathered), MID-LAYER (the model's working), CIRRUS (the forecast itself), and STRATOSPHERE (the meta-forecast — the forecast about the forecast's own reliability). Within each stratum the composition is **deliberately broken-grid and off-axis**. There is no centered hero. The first thing the reader sees is an asymmetric arrangement: a large pale circle bleeding off the left edge of the viewport (a "pressure system"), a column of small monospaced numerals running up the right margin like an altitude scale, and the page's title set *low and small in the bottom-left corner*, as if it were a chart caption rather than a headline. Content blocks are positioned by an invisible **12-column grid where text columns are narrow (4–5 columns) and never fill the row** — there is always a wide channel of empty pale space beside them, the *ma* of the sky, used to float diagrammatic elements: overlapping translucent discs, dotted-line arcs, tiny labelled annotations on leader lines. Structural rules: - A thin **vertical "sounding line"** runs down the absolute center of every viewport — a 1px hairline in faint slate, ticked every 10vh with altitude-style labels (`+12 km`, `+8 km`, `surface`, `−2 km` …). All major elements hang off it asymmetrically, left or right, never both at once. - No horizontal section dividers. Strata are separated by **gradient bands of fog** — a 40vh transition where the background lightens or cools and faint particles drift, so the reader can never point to the exact pixel where one layer ends. - The navigation is not a bar; it is a **small fixed "instrument panel" in the top-right** — three or four tiny dials/readouts (a compass rose, a pressure needle, a humidity bar) that double as anchor links to the strata; rotating the page scroll subtly rotates the compass. - The footer is the **STRATOSPHERE** layer rendered nearly white-on-white: the meta-forecast, almost invisible, requiring the reader to lean in — fitting, since it is the least certain thing on the page. ## Typography and Palette **Type stack — Google Fonts only:** - **Display / stratum titles:** `Fraunces` (variable, optical-size + soft/wonk axes). Used at 64–104px for stratum labels — "HAZE", "CIRRUS" — with high optical-size, low weight (~340), `font-variation-settings: "SOFT" 60, "WONK" 1`, generous tracking (`letter-spacing: 0.04em`), set in **small caps via `font-variant: small-caps`** so they read as atlas-plate headings, not marketing headlines. Fraunces' slightly wobbly, almost-botanical serifs give the institution a hand-drawn, 19th-century-naturalist warmth that undercuts the coldness of the palette — exactly the tension we want. - **Body / bulletin text:** `Newsreader` (serif, with a true italic). 19–22px, generous `line-height: 1.7`, set ragged-right in narrow columns. Newsreader reads like a calm scientific journal — literary but not precious. Its italic is used heavily for *all hedging language* ("we expect", "it is likely", "barring") so the prose visibly distinguishes claim from caveat. - **Instruments / data / annotations:** `Spline Sans Mono`. 11–13px, `letter-spacing: 0.08em`, uppercase. Every number, axis label, altitude tick, timestamp, and leader-line annotation. Tabular figures keep the "sounding scale" perfectly aligned. (Chosen over the over-saturated default monos for its slightly humanist, drafting-table feel.) **Palette — cool, foggy, faintly luminous (no warm gradients, no neon):** - `#EEF1F4` — *Paper Sky*: the dominant background, a barely-blue near-white, the color of an overcast morning through a clean window. - `#DDE4EA` — *Haze*: secondary surface and the lighter end of all fog gradients. - `#A9B6C2` — *Slate Cloud*: hairlines, the central sounding line, ticks, secondary annotation text. - `#5C6B7A` — *Storm Distance*: primary body text — soft, never pure black, like ink that has been rained on slightly. - `#2E3A45` — *Deep Front*: reserved for the few moments of true emphasis (a single forecast verdict per stratum); used sparingly so it lands. - `#C9D6CE` — *Glass Green*: the translucent fill of probability discs (used at ~22% alpha, overlapping multiply). - `#E7D6C4` — *Dawn Trace*: the **only warm note on the entire site**, used at low alpha for a single element — the "confidence sunrise" gradient in the CIRRUS layer — so its rarity makes it feel like an event. - `#F7F9FA` — *Almost*: the near-invisible footer/stratosphere text color. All color is layered through **translucency and multiply blending**, never solid fills — the page should feel like several sheets of frosted vellum stacked, each carrying part of the picture. ## Imagery and Motifs **There are no photographs.** The entire visual world is **drawn in CSS and SVG** — diagrammatic, atlas-like, generated. - **Pressure systems** — large, soft-edged circles (radial gradients with heavy `filter: blur()`) drifting at the edges of viewports, some labelled `H` or `L` in tiny mono, with faint concentric isobar rings (SVG `` arrays with dashed strokes). They parallax-drift slowly *opposite* the scroll, like real weather moving against you. - **Isobar / forecast arcs** — sweeping dotted curves (`` with `stroke-dasharray`, `vector-effect: non-scaling-stroke`) that connect data points across the wide empty channels; on scroll they **draw themselves** stroke-by-stroke (path-draw), so each forecast literally "comes into being" as you reach it. - **Probability discs** — overlapping translucent `Glass Green` circles whose intersection regions darken via `mix-blend-mode: multiply`; the darkest overlap is the consensus. A whole forecast can be one Venn-bloom of uncertainty. - **Fog** — gradient bands plus a thin scatter of slow-drifting 1–2px particles (`Slate Cloud` at low alpha, randomized `animation-delay`) in every stratum transition. Reduced motion users get the gradient, no particles. - **The Instrument Panel** — hand-built SVG dials: a compass rose with a needle that tracks `scrollY`, a U-tube pressure gauge whose fluid level rises through the strata, a humidity bar. Tactile, slightly skeuomorphic, drawn with thin strokes — like brass instruments rendered in vapor. - **Leader-line annotations** — every diagram element has a 1px line angling out to a tiny mono caption in the margin, exactly like a labelled scientific plate. On hover the line and caption brighten and a one-sentence Newsreader-italic gloss fades in beneath. - **The Sounding Line** — the persistent central hairline with altitude ticks; the single most identifying mark of the site. ## Prompts for Implementation Build yesang.xyz as **one long HTML document, no SPA, no routing** — a single continuous vertical "sounding" the reader descends from surface to stratosphere. The felt experience: you are reading the morning bulletin of an institution that forecasts the weather of expectation itself, and the document is half scientific plate, half quiet dream. **Global frame:** - Background `#EEF1F4`. Set up a fixed `` layer behind all content holding the **central sounding line** (`x = 50vw`, full height, 1px `#A9B6C2`) with `` altitude ticks every 10vh in `Spline Sans Mono` 11px uppercase — labels run from `+14 km` at top to `−3 km` at the footer. - Fixed top-right **instrument panel**: ~140px square containing three small SVG instruments. Bind a single `scroll` handler (rAF-throttled): `compassNeedle.style.transform = rotate(${scrollY * 0.12}deg)`; pressure-gauge fluid `height` interpolates 0→100% across document scroll; humidity bar fills per current stratum. These instruments are also the nav: clicking the compass smooth-scrolls to the next stratum. - Respect `prefers-reduced-motion`: keep path-draw and fades (shortened), drop particle drift and parallax, freeze instruments at their scroll-correct position without continuous animation. **The five strata (in order, each ~full-viewport-plus):** 1. **GROUND** — *the question.* Title "GROUND" low-left in Fraunces small-caps. A single Newsreader paragraph in a 4-column-wide block on the left stating the question being forecast (e.g. *"By what date will the last person in this city stop saying 'next year'?"*). A huge soft `L` pressure system blooms off the right edge. Mono altitude `surface` ticked on the sounding line beside it. 2. **HAZE** — *raw guesses gathered.* Drifting fog enters. A scatter of small Newsreader-italic guess-fragments float at varied positions in the wide channels, each on a leader line to a mono timestamp. As you scroll they slowly settle toward a loose cluster. No grid alignment — deliberately unsettled. 3. **MID-LAYER** — *the model's working.* The most diagram-dense stratum: overlapping `Glass Green` probability discs (multiply-blended) with labelled intersections; dotted isobar arcs that path-draw on scroll connecting the discs; mono annotations on every node. Body text here is procedural and calm, explaining method in narrow columns beside the bloom. 4. **CIRRUS** — *the forecast.* The visual climax. The background subtly cools, then a single thin **"confidence sunrise"** gradient in `Dawn Trace` (the only warm color on the site) rises behind a wide arc of dotted forecast curves. The forecast verdict — one sentence — is set in `#2E3A45` Fraunces, larger than anything else on the page, but still small caps and tracked, so it feels declared, not shouted. Beneath it, italicized caveats in `Storm Distance`. 5. **STRATOSPHERE / footer** — *the meta-forecast.* Background fades to `#F7F9FA`; text in `#F7F9FA`-adjacent `Almost` so it is nearly invisible — the reader must lean in. It states, plainly, how reliable the above forecast has historically been. A final altitude tick: `−3 km` (below ground — the past, where forecasts go to be checked). Tiny mono colophon: "Bureau of Anticipations · sounding logged {date}". **Motion vocabulary (use these, not the over-used ones):** - **path-draw-svg** on every isobar/forecast arc, triggered by IntersectionObserver as each stratum enters. - **blur-focus**: pressure systems and fog start at `filter: blur(40px)` and ease to `blur(24px)` as their stratum centers — never fully sharp. - **slow counter-drift parallax** on pressure systems only (translateY opposite scroll, ≤0.15 ratio) — atmospheric, not flashy. - **fade-reveal** for body text columns: 0→1 opacity + 12px rise, staggered by ~80ms per element within a stratum. - Hover on any annotation leader line: brighten line `#A9B6C2`→`#5C6B7A`, fade in a one-line italic gloss below the mono label. - AVOID entirely: cursor-follow custom cursors, magnetic buttons, spring-bounce card hovers, tilt-3d cards, big counter-up stat numbers, typewriter hero text. **Forbidden layout patterns:** no card grid, no centered hero, no CTA buttons, no pricing/plans block, no stat-grid (`99.9%` / `10k+` etc.), no testimonial carousel, no logo wall. Empty pale space is the most important compositional material — protect it. ## Uniqueness Notes Distinct departures from the rest of the registry and from any standard "prediction/analytics" template: 1. **Prediction rendered as weather, not as a dashboard.** Every other site touching forecasting/probability in the registry reaches for dashboards, glowing graphs, confident neon, or trust-blue corporate calm. yesang.xyz makes prediction *atmospheric and provisional* — probabilities are translucent overlapping discs, confidence is literal fog, the forecast is a sunrise gradient. No dashboard, no charts-as-product-screenshots. 2. **The vertical "sounding" structure.** The page is organized as a weather-balloon ascent (GROUND → STRATOSPHERE) with a persistent central altitude-ticked hairline and a brass-in-vapor instrument panel that responds to scroll. This is neither immersive-scroll storytelling nor a section stack — it is a *measuring instrument you fall through*. Nothing in the registry uses this. 3. **Surreal aesthetic in a cold, near-monochrome cool palette.** Frequency analysis shows `surreal` at ~9% of the registry, almost always paired with vibrant/warm/dreamlike color. yesang.xyz pairs **surreal** with a foggy near-white cool palette (`#EEF1F4 / #A9B6C2 / #5C6B7A`) and exactly **one** warm accent (`#E7D6C4`, used once) — surreal-as-overcast, not surreal-as-acid-trip. 4. **Hand-drawn-naturalist serif (Fraunces small caps) over scientific-atlas diagrams** — deliberately rejecting the registry-saturated `mono`-headline + `glassmorphism` + `hand-drawn`-illustration combo. The "hand-drawn" feeling here comes from Fraunces' wonky serifs and SVG leader-line annotations, never from doodle illustrations or glass cards (both ~90% saturated — explicitly avoided). 5. **No photography at all; no card grid; empty space as primary material.** Against `photography` (97%), `card-grid` (93%), `full-bleed`/`centered` layouts (~80%+) — this design uses none of them. Pure CSS/SVG diagrammatics in a broken, off-axis grid where text columns never fill a row. 6. **An almost-invisible footer.** The meta-forecast (the least certain content) is set near-white-on-white so the reader must physically lean toward the screen — form enacting the idea that the reliability of a forecast is the hardest thing to see. **Chosen seed / style:** `surreal dreamscape promo` → resolved as `aesthetic: surreal, layout: broken-grid, typography: serif-revival, palette: cool-grays, patterns: path-draw-svg, imagery: generative-art, motifs: wave-forms, tone: dreamy-ethereal`. **Avoided over-used patterns (per frequency analysis):** hand-drawn & glassmorphism aesthetics (~90%), photography imagery (97%), card-grid/full-bleed/centered layouts (~80–93%), mono headline typography (93%), warm+gradient palettes (~95%), cursor-follow/parallax-as-spectacle/spring/magnetic/tilt-3d/counter-animate patterns (~67–89%). Preferred under-used choices: surreal aesthetic, broken-grid layout, cool-grays palette, serif-revival type, path-draw-svg & blur-focus motion, generative SVG imagery.