# Design Language for hwakryul.com ## Aesthetics and Tone hwakryul.com is **the inside of a coin while it is still in the air** — a dark, low-tide, pre-dawn instrument for sitting with uncertainty rather than resolving it. "Hwakryul" is the Korean word 확률, *probability*: not the gambler's probability of jackpots and odds-makers, but the quieter kind — the chance of rain over a grey estuary at 5 a.m., the chance that the person you are thinking of is thinking of you, the chance that the next breath lands. The site treats probability as a *mood*, an honest admission that nothing here is certain, and it refuses every visual habit that pretends otherwise: no confident hero claims, no "trusted by", no closing argument. It is built in the **dark-mode** register (only ~14% of the corpus) but resists the genre's usual neon-on-charcoal flex; instead it sits in **coastal-blend** colour (~1% of the corpus — almost untouched): the bruised teals and washed-out sand of a shoreline at the hour when the sky and the water are the same uncertain grey. The tone is **raw-authentic** (~2% of the corpus — genuinely rare) and means it literally: visible seams, an unhidden cursor coordinate read-out, type that admits it is type, a footer that says "this is a probability, not a promise." The mood-words are: *tidal, provisional, before-the-decision, salt-in-the-air, soft-static*. The emotional target is the specific calm of someone who has stopped trying to know the outcome and is now simply watching the variables drift — a person on a cold pier at dawn, hands in pockets, counting the chance of each thing that might happen and being, somehow, fine with all of it. This is **not** a probability calculator, not a stats dashboard, not a fintech "manage your odds" SaaS, not a casino. It is a single-screen-deep contemplative essay about the dignity of not-knowing, rendered as a quiet dark instrument with a star-map you steer with your cursor. ## Layout Motifs and Structure The structural commitment is **ma-negative-space** (~6% of the corpus — actively claimed), the Japanese 間 — the *interval*, the pregnant pause, the room around the object that gives the object its weight. On hwakryul.com the negative space is not "clean minimalism with breathing room"; it is **the literal medium of probability** — the dark, near-empty field is the space of all outcomes, and the few things in it are the outcomes that happened to take form. The composition is therefore deliberately **sparse to the point of feeling underbuilt**, and that is the point: emptiness is the honest depiction of "could be anything." Concretely: - **One full-viewport dark field** (`100vh`, `100vw`), no traditional scroll-jacking, just a long, slow, optional vertical drift — the page is roughly **three viewport-heights tall**, no more. The first viewport is almost entirely **Tidal Black** with one off-centre line of fluid type and a faint scatter of star-points. The eye has nowhere obvious to go; it has to *settle*. - **A single asymmetric vertical seam** at roughly the 38.2% line (the golden cut, off to the left of centre) — a 1px **Foam Line** that runs the full height of the document like a barely-visible tide-mark on a piling. All content hangs from this line: headings sit just to its right, marginalia (timestamps, probability fragments, the cursor coordinate read-out) sit just to its left, in the gutter. The seam is the only "grid." - **No card grid. No bento box. No dashboard. No hero-then-three-columns. No stat tiles.** (card-grid is 87%, full-bleed 93%, centered 85% — hwakryul.com refuses all three as defaults.) There are at most **four "stations"** down the page, each one a paragraph or two of essay floating in a lake of dark space, separated by a full empty viewport-half of nothing — the *ma* between thoughts. - **The star-field is the only "imagery region"** and it is the full background plane, behind everything, all three viewport-heights of it — a single continuous **vector-art** night sky (see Imagery) that the cursor steers (see Patterns). The text floats *in front of* the sky like words spoken on a dark beach. - A **minimal-navigation** posture: no nav bar. A single tiny **Salt White** word "확률" fixed in the top-left gutter, and a one-line provisional footer fixed at the very bottom — that is the entire chrome. The layout's job is to make the reader *feel the size of the space of outcomes* before they read a single word about probability. Density is the enemy here; the void is the feature. ## Typography and Palette **Typefaces — Google Fonts only, all verified available on Google Fonts:** - **`Fraunces`** (variable axes: `opsz` 9–144, `wght` 100–900, plus the `SOFT` and `WONK` axes) — the principal voice, serving the **variable-fluid** mandate (variable-fluid is only ~3% of the corpus — genuinely rare; the registry is overwhelmingly `mono` and `humanist`). Fraunces is a true variable font with a glorious optical-size axis: at large `opsz` its serifs splay and the `WONK` axis lets the `g` and `f` curl with a hand-cut, slightly-wrong, *raw-authentic* irregularity; at small `opsz` it tightens into a sober reading face. hwakryul.com drives its `font-variation-settings` **fluidly with `clamp()` and with scroll position and cursor proximity** — headings literally get *heavier and wonkier as the cursor approaches them*, then relax when it leaves, so the type is never at a fixed weight, the way a probability is never at a fixed value. The big opening line is set at `opsz` ~120, `wght` ~340, `SOFT` ~60, `WONK` ~30 — large, soft-cornered, faintly off-kilter, like words written by someone who has been awake a long time. - **`Inconsolata`** (variable `wght` 200–900, plus the `wdth` axis) — the marginalia and instrument voice: the cursor coordinate read-out in the gutter, the timestamps, the probability fragments ("0.41 ± an honest amount"), the footer disclaimer. A humanist monospace with a true variable width axis — it narrows to `wdth` ~75 in the tight gutter and relaxes to ~100 inline. Set in **Driftwood Grey**, small, all in lowercase. It is the site's "honest" voice — the part that admits it is a machine reporting numbers it cannot fully vouch for. - **`Newsreader`** (variable `opsz` 6–72, `wght` 200–800, plus the `italic` axis) — used **only for the italic body essay**, the actual prose about not-knowing. Newsreader's italic at low `opsz` is intimate and slightly old-fashioned, like a letter; the variable `opsz` keeps it readable at the small sizes the *ma*-heavy layout demands. Set in **Sea Mist** on the dark field. Type rules: the opening line never exceeds **one line** at any viewport — it `clamp()`s its `font-size` so it always just barely fits, edge of word near the right margin, the seam to its left. Body measure is narrow, ~52ch, hanging off the seam. Letter-spacing on the big line is *negative* and breathes wider as weight drops. Nothing is bold-bold; the heaviest the page ever goes is `wght` ~520, and only transiently, under the cursor. **Palette — coastal-blend (~1% of the corpus, near-unused), tuned dark:** | Token | Hex | Role | |---|---|---| | Tidal Black | `#0B1417` | The void — page background, the space of all outcomes. A blue-green-leaning near-black, never pure `#000`. | | Deep Brine | `#13262B` | Secondary surface — the faint band behind the footer, the *ma*-gap shading at section seams. | | Slate Surf | `#2F4F55` | Mid-depth structural tint — the inactive star-points, the seam line's glow. | | Sea Mist | `#A9C7C4` | Primary body text on dark — a pale desaturated seafoam, the colour of breath on cold air. | | Salt White | `#E8F0EE` | Highest-contrast text — the opening line, the "확률" mark. Faintly cool, never `#fff`. | | Driftwood Grey | `#7E8B86` | Marginalia, the coordinate read-out, timestamps — weathered, neutral, recessive. | | Pale Sand | `#D8C9A8` | The single warm accent — the *one* star that is "lit", the underline-on-hover, the dawn-line near the bottom of the page. Used sparingly: it is the warmth of the sun that hasn't risen yet. | | Faded Coral | `#C97B66` | The rarest accent — used **once**, in the footer disclaimer, on the word "probability", as a quiet reminder that the warm thing is also the uncertain thing. | The whole palette lives in the cold half of the wheel except Pale Sand and Faded Coral, which appear so rarely that when they do, they *mean* something — the small warmth that probability still permits. ## Imagery and Motifs **No photography. No stock textures. No icon library. No Lottie. No 3D render. No raster images at all** (photography is 98% of the corpus — hwakryul.com is in the ~2% that uses none; **vector-art** imagery is ~3% and **star-celestial** motifs ~2% — both genuinely rare). Every visual is hand-built SVG, a single `` star-field, and CSS — all in the eight-value coastal-blend palette. **1. The Probability Sky (star-celestial, ~2% — rare; the site's anchor).** A single continuous **vector-art** night sky drawn on one `` element pinned behind everything, ~3 viewport-heights tall. It is **not** a realistic starscape — it is a *scatter plot of outcomes*: 200–400 small points, each one a possible thing-that-could-happen, positioned by a seeded pseudo-random function so it is the same sky every visit (probability is not random *noise*; it has structure). Most points are **Slate Surf**, dim and equal — the unrealised outcomes. **Exactly one** point is **Pale Sand** and slightly larger, with a soft 6px glow — "the thing that actually happened." A faint constellation of ~5–7 thin **Foam Line** strokes connects a handful of points into a loose, unnamed asterism — the *story we tell afterward* about which outcomes were "meant" to connect. As the cursor moves, the whole sky **parallax-drifts** and individual points near the cursor brighten toward Sea Mist and gently swell, then fade back — you are *steering through the space of possibilities*, and the ones you approach feel briefly more real (see Patterns). **2. The Tide-Mark Seam.** The single 1px vertical line at the 38.2% column, drawn in **Foam Line**, with a 2px **Slate Surf** blur-glow. At each of the ~four stations it has a tiny SVG tick — a short horizontal serif, like a depth mark on a piling — and beside the tick, in **Driftwood Grey** Inconsolata, a fragment: `station 02 · p ≈ 0.37`. The numbers are deliberately *imprecise*, always with an "± an honest amount" or "give or take" — raw-authentic refuses false precision. **3. The Coordinate Read-out.** Fixed in the top-left gutter, in tiny **Driftwood Grey** variable Inconsolata: a live read-out of the cursor's normalised position and a derived "local probability" — e.g. `x 0.41 · y 0.66 · p here ≈ 0.27`. It is honest machinery, left visible on purpose. It is also the *only* "UI element" with a number in it, and the number changes constantly and means almost nothing — which is the joke and the point. **4. The Dawn-Line.** Near the very bottom of the third viewport, a single horizontal SVG gradient stroke — Tidal Black fading up through Deep Brine to a thin band of **Pale Sand** at maybe 8% opacity — the sun that is *about to* rise. It never fully rises. The page ends on the chance of dawn, not on dawn. **5. The "확률" Mark.** Top-left, tiny, **Salt White**, set in Fraunces at small `opsz` — the Hangul for *probability*, the only Korean on the page, presented without translation or explanation. It is a quiet flag of where this word, and this mood, comes from. No favicon photograph: the favicon is a single **Pale Sand** dot on a **Tidal Black** square — one lit outcome in the dark. ## Prompts for Implementation Build hwakryul.com as **one HTML document, one CSS file, one ES module, one inline SVG sprite (the seam ticks, the dawn-line gradient stroke, the constellation strokes), one `` for the Probability Sky, and one favicon SVG (a Pale Sand dot on Tidal Black).** No framework. No bundler. No raster images. No WebGL (the canvas is plain 2D). No video. No analytics. No service worker. No router. Load the three variable fonts from Google Fonts with `&display=swap` and request the variable axes (`Fraunces:opsz,wght,SOFT,WONK`, `Inconsolata:wdth,wght`, `Newsreader:opsz,wght,ital`). **Structure & storytelling.** This is a **full-screen narrative experience**, not a marketing page. The reader arrives into the dark, near-empty first viewport: only the "확률" mark, the seam, the faint star scatter, and the single fluid opening line — something like *"every next moment is a coin still in the air."* No nav, no CTA, no "scroll for more" arrow (let the void do the inviting). As they drift down, ~four short essay-stations unfold, each floating in a viewport-half of *ma*: (1) the proposition — probability as honesty about not-knowing; (2) the sky — that every dim point is a thing that could happen; (3) the one lit star — that exactly one outcome takes form, and the rest were just as real until they weren't; (4) the dawn-line — that the chance of the good thing is still a real number, and that is enough to stay on the pier. The page **ends quietly** on the footer disclaimer: a single Inconsolata line in Driftwood Grey, with the word "probability" in Faded Coral — *"this site is a probability, not a promise."* **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, "trusted by" logos, testimonials, feature cards, signup forms, anything that resolves the uncertainty into a transaction. **Motion & patterns — lean on the underused, restrain the overused.** - **cursor-follow** is the primary interaction (it is ~88% of the corpus — overused — but it is the seed's named pattern and here it is given a *meaning* the genre rarely gives it): the cursor is not a spotlight or a magnet, it is **a probe drifting through outcome-space**. As it moves, (a) the whole Probability Sky parallax-drifts opposite the cursor at ~6–10px max, with deeper layers (the dim points) lagging behind nearer layers (the constellation strokes) — a soft, slow `spring` ease, never snappy; (b) star-points within ~120px of the cursor brighten from Slate Surf toward Sea Mist and swell ~1.4×, then ease back over ~600ms when the cursor leaves — "the outcomes you approach feel briefly more real"; (c) the coordinate read-out updates live; (d) the nearest essay-heading's `font-variation-settings` shifts toward heavier `wght` and higher `WONK` as the cursor nears it, relaxing as it leaves — type that responds to attention like a probability responds to evidence. - **variable-fluid type as motion** (typography ~3% — rare): besides the cursor effect, the opening line's axes also interpolate slowly with scroll position — it gets a touch *lighter and softer* as you scroll past it, as if the certainty of the first claim dissolves the further you go. Use `requestAnimationFrame` and lerp the variation settings; never jump. - **fade-reveal** (~10% — relatively rare): each essay-station fades up from 0 opacity and ~16px below its resting position as it enters the viewport, on a long ~900ms cubic ease — slow enough to feel like *arriving at a thought*, not a slide animation. Use `IntersectionObserver`. - **path-draw-svg** (~28%): the constellation strokes draw themselves once, slowly (~2.5s), on first load — the *story-after-the-fact* assembling itself — using `stroke-dasharray`/`stroke-dashoffset`. - **Restraint:** no parallax-scroll-jacking, no tilt-3d on cards (there are no cards), no magnetic buttons (there are no buttons), no counter-animate (numbers here are honest, not triumphant), no typewriter effect, no card-flip. The Probability Sky's idle state has a *very* slow autonomous drift (a 60-second sine wander) so the page is never dead-still, but it is never busy either. - **Reduced motion:** `prefers-reduced-motion` → kill the parallax and the autonomous drift, keep the static seeded sky, render all essay-stations at full opacity immediately, freeze type axes at their resting values, draw the constellations instantly. **Texture & finish.** A single full-viewport CSS `radial-gradient` vignette in Tidal Black → Deep Brine darkens the corners ~12% so the centre feels like a pool of slightly-less-dark. An almost-imperceptible CSS film-grain (`<2%` opacity, a tiny tiled SVG `feTurbulence`) sits over everything — *soft-static*, the noise of the unresolved. The seam line and the lit star are the only two things on the page allowed a `box-shadow`/glow; everything else is flat. Type-render with `text-rendering: optimizeLegibility` and `-webkit-font-smoothing: antialiased`. **Voice.** All copy is **raw-authentic**: lowercase except the "확률" mark and the first letter of the opening line; short declaratives; admits its own uncertainty ("probably", "give or take", "an honest amount"); never sells; ends on a small permitted warmth. The instrument text (coordinate read-out, station fragments) is dry and machine-plain in Inconsolata. Do not explain the Korean word — let it sit. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by the frequency analysis: 1. **Probability rendered as *ma* — emptiness as the honest depiction of "could be anything."** Most dark-mode sites (only ~14% of the corpus to begin with) fill the dark with neon, data-viz, glassmorphic cards, or sci-fi HUD chrome. hwakryul.com does the opposite: it makes the dark *almost entirely empty* (ma-negative-space, ~6%), three viewport-heights with at most four short essay-stations floating in lakes of void, and argues — visually — that the emptiness *is* the probability space. No card-grid (87%), no full-bleed hero (93%), no centered column (85%), no bento box, no dashboard, no stat tiles. The void is the feature, not a styling choice. 2. **Coastal-blend palette (~1% — near-unused) pulled into a cold pre-dawn dark, with warmth rationed to two near-invisible accents.** The shoreline-at-5am teals and washed sand of coastal-blend have barely appeared in the corpus, and never (per the frequency data's coastal-blend rarity) in a dark register tied to *probability*. hwakryul.com uses Pale Sand exactly once as a star and once as a hover-line, and Faded Coral exactly once — on the word "probability" in the footer — so the only warmth on the page literally marks the only uncertain word. Most of the corpus is warm-gradient (98% warm, 98% gradient); this site is cold, near-flat, and structural. 3. **Variable-fluid type whose axes are driven by cursor proximity and scroll — type that responds to attention like a probability responds to evidence.** variable-fluid typography is ~3% of the corpus; expressive/animated type is rarer still. Here Fraunces' `wght`/`WONK`/`SOFT` axes and Newsreader's `opsz`/`ital` are never at fixed values — headings get heavier and wonkier under the cursor and relax when it leaves, the opening claim gets lighter and softer as you scroll past it. The type is *itself a probability distribution*, never collapsed to a point. 4. **A star-field that is a scatter-plot of outcomes, not a decorative night sky.** star-celestial motifs (~2%) and vector-art imagery (~3%) are both rare, and the corpus's photography habit (98%) means most "skies" are stock images. hwakryul.com's sky is a single seeded `` plot: every dim point is a thing that could have happened, exactly one is lit ("the thing that did"), a faint hand-drawn constellation is "the story we tell afterward", and the cursor (cursor-follow, ~88% — the seed's named pattern, here given a real meaning) is a probe that drifts through outcome-space and briefly makes the possibilities it nears feel more real. No icons, no Lottie, no 3D, no raster — all SVG/canvas/CSS. 5. **raw-authentic that means it — visible seams, an honest live read-out, false precision actively refused, and an ending that resolves nothing.** raw-authentic tone is ~2% of the corpus. hwakryul.com leaves the cursor coordinate read-out and a derived "local probability" visible in the gutter, never quotes a probability without "give or take" or "± an honest amount", shows its single golden-cut seam as literal structure rather than hiding it, and ends not on a CTA or a dawn but on the *chance* of dawn and a footer that says "this is a probability, not a promise." No conversions, no stat-grid, no testimonials — the site refuses to pretend it knows the outcome, which is the whole argument. Chosen seed/style (from assignment): **aesthetic: dark-mode, layout: ma-negative-space, typography: variable-fluid, palette: coastal-blend, patterns: cursor-follow, imagery: vector-art, motifs: star-celestial, tone: raw-authentic.** Avoided patterns from the frequency analysis: card-grid (87%), full-bleed (93%), centered (85%), photography imagery (98%), warm + gradient palettes (98% / 98%), parallax scroll-jacking (95%), magnetic (81%), stagger (80%), tilt-3d (26%), counter-animate (12%), typewriter-effect (10%), card-flip (14%), hand-drawn aesthetic (96%), glassmorphism (67%), mono typography (95%) — none used as defaults; where a near-universal pattern appears (cursor-follow, a touch of path-draw-svg, fade-reveal) it is re-purposed to serve the probability-as-uncertainty narrative rather than used decoratively.