# Design Language for hibiki.day
## Aesthetics and Tone
hibiki.day is **The Hydrophone** — a cinematic, full-bleed descent into deep water where the entire site is staged as a single uninterrupted *dive* down a sonar listening shaft, and every section is a depth band that the visitor sinks through while the abyss "listens back." The name 響き (*hibiki* — echo, resonance, reverberation) is taken completely literally: this is a site about **sound that has travelled a long way through cold dark water and come back changed**. The screen behaves like a research submersible's viewport — letterboxed top and bottom with thin matte bars, a slow ambient drift, and a soft volumetric haze that thickens as you go deeper. Every "echo" the page emits is a luminous concentric ring that expands, fades, and leaves a faint after-image.
The tone is **whimsical-creative** (7% in the corpus — deliberately uncommon for an ocean/deep-water concept, which the corpus almost always renders as either calming-spa or moody-mysterious). Here the abyss is *curious and a little mischievous*: copy is written as if the deep water itself is a friendly, slightly dramatic narrator who is delighted you came down to visit — "Oh! A signal. Hold still, I want to hear all of it." Captions arrive like overheard sonar-operator banter. It is cinematic in framing but never solemn; it has the playful gravity of a Cousteau documentary narrated by someone who keeps getting distracted by glowing things. The mood word is **wonder**, not *serenity* and not *dread*.
Reference touchstones: the opening dive sequences of underwater nature films; the warm-amber-on-deep-blue glow of a vintage analog oscilloscope; bathysphere portholes; the visual language of passive sonar waterfalls; and the way a single dropped stone makes rings you can watch for a surprisingly long time.
## Layout Motifs and Structure
The layout is **immersive-scroll** (7% in the corpus — deliberately chosen because it *is* the dive). There is no top navigation bar floating over a hero. There is no centered max-width column. There is no card grid. Instead the viewport is **the porthole**, fixed, letterboxed, and the world scrolls *through* it as a continuous vertical water column. A persistent thin **depth gauge** runs up the left edge — a faint vertical rule with tick marks and a small luminous bead that rides your scroll position, labelled with whimsical pseudo-depths ("0 m — the bright loud surface", "−400 m — where the light gives up", "−2,000 m — the quiet floor where echoes come to rest").
Structure, top to bottom, as one unbroken descent:
1. **Surface band** — bright, almost overexposed: sun-shafts, ripple caustics, the page title set huge and geometric, half-submerged. The first scroll *pulls you under* with a brief darkening wipe.
2. **Twilight band** — blue deepens; the first **echo ring** is emitted from the center of the porthole and expands past the frame. Intro copy floats up word-by-word as the rings pass through it.
3. **Listening band** — the conceptual core: a large abstract-tech instrument occupies the center — a stylized hydrophone array drawn as concentric arcs and node points. As you scroll, **zoom-focus** drives the storytelling: the viewport pushes *in* hard on a single sonar node (everything else blurs and dims to bokeh), holds while a caption is heard, then pulls back out to reveal the next node further down.
4. **Resonance band** — the screen fills edge-to-edge with a slow vertical "waterfall" of faint horizontal scan lines (the classic passive-sonar plot), with three or four bright traces that the camera zoom-focuses onto one at a time, each labelled like a found-sound field note.
5. **Floor band** — deepest, darkest, quietest: a wide cinematic still of the sediment floor; a final, very large echo ring expands so slowly it barely seems to move; the closing line settles like silt.
Negative space is intentional and *vertical* — long, quiet, near-empty stretches of dark water between bands so that each new echo or zoom feels earned. Composition is widescreen and horizon-aware: content sits on implied horizontal "depth lines," never in boxes.
## Typography and Palette
**Typography — futura-geometric (3% in the corpus, deliberately chosen).** The dive needs the clean, optimistic, mid-century-expedition feeling of geometric capitals — the lettering of old bathyscaphe hull plates and National-Geographic-era dive charts — paired with a quiet humanist sans for running copy and a true monospace for the "instrument readout" elements (depths, timestamps, frequencies).
- **`Jost`** (Google Fonts) — the Futura-style geometric workhorse. Used for the huge half-submerged page title, all depth-band labels, and section headers. Set in wide letter-spacing, often uppercase, sometimes outlined (transparent fill, hairline stroke) so titles read like they're etched into glass.
- **`Questrial`** (Google Fonts) — a single-weight geometric sans used sparingly for short luminous captions and the playful "narrator" interjections; its near-circular bowls echo the ring motif.
- **`Mulish`** (Google Fonts) — calm, low-contrast humanist sans for body copy and longer paragraphs; reads cleanly at small sizes against dark water.
- **`Spline Sans Mono`** (Google Fonts) — the instrument typeface: depth gauge ticks, frequency tags ("18.4 Hz"), timecodes, the sonar-waterfall labels.
**Palette — ocean-deep (3% in the corpus, deliberately chosen).** A vertical gradient of one continuous descent, warm luminous accents punching through the cold:
- `#EAF6FB` — **Surface Glare** (near-white, the overexposed top band, caustic highlights)
- `#7FB9CE` — **Sunlit Shallows** (the gauzy upper-water blue)
- `#1E5F7E` — **Twilight Blue** (mid-descent body water)
- `#0C3550` — **Listening Blue** (the core instrument band)
- `#07223A` — **Resonance Blue** (sonar-waterfall ground)
- `#04101F` — **The Floor** (deepest near-black water; page base)
- `#F4B860` — **Amber Echo** (the warm sonar-ping ring; primary accent — every echo, every focused trace, every active gauge bead)
- `#6FE3C4` — **Bioluminous Mint** (rare cool accent — drifting particles, a secondary node highlight)
- `#C8D6DE` — **Hull Plate** (muted blue-grey for instrument linework and secondary text)
Gradients are strictly vertical and slow; accents glow (soft outer bloom) rather than sit flat; nothing is pure black — the floor is `#04101F`, water with the lights off.
## Imagery and Motifs
**Imagery — photography (99% in the corpus — used here, but treated cinematically, not as stock).** Photographs appear only as **full-bleed depth plates**: a few real wide images of *deep water and the sea floor* — sun-shafts piercing the surface from below, a dark mid-water void with suspended marine snow, ripple caustics on sand, a sediment plain stretching to a soft horizon. Each is colour-graded into the band's palette (cool teal-to-navy duotone), darkened, and slightly grained so it reads like submersible footage, never like a travel brochure. No fish-as-mascots, no smiling divers, no aquarium glass.
**Motifs — abstract-tech (3% in the corpus, deliberately chosen) as the load-bearing visual system:**
- **The echo ring** — the signature mark. Thin amber concentric circles that emanate from a point, expand, fade, and leave a ghost. Used at section starts, behind headers, as the loading state, and as the cursor's wake (the pointer drops a small ring every time it pauses).
- **The hydrophone array** — a stylized passive-sonar listening node: a center dot, three or four arcs of increasing radius, small tick-nodes along each arc, faint connecting lines. Drawn in `#C8D6DE` linework; the active node lights amber. This is the central illustrated object of the "listening band."
- **The sonar waterfall** — a field of slow-drifting faint horizontal scan lines (the spectrogram-style passive-sonar plot), with a few bright amber traces; the visual signature of the "resonance band."
- **Marine snow / particles** — sparse slow-falling motes drifting *up* relative to the descending camera, a couple glowing mint; they convey depth and motion without literal sea life.
- **The depth gauge** — a hairline vertical rule, monospace tick labels, a glowing amber bead riding scroll position; equal parts instrument and progress indicator.
- **Letterbox bars** — thin matte top/bottom bars present throughout to keep the "cinematic porthole" frame, occasionally carrying a faint timecode or depth readout in the corner.
## Prompts for Implementation
**Build one full-screen, scroll-driven cinematic descent. Vanilla HTML + CSS + ES modules. No framework, no router. No CTA stack, no pricing table, no stat-grid, no card deck.**
**HTML structure:**
```
...huge half-submerged title......word-by-word intro......zoom-focus targets......full-bleed sediment plate + closing line...
```
**CSS:**
- Page base `#04101F`. Each `.band` has a tall `min-height` (140–220vh) and a vertical-gradient background blending into its neighbours so the whole column reads as one continuous water gradient (`Surface Glare → … → The Floor`). Use a fixed pseudo-element of layered radial/linear gradients for the volumetric haze, opacity tied to scroll depth via a CSS custom property `--depth`.
- `.letterbox` bars: ~5vh, `#04101F`, fixed top and bottom, subtle inner shadow; one corner carries a `Spline Sans Mono` readout (`-0420 m · 18.4 Hz`).
- `.depth-gauge`: fixed, left ~24px, hairline `#C8D6DE` at low opacity, `Spline Sans Mono` tick labels with the whimsical pseudo-depths; `.bead` is a small `#F4B860` dot with a `box-shadow` bloom, `top` driven by scroll fraction.
- Titles in `Jost`, uppercase, `letter-spacing: 0.12em+`, big (`clamp(3rem, 9vw, 8rem)`); the surface title uses `-webkit-text-stroke` with transparent fill for the "etched in glass" look, with the lower portion masked by the descending water.
- Accents (`#F4B860`, `#6FE3C4`) always get a soft glow via `filter: drop-shadow()` or layered `box-shadow`; never flat.
- `prefers-reduced-motion`: freeze the camera, render echo rings static at mid-expansion, stop particle drift, keep all content visible.
**JS (ES modules, scroll-as-timeline):**
- `dive.js` — maps `scrollY` to a normalized dive progress; writes `--depth` (0→1) to `:root`; moves the depth-gauge bead; updates the letterbox readout (depth + a faux frequency that drifts).
- `echoes.js` — emits an amber concentric-ring burst (canvas) at the start of each band and at a slow ambient cadence; rings ease-out in radius, fade opacity, leave a faint ghost ring; also fire a small ring at the cursor position whenever the pointer is still for >500ms (cursor wake).
- `zoom-focus.js` — the storytelling engine for the listening + resonance bands: as a `.nodes > li` (or a `.waterfall` trace) enters a center zone, animate a `transform: scale()` push-in on that element + a strong `filter: blur()` and dim on its siblings (bokeh), hold while its caption is on screen, then pull back out before advancing to the next. This zoom-focus beat is the primary section transition — lean on it.
- `particles.js` — sparse canvas motes drifting upward relative to scroll, slight horizontal sway, a few rendered in `#6FE3C4` with a glow.
- `reveal.js` — body copy and captions rise + fade in word-by-word (or line-by-line) as an echo ring passes through their vertical position.
Narrate everything in the deep-water narrator's whimsical-curious voice. Bias hard toward the full-screen cinematic dive — long quiet stretches between events, every echo and every zoom-in earned by darkness and stillness around it.
## Uniqueness Notes
Deliberate departures from the 240 designs already in the corpus and from the usual ocean/deep-water visual canon:
1. **Hibiki = literal acoustics, not literal sea life.** The corpus treats "ocean" sites as either spa-calm or moody-mysterious and fills them with fish, bubbles, and divers. This one is a *passive-sonar listening station*: the protagonist is the **echo ring**, the central object is a **hydrophone array**, and the whole visual grammar is abstract-tech sonar plots — there is not a single tropical-fish, water-bubble, or scuba-diver motif anywhere.
2. **A cinematic descent with no nav, no cards, no CTAs.** Built as one uninterrupted letterboxed dive driven entirely by scroll; immersive-scroll (7%) + cinematic (8%) + zoom-focus (2%) used together, where zoom-focus *is* the section-transition mechanic — push in on one glowing sonar node, blur everything else to bokeh, hold, pull back. Most corpus sites lean on parallax/cursor-follow/stagger; this one makes the rare zoom-focus pattern the spine of the storytelling.
3. **Whimsical-creative tone over a deep-ocean palette — an unusual pairing.** ocean-deep (3%) palettes in the corpus skew calm-serene or mysterious-moody; here the abyss is a *delighted, slightly dramatic narrator* ("Oh! A signal. Hold still."), giving the cinematic dive a curious, playful warmth instead of solemnity — reinforced by warm amber (`#F4B860`) sonar glow punching through the cold ocean-deep gradient.
4. **Futura-geometric expedition lettering, not the corpus-default mono or humanist.** `Jost` titles, etched-in-glass outlined caps, `Spline Sans Mono` only for instrument readouts — the mid-century-dive-chart look rather than the ubiquitous terminal-mono or generic grotesk.
Chosen seed/style: **aesthetic: cinematic, layout: immersive-scroll, typography: futura-geometric, palette: ocean-deep, patterns: zoom-focus, imagery: photography, motifs: abstract-tech, tone: whimsical-creative**
Avoided per frequency analysis: hand-drawn (96%) and glassmorphism (66%) aesthetics; card-grid (86%) / centered (83%) / full-bleed-as-generic-hero (94%) layouts; gradient (97%) + warm (97%) as undifferentiated palette defaults — used here only as a *vertical descent gradient* with a single warm accent; parallax (96%) / cursor-follow (87%) / spring (85%) / stagger (80%) / magnetic (80%) as the motion crutch — replaced by zoom-focus (2%) and echo-ring emission as the primary patterns; mono (95%) as default body type — confined to instrument readouts only.