# Design Language for layer2.quest ## Aesthetics and Tone layer2.quest is a **fairycore field-station perched on the skin of a pond** — a hushed, pastoral-romantic place where the word "Layer 2" is taken literally: not the blockchain scaling term, but *the second layer of a body of still water*. Layer 1 is the cold bedrock and the slow silt at the bottom — it never moves, it remembers everything, it is honest and unhurried. Layer 2 is the **meniscus**, the trembling 2-millimetre film at the surface where everything fast and bright actually happens: where water-striders skate, where mayflies touch down for one minute of their lives, where lens-flare from a low sun scatters into a thousand floating coins of light, where a dragonfly's wing leaves a ripple that races out and folds back. The fairy who keeps this station does not log transactions — she logs *surface events*: a leaf landing, a frog's nose breaking through, a raindrop's crown. The site is her quiet ledger of the membrane. The mood is **dew at 6 a.m. in late May** — overcast-to-clearing, everything beaded and slightly fogged, the colours sun-faded the way an old botanical plate or a 1970s field guide goes soft. It is romantic in the *pastoral* sense — meadow, reed-bed, water-lily, the smell of green water — not the candlelit-velvet sense. It is fairycore in the *wetland* register: tadpole-translucent, gauzy, a little waterlogged, with that specific fairycore tenderness toward small fragile creatures and toward thresholds (the surface *is* a threshold). And it carries a thin filament of **tech-mono restraint** running through it — the fairy keeps her log in a clean, slightly clinical monospace, the way a real limnologist would, which keeps the whole thing from collapsing into sugar. Sweet, hushed, faintly scientific, very wet. ## Layout Motifs and Structure The page uses a **persistent left sidebar** — the only navigation — styled as the fairy's **water-gauge rail**: a slim 264px column, faintly frosted (a 4px backdrop-blur over the pond-photograph that bleeds beneath everything), pinned full-height, never collapsing on desktop, sliding to a top sheet on mobile. Inside the rail, top to bottom: a tiny hand-drawn water-strider glyph as the "mark"; a vertical **depth-scale** drawn as real ruled tick-marks (0 cm at top — the meniscus — descending in faded mono numerals 5, 10, 20, 50, "—∞ silt") where each major tick is a section link; below that a single live **monospace readout** that ticks gently ("surface tension: 72.8 mN·m⁻¹ · temp: 14.2 °C · light: scattered"). The rail's right edge is not a hard border — it's a 1px line that *wobbles* by ±0.5px on a slow sine, like the actual edge of water against a glass wall. The main canvas to the right is a **single vertical scroll of six "surface events"**, each one a near-full-viewport band. The bands are not cards and not boxes — each is an **open stretch of pond** with content floating *on* it: a short title set in tech-mono small-caps, two or three sentences of pastoral prose, and one large organic illustration. There is no top nav, no hamburger cluster, no logo wall, no footer marketing block, no CTA, no pricing, no stat-grid, no testimonials, no contact form. Bands are separated only by a **ripple seam** — a thin SVG concentric-ring set that expands across the full width when its boundary enters the viewport, as though something just touched the water there. The vertical rhythm is loose and uneven on purpose (bands run 88vh, 110vh, 92vh, 130vh, 86vh, 104vh) so scrolling feels like drifting, not paging. Everything that floats has a faint **caustic shadow** beneath it — not a drop-shadow, a wobbly bright-rimmed ellipse, the shadow a thing casts when it's resting *on water*. ## Typography and Palette **Type system — Google Fonts only:** - **Tech-mono primary face: `Space Mono`** (400, 400 italic, 700). This is the fairy's logbook hand — used for the sidebar depth-scale numerals, the live readouts, every section title (set in small-caps via `font-variant: small-caps` and letter-spacing `0.14em`), all captions and figure labels (`fig. iv · crown splash · n=1`), and inline annotations. Space Mono's slightly quirky, slightly retro-laboratory feel is exactly the "soft scientific" filament the design needs. Titles step `clamp(1.8rem, 3.4vw, 3rem)`. - **Pastoral body face: `Gentium Plus`** (400, 400 italic, 700) — a humanist book serif with a watercolour-soft contrast and beautiful italics; carries all running prose at 18.5px / 1.78 leading in a generous 64–70ch measure. Italic is used freely for the names of creatures and for asides ("*Gerris lacustris*, the common pond-skater, weighs less than the surface it stands on"). - **Whisper accent face: `Caveat`** (400, 700) — used *sparingly*, once or twice per band, for a single handwritten margin-note in faded ink, the fairy annotating her own log ("the light did this for nine seconds"). Never for headings, never for body. **Palette — muted-vintage, pond-faded:** - `#EAEFE6` — *fogged dew* (page base; a green-tinged off-white, like breath on cold glass) - `#DCE6DE` — *meniscus pale* (sidebar frost fill, band wash variation) - `#9FB6A4` — *reed sage* (mid green-grey; rules, ticks, secondary text) - `#6E8C7C` — *deep water-green* (primary text, illustration ink) - `#3E4A42` — *silt shadow* (the darkest tone — headings on light, the "Layer 1" colour; used like ink, never as a fill) - `#C7B9A0` — *dried-reed bisque* (warm muted neutral; caustic-shadow rims, paper-aged texture) - `#E7C9A6` — *sun-through-haze* (the muted lens-flare warm; faded apricot, used only in light scatters and the warmest flare cores) - `#BFA8C2` — *dragonfly mauve* (a desaturated dusty lilac; the single cool accent — bubble rims, ripple-ring strokes, link hover) Everything is **low-saturation and slightly milky** — no value sits below ~24% lightness, no chroma runs hot. The palette should read like a sun-bleached field-guide plate left on a windowsill for thirty years. ## Imagery and Motifs - **Six hand-drawn surface-event illustrations**, one per band, in 0.8–1.2px deep-water-green line over a 6–10% reed-sage fill, each captioned in Space Mono like a museum card: 1. *The Strider* — a water-strider's six dimples in the surface, drawn as six tiny depressed lens-meniscuses each catching a fleck of sun-through-haze; the bug itself half-implied. 2. *The Crown* — a single raindrop-impact "crown splash" frozen at peak, the ring of beads about to fall back, rendered as eleven hollow circles. 3. *The Lily Margin* — the curled edge of a water-lily pad meeting open water, dew sitting in the crease, a closed bud nearby. 4. *The Bubble Raft* — a loose cluster of 14–20 **bubble-playful** circles of unequal size pressed together at the surface, each with a single bright crescent highlight in sun-through-haze and a thin dragonfly-mauve rim; some bubbles tiny, some thumb-sized — never a uniform grid, always a happy clump. 5. *The Ripple* — concentric expanding rings from a vanished point of contact, the outermost ring fraying. 6. *The Mayfly Minute* — a mayfly touching the film for the one minute it has, its reflection perfect beneath it, the whole drawing dim except a soft lens-flare halo behind it. - **Lens-flare, the muted kind** — a recurring decorative motif: a low overcast sun whose glare doesn't bloom hot but *scatters* into a scatter of faded apricot discs and one long soft anamorphic streak across each band. It is the only "bright" thing on the page and it is still gentle — think 1970s Kodachrome flare, not lens-flare-plugin flare. - **Ripple geometry** as the connective tissue — every section seam, every hover, every "tap" of cursor onto the canvas spawns one set of expanding concentric rings in dragonfly-mauve at ~30% opacity that fade as they grow. - **Caustic light-net** — a very faint, slow-moving SVG mesh of wobbling bright lines (the dancing net of light you see on a pond floor) drifting behind the whole page at ~6% opacity, never distracting, always alive. - **Pressed-specimen feel** — illustrations sit on a barely-there paper-aged grain (`#C7B9A0` at 4%), so the page reads like leaves of a damp field journal. - **Tiny mono datapoints** scattered in margins like a real limnologist's marginalia: pH, temperature, time-of-day, "events logged today: 6" — never as a stat-grid block, always as loose handwritten-feeling annotations beside the art. ## Prompts for Implementation Build layer2.quest as **one HTML file, one CSS file, one ES module** — no framework, no build step. The whole experience is a **slow ~80-second drift down the surface of a pond**, narrated by the fairy who keeps the surface-log. There is **no CTA, no pricing, no email capture, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner.** **Structure (six surface-event bands + sidebar rail):** 1. **Sidebar rail (persistent, left, 264px).** Frosted-glass column with `backdrop-filter: blur(4px)` over the faint pond image beneath. Top: hand-drawn water-strider mark + the words "layer 2 · the surface log" in Space Mono small-caps. Middle: the **depth-scale** — an SVG ruler running the column's height, tick-marked `0 cm` (meniscus) at top down to `—∞ silt`, where six labelled major ticks are the nav links to the six bands; the active band's tick glows in dragonfly-mauve and a small filled dot slides to it on scroll. Bottom: a `
`-style **live readout** that updates every ~3.5s with gently jittered values (surface tension ~72–73 mN·m⁻¹, temp ~13–15 °C, "light: scattered / breaking / low"). The rail's right edge is a 1px line animated on a slow `transform: translateX()` sine of ±0.5px — the waterline trembling.

2. **Band 01 — The Meniscus (intro).** Near-full viewport. Big Space Mono small-caps title "the second layer." Two sentences of pastoral prose explaining that Layer 1 is the silt that remembers and Layer 2 is the skin where the light lives. The Strider illustration floats centre-right with its caustic shadow. A muted lens-flare scatter drifts diagonally as the band enters.

3. **Band 02 — The Crown.** The raindrop-crown drawing, large, left side. Prose: what the surface does in the half-second after it's touched. A `path-draw-svg` style reveal — the eleven crown beads draw themselves on with `stroke-dasharray` when 40% in view, staggered.

4. **Band 03 — The Lily Margin.** The lily-pad-edge drawing. Prose about thresholds and the fairycore tenderness toward edges. Slow parallax: the illustration drifts up 24px while the prose holds still.

5. **Band 04 — The Bubble Raft.** The bubble cluster, big and central, drawn with the **bubble-playful** unequal-circle clump. On scroll-in, the bubbles do a soft `spring`/`elastic` settle (scale 0.8 → 1, slightly overshooting, staggered, each bubble jiggling a touch like real surface bubbles nudging each other). Prose: the lightest thing on the pond is a raft of air. Hovering a bubble makes it wobble and emit one small ripple ring.

6. **Band 05 — The Ripple.** The concentric-ring drawing. This band's **ripple seam** above and below are extra-emphasised. Prose about how every touch travels out and comes back changed. Cursor moving across this band continuously spawns faint trailing ripple rings (throttled, mauve, fade-as-grow).

7. **Band 06 — The Mayfly Minute (close).** Dimmest band. The mayfly-on-the-film drawing, centred, with a soft lens-flare halo behind it that very slowly breathes (opacity 0.3 → 0.45 over ~8s). Final pastoral line — something like *"it had one minute, and it spent it standing on light."* — set in Gentium Plus italic, with one Caveat margin-note beside it. Below: just a hairline rule and the Space Mono line `— end of today's surface log · layer2.quest`.

