# Design Language for yami.quest ## Aesthetics and Tone yami.quest ("yami" — 闇, the dark; "quest" — the going-toward) is a single nocturnal pilgrimage rendered as a webpage: **the record of a lantern carried through a country that has no daylight**. The aesthetic is *surreal dreamscape* in the precise mode of a hand-painted point-and-click adventure that you only ever play between 2 and 4 in the morning — a place built out of warm lamplight pooling on cold ground, ink-black negative space that is not empty but *occupied*, and objects (a bell, a stair, a moth, a sleeping animal) that glow faintly as if they had been remembering the sun. The mood is **hushed, reverent, slightly unsafe** — the feeling of walking a familiar hallway in the dark and trusting it. Not horror; not whimsy. Closer to the long blue hour in a Studio Ghibli night sequence crossed with the lacquered melancholy of *Kentucky Route Zero* and the candle-economy of *Disco Elysium*'s thought cabinet. Nothing on this page is bright. Light is **scarce, hand-held, and earned** — it arrives in small radii and falls off into grain. The visitor is never *sold* anything; they are *guided*, the way a lamplighter guides — by walking a few steps ahead and leaving a glow behind. Tone words, fixed: *mysterious-moody*, lantern-warm inside a vast cool dark, contemplative, never frantic. The page should feel like it is being told to you in a low voice by someone who has walked this road before and is not afraid of it. ## Layout Motifs and Structure The page is a **single vertical descent** — `immersive-scroll`, no max-width content well, no navigation chrome, no router, no modals. The visitor scrolls *downward into the dark* through **seven Lanterns** (numbered I–VII), each one a full-viewport (`min-height: 100svh`) plate composed as a **pool of light in black**. **The lantern-pool grid.** Forget the card grid. Each plate is governed by a single moving light source — a soft radial glow (the "lantern") whose CSS custom properties `--lamp-x` / `--lamp-y` track slowly across the plate as you scroll (and drift toward the cursor with heavy spring damping). Content is laid out *relative to where the light currently is*: a heading sits just inside the bright core; supporting text trails into the warm penumbra; decorative motifs (a moth, a stair-rail, a milestone stone) sit at the dim edge, half-resolved. **Where there is no light, there is intentionally nothing** — true black, faint grain, occasional drifting dust. Roughly 55–65% of every plate is unlit void. This is the layout's whole thesis: *negative space as terrain you haven't reached yet.* **Plate composition rules:** - One light source per plate. Never two competing glows. - Type is set in a **narrow measure** (38–46ch) so a paragraph fits inside one lantern-radius. - Plates alternate the lantern's resting position — left-low, right-high, dead-center, far-bottom — so the descent has a *gait*, a walking rhythm, not a metronome. - Between plates: a **threshold band** — a 60–80vh stretch of near-total black with a single line of text centered in a tiny dim glow ("...and the road kept going.") that acts as a breath between rooms. - One plate (Lantern V, the lowest point) is laid out as a **still pond** — the lantern doubles, its reflection wavering below a horizon line; text appears both upright and softly mirrored. - The final plate (Lantern VII) **slowly raises its light to fill the whole viewport** — the first and only time the page is fully lit — revealing that the "void" was a single continuous landscape all along (a long road, milestones, sleeping shapes). Then it dims back to a held ember. No sidebars. No bento. No dashboard. No stat-grid. No pricing block. No testimonial wall. No "get started." The structure *is* the journey. ## Typography and Palette **Typefaces** (all available on Google Fonts): - **Fraunces** (variable; used at optical size ~144, weights 300–500, with the *Soft* and slight *Wonky* axes leaned into via `font-variation-settings`) — the body and headline voice. A "old-style with personality" serif whose soft terminals read like ink that bled slightly on damp paper. Headlines set large (clamp 2.4rem → 5.5rem), tight leading, low contrast weight so they glow rather than shout. Body at 1.0625rem / line-height 1.8. - **Cormorant Garamond** (400 / 500 *italic*) — used **only** for the threshold-band whispers and marginal annotations. Italic, small, dim. Never for body, never for headings. - **JetBrains Mono** (400, letter-spacing 0.12em, uppercase) — used **only** for the Lantern numerals ("LANTERN · IV"), the milestone-stone labels, and a single quiet footer line. The one cold, geometric voice — like a road-sign in the dark. Restrained: never more than a few words at a time. **Palette** (warm lamplight inside a cool void — `mysterious-moody`, low-key, never neon): - `#0B0B0F` — **Void** — the page ground. Near-black with a breath of blue. The dominant color by area, by far. - `#14141C` — **Deep Threshold** — used for the breath-bands between plates; black with the faintest violet warmth so the eye registers a "different room." - `#F2C879` — **Lantern Core** — the warm gold at the center of every glow. Used for the brightest type, the lamp's hot middle. Never as a fill block — only as light. - `#C9893E` — **Penumbra Amber** — the falloff color; supporting text, dim motif strokes, the edge of every glow where gold cools toward ember. - `#5E4632` — **Ember Brown** — the dimmest still-warm value; hint-text at the lantern's far edge, milestone-stone shadows. - `#E8E2D2` — **Moth Pale** — a cool bone-white, used *sparingly* for the moths and dust motes and the one mirrored line on the pond plate — the only non-warm light, always small. - `#2A3340` — **Cold Distance** — a desaturated slate, used only for the far-horizon shapes on Lantern VII when the page is fully lit; the color of land seen by lantern, not sun. Grain overlay everywhere (~7–10% monochrome noise, ~0.5px structure) so no surface is ever clean — light in this world is always a little dusty. ## Imagery and Motifs **No photography.** Everything is **hand-painted-feeling line-and-glow illustration** — thin warm strokes (Penumbra Amber) on Void, with selective soft bloom, as if drawn in light itself. Recurring motifs: - **The lantern** — never drawn as an object, only ever *implied* as the radial glow that governs each plate. The reader *is* the one holding it. - **The moth** — a single pale moth (Moth Pale) that drifts across plates near the light, wings as two thin SVG strokes; on hover near it, it startles and re-settles. It is the page's only "creature" and its only easter-egg. - **Milestone stones** — squat rounded SVG shapes at the dim edge of certain plates, each bearing a mono numeral; they mark progress without a progress bar. - **The stair / the rail** — a single banister-line that appears at the left edge of Lanterns II and VI, suggesting you are descending something built, not falling. - **Dust & embers** — slow-rising particle motes (3–6px, Ember Brown / Lantern Core, very low opacity) within each glow only — they do not exist in the void. - **The pond** (Lantern V) — a horizon line and a wavering mirrored glow; the page's still point. - **The road** — revealed only at the end (Lantern VII): a single long perspective line of Penumbra Amber receding to a vanishing point, with the milestone stones now visible all along it, and a few **sleeping shapes** (rounded, ambiguous — a fox? a traveler? a hill?) rendered in Cold Distance. Decorative grammar: thin strokes, soft bloom, no hard edges, no flat fills, no icons-as-buttons, no emoji. If it isn't lit, it isn't drawn. ## Prompts for Implementation Build yami.quest as **one long full-bleed HTML document** — seven plates plus threshold bands, no SPA, no router, no nav, no hamburger, no modal, no cookie banner styled as content. The reader scrolls top-to-bottom *into the dark*, carrying the light with them. Prioritize **atmosphere over information**, **darkness over decoration**, **one slow descent over branching navigation**. There is **no CTA, no pricing, no testimonial, no stat-grid, no FAQ, no email capture, no "subscribe," no "get started," no feature cards.** The page is a *walk*, not a funnel. **Core mechanic — the carried lantern.** Maintain two CSS custom properties on each plate (or globally), `--lamp-x` and `--lamp-y`, expressed as percentages. Drive them from: (1) scroll progress within the plate (the light drifts along a designed path as you move through the plate), and (2) a *heavily damped* spring-lerp toward the cursor position (stiffness low, damping high — the light should feel *carried*, with weight and lag, never snappy). Render the glow as a `radial-gradient` mask / blurred pseudo-element so all content inside the plate is dim by default and brightens by proximity to `--lamp`. On touch devices, ignore the cursor and let scroll alone walk the light. **Reveal choreography.** Use `IntersectionObserver` + scroll-linked progress, not heavy parallax. As each plate enters: the lantern *swells* from a pinpoint to its working radius over ~1.2s ease-out (the lamplighter raising the wick); type fades up *from the light outward* with a short stagger (core text first, penumbra text after, edge motifs last, faintly). When a plate leaves upward, its lantern *shrinks back to a pinpoint and winks out* — you are leaving that room behind. **Threshold bands.** Between plates render a tall (60–80vh) `#14141C` band, empty except one line of dim italic Cormorant in a tiny glow, centered, that drifts in and out as it crosses center. These are the page's exhales. Do not put navigation, dots, or arrows here. **Opening overture (≤3.5s, non-skippable, runs once).** Page loads pure `#0B0B0F`, silent, for ~700ms. Then a single point of Lantern Core light appears center, *flares* as if a match caught, settles to lantern size, and the word **yami** resolves inside it in large soft Fraunces — held for ~1.2s — then the light begins to descend (scroll unlocks) and the visitor is "walking." No logo grid, no spinner, no progress percentage. **Lantern V (the pond).** When this plate is centered, the glow gets a mirrored, vertically-flipped, wave-distorted copy below a horizon line (CSS transform + a slow SVG turbulence/`feDisplacementMap`, *very* subtle, ~2–4px). One line of text appears in Moth Pale, mirrored below. This is the only plate that should feel *still* — slow everything down here by ~1.5×. **Lantern VII (the dawn that isn't).** The final plate's lantern, on entry, *keeps growing* past its normal radius until it floods the whole viewport — the first time the page is ever fully lit. The revealed scene: a long perspective road line, all the milestone stones now visible, a few sleeping Cold-Distance shapes, the moth landed on the nearest stone. Hold the full-lit state ~2.5s. Then the light *contracts back to a held ember* center-screen (it does not wink out — the journey is over, not the lantern), and a single mono footer line appears beneath it: "LANTERN · VII · 闇 · the road kept going." Nothing below it. The page ends in warm dark. **Performance posture (aesthetic, not metrics):** grain via one fixed `::after` SVG-noise overlay at low opacity; glows via blurred pseudo-elements not box-shadow stacks; particles capped low and confined to lit regions; respect `prefers-reduced-motion` by replacing lantern-drift with gentle cross-fades and keeping the descent intact. Everything that moves should move *slowly* — this is a night walk, not a ride. **Voice of the copy (for whoever writes it):** second person, low and steady, present tense. "You come to a stair. It is darker here. The rail is cold and stays where you put your hand." Short lines. No marketing register, ever. The mono fragments are the only "system" voice — terse, like signage. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **Light is the layout engine, and it is *scarce*.** Where most sibling sites with `cursor-follow` use a spotlight as a flourish over an otherwise fully-visible page, yami.quest makes the carried lantern the *only* source of legibility — 55–65% of every plate is intentionally true-black void. No other site treats darkness as primary terrain rather than backdrop. 2. **The damped, carried light (not a snappy spotlight).** The lantern lags behind cursor and scroll with heavy spring damping so it reads as a *physical object with weight* being carried — explicitly the opposite of the crisp magnetic-cursor effect common in the corpus. 3. **No CTA, no funnel, no chrome — a seven-plate night walk with a non-skippable match-strike overture, threshold "breath" bands, a still-pond mirror plate, and a "dawn that isn't" finale** that floods to full light once and then settles to a held ember. This narrative arc — descent → stillness → false dawn → held ember — exists nowhere else in the set. 4. **Palette is warm light *inside* a cool void, never neon.** Lantern Core gold `#F2C879` and Penumbra Amber `#C9893E` are used *only as light*, never as fill blocks; the bone-white Moth Pale `#E8E2D2` is the lone cool accent and appears only at moth/dust/mirror scale. This is a `mysterious-moody`, low-key palette — pointedly not the high-contrast neon or warm-earthy gradients that dominate. 5. **Imagery is light-drawn line illustration, zero photography** — moths, milestone stones, a banister, a pond horizon, sleeping ambiguous shapes — in a corpus where ~98% of designs lean on photography. **Chosen seed / style:** `surreal dreamscape promo` — interpreted as a nocturnal hand-painted-adventure pilgrimage. Vocabulary fix: `aesthetic: surreal, layout: immersive-scroll, typography: serif-revival, palette: midnight-blue (warm-lit), patterns: cursor-follow (heavily damped), imagery: line-illustration, motifs: candle-atmospheric, tone: mysterious-moody`. **Avoided patterns from frequency analysis:** no `glassmorphism` (85%), no `hand-drawn` cutesy register (94%), no `card-grid` (93%), no `photography` (98%), no `parallax`-heavy choreography (87%), no snappy `magnetic` cursor (76%), no `dashboard`/`bento-box`/stat-grid layouts, no `warm`+`gradient` sunset palette default (98%/92%) — the warmth here is hoarded lamplight in the cold, not a gradient wash.