# Design Language for kaguya.quest ## Aesthetics and Tone `kaguya.quest` is a **surreal nocturnal pilgrimage** — the digital reliquary of an unfinished ascent. It takes the bones of *Taketori Monogatari* (the Tale of the Bamboo Cutter) but refuses the ending: here, Kaguya never boards the celestial palanquin. She is caught mid-rise, suspended forever between the bamboo grove and the lunar mansion, and the entire site is the strange, dilated hour of that suspension. The mood is **dreamy-ethereal with a thread of unease** — not the cute, soft fairy-tale register, but the airless clarity of a dream you cannot wake from: too quiet, too bright at the edges, with objects that hang where gravity should have taken them. The visual language is built from three impossible materials layered over one another: **black lacquer (urushi)** so deep it reads as liquid, **moon-milk** (a pale, faintly green-blue luminance that pools rather than glows), and **gold powder (maki-e)** scattered like the tail of a comet across both. Nothing on the page sits flat — everything floats a few centimeters off its own shadow, the way the moon-princess herself floats. The tone of the *writing* is hushed, second-person, a little ceremonial, as if a court attendant were narrating your slow drift upward: *"You will not feel the ground leave. You will only notice, much later, that it is gone."* This is **anti-CTA by construction**. There is nothing to buy, no plan, no signup. The site is a 90-second ascent you fall through once. ## Layout Motifs and Structure The spine is a single **immersive-scroll vertical column** — but inverted in feeling: you scroll *down*, yet every motif rises *up* past you, so the scroll reads as **ascent through stacked celestial strata**. Eight strata, each a full-viewport "altitude band": 1. **The Grove (0 km)** — the bamboo cutter's clearing at the bottom of the page; tall vertical lacquer reeds, a single cut node glowing. 2. **The Letter** — the farewell scroll, unrolling as you scroll, its calligraphy painting itself. 3. **The Robe of Feathers (hagoromo)** — a translucent moon-milk sheet that lifts off a silhouette. 4. **The Five Impossible Gifts** — five floating objects (stone bowl, jeweled branch, fire-rat robe, dragon-jewel, swallow's shell) arranged on an **off-axis arc**, never a grid. 5. **The Tide of Bamboo** — a horizontal drift band: the only place the column breaks into a slow **horizontal-scroll inset** (a 1.8-screen-wide grove that pans as you pass through it). 6. **The Lunar Mansion** — a maki-e palace seen edge-on, impossibly thin, like a folding screen turned sideways. 7. **The Suspension** — the central image: Kaguya as a column of moon-milk light, neither here nor there, the page nearly empty around her. 8. **The Unfinished Ascent (∞ km)** — the page does not end with a footer; it ends with the column dissolving into gold dust that the reader's own scroll-velocity scatters. **Composition rules:** asymmetric throughout — the content column hugs a vertical "tether line" (a hair-thin gold rule at roughly 38% from the left on wide screens) that every stratum is hung from, the way a mobile hangs from one string. No card grids. No centered hero. Negative space is treated as **night sky volume**, not emptiness — it has depth (three parallax-free depth planes, distinguished only by blur and luminance, never by horizontal motion). A slim right-edge **altitude rail** shows the eight strata as eight notches; the current notch swells into a tiny crescent. ## Typography and Palette **Type system (Google Fonts only — verified names):** - **Display / titles — `Cormorant Garamond`** (weights 300, 500; italic for the narration voice). A high-contrast Garamond revival with knife-thin hairlines that look like maki-e brushwork at 64–140px. Used for stratum names and the few large lines of narration. Tracking `0.02em`; the italic carries every second-person sentence. - **Body / captions — `Spectral`** (weights 300, 400). A screen-tuned serif with generous x-height and quiet warmth; reads cleanly at 17–20px against dark lacquer. Line-height a luxurious `1.85`. This is the "court attendant" voice for object descriptions. - **Numerals / altitude labels — `Marcellus`** (regular only). An inscriptional, near-Roman capital face used *only* for altitude readouts (`0 KM`, `38,000 LI`, `∞`) and the eight notch labels. Always uppercase, tracked `0.22em`. Its lapidary stillness keeps the dreamy serifs from going soft. No monospace anywhere. No handwritten font (the calligraphy is hand-built SVG paths, not a typeface). **Palette (8 values):** - `#05060B` — *urushi void* — the base, a black with the faintest blue undertone; the liquid-lacquer field everything floats on. - `#0C1224` — *grove shadow* — secondary panel dark, used for the lower strata and inset wells. - `#16203A` — *mansion indigo* — mid-tone for the lunar-palace stratum and depth-plane two. - `#C7E0DA` — *moon-milk* — the principal light: a pale desaturated green-blue, used for the hagoromo sheet, Kaguya's light-column, and primary text on dark. - `#9FB6C9` — *waning haze* — softened secondary text and the blurred far depth plane. - `#E8D9A8` — *moon-paper cream* — warm parchment tone for the unrolling letter and quiet highlights. - `#C9A24B` — *maki-e gold* — the tether line, the comet-dust particles, hairline rules, the swelling crescent on the altitude rail. - `#7A6428` — *tarnished gold* — pressed/visited state and the dimmer half of any gold gradient (the only place a gradient appears: a 2-stop gold along the tether line). Contrast is always **luminous-on-deep**; the cream never touches white, the void never reaches pure black, so the whole thing reads like moonlight, not daylight. ## Imagery and Motifs **No photography. No stock. No hand-drawn doodles. No 3D renders.** Every visual is either (a) hand-authored SVG with lacquer-and-gold treatment, or (b) **generative canvas** tuned to read as moon-dust and bamboo-shadow. - **Comet-dust field (generative):** a slow canvas particle system — 1–4px gold motes drifting *upward* at ~6px/s with tiny lateral wander, density ~0.4 per 1000px². They thicken near the tether line as if poured along it. On the final stratum, scroll velocity injects extra motes that scatter outward. This is the site's only "background animation." - **Bamboo as vertical lacquer rule:** the grove is built from 8–14 SVG reeds — tapered vertical strokes in `#0C1224` with a single `#C9A24B` node-band each, and a 1px `#C7E0DA` rim-light down one side. They sway with a long 9-second sine, never fast. - **The hagoromo (robe of feathers):** an SVG sheet of layered semi-transparent `#C7E0DA` bezier "feathers" that, on scroll into stratum 3, peels off a flat human silhouette and rises off the top of the viewport — animated by `path-draw-svg` plus a transform-translate, not by morphing into something else. - **The five impossible gifts:** five small SVG emblems on an off-axis arc, each rendered as a flat maki-e inlay (gold linework on lacquer): a hexagonal **stone bowl**, a **jeweled branch** (three white-jade droplets), a **fire-rat robe** (a coil of flame in gold outline), a **dragon-neck jewel** (a single faceted teardrop), a **swallow's cowrie shell**. Hover lifts each one ~6px off its shadow with a soft spring; a `#C7E0DA` caption fades in beside it in `Spectral`. - **The lunar mansion:** a single wide SVG of a palace seen *edge-on* — almost a vertical line, with a few gold roof-curves implied. It's deliberately illegible as architecture; it reads as a folded screen. - **Kaguya's light-column (stratum 7):** a vertical band of `#C7E0DA` at ~30% opacity with a Gaussian-blurred core and crisp 1px gold edges, breathing on a 7-second scale. Around it, the page is almost empty — three or four words of italic narration, nothing else. - **The altitude rail:** eight thin gold notches up the right edge; the active one swells into a 9px crescent (`#C9A24B`), the rest stay 1px lines. - **The unrolling letter:** an SVG `` of vertical Japanese-style calligraphy strokes (abstract, non-literal glyphs) that `path-draw`s itself top-to-bottom as the parchment `#E8D9A8` rectangle scales open. The "ink" is `#05060B` on the cream. Recurring micro-motifs: **the crescent** (rail marker, hover dots, the section-divider mark), **the floating shadow gap** (every object casts a soft shadow it does not touch), and **the upward drift** (everything that moves, moves up). ## Prompts for Implementation Build `kaguya.quest` as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics, no cookie banner, no chatbot. **What this page must NOT contain:** no CTA buttons, no pricing tables, no stat grids ("10k+ users"), no testimonials, no logo wall, no email capture, no contact form, no FAQ accordion, no newsletter, no nav bar with links. The *only* interactive surfaces are: the scroll itself, the eight-notch altitude rail (click a notch → smooth-scroll to that stratum), and the five gift emblems (hover only). **Structure & storytelling (eight full-viewport strata, scroll-down = ascend-up):** 1. **The Grove (0 KM).** Open in `#05060B`. Vertical lacquer bamboo reeds rise from the bottom edge; one cut node pulses faintly gold. A single line of `Cormorant Garamond` italic, low on the screen: *"You were found inside a length of light. Now scroll, and watch it return."* The gold tether line and right-edge altitude rail fade in. 2. **The Letter.** A cream `#E8D9A8` rectangle scales open vertically while an SVG calligraphy path draws itself within it (`stroke-dashoffset` animation tied to scroll progress through this stratum). Narration in `Spectral`: the farewell, three short lines, each `fade-reveal`'d with a 120ms stagger. 3. **The Robe of Feathers.** The hagoromo SVG peels off a flat silhouette and translates up past the top of the viewport as you scroll, with feather paths drawing in. Underneath, the silhouette dims to `#0C1224`. One italic line: *"Once it is on, you will not remember being heavy."* 4. **The Five Impossible Gifts.** Five maki-e emblems on an off-axis arc around the tether line, `stagger`-entering with a `spring`. Each: hover → `hover-lift` ~6px off its detached shadow + a `Spectral` caption in `#C7E0DA` fades in. Heading in `Cormorant Garamond`: "Five things that could not be brought." 5. **The Tide of Bamboo (horizontal inset).** The vertical column yields to a ~1.8-viewport-wide horizontal grove that pans left-to-right as the user scrolls down through this stratum (CSS `position: sticky` + transform driven by scroll ratio). Reeds sway on a 9s sine. No text but a faint `Marcellus` readout: `38,000 LI`. 6. **The Lunar Mansion.** The edge-on palace SVG drifts up from below against `#16203A`; gold roof-curves catch a 1px rim. Italic narration: *"The house at the top is thin as a held breath. You are nearly there. You will always be nearly there."* 7. **The Suspension.** Near-empty viewport in `#05060B`. Kaguya's blurred moon-milk light-column breathes at center-left of the tether. Four words only, `Cormorant Garamond` italic, large, `blur-focus` resolving from soft to sharp on scroll-in: *"between the two — caught."* 8. **The Unfinished Ascent (∞).** The tether line frays into gold motes; the comet-dust field intensifies; scroll velocity scatters motes outward. The page does not end with a footer — it ends with `Marcellus` "∞ KM" dissolving mote by mote. A whisper line fades in last: *"It never finishes. That is the gift."* **Motion language:** everything that moves, moves *upward* and *slowly* — drift speeds in the 4–12px/s range, sways on 7–9s sines, spring configs soft and over-damped (no bounce overshoot beyond ~3%). Use `scroll-triggered` reveals (IntersectionObserver), `path-draw-svg` for the letter and hagoromo, `fade-reveal` + `stagger` for text lines, `hover-lift` + `spring` for the five gifts, `blur-focus` for stratum 7's words. **Do not** implement cursor-follow, magnetic buttons, tilt-3d cards, parallax horizontal drift, typewriter effects, or counters. The mouse barely matters here; this is a scroll instrument. **Type & color in code:** load `Cormorant Garamond` (300, 500 + italics), `Spectral` (300, 400), `Marcellus` (400) from Google Fonts. Base `#05060B`; primary text `#C7E0DA`; secondary `#9FB6C9`; the letter/parchment `#E8D9A8`; all rules, the tether, motes, and the active crescent in `#C9A24B`; visited/pressed in `#7A6428`. The single permitted gradient is a 2-stop vertical gold (`#C9A24B → #7A6428`) along the tether line only. Add a faint `1px` SVG-noise overlay at ~3% opacity over the lacquer fields to keep the darks from banding — that is the only texture. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Surreal register, not whimsical or cottagecore.** Kaguya is a folk-tale figure other sites in the corpus would render as cute, pastel, hand-drawn fairy-tale art (97% hand-drawn in the corpus). This site does the opposite: a cold, dilated, dream-logic *suspension* — high-contrast Garamond hairlines on liquid black lacquer, an ascent that never completes. It deliberately occupies the ~1% `surreal` aesthetic and `dreamy-ethereal` tone bands, and avoids hand-drawn entirely (everything is hand-authored SVG + generative canvas). 2. **Scroll-down reads as ascend-up.** The narrative direction is inverted against the scroll direction — every motif rises past the viewer — and the layout hangs from a single off-axis "tether line" like a mobile, with no card grid, no centered hero, no full-bleed hero photo. This breaks three of the most over-used layout conventions (full-bleed 92%, card-grid 89%, centered 86%) at once. 3. **A page with no ending.** The eighth stratum has no footer, no CTA, no "get started" — it dissolves into scroll-velocity-scattered gold dust. The entire site contains zero of the standard conversion furniture (pricing, stats, testimonials, signup, logo wall, FAQ), which is rare in the corpus. 4. **Maki-e / urushi material system instead of glassmorphism + warm gradient.** No frosted glass (72% in corpus), no warm palette (98%), no big gradient washes (96%) — just three impossible materials (deep blue-black lacquer, pale green-blue moon-milk, scattered gold powder), with the *only* gradient being a 2-stop gold hairline along the tether. 5. **Mouse-irrelevant interaction model.** No cursor-follow (88% in corpus), no magnetic (80%), no tilt-3d. The only interactions are scrolling, eight rail notches, and five hover-lift emblems — the page is a scroll instrument, not a pointer playground. Chosen seed/style: `aesthetic: surreal, layout: immersive-scroll, typography: elegant-serif, palette: midnight-blue, patterns: scroll-triggered, imagery: generative-art, motifs: star-celestial, tone: dreamy-ethereal` Avoided per frequency analysis: hand-drawn (97%), glassmorphism (72%), photography (98%), warm palette (98%), gradient washes (96%), parallax (95%), cursor-follow (88%), spring-overshoot bounce, mono type (94%), full-bleed/card-grid/centered layout trio (92/89/86%).