# Design Language for PPEBBL.com ## Aesthetics and Tone PPEBBL.com is conceived as a **Frutiger Aero brochure for a pebble archive** — a luminous, glassy, optimistic-but-grown-up homepage that treats the humble pebble (the smooth river stone, the polished beach pebble, the wet shore-stone catching morning sun) as a piece of premium hardware. The whole site has the air of an early-2000s product website that someone forgot to take down — except it has been quietly, professionally maintained, the bevels resharpened, the blue gradients re-tuned, the bubbles re-rendered at 4× pixel density. The result is **frutiger-aero** read in a *professional* register: glossy without being gimmicky, playful without being immature, optimistic without nostalgia kitsch. The mood is the moment you pick up a perfect skipping-stone at a freshwater lake at 9:47 a.m. on a clear day in late May. The water is impossibly clean. There is a slight haze of insects in the light. Your fingers are cold. The pebble is heavier than it looks. The sky reflects off everything. You feel — briefly, embarrassingly — that the world is well-organized. PPEBBL.com is a site for that exact 20-second feeling, dressed up as a serious archive. Tonally the language is **professional-confident**: this is *not* a whimsical or twee design. The copy is short, declarative, lightly poetic but never cute. Headlines could appear in a 2003 catalog for high-end speakers or an industrial design portfolio. The aesthetic does the smiling so the typography doesn't have to. The "PP" doubled-P at the head of the wordmark is treated as a pair of facing pebbles — two oblong shapes nested, one front-lit and one rear-lit, with a hairline of caustic light between them. The double-letter is the structural pun of the site: things-in-pairs (twin pebbles, the parallel reflection above/below waterline, the asymmetric two-column body, the foreground/background SVG bubble layers). ## Layout Motifs and Structure The page is **deliberately asymmetric** along a single rule: every full-viewport scene divides into a *Big Pebble Plate* (60–70% of the viewport, holding imagery and oversized type) and a *Small Pebble Plate* (24–32%, holding ledger-style annotation). Which side holds which alternates on every other scene, producing a **ricochet rhythm** as the user scrolls — Big-Left → Small-Right → Big-Right → Small-Left — like a stone skipping across water (one … two … three … four). Crucially, neither plate is rectangular. Each plate is a soft super-ellipse (`border-radius: 38% 62% 55% 45% / 50% 40% 60% 50%`) with a thin (1px) inner glass rim and a 2-stop gradient fill that falls off toward the lower-right corner — the same falloff a wet pebble exhibits under sun. The overall page reads as ten or twelve **giant pebbles tessellated against a watery sky**, asymmetrically packed, never aligned to a strict grid. Skeleton: - **Outer frame:** a 14-column scaffold on desktop, but only 8–11 columns are ever filled per viewport. The unused columns hold drifting bubble-SVGs and one or two small floating annotation labels (mono caption, e.g. *"specimen 047 · gabbro · west shore · 2003"*). - **Vertical rhythm:** scenes are ~118vh tall (slightly taller than viewport) and connected by a gentle **scroll-snap proximity** so each scene "settles" but never locks rigidly — pebbles wobble before resting. Between scenes is a 22vh **water gap** filled with a horizontally drifting SVG ripple line. - **Asymmetry rule:** the Big Plate's centroid is offset from viewport center by ±7% on the x-axis, alternating sign per scene. The Small Plate hangs in the corresponding negative space, always lower than the Big Plate's centerline by 6–12vh, the way a smaller pebble settles below a larger one underwater. - **Depth stack:** every scene has 5 z-layers — (z0) sky-gradient backdrop, (z1) drifting bubble field, (z2) Small Plate, (z3) Big Plate, (z4) hairline path-draw-SVG diagrams threading from one plate to the next. A subtle parallax (10–35px on a 100vh scroll) is reserved for z1 and z4 only; the plates themselves do *not* parallax — they are anchored to the page so the bubbles and diagrams move *around* them, like water moves around stones. - **Footer / final scene:** an oversized cross-section diagram of a single pebble, drawn in 0.75pt SVG strokes, with a quiet professional credit line in JetBrains Mono. No newsletter form, no CTA buttons. Navigation is a single horizontal tab strip at the top — *index · specimens · field notes · contact* — rendered as four small glass pebbles with reflective tops. No hamburger menu; the strip stays visible but recedes to 48% opacity after the first scroll, returning to full opacity on cursor proximity within 240px. ## Typography and Palette The typographic axis is **eclectic-hybrid**: three families that should not coexist, set in deliberate contrast so the page reads as collected rather than designed. The collision is intentional — a vintage 1970s field-guide caption next to a 2003 product-page headline next to a 2024 monospace ledger entry. **Fonts (Google Fonts only):** - **Frutiger-substitute display — *Bricolage Grotesque*** (variable, weights 300–800). Used at hero scale (8–14vw) for the main headlines. Bricolage Grotesque carries the same humanist warmth and squarish counters as the Frutiger family without being Frutiger; the variable axis lets the headlines breathe with a slight optical inflate on enter (`wdth` 100→112 over 700ms). - **Editorial serif — *Fraunces*** (variable, weights 300–700, opsz 9–144, soft axis). Used at 18–32px for the *Small Plate* annotations and the field-note paragraphs. Fraunces' soft axis is dialed to ~75% to give a wet, polished feel — like type that has been tumbled in a river. - **Ledger mono — *JetBrains Mono*** (weights 400, 500). Used at 11–13px for specimen captions, coordinates, dates, and the rare numeric callout. Caps-on letterforms are avoided; lower-case mono for annotation, upper-case mono only for column headers in the field-notes scene. Pairing rules: - A sentence may mix display + serif, or serif + mono, but **never display + mono on the same line** (the contrast becomes cacophonous). - Headlines set with **letter-spacing -0.012em** at display sizes; body Fraunces set with **+0.005em** to compensate for soft-axis blur; mono captions set with **0** spacing. - Line-height is generous: 1.05 for display, 1.55 for serif body, 1.4 for mono. The page should breathe like wet shoreline air. - One italic Fraunces phrase per scene, maximum, set as a pull-quote in the Small Plate. Italics are precious; do not squander them. **Palette — *ethereal-blue* (with a single warm dissent):** | Token | Hex | Role | |---|---|---| | `--sky-pale` | `#E8F2FB` | top-of-scene gradient stop, softest sky | | `--sky-mid` | `#BFDBEC` | mid-gradient, the air right above the lake | | `--lake-clear` | `#7FB6D4` | dominant aero-blue, the wet pebble's gloss highlight | | `--lake-deep` | `#3F7796` | mid-tone shadow, the unlit side of a wet stone | | `--abyss` | `#1B3D55` | deepest shadow, only used for body text and 1px outlines | | `--mist` | `#F4F8FB` | near-white foreground for Small Plate fills | | `--bubble-glint` | `#FFFFFF` | pure white, only for specular highlights and bubble rims (≤6% area) | | `--ochre-wet` | `#C49A5A` | the lone warm — used at most twice per scroll-screen, for a single italic word, a hairline, or the pebble cross-section's lithic core | The palette is a translucent stack: nothing is fully opaque except text and 1px outlines. Every plate has at least 8% transparency layered over a backdrop-filter blur (16–28px) so the bubble field reads through it. The ochre is the design's pressure-release valve — used precisely the way a single dry leaf appears at the edge of a clean lake. ## Imagery and Motifs - **Vintage photography** is the imagery anchor. The site uses 6–10 grainy, sepia-leaning, slightly washed photographs of pebbles, pebble beaches, lake surfaces, and hands holding stones — staged to look like 1970s/1980s field-guide plates or early Kodachrome travel slides. Each photo is mounted *underneath* the Big Plate's glassy gradient, so the photo reads through the plate as if seen through clear water. Photos are subtly desaturated (`saturation: 0.78`) and given a 4–6% film-grain overlay (SVG feTurbulence) that scrolls *with* the photo, not the page. Crucially, the photographs are warm-toned (sepia-amber-cream), and the surrounding palette is cool — this temperature collision is the design's most striking single move. - **Bubble-playful motifs** drift through every scene: 12–20 SVG bubbles per viewport, each a 2-stop radial gradient with a 1px inner stroke and a single white specular crescent. Bubble diameters: 6px, 14px, 28px, 60px, 110px (five-step scale only — never arbitrary). Bubbles drift upward at 8–18px/sec with a subtle horizontal sine wobble (amplitude ~6px, period 4.2s). They never pop; they exit the top of the viewport and respawn at the bottom with a randomized x-offset. - **Path-draw-svg diagrams** are the site's connective tissue. Hairline (0.75pt) SVG line-art threads between plates: a thin curve from a specimen number on the Small Plate to the corresponding location on the Big Plate's photograph, a longitudinal cross-section of a pebble showing its lithic banding, a dotted sounding-line dropping from the surface to the lakebed. These paths animate in via `stroke-dasharray` / `stroke-dashoffset` as the scene enters viewport (1.4–1.8s ease-out, staggered by 80ms). The diagrams use `--abyss` at 60% opacity, with terminus dots in `--ochre-wet`. - **Glassmorphic plate gloss:** every Big Plate carries a single specular highlight — a soft white-to-transparent gradient sweep across its upper-third, animated to drift slowly (12s loop) on the cursor's lateral position, the way light moves on a wet stone as you tilt your head. - **Reflection motif:** twice per page (hero and final scene), a faint flipped-vertical photograph or diagram appears below its source, separated by a 1px `--lake-clear` waterline. The reflection is gaussian-blurred (8px) and its alpha ramps from 60% at the waterline to 0% at the bottom edge — the optical signature of a still lake. - **No icons, no emoji, no stock vectors, no 3D renders.** The visual vocabulary is exactly four things: pebble plates, bubbles, vintage photographs, hairline diagrams. Discipline is the design. ## Prompts for Implementation Build PPEBBL.com as **a single long HTML document organized as eight full-viewport scenes**, each scene a self-contained "specimen tray." The user's scroll is a slow walk along a lakeshore. Each scene presents one pebble (literal or metaphorical) with its annotations. The implementation must privilege storytelling over conversion: there are no sign-up forms, no pricing tables, no testimonial sliders, no stat-grids, no feature comparison matrices, no "trusted by" logo bars, no CTAs above the fold. PPEBBL.com is a homepage that refuses the homepage genre. Concrete directives: 1. **Asymmetric two-plate layout per scene.** Use CSS Grid with `grid-template-columns: minmax(0,7fr) minmax(0,3fr)` and alternate the column order on odd/even scenes via `grid-auto-flow: dense` and explicit `grid-column` swaps. The Big Plate's `border-radius` should use the asymmetric super-ellipse trick: `border-radius: 38% 62% 55% 45% / 50% 40% 60% 50%` with a `:nth-child` rotation so each pebble's silhouette is unique. 2. **Frutiger-aero gloss treatment.** Each Big Plate gets a stacked background: (a) the vintage photograph as `background-image`, (b) a `linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 38%, rgba(63,119,150,0.22) 100%)` overlay, (c) a `box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -2px 0 rgba(27,61,85,0.25), 0 30px 80px -30px rgba(63,119,150,0.45)`, (d) a thin specular highlight layer animated on cursor lateral position. Use `backdrop-filter: blur(18px) saturate(1.1)` on Small Plates so the bubble field reads through them but the type stays crisp. 3. **Bubble field as canvas or SVG.** Implement the bubble field as a single full-page absolutely-positioned SVG (preferred — selector control) with 80–120 `` elements distributed across the viewport. Animate via `requestAnimationFrame` updating `cy` and `cx` (sine wobble). Bubbles must run independently of scroll; they belong to the page's *atmosphere*, not its *progress*. On cursor move within 120px of a bubble, that bubble's diameter scales 1.0 → 1.18 over 280ms ease-out, then settles back over 600ms. 4. **Path-draw-SVG annotations.** For each scene, define an `` overlay with 2–4 thin curves connecting Small Plate captions to Big Plate hotspots. Use IntersectionObserver with `threshold: [0.35]` to trigger `stroke-dashoffset: 0` animation. Stagger paths by 80ms. Terminus dots in `--ochre-wet` should pulse once (scale 1 → 1.4 → 1) on path completion. 5. **Vintage photo treatment.** Apply CSS filters: `filter: saturate(0.78) sepia(0.12) contrast(1.05);` and overlay an SVG `feTurbulence` grain layer at 4–6% opacity, `mix-blend-mode: overlay`. Photos must NOT animate or zoom on hover — they are field-guide plates, not Instagram stories. They sit still while the bubbles and diagrams move around them. 6. **Scroll choreography.** Use `scroll-snap-type: y proximity` (NOT mandatory) so scenes settle without locking. Between scenes, render the 22vh "water gap" with a horizontally drifting SVG ripple line: a single sine path with `` looping over 14s. The gap should feel like the moment your eye lifts from one pebble and finds the next. 7. **Type animation.** On scene enter, the Bricolage Grotesque headline should animate its `font-variation-settings: 'wdth' 100 → 'wdth' 108` over 700ms ease-out — a subtle inflate, like a stone surfacing. Fraunces body text fades in with `opacity 0 → 1` and `translateY(8px → 0)` over 900ms, staggered 60ms per paragraph. JetBrains Mono captions fade in last, with a typewriter-style `clip-path` reveal over 1100ms (no character-by-character — clip-path is smoother and more Aero). 8. **Cursor reactive light.** Track the cursor globally; pass `--cx` and `--cy` (0–1 normalized) to the document root. Big Plate specular highlights respond to `--cx` (light source moves laterally as cursor moves). Bubble micro-scale responds to local proximity. The cursor itself remains the system default — no custom cursor, no trail. 9. **Reduced motion handling.** Where `prefers-reduced-motion: reduce` is set, freeze the bubble field (each bubble at its initial position, scaled but static), disable the path-draw animation (paths render fully drawn on load), and disable the headline width inflate. Keep the gradient gloss; that is structural, not motion. 10. **Mobile.** Plates stack vertically; the asymmetry rule shifts from horizontal-offset to **horizontal-margin offset** — odd plates inset 8% from left, even plates inset 8% from right. Bubbles density drops to ~35 per viewport. Path-draw diagrams are simplified to single curves (no multi-terminus). Photos retain full treatment. 11. **What NOT to build:** no carousel, no modal, no tooltips, no off-canvas drawer, no sticky CTA, no chat bubble, no cookie banner styled as a card, no animated number counters, no comparison table, no FAQ accordion, no team grid, no logo soup, no testimonial quotes with stars. Anything that would appear in a 2024 SaaS template — omit. The page should feel like a *glossy professional document maintained out of love* rather than a marketing surface. When the user scrolls, they should feel they are reading a quiet catalog of beautiful small things, presented by someone who takes pebbles seriously. ## Uniqueness Notes **Differentiators from sibling designs in the cohort:** 1. **Frutiger-aero, but professional.** Frutiger Aero is overwhelmingly used as a nostalgic/whimsical mode (Y2K throwback, kids-internet revival). PPEBBL.com extracts the *visual grammar* (gloss, bubbles, blue gradients, humanist sans, sky-and-water palette) but couples it to a *professional* tone with editorial typography and field-guide annotation. The result is Frutiger Aero as if it had matured for 22 years and joined an industrial design firm — a register that is, to my knowledge, almost entirely unrepresented in the cohort. None of the 20 prior designs use **frutiger-aero** as their aesthetic. 2. **Vintage photography fused with cool ethereal palette.** Photography is everywhere in the cohort (95% of designs), but it is almost always integrated as edge-to-edge full-bleed hero imagery in matching tone. Here the photographs are warm sepia-amber, deliberately mis-temperature against the cool blue surround, and they sit *under* glassy plates — read through gloss rather than presented directly. This temperature collision and substrate-mounting is the design's signature move. 3. **Asymmetric pebble-plate tessellation, not a grid.** While 55% of cohort designs use **asymmetric** layouts, they are typically rectangular-asymmetric (offset rectangles, broken grids, unequal cards). PPEBBL.com's plates are non-rectangular super-ellipses with per-instance unique silhouettes, packed in a ricochet rhythm that mimics stone-skipping. The shape language itself carries the asymmetry. 4. **Eclectic-hybrid type stack with Bricolage + Fraunces + JetBrains Mono.** The cohort overwhelmingly favors **mono** (85%) usually paired with one display face. The combination of a humanist variable display (Bricolage Grotesque), a soft-axis variable serif (Fraunces), and a ledger mono is rare; eclectic-hybrid as a typography category appears almost nowhere else in the frequency report. 5. **Bubble-playful motifs taken seriously.** Bubble-playful is a 5% motif in the cohort. PPEBBL.com elevates it from a decorative grace-note to the page's *atmospheric primitive*: bubbles are the medium the user reads through, not an embellishment. They run in a cursor-reactive field on every scene, on a strict five-step scale with sine-wobble physics. 6. **No CTAs, no pricing, no stat-grids, no logo soup.** The site refuses the conversion-funnel genre entirely. There is no "sign up," no "book a demo," no testimonial slider, no comparison table. This refusal aligns with the SDESIGN brief's explicit "AVOID CTA-heavy layouts, pricing blocks, stat-grids" guidance and is structurally enforced by the eight-scene narrative scroll. 7. **Path-draw-svg as connective tissue rather than decoration.** Path-draw-svg appears in 20% of cohort designs but typically as standalone illustration animations. Here the paths *literally connect* annotations to specimens, threading Small Plate captions to Big Plate hotspots — turning path-draw from ornament into wayfinding. **Avoided patterns from frequency analysis:** - **Avoided:** glassmorphism-as-default (55% in cohort) — present here only as *plate gloss* on photos, not as a frosted-card-everywhere treatment. - **Avoided:** card-grid (45%), bento-box, dashboard, modular-blocks — replaced by pebble-plate tessellation. - **Avoided:** mono as the dominant typeface (85%) — mono is here strictly an annotation/ledger tier, never a body or display tier. - **Avoided:** gradient palette (85%) and warm palette (80%) — palette is restricted ethereal-blue with a single ochre dissent. - **Avoided:** parallax-everything (85%) — parallax is reserved for the bubble field and SVG diagrams only; the plates themselves are anchored. - **Avoided:** hand-drawn aesthetic (80%) — every line on the page is precise, vectorial, optically clean. **Chosen seed (from assignment):** *aesthetic: frutiger-aero, layout: asymmetric, typography: eclectic-hybrid, palette: ethereal-blue, patterns: path-draw-svg, imagery: vintage-photography, motifs: bubble-playful, tone: professional* The seed was honored across every section: aesthetic (frutiger-aero gloss + bubbles + sky-water palette), layout (asymmetric ricochet rhythm with non-rectangular plates), typography (Bricolage + Fraunces + JetBrains Mono = eclectic-hybrid), palette (8-token ethereal-blue scale with a single ochre dissent), patterns (path-draw-svg as the connective tissue between plates), imagery (sepia-warm vintage photographs read through cool glass), motifs (bubble-playful as the atmospheric primitive), tone (professional copy register, no whimsy in the language). The pun is that "PPEBBL" is itself a frutiger-aero word — it has the gloss of a 2003 product name (think "iSight," "iBook," doubled-letter start, lowercase-ish energy) — and the design treats the wordmark as the first specimen in the archive.