# Design Language for hwaglyul.com > **확률 / hwaglyul** — the Korean word for *probability*. This site is a cinematic instrument panel for contemplating chance: a slow, dreamlike observatory where dice never quite land, where every outcome is rendered as a faint blue ghost of all the outcomes it almost was. ## Aesthetics and Tone A **cinematic probability observatory** — imagine the bridge of a deep-submersible research vessel that has been retrofitted to measure not pressure or current, but *likelihood*. The mood is **dreamy-ethereal**: not the cold sterility of a trading terminal, but the hushed, underwater calm of a planetarium at 3 a.m. Light arrives from below, the way it does in the deep ocean — diffuse, bioluminescent, never quite reaching the corners. Numbers do not blink urgently; they *drift in and resolve*, like a photograph developing in a tray. Every probability is shown twice: once as the value it currently holds, and once — translucent, layered behind — as the swarm of all the values it could still become. This is **cinematic** in the literal sense: the page is shot, not laid out. There are **establishing wide shots** (the full observatory dashboard), **slow push-ins** (the page physically zooms toward a single panel until it fills the frame), and **rack focuses** (one panel snaps sharp while everything around it goes soft and out-of-depth). The visitor is not a user clicking buttons — they are a camera operator inside a film about uncertainty, and scrolling is the dolly track. The emotional register: *quietly awed*. Probability is not a gambling pitch here; it is treated as something close to the sublime — the way a tide table is sublime, or a weather front. The tone speaks softly, in long sentences, the way a documentary narrator does at the moment the screen goes dark and the music swells. ## Layout Motifs and Structure A **deep-sea instrument dashboard** built on a **16-column ocean grid** — but the dashboard is *cinematic*, meaning the viewport behaves like a camera moving across and *into* the console rather than a flat scroll. - **THE BRIDGE (establishing shot, viewport 1):** The whole observatory at once — a constellation of dim instrument panels floating on near-black water, faintly mislabeled in serif capitals: *DISTRIBUTION*, *PRIOR*, *POSTERIOR*, *LIKELIHOOD*, *THE LONG TAIL*, *MONTE CARLO BASIN*. Nothing is interactive yet. The panels breathe — a 6-second luminance pulse, each panel offset in phase, so the whole bridge shimmers like a reef. - **THE DOLLY (scroll = camera track):** Scrolling does not move panels up the screen. It moves the *camera* forward and laterally through the bridge — `transform: scale()` + `translate3d()` on a deep parent — so panels grow, pass to the edges, and a new one centers and locks. This is the **zoom-focus** pattern made structural: the layout is a series of push-ins. - **THE RACK FOCUS (depth of field):** At any moment exactly **one panel is "in focus"** — full opacity, crisp 0.5px hairline borders, type at full contrast. Every other panel sits at `filter: blur(2–6px)` scaled by its distance from the focal plane, dimmed to 30–50% — a literal lens bokeh. Moving focus is a *rack focus*: the old panel softens over 700ms as the new one resolves. - **THE INSTRUMENT PANEL (the in-focus close-up):** When a panel fills the frame it becomes a working diagram — a density curve drawn live in SVG, a swarm of 800 sample-dots settling into a histogram, a fan-chart of futures spreading like a searchlight beam through plankton. Sub-readouts cluster at the panel's lower-left in mono, like a film camera's burned-in timecode. - **THE TRENCH (the long tail):** One panel is deliberately *very* wide and scrolls horizontally inside itself — "THE LONG TAIL" — a probability distribution whose tail you can chase sideways forever, the curve flattening toward an asymptote it never touches, the water getting darker the farther out you go. - **THE SURFACE (closing wide shot):** The final viewport pulls all the way back out — the camera rises through the water, the panels shrink back to their constellation, and a single line of serif text settles at center like end-credits: a quiet sentence about how nothing here was ever certain. No hero banner. No nav bar in the conventional sense — instead a faint vertical **depth gauge** down the left edge (like a submarine's, marked in *probability* not meters: `0.0` at the surface, `1.0` in the trench) that doubles as a scrubber. ## Typography and Palette **Typefaces — all Google Fonts:** - **Cormorant Garamond** (display & headings) — a high-contrast, almost fragile classical serif. Used at large sizes (clamp(2.4rem, 6vw, 5.5rem)), light weight 300, generous letter-spacing for panel titles like *POSTERIOR*. It reads like the title card of an art-house film. Italic 300 for the narrator's interstitial sentences. - **Spectral** (body & long-form narration) — a screen-tuned serif with a calm, even color and a slightly literary cadence. Weight 300–400, line-height 1.75, max-width 62ch. This carries the documentary voice. - **JetBrains Mono** (instrument readouts, sample counts, timecodes, the depth gauge) — weight 400, slightly reduced size, faint letter-spacing. The contrast between the dreamlike serifs and the precise mono is the whole point: *poetry measured by a machine*. - Korean glyphs (확률, 사후확률, 사전확률, 기댓값 etc., shown as faint subtitles beneath the English): **Noto Serif KR**, weight 300. **Palette — "ocean-deep", lit from below:** - `#040A12` — **abyss** (page base; near-black with a blue undertone) - `#0A1A2C` — **trench water** (panel fills) - `#11314D` — **midwater** (raised surfaces, in-focus panel background) - `#1E5470` — **thermocline** (mid-tone strokes, inactive gauge) - `#3E8FA8` — **shoal teal** (active curves, primary data ink) - `#7FD4D1` — **bioluminescence** (the glow — focal highlights, the in-focus panel's edge light, hover states; used sparingly, always with a soft blur halo) - `#BFE9E4` — **foam light** (the lightest accents, sample-dot cores) - `#E8F1F2` — **moonwater** (highest-contrast text on dark) - `#8A6FB0` — **deep current violet** (the single non-blue accent — used *only* for the "ghost futures": the translucent swarm of outcomes-that-didn't-happen, at 18–28% opacity) - `#C9A24B` — **buoy brass** (a whisper of warm — reserved exclusively for the depth gauge's `1.0` mark and the final end-credit line, the only warm light in the whole deep) Gradients are radial and *bottom-up* (`radial-gradient(ellipse at 50% 120%, #11314D, #040A12)`) — light pooling from beneath the frame, never a top-down sky gradient. ## Imagery and Motifs - **Mixed-media probability collage:** combine three layers per in-focus panel — (1) a hand-inked density curve (SVG `path` with a subtle `stroke-dasharray` "drawing" animation, slightly wobbly as if drawn with a brush), (2) a generated swarm of sample particles (canvas, 600–1000 dots performing a tiny Brownian drift then settling into the histogram), and (3) a faint scanned-paper texture at 5% opacity — graph paper that has gotten damp. This is **mixed-media** literally: vector + generative + photographic grain stacked. - **Tech motifs, submerged:** circuit-like trace lines connecting panels (thin teal paths with slow-traveling light pulses, like data moving through a flooded server room); a reticle / camera-focus bracket `[ ⌐ ]` that frames whatever panel is in focus; small instrument iconography — a Gaussian bell rendered as a sonar ping, a die rendered as a six-faced wireframe slowly tumbling and *never landing*. - **The ghost-fan:** the signature image — a probability fan-chart that spreads from a single point like a searchlight beam cutting through dark water, each future-path a thread of `#8A6FB0` violet at low opacity, the bundle widening with the time horizon. It lives behind several panels as ambient atmosphere. - **Bioluminescent particulate:** a constant, *very* slow drift of faint dust motes / plankton across the whole page (CSS-animated, `prefers-reduced-motion` aware) — the "marine snow" of the deep. Gives the dark space depth without any literal photo of the ocean. - **Burned-in timecode:** every panel carries a mono "readout" cluster lower-left — `n = 10,000 · μ = 0.4187 · σ = 0.221 · REC ●` — styled like a cinema camera's HUD, the `REC ●` dot pulsing teal. - **No stock photography of casinos, dice, charts-on-screens, or businesspeople.** Everything is drawn, generated, or textural. ## Prompts for Implementation Build this as a **single-route, full-screen cinematic experience** — one HTML document, no separate pages, the entire narrative delivered through camera movement. - **The page is a camera, scroll is the dolly.** Implement the core motion as a deep `transform: scale() translate3d()` on a `.bridge` container, driven by scroll progress (use `IntersectionObserver` + `requestAnimationFrame`, or a lightweight scroll-tween — not heavy libraries). As the visitor scrolls, the camera **pushes in** toward the next panel until it fills the frame, holds while its instrument animates, then pushes on to the next. Think *2001: A Space Odyssey* slow zoom, not a snappy carousel. - **Rack focus is the layout's spine.** At all times, compute which panel is closest to the focal plane; give it `filter:none; opacity:1`, give every other panel `filter: blur()` and reduced opacity proportional to focal distance. Transition focus over ~700ms with `cubic-bezier(0.22, 1, 0.36, 1)`. This single mechanism *is* the navigation. - **Every number resolves, never blinks.** When a readout enters focus, animate it: digits should *settle* — a brief blur-in (`filter: blur(8px)→0`) plus a count-up from a nearby wrong value to the true one over ~900ms. Like a photograph developing. Pair it with the Korean subtitle fading in 200ms behind. - **Generative samplers, kept tiny.** One `` per in-focus panel: spawn 600–1000 particles, give each a few frames of Brownian jitter, then ease them into histogram bins. Re-seed on every focus-enter so no two views are identical. Cap to 60fps; degrade particle count on small screens. - **The ghost futures.** Behind the foreground value of any panel, render — at 18–28% opacity in `#8A6FB0` — a small cloud of alternate outcomes (the posterior's other plausible draws), drifting slightly. The emotional thesis of the site lives in this layer: *what happened is haunted by what almost did.* - **The depth gauge / scrubber.** A fixed vertical rail on the left, marked `0.0`…`1.0` (probability, not pixels). It fills with `#3E8FA8` as you descend; the `1.0` mark glows `#C9A24B` brass. Dragging it scrubs the camera. It is the only persistent chrome. - **Atmosphere always running:** marine-snow particle drift, the slow 6s panel luminance pulse, the never-landing wireframe die, traveling light along the circuit traces. All respect `prefers-reduced-motion` (freeze to a single beautiful still frame). - **Type pairing discipline:** Cormorant Garamond 300 only for big titles and italic narration; Spectral for any paragraph; JetBrains Mono *only* inside readout clusters and the gauge. Never mix them within a line. - **Sound is implied, not played:** write the narration copy as if scored — short, hushed, end-credit-cadence sentences. The closing line at the surface should land like a film's last title card. - **AVOID:** any "Get Started" / "Sign Up" CTA, pricing tables, feature comparison grids, three-up stat blocks, testimonial carousels, gambling/odds-betting framing, bright top-down sky gradients, generic SaaS card grids. This is a contemplative instrument, not a product page. ## Uniqueness Notes Differentiators from every other site in the batch: 1. **Scroll is a camera dolly, not a page scroll.** The layout never moves panels up the screen — it physically pushes the *viewport* into a deep instrument console (`scale + translate3d`), so navigating the dashboard is a sequence of cinematic push-ins and rack focuses. No other site in the batch treats scroll as a film camera on a dolly track. 2. **"Ghost futures" layer encodes the subject matter.** Every displayed probability is shadowed by a translucent violet swarm of the outcomes that *didn't* happen — the only place violet appears in an otherwise all-blue deep-ocean palette. The interaction grammar (resolve-don't-blink, develop-like-a-photograph, haunt-with-alternatives) *is* a statement about uncertainty, not just chrome. 3. **A dashboard that refuses to be a dashboard.** It borrows the six-panel instrument-console layout (DISTRIBUTION / PRIOR / POSTERIOR / LIKELIHOOD / LONG TAIL / MONTE CARLO BASIN) and a submarine depth-gauge scrubber, but renders it as a hushed deep-sea observatory lit from below — cinematic and dreamy-ethereal, with classical serifs (Cormorant Garamond + Spectral) over machine-mono readouts. Dashboard skeleton, planetarium soul. **Chosen seed / style:** `aesthetic: cinematic, layout: dashboard, typography: serif-classic, palette: ocean-deep, patterns: zoom-focus, imagery: mixed-media, motifs: tech, tone: dreamy-ethereal` **Avoided overused patterns (from frequency analysis):** skipped hand-drawn (96%) and glassmorphism (67%) aesthetics, photography imagery (98%), card-grid/centered/full-bleed default layouts (85–93%), warm/gradient default palettes (98%), and the parallax/cursor-follow/spring/magnetic/stagger animation quintet (80–95%). Instead leaned on the genuinely rare: cinematic aesthetic (8%), serif-classic typography (2%), ocean-deep palette (4%), zoom-focus pattern (3%), mixed-media imagery (3%), and dreamy-ethereal tone (3%) — using the more common "dashboard" layout (32%) only as an inverted skeleton, never as a literal card dashboard.