# Design Language for RRIPPL.com ## Aesthetics and Tone RRIPPL.com is a **Y2K-futurist tide pool**, rendered as if a 2003 corporate intranet had been left to dry on a clay shore for twenty years and emerged with a slow, warm, almost monastic patience. The page opens not on a chrome screensaver and not on a tropical lagoon, but on the strange overlap of those two: a *terracotta-toned aqua* world where the iridescent CD-ROM textures of early-millennium futurism have oxidised into the soft ochres of unfired pottery, and where the only living things are five tropical fish drifting through enormous fields of empty ground. The aesthetic is a deliberate **collision of Y2K-futurism with warm-earthy palette and Japanese *ma* negative-space discipline**. Where Y2K-futurism is normally cold (chrome, electric blue, glassy bubbles, screensaver gloss), here it has been *thermally inverted*. The blobs are still there. The bevels are still there. The 2003 inflated typography is still there. But the whole thing has been baked at low temperature: chrome has rusted to copper, electric blue has aged to dusty teal, holographic gradients have settled into the warm spectrum of weathered enamel signage. The result is a Y2K interface that has *wabi-sabi-ed*. Glossy but tired. Iridescent but earthen. Optimistic but slow. Tone is **minimal** in the strictest sense: most of the page is empty, and the emptiness is the design. RRIPPL is the sound of a single drop disturbing a still pond — and most of what the user sees is the *pond*, not the drop. Visual elements are placed on the page the way a single brushstroke is placed on washi paper: with extreme reluctance. Each tropical fish, each ripple ring, each glitch-shard, each block of grotesque type, has been negotiated against many empty squares of warm ground and approved only because nothing else would do. Mood: a quiet aquarium at closing time. The lights have been dimmed to amber. The pump is on a low setting. Five fish are still moving. The visitor has the room to themselves. --- ## Layout Motifs and Structure The page is built on a strict **ma-negative-space** scaffold: a 12-column grid where, on average, **only 3 of 12 columns are ever occupied per band**. Eight to nine columns of warm ground sit unfilled in every viewport, and that emptiness is *load-bearing* — it carries meaning the way silence carries meaning between two notes of a shakuhachi. The grid does not "breathe"; the grid *is* breath, and the content is the brief interruption. The page is divided into **seven scenes**, each occupying 100vh, each separated by a full-bleed band of unbroken warm ground at least 40vh tall. These ground bands are not transitions — they are *the page*. They are titled in the source code (`
`, `
`...) and the ground itself drifts with a long, slow magnetic field that pulls the cursor a few pixels off its real position, as if the page surface were liquid. **The seven content scenes (each set against vast empty quadrants):** 1. **DROP** — a single character (the lowercase `r`) is set at 28vw on the lower-left, with the rest of the viewport empty. As the page loads, one ripple ring expands from the `r` and fades. 2. **POND** — the wordmark `RRIPPL` appears in lower-right at 14vw, 92% opacity. Eight to ten columns of warm sand-ground stay empty. 3. **FISH-I** — the first tropical fish enters from far-right and stops at 38% across, motionless. No copy. Fifteen seconds of stillness before the next scene becomes available. 4. **GLITCH-SHARD** — a single horizontal RGB-split slice of corrupted aquarium photography crosses the upper third. Below it, two lines of grotesque caption set at 22px, dwarfed by the empty rectangle around them. 5. **FISH-II / FISH-III** — two fish circle a near-invisible iridescent disc placed on the right vertical third. The left two-thirds is empty, save for a single 9px ledger annotation in the lower-left corner. 6. **RIPPLE-FIELD** — concentric ripple rings, magnetic to the cursor, drawn in copper hairline. Type is absent; only the rings and the ground. 7. **COLOPHON-AT-LOW-TIDE** — a thin band of monospaced metadata dropped at the bottom-right, the way a tide line is left when water recedes. The upper 84% of the viewport is empty and *that is the whole point.* There is **no nav bar, no header, no hero block, no footer**. Navigation is a single 1px copper line drawn along the right edge of the page; clicking anywhere on this line teleports the cursor to one of the seven scenes via a magnetic snap. The structure refuses every conventional marketing block. There are **no CTAs, no pricing, no testimonials, no feature grid, no logo bar, no stat counters, no signup, no above-the-fold strategy.** The page is an experience of *less*, told in the visual grammar of a culture that *invented more*. --- ## Typography and Palette **Typography (Google Fonts only):** The typographic system is built on the principle of *one type doing too much and one type doing almost nothing*. Two families only. - **Display & wordmark — *Bricolage Grotesque*** (variable, weights 200–800, optical size axis). This is a contemporary **grotesque-neo** with a slight Y2K bevel feel and warm humanist details. Used at extreme scale (14–28vw) for single-character interventions and the RRIPPL wordmark. The variable optical-size axis is exploited: at hero scale the font is set to its display optical size with tighter spacing (-0.04em), at small annotation scale (10–13px) it is set to its text optical size and loosened (+0.06em). Weight breathes: scene 1 sets the `r` at weight 280, scene 7 sets the colophon at weight 700, with weight rising scene by scene like a slow tide. - **Annotation & ledger — *JetBrains Mono*** (weights 300/500). Used only at 9–13px for technical metadata, the seven scene IDs, the colophon, and a single 9px ledger note per scene. JetBrains Mono is set in the dustiest copper from the palette and never enlarged — it is the *quiet voice* of the page. No third typeface. No italic. No display script. The page deliberately under-uses its own type system: across the entire seven scenes, the *total set type* fits inside roughly two short paragraphs. The grotesque-neo wordmark and the JetBrains annotations are nearly the only words the visitor will read. **Palette (warm-earthy, eight values):** - `#E8D9C4` — *unfired-clay ground.* The dominant page color. Eight to nine columns of every viewport are this single warm cream. It is what the page *is*. - `#C9A87C` — *low-tide sand.* Secondary ground tone for darker bands and the fish-shadow under-layer. - `#A06B3E` — *terracotta copper.* Hairline rules, the right-edge nav line, ripple ring strokes, all monospace annotation. - `#6B3F2A` — *kiln-rust.* Darkest accent. Used for the three glitch-shard slices and the grotesque wordmark itself. - `#3F5A56` — *dusty-teal.* The single Y2K-futurist nod — what was once electric cyan, now aged into a warm-leaning teal. Used only for the eyes of the tropical fish and the hairline of the iridescent disc. - `#D49A6E` — *salmon-clay.* Used inside the iridescent disc gradient in scene 5 and on hovered ripple rings. - `#F4EBDB` — *bleached-shell.* The lightest tone — the *paper* under the clay — used for the warm halo behind hovered type. - `#2A1F18` — *deep-bog.* Used for one purpose only: the 9px ledger glyphs that anchor each scene. The palette is in the same hemisphere as terracotta-warm and honeyed-neutral but distinctly *its own*: it is what happens when you take a Frutiger Aero swatch and bake it in a wood-fired kiln for an hour. The result is unmistakably warm and unmistakably *not* the saturated tropical aqua that the motif might predict. --- ## Imagery and Motifs The imagery system is **glitch-art** rendered through a **warm-earthy** filter, and **tropical-fish** as the only living motif. Both are rare in this cohort; their combination is unique. **Glitch-art (the core imagery family):** - Three to five **horizontal RGB-split slices** are placed across the page total, never more than one per scene. Each slice is a 12–28vh tall horizontal band of "broken aquarium photography" — but the photography itself is generated in-browser, never imported. A `` paints procedural water-caustic textures using warm-earthy noise (red-channel offset 0–8px, green-channel offset 0–4px, blue-channel held at zero — so the chromatic aberration leans copper, not the standard cyan-magenta). The result reads as *kiln-glitch*: the photograph of a fish has been baked, then cracked, then printed with the registration off by a few millimetres in a forgotten print shop. - A **scanline overlay** at 6% opacity sits over the glitch slices, with horizontal lines spaced 4px apart in `#C9A87C` over the underlying clay ground. The scanlines are not animated — they are static, like the matte-finish lines of an old TV photographed on a postcard. - One **glyph-corruption moment** per page: when the cursor crosses the wordmark RRIPPL at scene 2, the second `R` glitches for ~140ms — its outline shears 6px right, an RGB-split fringe of `#A06B3E` and `#3F5A56` appears, and it resets. This is the only animated glitch on the page. Every other glitch is a *still photograph of a glitch.* **Tropical-fish (the only living motif):** - **Five fish total**, no more. They are rendered as flat SVG silhouettes in the clay-and-copper palette — *not* the saturated rainbow you would expect from a tropical aquarium. The fish look more like *terracotta-fish reliefs from a Mediterranean kiln* than coral-reef photography. Body in `#A06B3E` (terracotta copper), fin accent in `#C9A87C`, and a single eye-dot in dusty-teal `#3F5A56`. This is what makes the motif unique: the tropical-fish has been *earthen-ed*, the way the whole page has. - Each fish has its own scene and **its own slow magnetic field** (see Patterns). The fish in scene 3 is motionless. The fish in scene 5 circles. The colophon scene contains no fish — it is *after the aquarium has been emptied.* - Fish silhouettes are based on *Heniochus acuminatus* (longfin bannerfish) for two of the five and on a generic threadfin-butterflyfish profile for the other three — chosen for their long single-trailing-fin which echoes the ripple-tail visual signature of the wordmark. **Magnetic fields (decorative motif):** - Each fish carries an invisible magnetic *attractor* of radius 320px around its silhouette. The cursor, when within range, is pulled 6–18px toward the fish's body, with a slow 0.4s cubic-bezier ease. This is the magnetic pattern made literal — the fish *attracts* the visitor, not the other way around. - The seven scene IDs, set in 9px JetBrains Mono in the lower-left of each scene, also carry tiny 80px magnetic attractors. Hover the cursor near them and it leans in. **Ripple rings (the wordmark motif made visual):** - One ripple ring per scene, drawn as a 1px copper hairline circle in SVG, expanding from a fixed origin point. The rings are not synchronized — each has its own period (3.2s, 4.7s, 5.1s, 6.0s, 7.3s, 8.4s, 11.0s) — so the page has the irregular rhythm of *real* surface water rather than the regular pulse of a CSS animation. - A ripple ring fades out at radius 60vw and a new one starts at radius 0; there is always at least one ring expanding somewhere on the page, and at most three. **Iridescent disc (one per page, scene 5 only):** - A single circle, 280px diameter, drawn with a CSS conic gradient cycling through `#D49A6E → #C9A87C → #E8D9C4 → #F4EBDB → #D49A6E` at 22-second period. This is the only *Y2K-iridescent* artifact on the page — and it has been thoroughly warm-shifted into the clay spectrum. It is what a holographic CD-ROM would look like if the dye had aged for two decades. Two fish circle this disc at 9px-per-frame in opposite directions. There is **no photography**, **no stock imagery**, **no 3D rendering**, **no AI imagery**, and **no icons from any icon set**. Every visual element is generated in CSS, SVG, or HTML5 Canvas, in-browser, deterministically. --- ## Prompts for Implementation Build RRIPPL.com as **a single long HTML document organised as seven full-viewport scenes separated by warm-ground bands**. The visitor's scroll is a slow walk along a tide pool at dusk. The implementation must privilege **stillness over motion**, **emptiness over fullness**, and **storytelling over information**. There are no calls-to-action, no pricing tables, no signup forms, no testimonials, no logo carousels, no "trusted by" bars, no stat-grids, no feature comparison matrices, no above-the-fold strategy, and no nav header in the conventional sense. **Atmospheric load (4.4s, skippable on first scroll):** 1. **0.0–0.6s** — `#E8D9C4` clay ground fills the viewport. Nothing else exists. 2. **0.6–1.4s** — A 1px copper hairline draws itself slowly down the right edge of the viewport (the only navigation the page will ever have). 3. **1.4–2.8s** — The single lowercase `r` of scene 1 fades up at 28vw on the lower-left, weight 280, optical-size display. 4. **2.8–3.6s** — The first ripple ring expands from the base of the `r`, reaches 22vw radius, and fades. 5. **3.6–4.4s** — The first scene-ID `01 / DROP` types itself in 9px JetBrains Mono in the lower-left corner, in deep-bog `#2A1F18`. After 4.4s the page is loaded. There has been no logo flash, no headline reveal, no marketing copy. Just a clay ground, a letter, a ripple, and a label. **Scroll behaviour:** - Scroll-snap is enabled per scene (`scroll-snap-type: y mandatory`) so that each scene occupies the full viewport when at rest. The user cannot accidentally land in a hybrid state. - Between scenes, the warm-ground bands of 40vh are *not* snap targets — they pass under the viewport during the transition, so the user briefly sees pure empty clay. This is the *ma* moment between two koto plucks. It is not a bug; it is the score. - Scroll velocity is dampened by a `prefers-reduced-motion`-respecting easing curve so that even rough scroll wheels feel like the page is slow water. **Animation system (slow, sparse, never decorative):** - Ripple rings expand on individual non-synchronised periods (see Imagery). Use `requestAnimationFrame` and SVG circles, not CSS `@keyframes`, so the rings can be irregularly timed. - The five tropical fish each have their own behaviour: - Fish 1 (scene 3): enters from x = 110vw, decelerates to x = 38vw over 9.0s, holds. Holds for the entire scene visit. Re-enters when scene revisited. - Fish 2 & 3 (scene 5): orbit the iridescent disc at radius 200px and 230px, in opposite directions, period 11s. - Fish 4 (between scenes): drifts diagonally across the warm-ground band between scene 5 and 6, x velocity 12px/s, y velocity -3px/s, fades at edge. - Fish 5 (scene 6): hovers near the cursor, magnetic radius 380px, lazily following with 0.6s lag, never reaching the cursor (always 80–140px short — *the fish does not want to be caught*). - Magnetic cursor effect on the wordmark (scene 2) and on each scene-ID label (lower-left of every scene). Cursor offset is computed in JS, applied via `transform: translate3d(...)` with a 0.4s cubic-bezier transition. - Glitch on the wordmark second `R` at scene 2: triggered on cursor-within-radius, 140ms duration, RGB-split via two duplicated text layers offset by `transform: translateX(±4px)` with `mix-blend-mode: multiply` and `color: #A06B3E` and `#3F5A56` respectively. After 140ms the layers reset. - The iridescent disc (scene 5): conic-gradient with a CSS `@keyframes` rotation, 22s period, ease-in-out. The only "decorative" animation on the page. - Glitch slices are static — not animated — except for one slow `filter: hue-rotate(0deg → 4deg → 0deg)` over 14s, imperceptible unless watched. **Cursor design:** - The default cursor is hidden across the entire page. In its place: a 6px copper-filled circle (`#A06B3E`) with a 1px deep-bog stroke. When the cursor enters a magnetic field, the circle stretches into an ellipse pointing toward the magnet, with eccentricity proportional to field strength. When the cursor is over the right-edge nav line, the circle becomes a 14px copper bar segment. There is no other cursor state. **Type setting per scene:** - Scene 1: a single `r` in *Bricolage Grotesque*, 28vw, weight 280, optical-size display, color kiln-rust `#6B3F2A`, lower-left at (8vw, 78vh). - Scene 2: `RRIPPL` wordmark in *Bricolage Grotesque*, 14vw, weight 460, optical-size display, color kiln-rust, lower-right at (right: 8vw, bottom: 16vh). Letter-spacing -0.04em. - Scene 3: no display type. One ledger annotation: `// FISH-I // BUTTERFLY-PROFILE // STILL` in 9px JetBrains Mono, lower-left. - Scene 4: two lines of grotesque caption at 22px, weight 460, in deep-bog: `the photograph` (line 1) and `was already broken when we found it.` (line 2). Set against a 14vh-tall RGB-split glitch slice in the upper third. - Scene 5: no display type. One 9px ledger annotation: `// IRIDESCENT DISC / 22S CONIC / 2 FISH / SALMON-CLAY` in lower-left. - Scene 6: no type at all. Only ripple rings, the cursor, and fish 5. - Scene 7: monospace metadata block in lower-right, six lines max, JetBrains Mono 11px, color kiln-rust: ``` RRIPPL.COM TIDE-POOL ARCHIVE 01 SCENES: 07 FISH: 05 RIPPLE-RINGS: ∞ GROUND: UNFIRED CLAY (#E8D9C4) ``` **What the page must feel like:** - A still room with a quiet aquarium. - A clay tablet with a single drop on it. - A 2003 corporate site that fell asleep, dreamed of fish, and never woke up. - An empty page that you keep scrolling because the emptiness is somehow *full*. **Forbidden:** - No CTA buttons. No "Get started." No "Learn more." No "Sign up." - No hero with headline + subhead + button trio. - No feature grids. No three-column "What we do." - No testimonials. No press logos. No "as seen in." - No social-share buttons. No newsletter capture. No popups, ever. - No filling the empty quadrants. The emptiness is the design — fight every instinct to add detail. - No saturated tropical aqua. No electric chrome blue. No coral-reef rainbow. The fish are *terracotta*. - No fast animation. No bounces. No spring physics in any cursor or click. Every motion ≥ 0.4s. --- ## Uniqueness Notes **Differentiators from the rest of this design cohort:** 1. **Y2K-futurism inverted into a warm spectrum.** Y2K-futurism appears in this cohort at 6% (one prior site), and *every* prior usage maps it to its standard chrome/glassy/electric-blue grammar. RRIPPL deliberately *thermally inverts* the aesthetic — keeping the iridescent disc, the inflated grotesque type, the bevel-adjacent treatment, and the "2003 corporate intranet" structural memory, but firing it through warm-earthy ochre and terracotta. The result is a Y2K page that looks like it was thrown on a wheel and kiln-fired. No other site in this cohort attempts this inversion. 2. **Ma-negative-space as a structural law, not a styling preference.** `ma-negative-space` appears in this cohort at 3% (a single prior usage). Most "minimal" sites in this cohort still fill 50–70% of every viewport. RRIPPL imposes a strict ceiling: an *average* of 25% of any viewport may carry visible content; the rest must be empty warm ground. The 40vh inter-scene bands are *also* empty and load-bearing. This is genuinely Japanese-design-tradition *ma*, not "white space" as a Western styling fashion. 3. **Tropical-fish appears at 20% but never as terracotta.** Every prior usage of `tropical-fish` in this cohort renders the motif in saturated reef-aqua, either via stock photography or vibrant SVG. RRIPPL renders all five fish in the **terracotta-copper-and-clay palette** of the page itself — a Mediterranean-kiln treatment of a tropical motif. The fish look more like archaeological wall reliefs than aquarium specimens. This is the unique reading of `tropical-fish` in the cohort. 4. **Glitch-art warm-shifted to copper.** `glitch-art` appears at 3% (single prior usage). Every prior glitch in this cohort uses the standard cyan-magenta RGB split (the "VHS / CRT" cliché). RRIPPL forces the glitch into the warm hemisphere: red-channel offset positive, green-channel offset half, blue-channel held at zero, producing a *copper-leaning* chromatic aberration. The page's glitches look like *mis-fired ceramic prints*, not broken video signal. 5. **Grotesque-neo at extreme scale, not at body scale.** `grotesque-neo` is a new term in this cohort (0%). RRIPPL adopts it via *Bricolage Grotesque* used exclusively at 14–28vw — never at body scale. The grotesque is the page's *monument*, not its workhorse. Body-scale type is left entirely to JetBrains Mono. This separation of "monument vs. ledger" is unusual. 6. **Magnetic pattern made literal as motif.** `magnetic` appears at 26% in this cohort, almost always as a button micro-interaction (cursor pulled toward CTAs, links, hover-targets). RRIPPL uses the magnetic pattern only on **fish silhouettes**, **scene-ID labels**, and the **wordmark** — never on a button (because there are no buttons). The magnetism is repurposed from a UI nicety into a *narrative device*: living things attract, labels attract, the design's title attracts. CTAs do not exist to attract. 7. **No marketing scaffolding whatsoever.** Most sites in this cohort retain at least one element from the conventional marketing set (CTA, signup, footer with social links, hero headline + subhead). RRIPPL refuses every one of them. There is no header, no footer, no nav, no signup, no CTA, no testimonial, no pricing, no logo bar, no above-the-fold strategy. The page is one long, slow, mostly-empty walk along a tide pool. This is the most aggressively non-marketing structure in the cohort. 8. **Seven non-synchronised ripple periods.** Every animation cohort site uses regular CSS `@keyframes` periods (4s, 8s, 12s — round numbers). RRIPPL uses irrational-feeling periods (3.2s, 4.7s, 5.1s, 6.0s, 7.3s, 8.4s, 11.0s) and rebuilds the rings via `requestAnimationFrame` so they never re-synchronise. The page never visually "loops." This irregular pulse is the design's aural signature. **Chosen seed:** `aesthetic: y2k-futurism, layout: ma-negative-space, typography: grotesque-neo, palette: warm-earthy, patterns: magnetic, imagery: glitch-art, motifs: tropical-fish, tone: minimal`. Honored across every section without dilution. The seed's most surprising combinations (Y2K + warm-earthy, tropical-fish + minimal, glitch-art + ma-negative-space) are treated as *features*, not contradictions, and resolved through the kiln-fired-Y2K concept. **Avoided patterns from frequency analysis:** - Avoided `hand-drawn` aesthetic (86%) entirely — no hand-drawn marks, no rough strokes, no sketched accents. - Avoided `glassmorphism` (56%) — there is no frosted glass anywhere; the iridescent disc is opaque, not translucent. - Avoided `photography` imagery (93%) — zero photographs, all visuals are in-browser SVG/Canvas/CSS. - Avoided `full-bleed` layout (83%) — the page is the opposite, with content occupying ~25% of any viewport on average. - Avoided `card-grid` (53%), `dashboard` (30%), `centered` (70%) — none of these structural devices appear. - Avoided `mono` typography (90%) at any scale larger than 13px — JetBrains Mono is restricted to 9–13px ledger use only. - Avoided `parallax` (90%), `spring` (56%), `cursor-follow` (46%), `stagger` (53%) as primary patterns — magnetic is the sole featured pattern and it is used on motifs, not on UI. - Avoided `warm-inviting` (13%) tone in favour of strict `minimal` — the warmth of the palette is a *climate*, not an emotional posture.