# Design Language for hibiki.moe

## Aesthetics and Tone

hibiki.moe is **a pirate-radio transmission broadcast from inside a frozen waterfall** — *hibiki* (響き) means "echo, reverberation, the way a sound carries through a body or a canyon," and this site treats the entire viewport as a single resonating chamber that the visitor falls down through, top to bottom, like a stone dropped into a deep well.

The dominant aesthetic is **generative**: nothing decorative is hand-placed. Every ripple-ring, every interference pattern, every drifting node in the background is computed live from a small set of seed values (a wave-equation, a Perlin field, a Lissajous pair). The page should feel like it is *being generated while you watch it* — a system that is humming, self-organizing, never quite at rest. But it is generative with an attitude: this is not the soft generative-art-poster aesthetic. The tone is **edgy-rebellious** — a clandestine signal, a number-station, a frequency the authorities don't want you tuned to. Sharp sans-serif headlines stamped like censor-bars. Hairline metallic rules that look like the chrome edge of a 1970s receiver. Text that occasionally jitters as if the signal is being jammed. Copy that is terse, lower-case, defiant: "we don't broadcast to you. we resonate with you." "static is just a frequency they haven't named yet."

The mood sits between **awe and defiance** — vast cold space (navy depths, the hush of a held breath) punctuated by hot metallic glints and the low thrum of something alive transmitting in the dark. Imagine *Sigur Rós* album art rebuilt by a phreaker; imagine the Voyager Golden Record if it had been cut by a teenager in a basement; imagine the inside of a steel pan drum, mid-strike, photographed at 40,000 frames per second. Nature is present but it is **nature as a transmitter** — wind through a canyon, whale-song through a kilometre of ocean, the harmonic ring of a frozen lake, cicada-resonance, the standing-wave pattern of dunes. Not flowers. Echoes.

## Layout Motifs and Structure

The site is a **single-column resonance shaft** — one narrow column (max-width `640px`) centered in a vast dark field, scrolled vertically from a source-impulse at the top down through ever-widening rings of consequence. This is `single-column` taken literally: there is no sidebar, no two-up grid, no bento, no card-wall. There is *one channel*, and you travel down it. The empty navy margins on either side are not waste — they are the medium the signal travels through, and they are alive with generative motion.

**Vertical structure (top → bottom), each a full-viewport "chamber":**

1. **THE STRIKE** — black-navy void. A single point of light at center. On load it *pings* — a ring expands outward (border-animate), then a second, then a third, each fainter, until the title `hibiki` resolves at the centre as if shaken into existence by the resonance. Subtitle in tiny mono caps: `// 響き — the shape a sound makes when it refuses to die`.
2. **THE MEDIUM** — the column begins. A glassmorphic-card (frosted navy, 1px metallic border) floats in, holding the manifesto: three short defiant lines. Behind it, the full-bleed background is a live interference pattern — two sine sources beating against each other, rendered as concentric metallic contour lines on near-black.
3. **THE OVERTONES** — the column scrolls and the single card splits into a vertical stack of glassmorphic-cards, one per "harmonic": *fundamental*, *second*, *third*, *fifth*, *the dissonant one they cut from the record*. Each card has an animated border that travels its perimeter like a charge running a wire. Each card, on hover, makes the background interference re-tune toward its frequency.
4. **THE CANYON** — full-bleed break: a generative dune-field / canyon-wall, drawn as horizontal flowing contour lines (nature-as-resonance), parallax-drifting at three depths. A single line of large variable-fluid display text crosses it: `sound is the only thing that gets out of here intact.`
5. **THE STANDING WAVE** — back to the column. A long vertical Chladni-plate / cymatics figure animates down the centre of the column as you scroll — sand-grains (tiny metallic dots) reorganizing into nodal patterns. Beside it, paragraph copy about resonance, refusal, frequency. The text-column itself subtly *vibrates* at scroll-velocity.
6. **THE JAM** — the rebellious beat: everything stutters. A faux-"signal jammed" moment — the column glitch-shifts, headlines flicker between glyphs, a censor-bar slides across a line of text — then it *reasserts*: the rings re-form, the column snaps back, larger. Copy: `they can jam a frequency. they can't jam an echo.`
7. **THE FADE** — the final chamber. The column dissolves bottom-out into the navy. One last ring expands — slower, wider than all the others, off the edges of the screen. A single mono line: `// transmission continues. you are now a node.` and a faint generative starfield (resonating dots) that keeps moving forever.

