# Design Language for yome.quest ## Aesthetics and Tone **yome.quest** is a **seapunk reverie** — a drowned arcade glimpsed through aquarium glass, equal parts 1996 Geocities marine screensaver and bioluminescent abyssal trench. The name reads as *yo-me* — "night eyes," the dilated pupils of a creature that lives where sunlight gives up. The whole site is built as if the visitor descended below the photic zone and found, blinking on the seabed, a small abandoned amusement park: a carousel of nautilus shells, a ferris wheel of jellyfish, a ticket booth grown over with coral. The tone is **dreamy-ethereal** with an undertow of melancholy — gentle, slow-moving, slightly haunted, never alarming. Inspiration sources: deep-sea ROV footage (the *Nautilus* live feed, the ghostly siphonophores), early-90s seapunk Tumblr (dolphins, Windows-95 cyan, chrome trident emoji), Japanese aquarium gift-shop kitsch, and the color science of bioluminescence (cold cyans, electric teals, the single warm pink of a jellyfish bell). It must feel **wet** — surfaces wobble like they're behind a meniscus, light caustics drift across everything, particles of marine snow fall slowly upward through the dark. This is emphatically NOT a corporate ocean-spa site: no calm beige, no zen pebbles, no "wellness." It is a vaporwave shipwreck. ## Layout Motifs and Structure **Organic-flow descent through pressure zones.** There is no card grid, no bento box, no centered content well. The page is one continuous vertical *dive* down a water column, divided into five **depth strata** that the reader sinks through: 1. **Surface (0m)** — bright, sun-dappled cyan; the title and intro float here like flotsam. 2. **Twilight (200m)** — color desaturates toward teal-grey; first content begins drifting in. 3. **Midnight (1000m)** — near-black; bioluminescent elements glow; the core content lives here. 4. **Abyssal plain (4000m)** — pitch dark with a faint floor; the "drowned arcade" tableau. 5. **Trench (the bottom)** — the colophon, sealed in a pressure-hull frame. Composition rules: - **No straight edges between strata.** Sections bleed into each other via tall SVG wave dividers and gradient fades — the boundary between "surface" and "twilight" is a 30vh zone where two background gradients cross-dissolve as you scroll. - **Content elements drift, they do not sit in a grid.** Text blocks, illustration panels, and quote-bubbles are positioned with deliberate organic asymmetry: a paragraph hugs the left at 8% margin, the next floats centered-right at 40%, an illustration tilts 4° and overlaps both. Positions follow a hand-tuned sine-ish rhythm down the page, never aligned to a column lattice. - **Floating-elements layer:** behind all content, three parallax layers of drifting marine debris — slow kelp fronds at the back, jellyfish bells mid, marine-snow particles up front — each moving at a different scroll rate so the water has depth. - **The reading rail** is a thin glowing vertical line at the far left, like a depth gauge, with a tiny submersible-icon marker that descends as you scroll, and depth numbers (0m… 200m… 1000m…) that tick past. This is the only navigation. - Max effective text measure ~62ch, but the *container* is full-bleed — the water fills the viewport ear to ear, content just inhabits it. ## Typography and Palette **Type stack (all confirmed available on Google Fonts):** - **Monoton** — the display face, used ONLY for the masthead "yome.quest" and the five depth-stratum titles. Monoton's hollow neon-tube letterforms read exactly like a half-burnt-out seaside arcade sign; set huge (clamp 3rem→7rem), letter-spacing +0.04em, with a soft cyan glow filter. Restricted use — never body, never small. - **Major Mono Display** — the monospace voice, used for the depth-gauge numbers, captions, marginalia, link labels, and the colophon. Its airy uppercase-mono character feels like sonar telemetry. Set at 0.78rem, letter-spacing +0.12em, uppercase. - **Fraunces** (variable, opsz + ital + wght) — the body voice, used for all running prose, set at 1.0625rem / line-height 1.8, weight 380, optical-size leaned soft, with occasional 9pt-ish italic for the dreamier asides. Fraunces' wobbly old-style warmth keeps the body human against the chrome-cold display type. **Palette (minimum five, here eight):** - `#02141F` — **Trench Black** — the deepest background, near-black with a blue bias. - `#063A4E` — **Midnight Petrol** — mid-depth background gradient stop. - `#0FB8C9` — **Seafoam Neon** — the dominant accent; links, the depth rail, glows. The signature seapunk cyan. - `#3DF0D8` — **Bioluminescent Mint** — highlight glow, hover states, the submersible marker. - `#7FE4F2` — **Surface Light** — the bright top-of-page sky-water, dappled. - `#FF6FB5` — **Jelly Pink** — the single warm note; one jellyfish, one pull-quote underline, the colophon seal. Used sparingly, like the only warm-blooded thing down here. - `#C8B6E2` — **Lilac Drift** — secondary text, faded captions, the marine-snow particles. - `#F2F7F8` — **Pearl** — primary body text on dark. Gradients are **aurora-gradient** style: long vertical multi-stop washes (Trench Black → Midnight Petrol → Seafoam Neon at low opacity), plus radial caustic gradients that animate with `background-position` to fake light rippling on the seafloor. ## Imagery and Motifs **Tropical-fish and abyssal-fauna line-illustration, plus generative caustics — no photography.** Everything visual is hand-drawn SVG with a 1.2px luminous stroke (Seafoam Neon), as if etched in light: - A **nautilus carousel** — a logarithmic-spiral shell whose chambers are tiny carousel horses; rotates very slowly. Hero anchor of the Surface stratum. - A **jellyfish ferris wheel** — eight moon-jelly bells arranged radially, gimbals trailing; the wheel turns once per ~40s; one bell is Jelly Pink and pulses. - A **siphonophore** — a long beaded chain of translucent zooids that drifts diagonally across the Midnight stratum, each bead faintly glowing on a staggered timer. - An **anglerfish ticket booth** — a coral-encrusted booth with the anglerfish's lure as the dangling marquee bulb; marks the entrance to the "drowned arcade." - **Marine snow** — hundreds of tiny pale particles drifting *upward* (the diver is sinking, so debris rises), generated in JS, parallaxed. - **Caustic light nets** — animated SVG turbulence/displacement filters cast wandering bright web-patterns over the upper strata, fading to nothing by Midnight. - **Chrome seapunk glyphs** used as section bullets: a stylized trident, a dolphin in profile, a wave curl, a single bubble — each with a faux-chrome bevel gradient (the one knowing wink at 1996 seapunk). - A **bathymetric contour pattern** — faint concentric depth-lines — as the texture on the Abyssal plain floor. ## Prompts for Implementation Build yome.quest as **one long full-bleed HTML document** — a single uninterrupted dive, no SPA, no router, no modal, no nav bar, no hamburger. The reader scrolls top-to-bottom and *sinks*; the only chrome is the left-edge depth gauge. Prioritize **atmosphere over information**, **slow drift over snappy interaction**, **one descent over branching paths**. - **Background system:** a fixed full-viewport element whose gradient is driven by scroll position via CSS custom properties (`--depth: 0→1`), interpolating Surface Light → Seafoam → Midnight Petrol → Trench Black. Layer animated radial caustics on top (`@keyframes` shifting `background-position` over 18–24s, `ease-in-out`, infinite). Below ~1000m, swap caustics for sparse bioluminescent point-glows that fade in and out on randomized delays. - **Parallax debris:** three `position: fixed` layers — kelp (back, scrolls at 0.2×), jellyfish bells (mid, 0.5×, each also drifting laterally on its own slow `translateX` keyframe), marine snow (front, 0.85×, JS-spawned, rising). Use `prefers-reduced-motion` to freeze drift but keep the layers. - **Stratum reveals:** as each depth stratum enters the viewport, its title (Monoton) fades up + the cyan glow blooms (`filter: drop-shadow` animating from 0 to full over 1.4s), and body blocks `fade-reveal` with a gentle upward float and 120ms `stagger`. Easing: a slow custom cubic-bezier ~`(0.16, 1, 0.3, 1)`. - **Ripple interaction:** clicking anywhere (and on link hover) emits a concentric `ripple` of expanding faint cyan rings from the point — the water reacting. Links also get an `underline-draw` in Bioluminescent Mint. - **The wobble:** wrap content sections in a subtle SVG `feDisplacementMap` / `feTurbulence` filter animated very slowly so edges shimmer like they're behind aquarium glass — keep it gentle (`scale` ~3–5), never nauseating; disable under reduced-motion. - **Depth gauge:** the left rail's submersible marker position = scroll progress; depth numbers are absolutely positioned along the rail and brighten as the marker passes. Clicking a depth number smooth-scrolls to that stratum. - **The drowned arcade tableau** (Abyssal stratum): a single full-viewport scene — nautilus carousel, jelly ferris wheel, anglerfish booth — arranged organically in the dark, each lit only by its own glow, slowly turning. Surrounding prose is set as overheard fragments, italic Fraunces, scattered in the negative space between rides. - **Colophon (Trench):** sealed in a "pressure hull" frame — a rounded-rect with rivets (SVG), Major Mono Display text, the Jelly Pink seal. If any contact/credit is needed it lives here as one quiet line, never a button-rectangle. **AVOID, strictly:** CTA-heavy layouts, "Get Started" buttons, pricing tiers, feature comparison tables, statistics counters / stat-grids, testimonial walls, "trusted by" logo bars, FAQ accordions, email-capture popups, card-grid sections, dashboard chrome, hero-with-two-buttons. There is nothing to convert here — only somewhere to sink. ## Uniqueness Notes Differentiators from the sibling corpus: 1. **Seapunk aesthetic at ~2% representation** — the corpus is saturated with hand-drawn (94%) and glassmorphism (86%); yome.quest reaches for one of the rarest tags and builds the *whole structure* around it (depth strata, drowned arcade, chrome glyphs), not as a skin over a modern grid. No sibling uses the "1996 marine-screensaver-meets-abyssal-trench" frame. 2. **The page IS a water column.** The defining gimmick — scroll position literally interpolating a pressure-zone gradient from sunlit cyan to trench black, with caustics that fade out and bioluminescence that fades in as you "sink" — is a single coherent vertical metaphor not seen elsewhere; sibling full-bleed sites use scroll-triggered reveals, not a continuous depth-driven environment. 3. **Monoton as a burnt-arcade-sign display face** paired against Major Mono Display sonar-telemetry captions and Fraunces' wobbly warmth — a tri-voice mix (neon-tube / mono / soft-serif) tuned to "abandoned seaside arcade underwater," distinct from the corpus's default mono-everything (93%) or Playfair/Cormorant editorial pairings. 4. **Marine snow that falls upward** and an aquarium-glass `feDisplacementMap` wobble on content edges — atmospheric tricks tied to the conceit (the diver sinks, so debris rises) rather than generic parallax. 5. **Anti-conversion by construction** — no CTA/pricing/stat-grid/testimonial anywhere; the only "interactive" affordance is a depth gauge and water that ripples when touched. Chosen seed/style: `aesthetic: seapunk, layout: organic-flow, typography: retro-display, palette: aurora-gradient, patterns: ripple, imagery: water-bubbles, motifs: tropical-fish, tone: dreamy-ethereal` (derived seed; no planned seed was supplied in the assignment — selected for the rare `seapunk` aesthetic). Avoided patterns from frequency analysis: rejected **hand-drawn** (94%) and **glassmorphism** (86%) as primary aesthetics; avoided **card-grid** (93%), **centered** (79%), and **dashboard** (36%) layouts; avoided **photography** (97%) imagery entirely; avoided **cursor-follow** (89%) and **magnetic** (76%) in favor of the underused **ripple** (13%); avoided **warm** (98%) palette dominance, choosing a cold cyan-trench scheme with a single warm Jelly Pink accent; avoided **mono**-everything typography (93%) by giving mono a supporting role under Monoton display.