# Design Language for mosoon.xyz ## Aesthetics and Tone mosoon.xyz is **The Bureau of Reversed Rain** — a surreal dreamscape rendered as the public exhibition wing of a fictional meteorological agency that studies weather running backwards. The premise: somewhere there is a season called *mosoon* (not monsoon — the registry copyist dropped a letter, and the agency never corrected it because the typo became the brand), during which precipitation falls *upward*, puddles evaporate *into* clouds, and the sky drinks the ground dry. The site is the agency's "viewing gallery": a slow, vertical, dreamlike scroll through six "observation rooms," each documenting a different impossible weather phenomenon — *the ascending drizzle*, *the standing storm*, *the inverted barometer*, *the cloud that grew roots*, *the drought that rained*, *the calendar with no Tuesdays*. The tone is **dreamy-ethereal crossed with deadpan scientific authority** — every absurd claim is presented in the calm, lightly archival voice of a field meteorologist filing a report they fully believe. Think René Magritte writing for a national weather service. Nothing winks. The surrealism is load-bearing, not decorative: rain genuinely drifts upward across the screen, water-level meters genuinely read negative, the "current conditions" widget genuinely says *"yesterday, partially."* The mood is hushed, blue-lit, and slightly underwater — the feeling of standing in a glass observatory at 4am while the weather quietly does the wrong thing outside. This is explicitly **not** a SaaS landing page, not a portfolio, not a product site. There are no calls to action, no pricing tiers, no testimonial carousels, no stat-grids of "10,000 happy customers." It is an *exhibit you wander through*. ## Layout Motifs and Structure The page is one **continuous vertical descent** — but the conceit is that scrolling *down* moves you *up* through the agency's tower of observation rooms, against the rain. A thin **left-margin "altitude rail"** (72px wide, fixed) runs the full viewport height: a vertical hairline with tick marks and floating altitude labels (`+0m PUDDLE LEVEL`, `+340m THE STANDING STORM`, `+1,100m ROOT-CLOUD CANOPY`, `+∞ THE CALENDAR ROOM`) that update as you scroll, the numbers counting *upward* as you move down the document. It is not navigation chrome — it is the *spine of the building*. Each "observation room" is a **full-bleed 100vh stage** with a deliberately **off-axis, broken-grid composition**: content is never centered. A room might place its title block at 12% from left / 18% from top, its descriptive "field note" pinned to the bottom-right in a narrow 280px column, and its central "phenomenon" — a piece of generative SVG weather — floating slightly above optical center so the whole room feels like it's drifting. Rooms alternate which side they lean toward, producing a gentle zig-zag rhythm down the page, like rain blown by a crosswind. Between rooms: **"transit corridors"** — short 40vh interstitial bands of near-solid deep blue where a single line of text drifts upward through the band as you scroll past it (`you are now passing through cloud`, `mind the inversion layer`, `the next room is louder than it looks`). These corridors are the connective tissue and the breathing room. Negative space is generous and intentional — *ma*, the meaningful void. No room is crowded. The page should feel like it has more air in it than content, because the content is *weather* and weather needs sky. ## Typography and Palette **Type stack — Google Fonts only:** - **Display / room titles:** `Fraunces` (variable, optical-size and weight axes). Used at 64–112px for room names like *"The Cloud That Grew Roots"* with `font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 30`, a low-contrast soft setting that makes the serifs feel slightly melted, slightly wet. Set in sentence case, never all-caps, with `letter-spacing: -0.02em` and generous `line-height: 1.05`. Fraunces' wobbly, almost-Art-Nouveau warmth, pulled to a light weight, reads as *dreamlike* without becoming whimsical-cute. - **Body / field notes:** `Spectral` (serif) at 17–20px, `line-height: 1.7`, color slightly lower-contrast than pure white — the unhurried voice of a written report. Italic (`Spectral Italic`) is reserved for the meteorologist's marginal asides and for any word the agency considers "technically incorrect but adopted." - **Instrument labels / altitude rail / data readouts:** `IBM Plex Mono` at 11–13px, `letter-spacing: 0.14em`, uppercase — the only monospaced element, used *only* for things that pretend to be machine output (altitude ticks, the conditions widget, timestamps like `OBSERVED TUE??:??`). Sparingly. It is the lab equipment, not the wallpaper. **Palette — cool, deep, faintly bioluminescent (no warm tones, no gradient-mesh clichés):** - `#0A0E1A` — **Pre-Dawn Ink** — the dominant background; the sky before the wrong weather starts. - `#121A2E` — **Inversion Layer** — slightly lifted blue for transit corridors and panel fills. - `#1E3A5F` — **Standing Storm** — mid-blue for room-stage gradients and SVG cloud bodies. - `#5BC8D8` — **Reversed Rain** — the signature cyan; every upward raindrop, every active altitude tick, every link underline. - `#A8E6CF` — **Root-Cloud Glow** — a pale mint used only for the "cloud that grew roots" room and for hover states; the color of chlorophyll that shouldn't be up there. - `#E8EEF7` — **Cold Glass** — near-white for body text and titles; not pure #FFF, so it reads as observatory glass, not paper. - `#F2B441` — **The Drought's Lamp** — a single warm amber, used *exactly once*, in the "drought that rained" room, as the lone warm light in a cold building. Its scarcity is the point. ## Imagery and Motifs **No photography. Zero.** The agency does not own a camera that points the right way. All imagery is **generative SVG + CSS**, hand-built: - **Reversed rain field** — a full-viewport layer of thin 1–2px cyan strokes that animate from the bottom of the screen *upward*, at varying speeds and slight diagonal drift, fading near the top. Density varies per room (a fine mist in *the ascending drizzle*, hard slanting sheets in *the standing storm*). Built with `` elements or a single ``, but the motion is always *up*. - **Inverted instruments** — SVG line-drawings of meteorological tools rendered "wrong": a barometer whose needle climbs past the dial edge, a rain gauge graduated in negative numbers, a windsock that points straight down, a thermometer with the bulb at the top. Stroke-only, `#5BC8D8` on ink, 1.5px weight, drawn with `stroke-dasharray` path-draw animation as each enters view. - **Root-clouds** — soft blobby cumulus shapes (organic Bézier blobs, `filter: blur(0.5px)` for a damp edge) with thin tendril roots dangling *below* them, the roots gently swaying. Mint glow (`#A8E6CF`) on a `radial-gradient` halo. - **The puddle-that-evaporates-into-cloud** — a hero motif at the very bottom (`+0m`, where the descent begins): an SVG puddle on the "ground" whose ripples animate *inward and upward*, pixels of it lifting off as tiny dots that rise and coalesce into a small cloud at the top of that first stage. A loop. The thesis of the whole site in one animation. - **Constellation tick-marks** — the altitude rail's ticks, when you pause scrolling, very slowly connect themselves with faint hairlines into a small constellation, then dissolve. A reward for stillness. - **Grain** — a subtle, very low-opacity (3–4%) animated noise overlay across everything, so the deep blues never band and the screen feels like film of a thing that didn't happen. Decorative recurring marks: a small cyan **upward chevron** (`⌃`) used as the section-bullet and the "scroll" hint; a hand-set **(sic)** in Spectral Italic appended to the word *mosoon* every single time it appears in body text — the agency's tic, never dropped. ## Prompts for Implementation Build mosoon.xyz as **one long single-page HTML document** — no SPA framework, no client-side router, no route-based "pages." Plain HTML + CSS + a modest amount of vanilla JS for scroll-linked motion. The reader's experience: stepping into a quiet glass tower at night and slowly climbing it while it rains the wrong way. **Structure & scroll:** - Six `
` "observation rooms," each `min-height: 100vh`, separated by `
` bands at `40vh`. The whole document scrolls normally; do **not** hijack scroll or do full-page snap — the descent should feel like *drifting*, not *clicking through slides*. - Fixed `position: fixed` **altitude rail** on the left at `width: 72px`. As the user scrolls, update a single readout number (`+0m → +∞`) and highlight the nearest tick in `#5BC8D8`. Use `IntersectionObserver` per room to swap the active altitude label. The number should *count up* as the page scrolls *down* — this inversion is non-negotiable and is the soul of the layout. - Each room enters with a soft **fade + 24px upward drift** of its title and field-note (staggered, ~120ms apart), triggered by `IntersectionObserver`, `prefers-reduced-motion` respected. Nothing slides in from the side; everything in this building rises. **The reversed rain (the signature):** - A `position: fixed; inset: 0; pointer-events: none; z-index: 2` `` (or layered SVG) drawing 80–200 thin strokes that travel from `y = 100vh` to `y = -10vh`, looping, each with a randomized x, speed (slow in mist rooms, fast in storm rooms), length, and a slight constant diagonal drift. Opacity fades as strokes near the top. Drive it with `requestAnimationFrame`. On `prefers-reduced-motion`, freeze it to a static field of faint upward-pointing dashes. - Per-room rain density is set via a data attribute the JS reads as the active section changes. **Generative weather objects:** - Build the inverted instruments, root-clouds, the standing-storm body, and the puddle→cloud loop as inline `` with CSS/SMIL or JS-driven `stroke-dashoffset` animations. Path-draw each instrument on entry (`stroke-dasharray` reveal, ~1.4s ease-out). The root-cloud tendrils sway via a slow `transform: translateY` + `rotate` keyframe loop, ~6s, eased, offset per tendril. - The bottom "puddle that evaporates upward" is the visual hook: ripples animate *inward*, particles detach and *rise*, reassembling into a small cloud — a continuous ~10s loop. This must read clearly even paused (reduced-motion = show it mid-lift, frozen, with a one-line caption: *"fig. 1 — observed in reverse, mosoon (sic)."*). **Voice & copy in the markup:** - Every room has: a `Fraunces` title, a 2–4 sentence `Spectral` field note in the calm voice of a meteorologist who has accepted the impossible, and one `IBM Plex Mono` "instrument reading" (e.g. `RELATIVE DRYNESS 118%`, `OBSERVED TUE??:??`, `PRESSURE ↑ OFF-DIAL`). - A small fixed "current conditions" widget, bottom-right, `IBM Plex Mono`, that cycles every ~7s through nonsense-but-deadpan states: `now: yesterday, partially` / `now: the sound of rain, no rain` / `now: clearing, upward` / `now: Tuesday cancelled`. - The word *mosoon* in any body paragraph is **always** followed by ` (sic)` in `Spectral Italic`. No exceptions. It is the agency's signature. **Constraints:** No CTA buttons, no "Get Started," no pricing, no signup, no testimonials, no logo-cloud, no animated stat counters of customers/uptime. No light/airy white sections — the building is dark, blue, and cool throughout, broken only by the single amber lamp in the drought room. Keep it to a handful of fonts and the seven palette colors. The site should feel like a *place that documents something that isn't true* — patient, eerie, and quietly beautiful. ## Uniqueness Notes Distinct departures from the rest of the registry and from every standard template: 1. **Inverted scroll semantics.** Scrolling *down* the document moves you *up* a tower, with an altitude readout that counts *upward as you descend*. No other design in the registry inverts the relationship between scroll direction and spatial metaphor — this is the structural backbone here, not an easter egg. 2. **Rain that falls up — as the literal core animation.** `immersive-scroll` and `parallax` are common (10% / 92%), but a full-viewport, per-room-density-modulated *upward* precipitation field built on canvas, treated as the site's primary visual identity, exists nowhere else. Weather here always rises. 3. **Surreal aesthetic with a cold-blue, no-warm palette.** `surreal` sits at only 3% of the registry and the broader registry is 98% *warm* / 96% *gradient*. mosoon.xyz pairs **surreal** with a deep pre-dawn blue / bioluminescent-cyan / mint scheme and **exactly one** amber pixel, used once — the inverse of the registry's warm-gradient default. 4. **Zero photography, all generative SVG.** Against a registry that is 98% *photography*, this site owns no working camera in-fiction and renders every image — instruments, clouds, rain, the evaporating puddle — as hand-built SVG/canvas line-work. 5. **The `(sic)` tic.** A typographic ritual — the brand name *mosoon* is "wrong" and the site never lets you forget it, appending `(sic)` in italic every time. A self-aware naming conceit no other site uses. 6. **Deadpan-meteorologist voice instead of marketing copy.** No CTAs, no conversion funnel, no stat-grid — the entire text layer is a calm field report believing in impossible weather, which is its own anti-pattern relative to the CTA-heavy, dashboard-y norms flagged in the frequency analysis. [Document chosen seed/style: surreal dreamscape promo — aesthetic: surreal, layout: broken-grid + immersive-scroll, typography: serif-revival (Fraunces/Spectral) with tech-mono accents, palette: midnight-blue + ethereal cyan/mint, patterns: scroll-triggered + path-draw-svg + fade-reveal, imagery: generative-art + grain-overlay, motifs: wave-forms / floating-elements / aurora-lights inverted, tone: dreamy-ethereal + deadpan-authoritative] Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (77%), photography (98%), warm palette (98%), gradient clichés / gradient-mesh, mono as primary typeface (94%), cursor-follow (89%), magnetic (80%), tilt-3d, card-grid, centered layouts, hero-dominant CTA stacks.