Spatial rules: the column is **always exactly centered**; its width never changes but the background's energy does. Section transitions are *acoustic* — content doesn't slide in, it *resolves out of noise* (blur-to-focus + a settling jitter). Negative space is enormous and deliberate — at least 60% of any viewport is dark medium. There is **one** moment of horizontal motion (the censor-bar in THE JAM); everything else is strictly vertical, like a plumb-line dropped down a well.

## Typography and Palette

**Type system — `variable-fluid` is the spine of the design. Three Google Fonts, all variable, all sized with `clamp()` so every glyph is fluid across the viewport.**

- **Display / headlines: "Archivo" (variable, weights 100–900, full width-axis 62%–125%).** Archivo's grotesque, slightly compressed forms read like a transmitter's faceplate stencil. Headlines are set with `font-size: clamp(2.6rem, 8vw, 7rem)`, `font-variation-settings: 'wght' 800, 'wdth' 110`, letter-spacing `-0.02em`, lower-case. On THE STRIKE and THE CANYON the weight and width axes are *animated by scroll position* — the headline literally swells and tightens as if pressurized by the resonance. This scroll-driven `font-variation-settings` animation is the centerpiece of the variable-fluid choice.
- **Body / manifesto: "Sora" (variable, weights 100–800).** Sora is geometric, cool, a little severe — the right voice for terse defiance. Body copy at `clamp(1rem, 1.05rem + 0.25vw, 1.2rem)`, line-height `1.7`, weight `300`, color the pale steel `#C9D2DC`. The opening word of each manifesto card uses `'wght' 700` for a hard downbeat.
- **Mono / signal-chrome: "Spline Sans Mono" (variable).** All the `//` annotations, the frequency labels, the "transmission" lines, the censor-bar text. Uppercase, `letter-spacing: 0.18em`, `font-size: clamp(0.66rem, 0.7rem + 0.1vw, 0.82rem)`, color `#7E8B98`. This is the typeface of the machine talking about itself.

**Palette — `navy-metallic`, an underused scheme (≈2% of corpus). Deep, cold, with hot chrome.**

- `#05070D` — **Abyssal Navy** — the void / page background. Almost black, but with a blue undertow.
- `#0C1626` — **Hull Navy** — section-chamber backgrounds, the body of glassmorphic-cards (at ~55% opacity over the void).
- `#16263E` — **Receiver Navy** — mid-depth, used for the canyon walls and the deeper interference contours.
- `#C9D2DC` — **Cold Steel** — primary body text, the lighter contour lines.
- `#8FA0B5` — **Brushed Pewter** — secondary text, the standing-wave sand-dots.
- `#E7C873` — **Brass Filament** — the one warm accent: the source-point of light, the animated card-border charge, the headline glints on THE STRIKE. Used at < 6% of pixels — it is the spark, not the field.
- `#B7C3CE → #6E7C8A` — **Chrome Rule gradient** — for the 1px hairline metallic dividers between chambers; a linear-gradient that catches "light" mid-line so the rule looks like the edge of polished metal.
- `#3E5C7A` (glow only, never fill) — **Sonar Cyan-Navy** — the bloom around expanding rings; box-shadow / radial-gradient only, low alpha.

Contrast is deliberately *cold-high*: pale steel on abyssal navy, with the brass filament as the single point that the eye is allowed to want.

## Imagery and Motifs

**No photography. No character art. No stock illustration. Everything is `glassmorphic-cards` + live generative drawing on `<canvas>`/SVG, with `nature` reimagined as resonance phenomena.**

