# Design Language for haru.quest ## Aesthetics and Tone haru.quest is **a 1998 aquarium gift-shop screensaver that dreamed it was a hand-cut paper diorama, floating in the warm green light at the bottom of a tide pool.** The domain word *haru* (春 — spring) is read as the **first spring tide**: the lunar pull that drags warm water up over cold rock, stirs the kelp, and makes the whole littoral zone shimmer at once. The `.quest` suffix is read literally — there *is* a quest, and it is **a slow descent**: the visitor sinks through five stacked strata of water, each one a paper collage layer that drifts at a different speed, until they reach the seabed where the only thing waiting is a softly pulsing bioluminescent text block. No dragon. Just light. The aesthetic is **seapunk** — but the *early, sincere* seapunk of GeoCities turtle GIFs, Lisa Frank dolphins, and Windows 98 "3D Maze" caustics, not the ironic 2012 Tumblr revival. It is filtered through **Frutiger Aero's older, calmer cousin**: glossy bubbles, sun-dappled water, optimistic teal-and-coral, the visual language of late-90s "the future is clean and aquatic" corporate stock CD-ROMs — but rebuilt as **physical cut-paper collage**, with deckle edges, paper grain, drop shadows you could slide a fingernail under, and the faint yellowing of a flyer left in a sunny window. The tone is **nostalgic-retro**: not sad, not winking — *fond*. The copy speaks like a museum placard written by someone who genuinely loved the screensaver. Every surface should feel like it was **printed, then laminated, then submerged**. The emotional target: the specific peace of watching fish you don't have to feed. ## Layout Motifs and Structure The page is a **single vertical descent** built on the seed's `layout: organic-flow` constraint, taken at full strength: **no rectangular section boundaries anywhere**. Every "section" is a **paper island** — an irregular, hand-cut polygon with a deckle edge — that floats inside a full-bleed water column. Content flows *around* and *between* these islands along curved baselines; text columns are shaped with CSS `shape-outside` referencing the island silhouettes. The structural spine is **`motifs: layered-depth` made literal as five parallax strata**, stacked back-to-front: 1. **Stratum 0 — Surface (z-back, slowest).** A pale sun-disc, soft caustic net, a few floating paper lily-pads. Scrolls at 0.15× viewport speed. 2. **Stratum 1 — Sunlit zone.** The hero island: the word `haru.quest` cut from coral-pink paper, casting a long blue underwater shadow. Scrolls at 0.4×. 3. **Stratum 2 — Mid-water (the quest content).** Three to five paper islands carrying the actual page content, each a different organic shape, each drifting laterally on a slow sine path. Scrolls at 1× (normal) but each island has its own ±12px lateral oscillation. 4. **Stratum 3 — Kelp forest.** Tall paper-cut kelp blades, layered, swaying. Scrolls at 1.6× (faster than content — it rushes up past you as you sink). 5. **Stratum 4 — Seabed (z-front of background, behind content).** Paper-cut rocks, a sand gradient, the final bioluminescent text block embedded in it. Scrolls at 1.0×, arrives last. `patterns: stagger` is the **entrance choreography**: when a paper island scrolls into view, its sub-elements (heading, body lines, any inline collage scraps) **rise and settle one at a time, 70ms apart**, like silt resettling after something swam past. This is the page's signature motion and it fires on every island. `imagery: collage` governs composition: islands **overlap deliberately** — a kelp blade crosses in front of an island corner; a bubble cluster sits half-on, half-off a paper edge; the hero shadow falls *across* the island below it. Nothing is in a clean grid. The only grid-like discipline is a **loose 12-column reading guide** used purely to keep line lengths between 50–70ch — but island *positions* ignore it, alternating left-anchor / right-anchor / center in an irregular rhythm. Mobile collapses to a **single drifting column** of stacked islands; parallax strata reduce to 3 (surface, content, seabed) and lateral oscillation is disabled. Navigation is a **fixed bubble-string** down the right edge: 5 small glossy bubbles, one per stratum, that fill with coral as you reach that depth. Clicking a bubble does a smooth `scrollIntoView`. No top bar, no hamburger, no footer chrome — the seabed text block *is* the footer. ## Typography and Palette **Type stack — Google Fonts only, three families, `typography: frutiger-clean` as the law.** - **Frutiger** is not on Google Fonts, so its clean humanist spirit is carried by **Hanken Grotesk** (variable, weights 100–900) — the page's *primary voice*. Open apertures, generous x-height, that calm late-90s signage feel. Used for **headlines (weight 800), body (weight 400), captions (weight 500), navigation labels (weight 600)**. Tracking is loose on small caps (+0.06em), tight on the big headline (-0.015em). This is the "laminated museum placard" type. - **Mukta** (weights 300, 400, 600) — the **rounded, soft secondary** for the bioluminescent seabed text block and any "the future is clean" stat-free callouts. Its slightly rounded terminals read as *bubble-soft* without being childish. - **Major Mono Display** (weight 400, monospace) — used **only** for the depth meter ("-12.4m"), the coordinate stamp in the corner ("36.1°N · 1998"), and the bubble-nav numerals. The single mechanical voice in an organic page — it makes everything else feel hand-cut by contrast. Headline sizes use `clamp()`: hero `clamp(3rem, 9vw, 8rem)`; island headings `clamp(1.6rem, 4vw, 2.8rem)`; body `clamp(1rem, 1.15vw, 1.2rem)` at line-height 1.65. **Palette — `palette: complementary`, the axis is teal ↔ coral.** This is the page's whole chromatic argument: warm coral paper islands suspended in cool teal water. - `#0B3B45` — **abyss teal**, deepest background, the bottom of the column. - `#11616E` — **mid-water teal**, the dominant body water tone. - `#2AA7AE` — **sunlit teal**, the surface stratum, where caustics live. - `#7FE3D8` — **shallow foam**, highlights on bubbles and caustic crests. - `#FF7A59` — **coral paper** (the complement), the primary paper-island color and the brand accent. - `#FFB089` — **bleached coral**, sun-faded paper edges and secondary islands. - `#FFE7D2` — **shell sand**, the seabed gradient and the warmest text-on-dark color. - `#F4F1E6` — **archival paper white**, deckle edges, body text on coral islands (used sparingly). - `#0A1A1E` — **near-black ink**, body text on light paper islands. - Bioluminescent accent: `#C8FF6B` — **plankton glow**, used *only* for the pulsing seabed text and a 1px glow ring on the active nav bubble. Never anywhere else. Paper islands are coral (`#FF7A59`) or bleached coral (`#FFB089`); text on them is either `#0A1A1E` (ink) or `#F4F1E6` (paper white) chosen for contrast per island. The water gradient runs `#2AA7AE → #11616E → #0B3B45` top to bottom over the full scroll. ## Imagery and Motifs **No stock photography. No 3D render. No Lottie. No icon font. No illustration-library SVGs.** Every visual is one of nine hand-authored, CSS/SVG-only asset types: 1. **Paper islands (CSS).** Each island is a `
` with a `clip-path: polygon(...)` of 9–14 irregular points (the deckle silhouette), a layered `box-shadow` (one sharp 2px offset for "thickness", one soft 28px blur for "floating above water"), a subtle inner paper-grain via a tiled inline-SVG `` `background-image` at 4% opacity, and a 1px translucent `#F4F1E6` outline approximating a torn fiber edge. Six distinct silhouettes, reused with `transform: scaleX(-1)` for variety. 2. **Caustic net (SVG + CSS).** One inline SVG `` + `` driving a faint `#7FE3D8` mesh in Stratum 0, animated by slowly mutating the `baseFrequency` over a 40s loop — the "3D Maze screensaver light on the pool floor" effect, no GIF. 3. **Glossy bubbles (CSS).** Pure CSS spheres: a radial-gradient body (`#7FE3D8` core → transparent), a small white blown-highlight pseudo-element, a 1px rim-light. They rise on individual `@keyframes` with randomized `--rise-duration` (8–18s), `--drift-x`, and `--scale`. Bubble clusters are positioned to *overlap paper edges* per the collage rule. 4. **Paper-cut kelp (SVG paths).** 5 hand-drawn blade `` shapes in `#0B3B45` and `#11616E`, layered, each given a gentle `transform-origin: bottom` sway via `@keyframes` with staggered phase. They live in Stratum 3 and rush upward faster than content. 5. **Paper-cut rocks & sand (CSS).** Seabed: a `#FFE7D2 → #FFB089` linear gradient floor with 4–6 overlapping `clip-path` "rock" divs in muted teal-grays, drop-shadowed onto the sand. 6. **The sun disc (CSS).** A blurred radial-gradient circle in Stratum 0, `#FFE7D2` core fading to transparent, with a slow `filter: blur()` breathing animation — the surface light you're descending away from. 7. **Bioluminescent seabed block (CSS).** The final content block: `#0B3B45` paper rock with `#C8FF6B` text, a soft `text-shadow` glow that **pulses on a 4s ease-in-out loop** (opacity 0.7 ↔ 1.0 on the glow only, text stays legible). 8. **Floating collage scraps (inline SVG).** Tiny decorative paper cut-outs — a fish silhouette, a shell, a "1998" sticker, a starfish — drift between islands at small scale, rotating ±8° on slow loops. Pure inline SVG, ≤6 of them total. 9. **Depth gauge (HTML + CSS).** A thin vertical bar fixed bottom-left with a `Major Mono Display` readout ("-0.0m" → "-44.0m") updated from `scrollY`, and a small coral fill rising as you descend. Recurring motif vocabulary: **deckle edges, blown bubble-highlights, caustic ripples, kelp sway, the long blue underwater shadow.** If a decorative element isn't one of those, it doesn't belong on the page. ## Prompts for Implementation Build haru.quest as **one HTML file, one CSS file, two ES modules (`parallax.js`, `stagger.js`), and one inline SVG `` block** holding: the caustic turbulence/displacement filter, the paper-grain turbulence pattern, the 5 kelp blade paths, and the ≤6 collage-scrap shapes. No framework, no router, no build step, no GSAP, no Three.js, no canvas, no WebGL. The motion budget is: **CSS `@keyframes` for ambient loops (bubbles, kelp, sun, caustics, bioluminescence) + one `IntersectionObserver` for the stagger entrances + one throttled `scroll` listener (via `requestAnimationFrame`) driving the five parallax strata's `transform: translate3d()` and the depth gauge.** Use `transform` and `opacity` only for animation; `will-change: transform` on strata and islands; respect `prefers-reduced-motion` by freezing parallax to a static stacked layout, disabling bubble/kelp/caustic loops, and keeping only the bioluminescent pulse (slowed to 8s) and the stagger entrances (collapsed to a single 250ms fade). **Narrative arc — the page is a descent, told in five beats, full-screen each:** 1. **Surface (0m).** Hero island: `haru.quest` in coral paper, the sun disc above, a calm one-line subtitle in Hanken Grotesk like *"a slow descent through warm green water — est. forever ago, last surfaced 1998."* Bubbles begin rising. The whole frame is at its brightest teal. 2. **Sunlit zone (-8m).** First content island drifts in from the left, staggered. This is the "what is this place" beat — prose, not bullets. Caustics flicker overhead. 3. **Mid-water (-20m).** Two or three content islands in the irregular left/right/center rhythm, kelp starting to appear at the edges and rushing upward. The water has darkened to mid-teal. This is the longest beat — let it breathe, let islands overlap. 4. **Kelp forest (-32m).** A near-island moment: kelp blades nearly fill the frame, content threads *between* them. Bubbles thin out. The placard-voice copy gets quieter, shorter. 5. **Seabed (-44m).** The water bottoms out at abyss teal. A single paper-rock island sits on shell-sand, carrying the bioluminescent `#C8FF6B` text block — the closing thought, pulsing gently. The depth gauge reads its maximum. Two collage scraps (a starfish, the "1998" sticker) rest on the sand nearby. End. No call-to-action, no form, no next-page arrow — the quest was the sinking. **Storytelling rules:** copy is museum-placard register — warm, precise, a little wistful, never salesy. Every island headline is a phrase, not a verb-command. Inline depth markers ("-12.4m") appear in `Major Mono Display` at the top corner of each island so the descent stays legible. Lateral island drift and parallax must feel like *water*, not like a tech demo — slow, weighted, slightly damped at the extremes. **AVOID:** CTA-heavy layouts, "Get Started" buttons, pricing tables, stat-grids ("10k+ users"), testimonial carousels, feature-card rows, hamburger menus, sticky top navbars, hero-with-form, three-up icon grids, any rectangular hard-edged section. If a layout decision makes the page feel like a SaaS landing page, reverse it. ## Uniqueness Notes This design is built to fill a **vacant cell** in the 230-design registry frequency map. Concrete differentiators: 1. **Seapunk (3%) rendered as physical cut-paper collage, not digital chrome, is unattempted.** Existing seapunk-adjacent and vaporwave designs in the corpus lean on gradients, glassmorphism, and 3D — never on deckle edges, paper grain, and `clip-path` islands. This is seapunk *crafted by hand*. 2. **`organic-flow` layout (4%) at full strength — zero rectangular sections.** 94% of the corpus uses `full-bleed` and 86% uses `card-grid`; this page refuses both, shaping every text column with `shape-outside` against irregular paper silhouettes. 3. **`layered-depth` motif (10%) as a literal five-stratum underwater parallax descent** — not "cards with shadows" but a vertical journey through water at five distinct speeds, with the `.quest` TLD reinterpreted as *a sinking*, not a hero's journey. 4. **`complementary` palette (4%) with a single hard axis: teal ↔ coral**, plus one quarantined bioluminescent green used in exactly two places. Most complementary palettes in the corpus muddy the contrast; this one keeps it razor-clean and 90s-optimistic. 5. **`nostalgic-retro` tone (3%) aimed at a hyper-specific artifact** — the late-90s aquatic-corporate-CD-ROM screensaver — and played *sincerely*, with museum-placard copy, not ironically. 6. **`frutiger-clean` typography (5%) achieved via Hanken Grotesk + Mukta + Major Mono Display**, deliberately *without* any of the mono-heavy (95%) or handwritten (36%) defaults the corpus over-relies on. Chosen seed (from assignment): **aesthetic: seapunk, layout: organic-flow, typography: frutiger-clean, palette: complementary, patterns: stagger, imagery: collage, motifs: layered-depth, tone: nostalgic-retro.** Avoided overused patterns from frequency analysis: no `parallax` *misuse* (parallax here is the literal subject, not decoration), no `cursor-follow` (86%), no `magnetic` (79%), no `spring` (85%) — `stagger` (80%) is used but reframed as *silt resettling*, not generic list reveals; no `hand-drawn` aesthetic (96%), no `glassmorphism` (64%), no `photography` imagery (99%), no `card-grid` / `full-bleed` / `centered` layout defaults.