**Motion & interaction:**
- **Ripple** is the signature: section seams expand a concentric-ring SVG on enter; clicking/tapping anywhere on the canvas drops one ring set at the pointer; bubble hover emits one. Rings always start small, grow to ~360px, fade linearly, the outer ring fraying slightly via a turbulence filter. Honour `prefers-reduced-motion` by making rings appear-then-fade in place without expansion.
- **Caustic light-net** drifts behind everything: an SVG of ~8 wobbling bright `path`s at 6% opacity, animated with a long slow `animateTransform` — the dancing light on a pond floor.
- **Muted lens-flare** per band: a small group of faded-apricot discs of varying size + one long soft anamorphic streak, parented to a node that drifts diagonally a few px as the band scrolls through; never harsh, never bloomed — `mix-blend-mode: screen` over the pale base at low opacity.
- **Caustic shadows**, not drop-shadows: anything floating on the canvas gets a wobbly, bright-rimmed elliptical shadow beneath it (a blurred radial-gradient ellipse with a faint `#C7B9A0` rim), gently animated to ripple ±2px — the shadow of a thing resting on water.
- Section titles do a tiny **spring** settle on enter; prose lines `fade-reveal` upward in a soft stagger; the depth-scale dot moves with an eased, slightly elastic transition.
- **Sound is off by default**; if you add anything, only an optional, very quiet pond-loop behind a clearly-labelled mono toggle in the rail — never autoplay.

**Build notes:** semantic HTML (`