# Design Language for hibiki.quest ## Aesthetics and Tone **hibiki.quest** is an interactive resonance-archive — imagine a private salon aboard a derelict luxury starliner, its mirrored ballroom still humming with the ghost of a sound that left a hundred years ago. The word *hibiki* (響き) means "echo" or "reverberation," and the site is built around that idea: every panel is a chamber, every click is a struck tuning fork, every scroll is a wave moving through brass and crushed velvet. The aesthetic is **vaporwave filtered through a faded grand-hotel lens** — not the neon-pink Windows-95 cliche, but the *opulent, melancholy* side of vaporwave: dusty rose marble, oxidized gold leaf, VHS-warm magenta bleeding into teal, a Roman bust wearing headphones, all rendered as though photographed on expired film and then displayed behind the cracked glass of an antique vitrine. Layered over this is a thin, precise **sci-fi HUD** skin: hairline reticles, corner brackets, oscilloscope traces, frequency read-outs — the cold instrumentation of a salvage crew cataloguing a beautiful wreck. Tone is **opulent and grand but quietly haunted** — the copy speaks like a museum curator who has fallen a little in love with the collection. Confident, lush, unhurried. Gilded, never gaudy. There is reverence here, and a faint static hiss under everything. ## Layout Motifs and Structure The page is a **dashboard of chambers** — a fixed instrument-frame around a living interior — *not* a marketing scroll. - **The Console Frame:** A persistent 1px gilded HUD border hugs the viewport with mitered corner brackets. Top-left: a live "RESONANCE LOG" ticker (timestamps, frequency values in Hz, faint scrolling). Top-right: a small animated oscilloscope canvas tracing a slow sine wave tinted muted-magenta. Bottom edge: a thin spectrum-analyzer bar of 24 vintage-amber segments that idle-pulse. - **The Chamber Grid:** The main stage is an **asymmetric dashboard grid** of unequal "vitrine" panels — a tall portrait chamber on the left (a marble bust draped in static), two stacked landscape chambers center, a square instrument-readout panel right. Panels have generous internal margin, beveled inner shadow (skeuomorphic glass), and a faint film-grain plate over each. - **Progressive disclosure is the core interaction:** Chambers are *closed* by default — showing only an engraved title plate, a frequency tag, and a HUD "OPEN CHAMBER ▸" affordance. Activating one expands it in place (the neighbors politely compress, never disappear), revealing layered content: an aged photo-collage, a paragraph of curatorial prose, an embedded waveform that draws itself, and nested sub-disclosures ("view the archivist's note", "expand the spectrogram"). Nothing is dumped on the visitor at once; the dashboard *unfolds*. - **Spatial rhythm:** Everything snaps to an 8px lattice; the HUD hairlines and the marble panels share the same grid so the cold geometry and the warm decay are visibly interlocked. Depth is built with 3–4 layers: grain plate (back), gradient-mesh wash, marble/collage imagery, glass bevel, HUD overlay (front). - No conventional hero. No CTA band. No pricing. No stat-grid. The "data" on screen is diegetic instrumentation, not conversion metrics. ## Typography and Palette **Typography** — a *serif-classic* spine with a thin technical counter-voice: - **Display / chamber titles:** `Cormorant Garamond` (Google Fonts) — high-contrast, aristocratic, set large, slightly letter-spaced, often in oxidized-gold with a 1px engraved highlight. Italics used for the curatorial asides. - **Body / curatorial prose:** `EB Garamond` (Google Fonts) — warm, readable, old-world; long measure, generous leading (1.7). - **HUD labels, frequency read-outs, log ticker, segment numbers:** `Share Tech Mono` (Google Fonts) — uppercase, tiny, wide tracking, the instrument layer. - Optional accent for engraved plate numerals: `Cinzel` (Google Fonts), used sparingly for Roman-inscription flavor. **Palette** — *muted-vintage*: faded film, tarnished metal, ghost-neon. - `#211826` — **Velvet Void** — near-black aubergine; the deep-space backdrop behind the chambers. - `#3A2C3E` — **Smoked Plum** — panel shadows, HUD frame fill, recessed bevels. - `#C9A24B` — **Oxidized Gold** — primary accent: HUD hairlines, corner brackets, engraved titles, active states. - `#E6D3B3` — **Aged Ivory** — primary text on dark, plate engravings, parchment of the collage. - `#C16E91` — **Dust Magenta** — the vaporwave heartbeat: oscilloscope trace, hover glow, link underlines (kept *muted*, like sun-bleached pink neon). - `#5E8C8A` — **Patina Teal** — secondary accent: spectrum segments at rest, secondary HUD ticks, the cool counterweight to the magenta. - `#8C6B5E` — **Dried Rose Marble** — veining tint and warm mid-tone in the gradient-mesh washes. Everything sits at ~80–90% saturation of "true" — slightly dusty, like a photograph left in a sunny window since 1987. ## Imagery and Motifs **Imagery is mixed-media** — analog wreckage meets cold telemetry: - **Collage plates:** torn-edge scans of antique opera-house programs, art-deco amplifier diagrams, marble statuary, hand-drawn sine curves, halftone roses, fragments of sheet music — composited with visible tape, deckled edges, and a uniform expired-film color grade. Each chamber gets its own collage "exhibit." - **The recurring icon:** a **Roman bust in headphones** rendered as a duotone (Aged Ivory + Dust Magenta) line-and-grain illustration — appears as the left portrait chamber's centerpiece and shrinks to a tiny mark in the console frame. - **Sci-fi HUD vocabulary:** corner brackets `⌐ ¬ ∟ ⌐`, crosshair reticles over interactive points, hairline rulers with Hz tick labels, a slow-sweeping radar arc on the instrument panel, a "SIGNAL: STABLE" status chip, dotted leader lines connecting labels to collage elements like museum callouts. - **Texture layers:** ever-present fine film grain (animated, very low opacity), faint horizontal VHS scanline drift, a subtle chromatic-aberration fringe on titles, and a soft gradient-mesh aurora of plum→teal→magenta breathing slowly behind the chambers. - **Motif of resonance:** concentric ring ripples emanate from any clicked element; the spectrum bar reacts; the oscilloscope wave briefly increases amplitude — the whole instrument frame "hears" the interaction. ## Prompts for Implementation - Build a **single full-viewport stage**, not a long scroll. The console frame is `position: fixed`; the chamber grid lives in a CSS Grid that re-flows when a chamber opens (`grid-template-columns/rows` transitions, `transition: grid-template ... cubic-bezier(.22,1,.36,1)`). Frame this as walking into one room and opening its cabinets — a contained, theatrical experience. - **Storytelling first:** Each chamber is a short curatorial vignette about a "recovered sound." Lead the visitor: closed plate → reticle hover → expand → prose + collage + self-drawing waveform → optional nested note. Write real, evocative microcopy ("CHAMBER III · 432 Hz · recovered from the starboard ballroom"). - **Progressive disclosure** is the headline pattern: implement with `
`/`` semantics enhanced by JS, or aria-expanded toggles; animate height/opacity/blur on reveal; stagger inner elements in (`stagger`, `fade-reveal`, `blur-focus`). Never show everything at once. Neighbor panels compress, they don't vanish. - **Animation palette:** `path-draw-svg` for every waveform/sine/oscilloscope trace (stroke-dashoffset). `ripple` concentric rings from click points. `parallax` on the 3–4 depth layers (grain, mesh, marble, HUD) tied to pointer position — subtle. `cursor-follow` reticle/crosshair that snaps to interactive targets with a `spring`. `counter-animate` the Hz read-outs when a chamber opens. Idle: oscilloscope sine loop, spectrum-bar shimmer, grain flicker, slow mesh drift. - **HUD canvas:** small `` (top-right) drawing a continuous low-amplitude sine in Dust Magenta; bump amplitude on any interaction then ease back. Spectrum bar = 24 divs, base height random-walk, spikes on open events. - **Texture in CSS:** layered `background-image` for film grain (tiny tiled noise PNG or generated), `mix-blend-mode: overlay` grain plate per panel, `@keyframes` scanline `translateY` drift, `text-shadow` triple-offset for chromatic fringe on `Cormorant Garamond` titles, gilded hairlines via `1px solid #C9A24B` with `box-shadow: inset 0 0 0 1px rgba(201,162,75,.15)`. - **Respect the muted palette** — glows are low-opacity, saturation stays dusty; this is faded grandeur, not arcade neon. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, sign-up bands, testimonial rows, generic hero + features + footer marketing skeleton. ## Uniqueness Notes Differentiators from other designs: 1. **"Opulent haunted vaporwave," not party vaporwave** — tarnished gold + dusty rose + patina teal on aubergine, expired-film grading, grand-hotel-on-a-derelict-starliner narrative. This is the melancholic-luxury reading of muted-vintage, which is essentially absent (muted-vintage palette at 1%, vaporwave aesthetic at 12% but almost always pink/grid/Y2K). 2. **Diegetic dashboard, not analytics dashboard** — the dashboard layout is real instrumentation (resonance log, oscilloscope, spectrum analyzer, radar sweep) cataloguing a fictional sound-wreck, fused with a serif-classic curatorial voice — combining `dashboard` + `sci-fi-hud` + `serif-classic` + `progressive-disclosure`, none of which are common (serif-classic 2%, progressive-disclosure 2%, sci-fi-hud 5%). 3. **Progressive disclosure as the entire UX**, not a sidebar accordion — chambers open *in place* with neighbor-compression, self-drawing waveforms, and nested archivist notes; the instrument frame audibly "reacts" (spectrum/oscilloscope/ripple) to every disclosure. 4. **Mixed-media collage exhibits** (torn opera programs, deco amp diagrams, marble busts in headphones, halftone roses) under a single film grade — `mixed-media` imagery sits at 3% and is rarely paired with HUD telemetry. 5. **No marketing scaffolding at all** — one fixed full-viewport room, zero CTAs/pricing/stat-grids; the "numbers" on screen are Hz read-outs and signal status, pure atmosphere. Chosen seed/style: `aesthetic: vaporwave, layout: dashboard, typography: serif-classic, palette: muted-vintage, patterns: progressive-disclosure, imagery: mixed-media, motifs: sci-fi-hud, tone: opulent-grand` Avoided overused patterns from frequency analysis: hand-drawn aesthetic (96%), glassmorphism-as-default (66%), photography imagery (99%), card-grid (86%) and centered (83%) generic layouts, mono-everything typography (95%), warm+gradient default palette (97%), parallax/cursor-follow/spring/stagger/magnetic as the only tricks (80–96%) — used here only sparingly and in service of the resonance metaphor, not as the whole vocabulary. Pastoral-romantic tone (37%) avoided in favor of opulent-grand (5%).