# Design Language for mosoon.org ## Aesthetics and Tone mosoon.org is **a monsoon caught mid-dream** — the word reads three ways at once: *monsoon* (the warm wall of rain that arrives on schedule and erases the horizon), *moon* (the pale disc the storm keeps hiding), and the Korean **모순 / mosun** (paradox, contradiction, the spear that pierces every shield). The site is built on that triple meaning: it is a **surreal dreamscape** of warm rain, where impossible things hang in the downpour and feel completely ordinary. Not a weather site, not a poetry site — a place where a single idea (a season that arrives like a contradiction: violent and tender, expected and overwhelming) is staged as a slow, full-screen reverie. The mood is **dreamy-ethereal pressed into a humid, amber dusk**. Think René Magritte's *Golconda* if the bowler-hatted men were warm raindrops; think Hayao Miyazaki's rain sequences slowed to one-tenth speed; think the inside of a paper lantern during a summer storm. The aesthetic is **surrealism rendered warm, never cold** — no chrome, no neon, no glitch. Everything is lit by a low sun fighting through cloud: honeyed greys, rain-pewter, lantern-amber, the bruised violet of a sky about to break. Surface texture is *grain-overlay* throughout — a fine, restless film noise so the whole page feels like 16mm footage of weather, slightly degraded, slightly remembered. The tone refuses urgency. There is no "get started," no "join the waitlist." mosoon.org wants you to stand at a window and watch the rain do an impossible thing — a raindrop falling *upward*, a moon floating in a puddle that is deeper than the street, an umbrella that opens into a small private weather system. Whimsy without cuteness; melancholy without gloom; the warm-inviting feeling of being indoors while it pours. ## Layout Motifs and Structure The page is a **single, uninterrupted vertical scroll composed of seven "rooms in the rain"** — full-bleed scenes you fall through, each one a Magritte-style impossible tableau. No card grid, no bento box, no dashboard, no sidebar. The governing layout motif is **immersive-scroll layered-depth**: every scene is built from 5–7 stacked planes (far cloud, mid-rain, the surreal object, near rain, foreground glass) that parallax at different rates, so scrolling feels like walking *into* the storm rather than past it. - **The Falling-Through transition.** Scenes don't slide; they *dissolve down*. As you scroll, the current scene's near-rain accelerates, blurs, and the next scene's far-cloud rises through it — a vertical cross-fade timed to the scroll position. The seam is never a hard horizontal cut; it's a curtain of rain you pass behind. - **The Off-Center Disc.** Every scene contains a circle — the moon, a puddle's reflection, an open umbrella seen from above, a ripple ring. It is *never* centered. It sits on a slow elliptical drift, always 8–22% off the optical center, the way the moon is never where you expect it after the clouds move. This is the page's one fixed compositional law. - **Text as caption, not headline.** Words appear the way subtitles appear in a film: low in the frame, small, in a thin column no wider than 38ch, fading in line by line as the scene settles. Never a giant hero headline. The image carries the scene; the text is the quiet voice describing it. - **Asymmetric, weighted left or right.** Each scene's surreal object anchors one third of the frame; the opposite two-thirds is rain and sky and breathing room. Successive scenes alternate the anchor side, so the eye sways left-right as it descends — a pendulum, a wiper blade. - **No navigation chrome on load.** A single thin progress line (a "rain gauge") runs up the left edge, filling as you descend. A minimal menu — three words: *the season · the paradox · the window* — only fades in if you scroll up, then fades out again. The frame stays mostly empty so the weather has room. The footer is the eighth scene, not a block: the rain finally thins, the off-center disc resolves into a clear moon, and the three menu words plus a single line of colophon text settle onto wet pavement that mirrors them upside down. ## Typography and Palette **Fonts (Google Fonts only — two voices: one that drifts, one that whispers):** - **Display & scene titles — *Fraunces* (variable; opsz 144, wght 300–500, SOFT 100, slnt -6°).** Used for the seven scene names and the wordmark "mosoon." Set large but *light* — never bold — so the squashy soft-axis serifs read like letters seen through running water. A slight slant (slnt -6°) leans every title into the rain. Letter-spacing slightly loose (0.01em). At opsz 144 the curves swell; that swelling is the point — the type looks rain-bloated, soft at the edges. - **Body, captions, colophon — *Spectral* (wght 300 / 400, with the italic for emphasis).** A delicate, slightly literary serif with low contrast and a calm rhythm — it reads like the narration in a quiet film. Set at 18–20px, line-height 1.85, max 38ch. Never a sans here; the serif keeps the whole page in the register of a remembered story rather than an interface. - **Micro-labels — *IBM Plex Mono* (wght 300), used sparingly** for the rain-gauge readout (e.g. "12.4 mm"), timestamps, and the season's "forecast" fragments. Monospace appears at exactly two sizes (11px and 13px), letter-spacing 0.08em, lowercase, in rain-pewter — tiny, instrumental, a counterweight to the soft serifs. (Mono is at 94% in the corpus; here it is deliberately demoted to a hairline accent, never structural.) **Palette — warm, muted, humid; a low sun behind cloud (8 colors):** - `#1C1A22` — **storm-ink** — the base background, a near-black with a violet undertone, never pure black. The sky just before it breaks. - `#2E2A33` — **rain-shadow** — slightly lifted panel/scene-floor tone for layered depth. - `#6E7378` — **rain-pewter** — the color of falling water against cloud; used for mono labels, fine rules, the rain-gauge line. - `#B7AFA0` — **wet-stone** — pavement, mid-tone surfaces, secondary text. - `#E8C770` — **lantern-amber** — the warm light fighting through the storm; the moon's glow, the active scene title's gradient highlight, the one warm note that keeps the page from going cold. - `#D98C5F` — **terracotta-rain** — warm clay of a clay-tiled roof seen through downpour; used for the surreal-object accents and the under-curve of the off-center disc. - `#8A6FA0` — **bruised-dusk** — the violet of a sky about to open; gradient companion to storm-ink in the far planes. - `#F4ECDD` — **paper-light** — the warm near-white of lantern paper / film leader; used for primary scene titles and the rare moment of full brightness in the final scene. Gradients are everywhere but always **vertical and atmospheric** — storm-ink → bruised-dusk → wet-stone, top to bottom, like real sky — never the diagonal corner-to-corner gradient of a SaaS hero. The lantern-amber appears only as a soft radial bloom around the off-center disc, never as a flat fill. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** Every visual is SVG or canvas — hand-built rain, hand-built clouds, hand-built impossible objects — over an ever-present grain-overlay. The vocabulary is **Magritte-grammar staged in weather**: - **The seven impossible tableaux** (one per scene), each an SVG/canvas composition: 1. **The Upward Drop** — a single fat raindrop falling *up* into the cloud while all others fall down; the wordmark "mosoon" hangs beside it. 2. **The Deeper Puddle** — a puddle on grey pavement that reflects a full moon and a sky that isn't above; the puddle's edge is the only sharp line in a soft frame. 3. **The Umbrella-Weather** — an open umbrella seen from above; inside its dome, its own private rain falls; outside, the street is dry. 4. **The Folded Horizon** — the horizon line creased like wet paper, the rain on the far side falling toward the crease, the moon balanced on the fold. 5. **The Lantern Storm** — a paper lantern adrift in mid-air, rain passing *through* it without wetting it, amber light leaking from the seams. 6. **The Spear and the Shield (모순)** — the only near-literal scene: a falling raindrop drawn as a slender spear, a still puddle drawn as a round shield; they meet and the ripple is neither pierced nor unbroken — a paradox held still. 7. **The Window** — the storm thins; we are inside now, looking out through a rain-streaked pane (animated SVG droplets racing down glass) at a clear moon, finally where you'd expect it. - **Rain as the connective tissue** — a continuous canvas rain layer runs *behind* everything, varying density per scene (heaviest in scenes 1 and 3, thinning to a drizzle by scene 7). Drops are short warm-grey strokes with motion blur; on "impact" with any surface element they spawn a quick expanding ring. - **The off-center disc** — present in every scene, drifting on its slow ellipse, sometimes moon, sometimes puddle, sometimes umbrella-from-above. A faint lantern-amber radial bloom always trails it. - **Cloud as torn paper** — clouds are layered SVG shapes with deckled, slightly-translucent edges and visible grain, drifting horizontally at three depths. They part briefly, on scroll, to reveal the disc, then close. - **Hairline weather instruments** — thin rain-pewter SVG line marks at scene edges: a rain-gauge column, a tiny barometer arc, mm/hr readouts in Plex Mono. Decorative, not functional — the storm's quiet telemetry. ## Prompts for Implementation Build mosoon.org as **one HTML file, one CSS file, one JS module** — a single-route, vertically scrolled dream of a warm-rain season. There is no CTA, no pricing block, no stat grid, no testimonial row, no feature cards, no email signup, no contact form. There is only the descent through seven rooms in the rain. Treat the visitor as someone standing at a window for ninety seconds while the storm does impossible things. **Storytelling arc (seven scenes, vertical immersive-scroll, falling-through dissolves):** 1. **The Upward Drop.** Page opens to full storm-ink-to-bruised-dusk sky, grain alive, canvas rain falling. One fat drop rises against the flow. "mosoon." fades in beside it in light Fraunces; one line of Spectral below: *a season that arrives the way a contradiction does — all at once, and on time.* The rain-gauge line at left begins empty. 2. **The Deeper Puddle.** Scroll dissolves down through a rain curtain into a grey-pavement scene; a puddle off-center-right holds a moon and a wrong sky. Caption (Spectral, low-left): the idea that a reflection can be deeper than the thing reflecting it. Mono micro-label: `puddle depth — ∞`. 3. **The Umbrella-Weather.** Anchor swings left. An umbrella from above with its own interior rain. Caption: about carrying your own weather. Rain density peaks; impact-rings everywhere. 4. **The Folded Horizon.** The horizon creases like wet paper; moon balanced on the fold. Caption: about a line that should be straight and isn't. Bruised-dusk deepens. 5. **The Lantern Storm.** A paper lantern adrift; rain passes through it; amber leaks from the seams — the page's warmest moment so far. Caption: about light that refuses to be put out by water. 6. **The Spear and the Shield (모순).** The most still scene. A spear-shaped drop, a shield-shaped puddle, a held ripple. Caption: 모순 — the spear that pierces everything, the shield nothing pierces, falling toward each other forever. Rain slows almost to stop here; grain calms. 7. **The Window.** We are indoors. Animated SVG droplets race down a glass pane; beyond it the storm has thinned and a clear moon sits, finally, where you'd expect. Caption + colophon (Spectral + Plex Mono) settle onto wet pavement that mirrors them upside down. The three menu words — *the season · the paradox · the window* — rest at the bottom. The rain-gauge line at left is full. **Motion & interaction (favor these patterns; they sit low in the corpus or are used here in an unusual register):** - **Scroll-triggered, blur-focus dissolves** between scenes — the defining motion. Outgoing near-rain accelerates + blurs; incoming far-cloud rises through it. Drive everything off scroll progress, not autoplay. - **Slow elliptical drift** of the off-center disc — a continuous, never-resting orbit; the only motion that ignores scroll. - **Path-draw SVG** for the rain-gauge line, the barometer arc, and the horizon crease — they ink themselves as their scene enters. - **Ripple** spawned on every rain-drop "impact" with a surface element — short, warm-grey, expanding-and-fading rings; the page's only "click-like" feedback even though nothing is clickable. - **Fade-reveal** for caption text — line by line, in Spectral, after the scene's planes settle; sllight upward 8px ease. - **Cursor-follow, but as wind, not magnetism** — the canvas rain bends a few degrees toward the cursor's last horizontal movement, as if you were the breeze. Subtle. No magnetic buttons, no tilt-3D cards, no spring-snapping UI. - **Grain-overlay** animated at ~12fps (stepped, not smooth) over the entire viewport, low opacity (~6%), so the whole page feels like film of weather. - Respect reduced-motion: rain slows to a gentle drift, dissolves become soft cross-fades, the disc holds still — the dream becomes a held photograph rather than losing its character. **Build notes:** canvas for the rain layer (one shared instance, density param per scene); SVG for clouds, the seven impossible objects, and instruments; CSS for layout, gradients, grain, and parallax (`translate3d` on plane wrappers driven by an IntersectionObserver + scroll listener). Keep the DOM quiet — seven `
` scenes, one ``, one fixed gauge, one hidden menu. Everything warm; nothing cold; the moon always slightly out of place. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Surreal-warm, not surreal-cold.** *Surreal* sits at only 3% in the aesthetic corpus, and *dreamy-ethereal* at 4% — and what little exists leans cool/blue/ethereal-blue. mosoon.org renders surrealism in a *humid amber dusk* — storm-ink, lantern-amber, terracotta-rain, bruised-dusk — a warm Magritte rather than a cool one. As far as the corpus shows, that chromatic recontextualization of surrealism is unique here. 2. **A trilingual pun as the entire architecture.** The site is structured around *monsoon / moon / 모순(paradox)* simultaneously — seven scenes that each hold all three meanings. No other site builds its layout law (the off-center disc) and its narrative spine (a season that behaves like a contradiction) out of one word read three ways. 3. **Mono demoted to a hairline.** Mono typography is at 94% in the corpus — nearly universal, usually structural. Here *IBM Plex Mono* appears only as 11–13px "weather telemetry" labels; the page's actual voice is two soft serifs (*Fraunces* light, *Spectral*). Deliberately inverting the corpus's default. 4. **No card-grid, no bento, no hero-headline, no CTA** — against card-grid (89%), full-bleed-as-hero, and the CTA/stat-grid conventions the brief warns against. The page is seven full-bleed *tableaux* you fall through, captioned like film, never a landing page. 5. **Rain as the only "interaction."** Cursor-follow (89% in the corpus) and magnetic (80%) are reinterpreted: the cursor is *wind* that bends the rain, and the only click-like feedback is a raindrop's ripple on a surface — even though nothing on the page is clickable. The interactivity is atmospheric, not transactional. Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal · layout: immersive-scroll · typography: serif-revival (Fraunces + Spectral) · palette: warm/muted (storm-ink + lantern-amber + terracotta-rain) · patterns: blur-focus / scroll-triggered / ripple · imagery: generative-art (hand-built rain & SVG tableaux) · motifs: candle-atmospheric (lantern) + flowing-curves + star-celestial (the moon) · tone: dreamy-ethereal / warm-inviting.* Avoided patterns from the frequency analysis: hand-drawn (96%), glassmorphism (77%), card-grid (89%), photography (98%), cursor-follow-as-magnetism (89%), magnetic (80%), tilt-3d (26%), mono-as-structural-typography (94%), and all CTA/pricing/stat-grid layouts.