# Design Language for PPEBBL.com
## Aesthetics and Tone
PPEBBL.com is a **moonlit lapidary** — a watercolour cabinet of mineral specimens half-glimpsed under tide pools at three in the morning. The four doubled letters (PP-EBBL) are read as the first faint *plinks* of pebbles dropped into a still, deep pool: each impact widens into a stained-paper bloom, pigments seeping outward, then receding into the page. The tone is unapologetically **mysterious-moody** — not gothic, not cute, but *cold-water-romantic* in the manner of a Hokusai indigo wash crossed with a Victorian mineralogy plate left out in the rain. There is no chatter on this site. The visitor arrives, the pigment lifts, a single pebble turns. The brand voice writes in the present tense, often in incomplete sentences, never in marketing copy. Quotations are preferred over claims; observations preferred over instructions. The site smells of wet slate and old paper and the faintest trace of iron.
Inspirations layered without parody: the cyanotypes of Anna Atkins; the cracked-pigment endpapers of pre-WWI mineralogy texts; Yuko Shimizu's water-and-ink portraiture; the cold marbled blues of Etruscan obsidian; the title pages of Aldine Press editions of Ovid's *Metamorphoses*; and the specific quiet of skipping stones across a slate-grey lake at dusk. The cumulative impression is *gravely beautiful* — pebble-weight, hand-felt, unhurried.
## Layout Motifs and Structure
The composition is **full-bleed**, edge-to-edge, no containing frame, no fixed nav bar — the watercolour must be allowed to bleed off the paper. Yet the underlying scaffold is rigorous: a **fluid 14-column rule** at desktop (`clamp(72px, 6.4vw, 116px)` per column) with a single double-gutter (44px) reserved as a contemplative margin running down the right third of the viewport. The reading content lives in columns 2–9; the right gutter (10–14) is **deliberately, ostentatiously empty** for the first scroll viewport — it holds a single lithographed pebble, slowly rotating on its long axis, suspended in negative space like a museum specimen on a wire.
Six full-viewport "stones" form the structural sequence:
1. **The Drop** — full-bleed indigo wash; one pebble dead-centre; a single line of Garamond italic at the lower-left bleed: *"a pebble breaks the lake."*
2. **The Bloom** — three stacked watercolour blooms (cobalt, oxblood, ochre), each half off-screen; type wraps around their organic edges via SVG `shape-outside`.
3. **The Cabinet** — a 4×3 specimen grid of crystalline pebbles, each one a distinct mineral plate. This is the only multi-tile section; even here the tiles bleed off the right edge.
4. **The Field Notes** — a long single-column reading panel set on warm cream paper, with marginalia in ink-blue handwritten notes leaking into the wide right gutter.
5. **The Provenance** — a horizontal river-scroll (`scroll-snap-type: x mandatory`) of seven dated entries, each a watercolour postage stamp with a different pigment.
6. **The Stillness** — the closing viewport: a single pebble settling to the bottom of a lake; the entire page goes silent (no animation, no motion) for the final 100vh.
There is no fixed header. Navigation is a single index discreetly tucked in the upper-right bleed corner — six tiny watercolour dots, each one tinted to match its destination section's dominant pigment, that expand on hover into Roman numerals (I–VI). No hamburger menu. No mega-menu. No sticky CTA.
## Typography and Palette
**Typography (Google Fonts only — all freely licensed):**
- **Display:** `Cormorant Garamond` (300, 500 italic) — the calibration is set on the *italic* cut, not the upright. Heads run at `clamp(3.5rem, 9vw, 8.4rem)` with **negative letter-spacing of -0.022em** and `font-feature-settings: "liga", "dlig", "swsh"` to summon the swash-italic descenders. The italic Garamond *is* the watercolour brushstroke.
- **Sub-display:** `EB Garamond` (400 italic) at `clamp(1.5rem, 2.4vw, 2.4rem)` for sub-headers and the half-line whispered phrases that float between sections.
- **Body editorial:** `EB Garamond` (400, 1.18rem, line-height 1.78) — wide measure (max-width 64ch) on cream paper.
- **Marginalia:** `Caveat` (400) — a fluent watercolour-pen handwriting for ink-blue marginal notes; rotated -3deg to -5deg as if scribbled fast.
- **Caption / specimen labels:** `IM Fell English SC` (400) — eighteenth-century small-caps for mineral classification labels under each pebble.
No grotesque sans. No mono. No Inter. The whole site is *serif-classical with one handwritten voice*, period.
**Palette — triadic, anchored by indigo:**
The triad is not the standard primary-triad — it is rotated to an *off-axis triad* sampled from oxidised pigments:
- **Primary — Wet Indigo:** `#1F2A44` (deep base, dominant background)
- **Secondary — Oxblood Madder:** `#7A2435` (the second-pigment-in-the-pool warm)
- **Tertiary — Verdigris Sap:** `#3F6A5A` (the cold green shadow under wet stone)
Supporting neutrals (paper, ink, foam):
- **Paper Cream:** `#F4ECDB` (warm rag-paper, never pure white)
- **Pigment Ink:** `#0C1424` (deeper than indigo — used only for body type at small sizes)
- **Bloom Bleed:** `#C7A66B` (ochre tide-line; appears at the edges of every watercolour wash)
- **Foam Stipple:** `#E8DCC4` (used only for the rim-light of pebbles)
The indigo, oxblood, and verdigris are **never blended digitally** — every wash is rendered as two layered SVG `feTurbulence` + `feDisplacementMap` filters with the triad colours kept as separate ink layers, so the eye reads them as physically pooled, not photoshopped.
## Imagery and Motifs
The dominant motif is **crystalline pebbles** — twelve hero specimens, each one a distinct hand-painted watercolour. They are not photographs of stones. They are SVG paintings: rounded organic silhouettes (4–7 control points each, generated by Bézier loops) filled with layered radial gradients and stippled noise to simulate inclusions, fissures, and the wet sheen of polished mineral. Each pebble has:
- a **base wash** (one of the triad colours at 100%),
- a **pooled darker rim** at the lower contour (the puddled pigment that gathers as watercolour dries),
- one to three **inner crystalline facets** — sharp polygonal flashes of `Foam Stipple` at 12–22% opacity, suggesting hidden geometry inside the rounded form,
- an **edge bleed** of `Bloom Bleed` ochre that disrespects the pebble's outline by 4–8px, the way real watercolour escapes its drawn boundary.
The **crystalline** detail is the conceptual punchline: from the outside each PPEBBL is a worn, soft, oceanic stone — but every specimen, when hovered, *cracks open* via clip-path animation to reveal an interior of impossibly sharp geometric facets. The pebble is gentle; its core is a shard.
Recurring secondary motifs:
- **Concentric ripples** — single-stroke SVG circles emanating from any cursor click, fading from `Wet Indigo` → transparent over 1.4s with `cubic-bezier(0.22, 1, 0.36, 1)`.
- **Tide-lines** — horizontal hand-drawn pencil lines (SVG `path` with `stroke-dasharray` to mimic broken graphite) marking section boundaries instead of `
`.
- **Specimen labels** — small-caps Roman-numeral plate numbers (PLATE I, PLATE II…) under every pebble, set in `IM Fell English SC` at 0.78rem with extreme letter-spacing (0.18em) and a subtle underline drawn as an SVG dashed path.
- **Watercolour drip** — at the bottom-right of the viewport, three slow vertical drips of `Oxblood Madder` descend at different rates (8s, 13s, 19s loops), pooling at the bleed edge into a faint ochre stain.
- **Cyanotype frames** — every embedded image (if any) sits inside a cyanotype frame: indigo-tinted, slightly under-exposed, with a hand-cut paper edge.
Strictly forbidden imagery: no stock photography, no 3D renders, no photographs of actual rocks, no neon, no glow, no glassmorphism, no gradient meshes that look like Apple keynotes. Everything is painted, even the buttons.
## Prompts for Implementation
Build PPEBBL.com as **one continuous fall through still water**. Treat scroll as descent and as time. The reader is dropping a pebble into a deep pool and watching it sink, blossom, settle.
- **The opening 100vh** is silent black (`#0C1424`) for the first 800ms after `DOMContentLoaded`. Then a single Garamond italic word — `pebble.` — fades in centre-page. After 1.6s a watercolour bloom expands radially from that word over 2.4s with a custom CSS `@keyframes` driving a clip-path circle from 0% to 140%, revealing the indigo Stone I underneath. **No skip button. No "loading…" text. No spinner.** The site is a poem; you wait for it.
- **Hover-lift is the dominant micro-interaction.** Every pebble in the cabinet lifts on hover via `transform: translateY(-12px) rotate(-1.4deg)` paired with a soft cast shadow that *also* shifts (the shadow falls 18px down-and-right, and its blur expands from 24px to 48px). The lift uses a spring-cubic-bezier `(0.34, 1.56, 0.64, 1)` over 460ms. Concurrently the pebble's clip-path cracks: a polygonal facet opens revealing the crystalline interior. On unhover, the facet closes more slowly (700ms) than it opened — pebbles do not eagerly re-seal.
- **Scroll-driven watercolour blooms** — use `IntersectionObserver` (threshold 0.25) with a hand-rolled SVG morph: each bloom enters as a tiny dot at its anchor point, then over 1.8s expands to its full irregular silhouette via `` interpolating between two SVG paths (a circle and a hand-drawn organic blob). Stagger siblings by 240ms for a felt sense of pigments being applied one by one.
- **The cursor is a sumi-e brushstroke trail.** A CSS-painted, low-opacity ink-blue trailing line follows the cursor with three lagged layers (lag 80ms, 160ms, 240ms), each fading over 800ms. On idle for >3s, the trail dries up and disappears.
- **The river-scroll provenance** uses native `scroll-snap-type: x mandatory` with `scroll-snap-align: center` on each entry. The horizontal bar is invisible; instead, scroll-progress is rendered as a watercolour tide-line beneath the entries that fills from left to right with `Verdigris Sap`, its right edge a torn-wet-paper deckle (SVG `feTurbulence` displacement on the gradient stop).
- **Ambient micro-motion:** the indigo background is *almost* still. A 240×240px SVG noise tile is layered at 6% opacity and given a `transform: translate3d` driven by a 60-second `@keyframes` cycle that nudges the pattern by ±3px in both axes — invisible motion that just barely breathes.
- **Storytelling above selling.** No pricing, no testimonial carousel, no stat grid, no "Trusted by 10,000+ companies", no CTA in primary color, no above-the-fold conversion bar. The closest the site comes to a CTA is a hand-lettered phrase in `Caveat` at the foot of Stone IV: *"if you are still here, write."* — followed by a single ink-blue email link with no underline, only a watercolour-stain hover state.
- **JS budget is small and surgical.** Use vanilla JS (no framework). One IntersectionObserver, one scroll listener (passive), one cursor listener (throttled to 16ms), one event delegation handler for the cabinet hover-cracks. No carousels libraries. No Lottie. SVG animations are SMIL where appropriate, CSS `@keyframes` elsewhere.
- **Type renders crisply at every size.** Set `text-rendering: optimizeLegibility` and `font-feature-settings` carefully. Cormorant Garamond italic at 8rem must show its swash descenders — load the variable font subset with `unicode-range` to stay under 80KB.
- **Page is a single document.** No SPA routing. No client-side framework. HTML loads once, CSS does the heavy lifting, JS does the seasoning. The whole thing should weigh under 220KB before images, and there are no images — only SVG.
- **The final viewport (Stone VI) holds for a beat.** When the reader scrolls into Stillness, all animations across the page pause for the last 100vh via a single `body[data-stone="6"] *` rule that sets `animation-play-state: paused`. The pebble has settled. The page is at rest.
## Uniqueness Notes
Differentiators against the existing batch and against generic web design at large:
1. **Italic Garamond as the sole display voice.** Most sites that reach for Garamond use it upright as a "luxury serif." PPEBBL uses *only the italic cut* at display weight, treating each headline as a single brushstroke. This reads as a watercolour signature, not a logotype, and decisively distinguishes the site from the registry's other Garamond-classic entry (LLITTL.com), which weds Garamond to electric magenta in an editorial broadsheet maximalist key. PPEBBL goes the other direction entirely — quiet, wet, horizontal.
2. **Crystalline interior reveal as the primary hover.** The site's central conceit — "soft pebble outside, crystal shard inside" — is encoded directly in the hover-lift micro-interaction via clip-path facet animation. No other site in the registry uses hover-lift this way; existing uses of hover-lift are decorative card-elevations. Here the lift *and the crack* together carry the brand argument.
3. **Triadic palette anchored to oxidised pigments**, not the registry's dominant warm/gradient palette (which is at 90%+ saturation in the frequency analysis). The Wet Indigo / Oxblood Madder / Verdigris Sap triad is sampled from real watercolour pigments and is rendered as physically separated SVG ink layers, not blended gradients — the eye reads pooled pigment, not Photoshop fill.
4. **Full-bleed used as wet-paper bleed**, not as edge-to-edge corporate hero. Although full-bleed is at 70% in the frequency analysis (overused), PPEBBL re-purposes the pattern: the bleed exists so the watercolour can escape the page, not so a stock photo can fill the viewport. The deliberate empty right-third gutter on the first viewport is the inverse of the typical full-bleed cliché.
5. **Mysterious-moody tone in a sea of "professional" / "playful"** — the registry currently has zero mysterious-moody tones. PPEBBL claims this register cleanly. The voice is observational, fragmentary, present-tense, romantic about wet stone.
6. **No CTA-driven layout, no pricing, no stat grid, no testimonial wall.** Per the SDESIGN avoid-list, the entire site is a six-stone scroll narrative; the only "conversion" is a hand-lettered request to write, set in Caveat at the foot of Stone IV.
7. **Crystalline motifs are *new* in the registry.** Frequency analysis shows zero prior use of `crystalline`, and the site treats it not as a decorative shape but as the conceptual hidden-geometry under every soft form — a structural metaphor, not a sticker.
8. **Watercolour imagery rendered entirely in SVG.** The frequency analysis shows watercolour imagery used in only 10% of designs (water-bubbles), and where used it tends to lean photographic. PPEBBL renders every wash, drip, and tide-line in SVG with `feTurbulence` + `feDisplacementMap` so the entire site weighs under a quarter-megabyte and remains crisp at any zoom.
**Chosen seed (per assignment):** `aesthetic: watercolor, layout: full-bleed, typography: garamond-classic, palette: triadic, patterns: hover-lift, imagery: watercolor, motifs: crystalline, tone: mysterious-moody`
**Avoided patterns from frequency analysis:** declined `mono` typography (80% — saturated), declined `warm` and `gradient` palettes (90% / 70% — saturated), declined `parallax` and `stagger` as primary patterns (50% / 40% — preferring `hover-lift` at 20%), declined `vintage` motifs (50% — preferring `crystalline` at 0%), declined `photography` imagery (60% — preferring `watercolor` at 0%).