- **Glassmorphic-cards as the only "containers."** Every block of editorial content lives on a frosted navy panel: `background: rgba(12,22,38,0.55)`, `backdrop-filter: blur(18px) saturate(120%)`, `border: 1px solid rgba(183,195,206,0.22)` with a brighter top-left edge (an inner highlight) so it reads as a pane of dark smoked glass tilted toward a light source. Each card casts a soft long shadow into the navy and has a faint inner ring of the brass filament that pulses on hover. The glassmorphic-cards imagery is used at ≈8% of corpus, and never (in the corpus) as the *sole* surface treatment over a generative field — here it is.
- **The interference field (full-bleed, all chambers).** Two-to-four point sources on a canvas; at each pixel the summed sine amplitude is mapped to a contour band. Result: concentric, beating, slowly-rotating metallic rings on near-black — the visual signature of the site. Pewter/steel lines, abyssal fill. Re-tunes (source frequencies lerp) on card hover and scroll.
- **Border-animate as a recurring motif** — not just on cards: a thin brass charge runs the perimeter of THE STRIKE's title, runs down the chrome rules between sections, traces the edge of the canyon. Borders are *circuits*; the site is *energized*.
- **Nature-as-resonance imagery:** generative dune/canyon contour walls (THE CANYON); a Chladni/cymatics figure of "sand on a vibrating plate" (THE STANDING WAVE) drawn from the classic `cos(n·π·x)·cos(m·π·y) − cos(m·π·x)·cos(n·π·y) = 0` family; a faint whale-song / cicada spectrogram texture behind the manifesto (horizontal striations). Wind, water, stone — but only the parts of them that *ring*.
- **Ripple-rings** — the expanding circular pulse — bookend the experience (THE STRIKE, THE FADE) and punctuate transitions. Each ring is an animated 1px stroke that fades as `1/r`.
- **The censor-bar** — one rebellious motif: a solid bar of `#05070D` with a 1px brass underline that slides across a line of text in THE JAM, briefly "redacting" it before retreating.
- **Generative starfield finale** — resonating dots that never stop, each oscillating on its own tiny Lissajous orbit; the page admits it will keep transmitting after you leave.
- **Grain.** A 2.5%-opacity SVG fractal-noise overlay over everything, fixed, so the navy reads as *broadcast static*, not as a flat fill.

## Prompts for Implementation

Build hibiki.moe as **one HTML file, one CSS file, one ES module**. No framework, no build step, no service worker, no cookie banner. The page is a ~6-minute vertical fall down a resonance shaft. There is **no CTA, no pricing block, no stat-grid, no feature-grid, no testimonial wall, no logo cloud, no signup form, no FAQ accordion, no team page, no chatbot, no nav bar, no hero-with-button.** It is a transmission, not a funnel.

**Document order (top → bottom) — each `<section>` is a `min-height: 100svh` chamber:**

1. **THE STRIKE** — on `DOMContentLoaded`: a brass point at center, then three `requestAnimationFrame`-driven expanding ring strokes (border-animate / ripple), each spawning ~600ms after the last. As the third ring passes, the `hibiki` title (Archivo, huge, lower-case) does a 5-frame jitter-settle into place, its `font-variation-settings 'wght'/'wdth'` springing to rest. Mono subtitle types in below: `// 響き — the shape a sound makes when it refuses to die`. Then a single down-chevron made of two animated 1px strokes.
2. **THE MEDIUM** — column opens; one glassmorphic-card slides up + blurs into focus carrying three lines of manifesto (Sora, first word heavy). Background canvas starts the interference field. A chrome-rule hairline divides this from the next chamber, its brass charge running left→right on enter.
3. **THE OVERTONES** — the card "splits" into a vertical stack of 5 glassmorphic-cards (stagger reveal, blur-to-focus, ~120ms apart). Each card: a frequency label (mono), a one-line title (Archivo), two lines of body. Animated brass border runs each card's perimeter on a loop; on hover the card lifts slightly, its inner brass ring pulses, and the background interference lerps its source frequencies toward that harmonic over ~800ms. The "dissonant one they cut from the record" card has a permanently jittering border and a faint glitch on its title text.
4. **THE CANYON** — full-bleed: a `<canvas>` generative canyon-wall of stacked flowing contour lines (Perlin-warped horizontals) parallax-drifting at 3 z-depths against scroll. One enormous variable-fluid line of Archivo crosses it — `sound is the only thing that gets out of here intact.` — whose width-axis stretches with scroll so the words *spread* as you pass.
5. **THE STANDING WAVE** — column returns. A tall SVG/canvas Chladni figure animates down the column centre as you scroll (sand-dots in Brushed Pewter migrating to nodal lines, re-forming for `n,m` pairs `(2,1) → (3,2) → (5,3)`). Body copy beside/around it about resonance and refusal; the text column applies a tiny scroll-velocity-linked `translateX` jitter (≤1.5px) so the type seems to hum. End with a chrome-rule.
6. **THE JAM** — scroll-triggered: the whole column briefly `filter: blur + translate`-glitches; headlines flicker between Unicode glyph sets (3–4 frames); a `#05070D` censor-bar with a brass underline slides across one body line and back; the interference field goes momentarily to harsh static (high-frequency noise). Then everything **reasserts** — rings re-form bigger, column snaps to a slightly larger scale, copy resolves: `they can jam a frequency. they can't jam an echo.`
7. **THE FADE** — the column's last card dissolves bottom-out (mask-image gradient to transparent into the navy). One final, slow, very large ripple-ring expands past all four screen edges. Mono line settles: `// transmission continues. you are now a node.` Behind it, a forever-running generative starfield of resonating dots on tiny Lissajous orbits. Tiny footer: `hibiki.moe — a frequency, not a brand. © 2026.` in Spline Sans Mono, no links.

