# Design Language for soning.stream ## Aesthetics and Tone soning.stream is **an anechoic chamber rendered as a website** — a place where sound is not played but *drawn*, where the word "soning" is read as a portmanteau of *sound* and *zoning*: the quiet art of mapping where a noise begins, swells, and dissolves into nothing. The aesthetic is **generative-art minimalism in service of acoustics** — every visual element on the page is a real-time computed curve, a spectrogram smear, a standing wave, a phase circle — never a photograph, never a stock illustration, never a 3D render. The mood is **zen-contemplative**: hushed, patient, attentive, like sitting in a recording booth at 3am with the monitors off, watching only the meters. Imagine the visual language of a 1970s Buchla synthesizer manual — those austere line-drawings of envelopes and LFO shapes — crossed with the generative plotter art of Vera Molnár, then printed not on white paper but on the warm grey of acoustic foam. There is no "brand color" in the marketing sense; there is a *floor noise* color (a near-black charcoal) and a *signal* color (a single luminous chartreuse) and the space between them is where everything happens. The site does not shout. It listens, and asks you to listen with it. This is **not** a music-streaming-service landing page. There are no album thumbnails, no play-count stats, no "trending now" carousels, no subscription tiers. soning.stream treats sound as a *physical phenomenon to be contemplated*, the way a planetarium treats stars — something vast and quiet, rendered in lines of light against the dark. ## Layout Motifs and Structure The page is a **single continuous vertical scroll structured as an oscilloscope sweep** — `immersive-scroll`, top to bottom, no fixed navigation chrome, no breadcrumbs. As you scroll, a thin horizontal *trace line* (the "playhead") stays pinned at the vertical center of the viewport, and the content scrolls *under* it like tape past a head. Sections are not boxes; they are **passages of a waveform**, each one a different acoustic regime. - **The Trace Line.** A 1px chartreuse horizontal rule, fixed at 50vh, full viewport width. Everything on the page is measured against it: text rises from below it, decays above it, waveforms cross it. It is the single constant. - **No card-grid, ever.** Content is laid out in **horizontal "channels"** stacked vertically — like the tracks in a multitrack editor. Each channel is full-bleed wide, a few hundred pixels tall, and contains either: a generative waveform, a passage of text typeset on a baseline grid, or a phase-circle diagram. Channels are separated by hairline rules, never by whitespace gaps alone. - **Asymmetric within the channel.** Text never centers. It hangs off the left edge at a fixed 8vw margin, ragged-right, with generous leading. Numbers, timestamps, and frequency labels sit flush-right in a mono column at 8vw from the right edge. The middle is left for the waveform to breathe. - **The Spectrogram Band.** One section — roughly the page's midpoint — is a full-viewport-height `` that renders a slow-scrolling spectrogram (a generative one, not from audio), with text overlaid in negative space. This is the page's "loudest" moment, visually. - **Decay ending.** The final channel is mostly empty: the waveform amplitude shrinks toward the trace line, the text gets smaller and greyer, and the page ends not with a footer block but with a single faint mono line — like the tail of a reverb. The grid is a **baseline grid at 8px**, with a horizontal frequency grid (logarithmic spacing — 20, 200, 2000, 20000) faintly visible as vertical guide lines on every canvas. The composition reads as a single instrument's readout, not a collection of pages. ## Typography and Palette **Fonts (Google Fonts only — two voices: a humanist sans for the prose, a precise mono for all measurements):** - **Prose & Headings — *Spectral* (serif, weights 300 / 400 / 600, with the italic).** Yes, named for a coincidence, but the choice is real: Spectral is a screen-first serif with low contrast, a tall x-height, and a calm, breathing rhythm — it reads like quiet narration. Headings are set in Spectral 300 at large sizes (clamp 2.5rem → 5rem), letter-spacing slightly negative, never bold. Body copy is Spectral 400 at 1.125rem with 1.7 line-height. Pull-quotes and section epigraphs use Spectral 400 *italic*. The serif gives the page its hush; nothing here is a "headline" — everything is a sentence being spoken slowly. - **Measurements, labels, timestamps, axis ticks — *Space Mono* (weights 400 / 700).** Every number on the page — frequencies in Hz, timestamps, dB values, the playhead position readout, channel indices — is Space Mono, uppercased where it's a label, at 0.75rem with wide tracking (0.08em). Space Mono's slightly mechanical, slightly retro feel evokes test equipment. It is the page's "instrumentation" voice. Never used for prose. - **Pairing logic:** Spectral (organic, flowing, the *sound*) against Space Mono (rigid, gridded, the *measurement*). The whole page is the conversation between a phenomenon and the instrument trying to capture it. **Palette — a near-monochrome with one signal color:** - `#0C0E0D` — **Floor Noise.** The page background. Not pure black — a charcoal with the faintest green undertone, like the inside of a darkened studio. - `#1A1D1B` — **Channel Fill.** Subtle elevation for alternate channels and the spectrogram band's darkest registers. Barely distinguishable from Floor Noise — felt more than seen. - `#E8E6DF` — **Paper.** Off-white, warm, slightly aged — the color of all prose text. Never pure `#FFFFFF`; that would be too clinical. - `#8A8F88` — **Dim Signal.** Muted sage-grey for secondary text, axis labels, decayed states, and the faint frequency grid lines. - `#C7F23D` — **Signal.** The one luminous chartreuse — the trace line, active waveforms, the playhead, hover states, the spectrogram's hottest cells. Used sparingly and with intent; it should feel like a meter peaking. This is the only saturated color in the entire design. - `#5B6B2E` — **Signal, Decayed.** A darkened, desaturated chartreuse for waveform tails, completed-section markers, and the gradient floor of the spectrogram. The color Signal becomes as energy leaves it. No gradients of the "purple-to-pink" kind anywhere. The only gradients are *energy gradients* — Signal fading to Signal-Decayed to transparent, mimicking the decay of a sound. ## Imagery and Motifs **Everything visual is generated, in-browser, with `` and inline SVG. Zero raster images. Zero photography. The motif vocabulary is entirely drawn from acoustics and signal processing:** - **Waveforms (the hero motif).** Continuous, hand-built oscillating curves drawn on canvas — sums of sine waves with slowly drifting phase, so they're never static. Each channel has one. They are line-only, 1.5px stroke, Signal color, occasionally with a faint Signal-Decayed "ghost" trailing behind. They animate continuously but *slowly* — periods of several seconds — so the page feels alive but never busy. - **The Spectrogram.** A scrolling time-frequency plot rendered as a grid of tiny rectangles, color-mapped from Floor Noise (silence) through Signal-Decayed to Signal (peak). Generated from layered noise functions, not real audio — it should look like the breathing texture of a room tone. Text sits in its quietest regions. - **Phase Circles.** Small SVG diagrams — a circle, a rotating radius vector, a projected sine — used as section markers and as inline "figures" beside relevant prose. Drawn in Dim Signal with the vector tip in Signal. They rotate slowly, in sync across the page (one shared clock). - **Envelope Shapes.** The classic ADSR (attack-decay-sustain-release) silhouette, used as a decorative rule between major sections — a single polyline that rises sharply, dips, plateaus, and falls. Rendered in Dim Signal, 1px. - **The Frequency Grid.** Faint vertical lines at logarithmic intervals, labeled in Space Mono at the bottom edge of each canvas: `20 · 200 · 2K · 20K`. Always present, always faint, the page's quiet skeleton. - **Standing-wave nodes.** Small chartreuse dots that appear at the zero-crossings of waveforms, pulsing very gently — like the still points on a vibrating string. - **No icons in the UI-library sense.** If a glyph is needed, it's a tiny SVG schematic drawn in the same line-language: a speaker cone is two arcs and a trapezoid; a "mute" is an X over those arcs. ## Prompts for Implementation Build soning.stream as **a single HTML file, one CSS file, one ES module** — a roughly 70-second contemplative scroll through "the anatomy of a single sound," from its onset to its silence. There is no CTA, no signup, no pricing, no testimonials, no stat grid, no contact form. There is only the sweep. **Narrative structure (vertical immersive-scroll, the trace line fixed at 50vh, content scrolling under it):** 1. **Onset.** Page loads to near-darkness (Floor Noise). The trace line draws itself across the viewport — a `path-draw-svg` animation, left to right, ~1.2s, in Signal. Then a flat horizontal line begins to *quiver* — barely — and the wordmark "soning" rises from below the trace line in Spectral 300, with "stream" trailing in Space Mono. A single epigraph in Spectral italic: something about sound being shape in time. Frequency grid fades in faintly behind everything. 2. **Attack.** As the reader scrolls, the waveform under the trace line *jumps* — sharp transient, then settles into oscillation. Prose channel: a passage on the moment a sound begins, typeset left-hanging at 8vw, with a Space Mono timestamp counting up flush-right. A phase circle figure sits beside the text, starting to rotate. 3. **Body / Timbre.** Several stacked channels, each a different waveform character (a pure sine, a buzzing saw, a hollow square, filtered noise) — each labeled in Space Mono with its "frequency content." Text channels alternate with waveform channels. The waveforms `morph` smoothly into one another as the relevant channel scrolls past the trace line (use `scroll-triggered` interpolation, eased with a `spring`). 4. **The Spectrogram (apex).** Full-viewport ``, slow-scrolling time-frequency texture, color-mapped Floor-Noise→Signal-Decayed→Signal. Prose overlaid in the canvas's quietest cells, in Paper. This is the visual peak — the densest, most luminous moment. A line about how every sound is secretly a chord. 5. **Decay.** Channels begin to thin. Waveform amplitudes shrink toward the trace line with each scroll. Text gets smaller (clamp down) and shifts from Paper toward Dim Signal. The spectrogram's afterimage fades. The ADSR envelope rule appears, its release tail pointing toward the end. 6. **Silence.** The final channel: the waveform is now a flat line, indistinguishable from the trace line. One last sentence in Dim Signal, small. The trace line itself fades — a slow `fade-reveal` in reverse — until the page is just Floor Noise. A single faint Space Mono line at the very bottom: a timestamp, the word "—soning—", nothing else. No footer block. The reverb tail ends. **Animation & interaction notes:** - **Continuous canvas animation, but slow.** Waveforms breathe on multi-second periods. Phase circles share one global clock and rotate together. Standing-wave nodes pulse gently. Nothing flashes, nothing strobes. The page should feel like a held breath. - **Scroll-driven `morph` and `path-draw-svg`** are the primary scroll patterns: waveforms interpolating between shapes, the trace line and envelope rules drawing themselves, text channels using a quiet `fade-reveal` (opacity + 12px rise, ~600ms, eased). - **Cursor reactivity, minimal:** the waveform nearest the cursor gets a faint perturbation at the cursor's x-position — a tiny bump in the curve, like touching a string — decaying back over ~1.5s. That's it. No magnetic buttons, no cursor-trails, no tilt-3d cards. - **A faint generative drone of motion at all times** so the page never feels frozen: the frequency grid lines flicker at 1% opacity variance, the Floor Noise has a barely-perceptible animated film-grain (`grain-overlay` at very low alpha). - **Typography in motion:** the wordmark "soning" never moves after its entrance, but section epigraphs (Spectral italic) `path-draw-svg`-style fade in word by word with a `stagger`, slowly, like a phrase being spoken. - **Reduced-motion:** if requested, freeze all canvases at a representative frame, keep the trace line and the layout, skip the scroll-morphing — the page should still read beautifully as a static acoustic diagram. Bias the whole build toward **stillness and attention**: a full-screen, slow, narrative experience about the shape of sound. Resist every instinct to add a button, a counter, a grid of features. ## Uniqueness Notes Differentiators, each a deliberate departure from the corpus frequency analysis: 1. **A single-signal-color monochrome, where the one color behaves like a VU meter.** Warm palettes sit at 98% and gradients at 94% in the analysis; soning.stream is near-black charcoal + warm off-white + one chartreuse, with the *only* gradients being acoustic energy-decay fades. The chartreuse is rationed like meter headroom — present but never indulged. This is a chromatic discipline the corpus, drowning in warm gradients, almost never attempts. 2. **`wave-forms` as the entire imagery system, not a garnish.** Wave-forms appear in only 3% of designs as a motif, and `generative-art` imagery in 11% — and where they appear, they're usually background texture. Here every visible element is a computed acoustic curve: waveforms, spectrograms, phase circles, ADSR envelopes. There is literally no other kind of image on the page. 3. **The fixed "trace line" at 50vh with content scrolling *under* it like tape past a head.** This inverts the usual `immersive-scroll` (15%) where content moves and the chrome is fixed at the top — here the chrome is a hairline at the *center*, and the page is read as an oscilloscope sweep. No `card-grid` (92%), no `centered` text blocks (80%), no `hero-dominant` opener. 4. **Anti-streaming-service stance.** The domain ends in `.stream` and yet there are no thumbnails, no play counts, no "now playing," no subscription tiers — sound is treated as a physics-museum subject, contemplated, not consumed. This refuses the entire visual genre the domain name would predict. 5. **`zen-contemplative` tone (12%) executed through deceleration.** Multi-second animation periods, word-by-word epigraph reveals, a "reverb tail" ending with no footer — the page is engineered to slow the reader's pulse, the opposite of the energetic/dopamine register that dominates landing pages. Chosen seed/style: **generative art background** — realized as *aesthetic: generative, layout: immersive-scroll, typography: mono (Space Mono) paired with serif (Spectral), palette: monochrome + single-signal-color, patterns: path-draw-svg + morph + fade-reveal, imagery: generative-art (waveforms/spectrograms), motifs: wave-forms, tone: zen-contemplative.* Avoided patterns from the frequency analysis: `hand-drawn` (94%), `glassmorphism` (84%), `card-grid` (92%), `full-bleed`-as-default + `centered` (80%), `cursor-follow`/`magnetic`/`spring`-bounce maximalism (78–89%), `warm`+`gradient` palettes (94–98%), `photography` imagery (98%), `tilt-3d` (31%), `parallax`-heavy storytelling (89%), CTA/pricing/stat-grid layouts entirely.