# Design Language for hibiki.quest ## Aesthetics and Tone Hibiki.quest is a dark-mode HUD-overlay submersible - the page is rendered as the heads-up display of a deep-sea explorer's helmet, with mono typography, coastal-blend palette flowing from shore-shallows to abyssal depths, marble-textured backgrounds suggesting submerged ancient ruins, and wave-form motifs threading through every overlay. The aesthetic merges contemporary HUD interface design (Star Citizen, No Man's Sky cockpits, Apple Vision Pro overlays) with the atmospheric weight of deep-water exploration footage. Tone is calm-serene: this is a quiet underwater traversal, not a frantic dive. "Hibiki" (resonance) frames the page as listening to the sea's standing waves. Inspiration: the dive sequences of The Abyss, ROV deep-sea footage from NOAA, the chilly cold-blue palettes of Werner Herzog's documentaries, and the typography of antique nautical charts. ## Layout Motifs and Structure Composition is HUD-overlay: a single full-bleed background tableau (marble-textured deep-water imagery slowly drifting via parallax) with multiple floating glassy HUD panels overlaid in fixed corner-zones. Top-left HUD: depth gauge, water-pressure, current direction. Top-right HUD: navigation chevrons, current bearing. Bottom-left HUD: log entries scrolling slowly. Bottom-right HUD: a sonar-sweep visualization with wave-form pulses. The central viewport remains uncluttered to let the marble-deep imagery dominate. As the visitor scrolls, the background shifts from coastal-shallow blues to abyssal-dark, and HUD panels update their readings. Mobile collapses HUD into a single bottom-bar reading. ## Typography and Palette Headlines use Space Mono Bold at clamp(2.4rem, 5.5vw, 4.6rem), a stout monospace with HUD-instrument feel, weight 700, all uppercase with -1% tracking. Subheads use Space Mono Regular at 1.1rem uppercase letter-spacing 0.10em. Body copy and HUD readings use JetBrains Mono Regular at 0.95rem with 1.65 line-height. HUD numeric readouts use JetBrains Mono SemiBold at 1.2rem tabular-figures, locked tabular alignment. Palette is coastal-blend: shore-azure #4A8FB8 (shallow-water tier), kelp-blue #2E6480 (mid-depth tier), abyssal-navy #0A1A2A (deep tier, page background), bone-cream #E8E0CC (HUD type), pearl-cyan #8DC8E0 (sonar accent), and one warning-amber #E8AA40 (used only when HUD panel data crosses a threshold). HUD panels are 30% opacity navy with 1px pearl-cyan inner-stroke. ## Imagery and Motifs Imagery is marble-texture: the full-bleed background carries large-scale marble-textured imagery - cracked submerged ancient stone with deep cool-blue veining - suggesting Atlantean ruins on the ocean floor. The marble texture is rendered via SVG patterns with multiple veining layers (4-6 paths in pearl-cyan at 25% opacity). Motifs are wave-forms: continuous SVG wave-form pulses ride along the bottom-edge of each HUD panel, breathing in and out as oscillation patterns; the sonar-sweep panel renders an actual radial wave-form animation; and tiny wave-glyph dingbats serve as paragraph terminals. A recurring "hibiki sonar pulse" glyph - three concentric circles with a single wave-line bisecting them - anchors the bottom-right HUD. ## Prompts for Implementation Build hibiki.quest as a deep-sea HUD experience. Implement morph pattern across all HUD wave-form oscillations: each wave-form SVG path interpolates between 3-5 polygon variants on independent 8-12 second loops, creating continuous oscillating sea-rhythm. The sonar-sweep panel uses CSS conic-gradient rotating once per 4 seconds with a wave-form sweep-line that pulses outward; bleeps appear when targets are "detected" (tiny circle markers fading in/out at random intervals). On scroll, the background marble-imagery shifts from shore-azure to abyssal-navy via a long 2400ms gradient interpolation. HUD numeric readouts continuously update with small counter-roll animations every 2-4 seconds (depth +0.3m, pressure +0.04bar). Cursor over HUD panels triggers a 1.5x pearl-cyan glow pulse over 200ms. Avoid CTA banks - bottom-left log panel shows scrolling sonar-detected events as small mono entries. The narrative is calm-serene: "Depth 124m. Quiet currents east-by-northeast. A faint resonance from below." ## Uniqueness Notes - Renders the entire page as a deep-sea HUD-overlay with floating corner-zoned glassy panels, leaving the central viewport uncluttered for marble-textured ocean imagery. - Implements morph pattern on continuous wave-form SVG path-interpolations across all HUD panels, producing literal breathing oscillation of every readout. - Combines coastal-blend palette that shifts from shore-azure to abyssal-navy as the visitor scrolls, simulating actual depth descent. - Chosen seed/style: dark-mode aesthetic, hud-overlay layout, mono typography, coastal-blend palette, morph pattern, marble-texture imagery, wave-forms motifs, calm-serene tone. - Frequency analysis avoidance: sidesteps overused centered/card-grid layouts (96%/93%), mysterious-moody tone (71%), warm-gradient default palettes (95%/78%), photography-default imagery (90%), parallax-as-default (96%). Mono typography (82%) is recontextualized as HUD-instrument readouts. Leans into underused hud-overlay (2%), coastal-blend (3%), morph (7%), marble-texture (4%), wave-forms motifs (2%), and calm-serene tone (4%).