**Motion & technique notes:**
- Honor `prefers-reduced-motion`: freeze the interference field on a single beautiful frame, drop the jitter/glitch/jam, keep the layout and one slow ripple.
- All scroll work via `IntersectionObserver` + a single rAF loop reading a cached `scrollY`; never bind heavy work to `scroll`.
- The interference / canyon / Chladni / starfield each get their own small canvas; keep them retina-aware (`devicePixelRatio`) and pause off-screen ones.
- `font-variation-settings` on headlines is animated by mapping a clamped `(elementCenter − viewportCenter)` to `wght` and `wdth` — this is the load-bearing "fluid" effect; make it spring, not linear.
- Brass (`#E7C873`) is rationed: source-point, card-border charges, chrome-rule glints, censor-bar underline, the final ring. Nowhere else.
- Storytelling first: the visitor should leave feeling they tuned into something and were quietly conscripted by it — never sold to.

## Uniqueness Notes

**Differentiators from the 240-design corpus:**

1. **The page is one literal "resonance shaft."** Strictly `single-column` (19% of corpus, but rarely used as the *entire* spatial concept) — one narrow centered channel falling through full-viewport "chambers," with the vast dark margins treated as the live conducting medium. No grid, no bento, no card-wall layout anywhere.
2. **`navy-metallic` palette (≈2% of corpus) crossed with an `edgy-rebellious` tone (≈2% of corpus)** — a near-unrepresented pairing. Cold abyssal navy + brushed-pewter type + a single rationed brass filament, voiced as a clandestine pirate transmission, not the usual calm/luxe navy.
3. **`variable-fluid` typography as a scroll-physics instrument, not a gimmick** — Archivo's `wght` *and* `wdth` axes are driven by element-to-viewport position so headlines pressurize and stretch with the "resonance." Variable-fluid is only ≈3% of corpus and almost never wired to scroll like this.
4. **Generative aesthetic with attitude** — `generative` (≈12%) here is interference fields, Chladni cymatics, Perlin canyon-walls and Lissajous starfields, *all* re-tuning on interaction — but styled as jammed-signal rebellion (glitch, censor-bar, "the JAM" chamber), not the soft generative-art-poster look that dominates the corpus.
5. **`glassmorphic-cards` (≈8%) as the SOLE container surface floating over a live generative field** — every editorial block is a pane of smoked navy glass with an animated brass `border-animate` charge (border-animate ≈3% of corpus), and nothing else in the layout is a "card."
6. **`nature` motif (17%) reframed entirely as resonance phenomena** — dunes, canyons, whale-song spectrograms, frozen-lake ring, cicada harmonics — never flowers, leaves, or landscapes-as-scenery. Nature only appears when it *rings*.

**Avoided overused patterns (frequency analysis):** no `hand-drawn` aesthetic (96%), no `photography` imagery (99%), no `card-grid` (86%) or `full-bleed`-grid-mush, no `gradient`/`warm` palette default (97%/97%), no `cursor-follow`/`magnetic`/`spring`-everything reflexes (87%/80%/85%) beyond the few places they're earned, no `parallax`-as-only-trick (96% — used here once, on the canyon, deliberately), no `mono`-as-the-whole-typeface (95% — mono is only the signal-chrome voice here). No pricing, no stat-grid, no CTA stack.

Chosen seed: **aesthetic: generative, layout: single-column, typography: variable-fluid, palette: navy-metallic, patterns: border-animate, imagery: glassmorphic-cards, motifs: nature, tone: edgy-rebellious**
<!-- DESIGN STAMP
  timestamp: 2026-05-10T12:58:15
  seed: unspecified
  aesthetic: hibiki.moe is **a pirate-radio transmission broadcast from inside a frozen water...
  content_hash: c264d58a1ab0
-->