# Design Language for oning.stream ## Aesthetics and Tone oning.stream is a **blobitecture amphitheatre built around a single slow river of light** — picture a 1960s pavilion designed by an architect who only ever drew with a wet brush, then filled, decades later, with a current of luminous water that never stops moving downhill through the page. The name "oning" is treated as an unfinished gerund — the *-ing* of something perpetually in motion — and the whole site is the verb in mid-tense. There is no product here, no signup, no plan: the site *is* a stream, and visiting it means standing on a bank and watching it run. The mood is **slow-water hypnotic, mineral-cool, faintly bioluminescent** — closer to a deep cenote at dusk than a tech landing page. Surfaces are not flat panels but **inflated, kidney-shaped membranes** that bulge gently toward the cursor like the meniscus of a held breath. Light is the only ornament: it pools in the low points of each blob, thins to nothing on the ridges, and is carried downstream by a continuous SVG ribbon that threads through every section. The tone is **dreamy-ethereal but grounded by weight** — every blob looks like it has mass, like it would warm slowly if you laid a hand on it. Nothing is sharp. Nothing is rushed. The site breathes at roughly 5 seconds per inhale, and the reader is invited to breathe with it. This is **blobitecture (3% in the corpus) crossed with wave-form motion (3%) and an organic-flow layout (5%)** — three deliberately underclaimed rooms, occupied at once. ## Layout Motifs and Structure The page is a **single uninterrupted descent along one meandering watercourse**. There are no horizontal section dividers — instead, a **continuous SVG "stream-spine"** runs the full scroll height, drawn as a fat Bézier ribbon that swings left, right, left across the viewport like an oxbow river seen from above. Content does not sit *in* boxes; content sits *on the banks* of this stream, alternating sides as the spine swings. - **The stream-spine.** A 3-to-7vw-wide gradient ribbon, never straight for more than one screen-height, with a faint inner highlight that animates as a "current" — a brighter stretch of light travelling downstream forever at a constant slow pace, decoupled from scroll. The spine is the only navigation: scroll position is shown by how far down the current the reader has floated. - **Bank-blobs.** Each unit of content lives inside an **organic blob membrane** — an irregular, 6-to-9-point closed Bézier shape, never an ellipse, never symmetric — that appears to be half-submerged in the stream, with its lower edge dissolving into the ribbon's gradient. Blobs alternate banks: odd ones on the left, even ones on the right, the way driftwood catches on alternating shores. - **Meniscus interaction zone.** Where the cursor hovers over a blob, the membrane's outline locally *swells* toward the pointer (a soft radial displacement of the SVG path control points), as if surface tension were following the mouse. Release, and it settles back over ~900ms with an overdamped easing — no bounce, just a slow return to rest. - **No grid.** Truly none. Position is dictated by the spine's curve and a hand-tuned set of anchor points. Card-grid sits at 90% in the corpus; oning.stream owns the absence. - **Estuary footer.** The final screen is where the stream-spine *fans out* — the single ribbon splits into 5–7 thinning distributaries that braid, widen, and fade into the page's bottom edge like a river meeting the sea. The wordmark "oning.stream" floats on the last visible water, half-dissolved. - **Depth by translucency, not parallax.** Blobs nearer the "front" are more opaque and slightly cooler; deeper blobs are bluer and more transparent, layered behind the spine. Parallax is at 91% in the corpus and is deliberately refused — depth here comes from water-colour, not from differential scroll speeds. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & wordmark — *Fraunces* (variable, opsz 144, wght 600, SOFT 100, ital toggled per word).** Used for the "oning.stream" wordmark and the 1–2-word headlines that float on each bank-blob. Set huge (clamp 3rem → 8rem), optical size pushed to maximum so the serifs swell and soften into something almost liquid; the SOFT axis at full so terminals round into droplets. Headlines are set in **lowercase only** and frequently *break mid-word* across two lines to suggest a current pulling letters downstream. - **Body & captions — *Newsreader* (variable, opsz 18, wght 380).** A quiet, watery transitional serif with a generous x-height that reads calmly at small sizes. Line-height 1.85, max-width ~58ch, set ragged-right. Newsreader's slightly wet, ink-bleed contrast pairs with Fraunces without competing. - **Micro-labels & the current-position readout — *Spline Sans Mono* (wght 400, letter-spacing 0.18em, uppercase).** The single concession to mono (mono is at 94% in the corpus — used here only as a one-line whisper, never as a system). Used for tiny hydrological-style labels: "DEPTH 04 · DRIFT 0.62 · TEMP COOL". **Palette — a cenote at the blue hour (minimum 3, here 8):** - `#0B1A24` — **abyssal slate**, the page ground, the water at its deepest. - `#102E3C` — **submerged teal**, the body of the stream-spine where it is thickest. - `#1C5566` — **mineral cyan**, mid-depth blob fills. - `#3E8C99` — **shallows green-blue**, the upper banks, near-surface blobs. - `#7FC9C6` — **meniscus glow**, the animated current highlight and hover-swell edge. - `#CFEDE6` — **foam pale**, body text on dark, the lightest spray. - `#E8C36B` — **drowned-amber**, a single warm accent — sunlight refracting through deep water — used for exactly one element per screen and never two. - `#F3E9D6` — **driftwood ivory**, the wordmark colour and the estuary fans. The palette is **cool-dominant with one amber heartbeat** — a near-monochrome blue field (cool-grays/ocean-deep territory, both under 6% in the corpus) so that the single drowned-amber note reads like a coin glimpsed on a riverbed. ## Imagery and Motifs **No photography (98% of the corpus uses it — refused here). No glassmorphic cards (refused). Everything is SVG, generated and animated in the browser; nothing is a static raster.** - **The stream-spine ribbon.** The hero motif — one long Bézier path with a multi-stop gradient (`abyssal slate → submerged teal → mineral cyan` along its length) and an animated dash-offset highlight in `meniscus glow` representing the perpetual current. - **Bank-blobs.** Irregular closed Bézier membranes, each unique, each with: a soft inner radial gradient that pools light at its lowest point, a 1px `meniscus glow` rim that thins on the upper curve, and a lower edge masked to dissolve into the spine. - **Caustics.** A slow, large-scale Worley/voronoi noise field rendered to a single `` behind everything, tinted in `mineral cyan`/`shallows green-blue`, drifting at ~8px/sec — the wobbling net of light you see on a pool floor. Opacity ≤ 14% so it never competes with text. - **Drift particles.** A handful (12–20, never a swarm) of tiny `foam pale` motes that travel down the spine's curve forever, speed jittered, like silt suspended in the current. Pure decoration, paused by `prefers-reduced-motion`. - **The amber coin.** Once per screen, a single small `drowned-amber` element — a dot, a rule, a swelled letter-terminal — placed off the spine, slowly pulsing in opacity (0.6 ↔ 1.0 over 5s). It is the only thing in the whole site that "blinks", and it does so at the breathing rate. - **Estuary fans.** At the footer, the spine's terminal split into thinning distributary paths, each fading via gradient to transparent at the page edge. - **Hydrological micro-iconography.** Tiny Spline Sans Mono readouts ("DEPTH", "DRIFT", "TEMP") with a single 6px tick-mark glyph each — never a full icon set, just a typographic nod to a river gauge. ## Prompts for Implementation Build oning.stream as **one HTML file, one CSS file, one JS module** — a single-route, vertically-scrolled descent along one continuous luminous river. Treat the whole page as roughly an **80-second drift downstream**: the reader scrolls, and the current carries them past a sequence of half-submerged thoughts. There is **no CTA, no pricing block, no stat grid, no testimonials, no contact form, no email capture, no feature cards** — there is only the stream and what floats on its banks. **Narrative structure (one stream, ~7 bank-blobs, alternating shores):** 1. **Source.** Full-viewport `abyssal slate`. The stream-spine enters from the top edge as a thin trickle and *widens* as the reader scrolls. The wordmark "oning.stream" surfaces in `driftwood ivory` Fraunces, lowercase, breaking after "on—ing" so the syllable trails downstream. Caustics already drifting behind. A single `drowned-amber` dot pulses near the source. 2. **First bank (left).** A blob carrying one Fraunces line — something about *being mid-verb*, about the unfinished -ing. Body text in Newsreader on the membrane. The current highlight passes through the spine here on its endless loop. 3. **Second bank (right).** Blob about *current as time* — the current moves whether or not you scroll; scrolling only changes where you stand on the bank. Hover the membrane and watch the meniscus swell toward the cursor. 4. **Third bank (left).** Deeper, bluer, more transparent — the reader has descended. Caustics intensify slightly. A hydrological readout appears: "DEPTH 03 · DRIFT 0.41 · TEMP COOL". 5. **The deep reach (full-bleed).** The spine fattens to its widest; the blob here is nearly the full viewport, very dark, very translucent, text in `foam pale` floating as if read through water. The amber coin glints far off the spine. 6. **The rising shallows (right).** Lighter again — `shallows green-blue` — the current quickens visibly, drift particles speeding up. A short Fraunces line about *arriving without ending*. 7. **Estuary (footer).** The spine fans into 5–7 thinning distributaries that braid and fade into the bottom edge. The wordmark re-forms on the last water in `driftwood ivory`, half-dissolved, its letters slightly displaced by an idle ripple. The page does not end so much as *seep away*. **Motion & feel:** - **Breathing tempo.** One global ~5s ease cycle (`--breath`) drives the amber pulse, a faint scale-breathing on the largest blob, and the caustics intensity. Everything that animates idly is phase-locked to it. - **Meniscus hover.** On pointer-move over a blob, perturb 1–2 nearest SVG path control points toward the cursor (radial falloff), re-rendering the `d` attribute each frame; on leave, lerp control points back to rest over ~900ms with an overdamped (no-overshoot) easing. This is the signature interaction — make it buttery. - **The current.** A `stroke-dashoffset` (or gradient-position) animation on the spine highlight, `linear`, infinite, ~14s loop, **independent of scroll** — the river runs even when the reader is still. - **Drift particles.** Animate along the spine path via `offset-path` / `getPointAtLength`, looped, speeds jittered ±30%. - **Caustics.** Single ``, layered Worley noise scrolled slowly; cap at ~24fps; pause and freeze on `prefers-reduced-motion`. - **Scroll reveal.** Bank-blobs rise into place from slightly below with a slow `fade-reveal` + gentle upward translate as they enter — no stagger swarms, no spring overshoot. Slow water, never bounce. - **No cursor-follow trail, no magnetic buttons, no tilt-3d, no parallax layers** — the only cursor reactivity is the local meniscus swell on membranes. **Build notes:** SVG for spine + blobs (paths generated in JS from anchor arrays so each blob is unique and tweakable); one `` for caustics; CSS custom properties for the palette and `--breath`; `clamp()` for all type. Honour `prefers-reduced-motion` by freezing the current, the drift, the caustics, and the breathing — leaving a still, dim, perfectly readable river. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **A single continuous SVG river as the entire layout system.** No grid, no cards, no sections — content lives on the alternating banks of one meandering Bézier ribbon. Card-grid is at 90% and full-bleed at 88% in the corpus; oning.stream uses neither as structure, claiming the organic-flow room (5%). 2. **Blobitecture rendered as half-submerged luminous membranes, not as cheerful pastel bubbles.** Blobitecture sits at 3%; the existing 3% leans candy-bright and playful. Here it is mineral, cool, weighty, and lit from within — a chromatic and tonal recontextualization. 3. **Meniscus hover — surface-tension-following SVG path displacement — instead of cursor-follow / magnetic / tilt-3d.** Cursor-follow is at 89%, magnetic at 81%, tilt-3d at 28%; this site refuses all three for one bespoke fluid-membrane interaction the corpus does not appear to contain. 4. **Scroll-decoupled "current" animation.** The river's light moves on its own clock, not the scrollbar's — parallax (91%) is explicitly avoided in favour of an autonomous, infinite current. 5. **Near-monochrome ocean-deep palette with exactly one amber accent per screen.** Warm palettes dominate the corpus at 98%; this is a cool-dominant blue field (ocean-deep / cool-grays, both under 6%) with a single disciplined warm heartbeat. **Chosen seed/style:** *blobitecture fluid layout* — `aesthetic: blobitecture, layout: organic-flow, typography: elegant-serif, palette: ocean-deep, patterns: fade-reveal, imagery: generative-art, motifs: wave-forms, tone: dreamy-ethereal`. **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (80%), photography (98%), card-grid (90%), full-bleed-as-structure (88%), centered (83%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (81%), stagger (71%), warm palette (98%), mono-as-system (94%).