# Design Language for layer2.wiki ## Aesthetics and Tone layer2.wiki is **a scholarly wiki about Layer-2 blockchain scaling, told as a descent through an enchanted reef** — the idea being that if "Layer 1" is the open ocean surface where everything is slow, expensive, and crowded, then "Layer 2" is the warm, luminous *tidal shelf* just beneath it: a hidden coral garden where transactions school like fish, batch up into a single migrating shoal, and surface back to the mainnet only when they must. The aesthetic is **fairycore submerged in a 1970s science-fiction paperback** — the gauzy bioluminescence, pressed-petal delicacy, and fern-frond fragility of fairycore, but lit by the burnt-amber, teal-and-tangerine, chrome-rimmed palette of a vintage Asimov cover. It is *not* cute. It reads like a marine-biology field codex authored by someone who happens to be a faerie cartographer: hushed, precise, footnoted, a little obsessive. Every section is a "depth band" you sink into. The mood is **scholarly, contemplative, gently uncanny** — the calm of a research vessel's lamp-room at 2 a.m., the page turning, the water pressing softly against the porthole. Reference touchstones: Ernst Haeckel's *Kunstformen der Natur* plates reissued as a NASA technical report; the endpapers of a 1973 hardcover oceanography textbook; a faerie's tide-table written in copperplate; the warm green glow of an old oscilloscope mistaken for a jellyfish. ## Layout Motifs and Structure The site is built on **parallax-sections** — not the tired "background drifts slower than text" trick, but a genuine *depth-band architecture*. The page is a single vertical descent through **seven stratified water layers**, and each layer is a parallax plane that scrolls at its own rate, so reading the wiki *feels like* diving: - **Band 0 — Surface (the masthead).** A bright, glare-blown band: the wiki title in oversized Playfair, a horizon line of shimmer, a single tropical fish breaking the surface. Scrolls fastest (foreground). - **Band 1 — The Thermocline (What is a Layer 2?).** The temperature gradient where definitions live. A two-column codex spread: left column an illustrated glossary card (icon + term + one-sentence gloss), right column the running prose. - **Band 2 — The Rollup Reef (Optimistic vs. ZK).** The signature band. Two coral outcrops side by side; little fish (transactions) school toward each, then merge into one fat "batch fish" that swims upward off-screen. Counter-animate odometers tick beside each reef ("≈ 4,000 tx / batch", "≈ 7-day challenge window", "≈ 12-minute proof"). - **Band 3 — The Bridge Trench (Moving assets up and down).** A narrow, dark, vertical canyon. Content laid out as a *vertical timeline* of a single transaction's journey down into L2 and back up — each step a numbered porthole. - **Band 4 — The Garden of Variants (Validium, Volition, Sovereign rollups, Plasma fossils).** A loose, organic float-grid of taxonomy cards drifting like kelp — asymmetric, never aligned to a hard column, each card a different "species" with a Haeckel-style icon-plate. - **Band 5 — The Pressure Chamber (Trade-offs & open questions).** The deepest, quietest, darkest band: a single centered column of long-form scholarly prose, generous margins, the rest of the screen near-black water with faint particulate drift. This is where the "tone: scholarly-intellectual" voice is purest. - **Band 6 — The Floor / Holdfast (References, further reading, the colophon).** Bedrock. Anchored, still, no parallax — the dive has ended. A tidy list of citations set like a journal bibliography, plus the faerie-cartographer's signature. There is **no top navigation bar, no hamburger, no sticky header**. Wayfinding is a slim **depth-gauge rail** pinned to the left edge: a vertical ruler marked in fathoms (0 → 6), with a tiny submersible-dot that descends as you scroll and labels the current band on hover. No CTA buttons, no pricing, no stat-grid blocks, no email capture, no testimonials, no logo wall. ## Typography and Palette **Type system (Google Fonts only):** - **Display / headings — `Playfair Display`** (the "playfair-elegant" seed): used at huge sizes for the masthead and each band title, in its high-contrast Regular and Bold, plus *italic* for the running Latin-binomial-style sub-labels ("*Rollup, optimisticus*"). High thick/thin stroke contrast gives it the engraved-frontispiece quality of an antique natural-history plate. Letter-spacing slightly negative on the giant masthead (`-0.01em`), normal elsewhere. - **Body / scholarly prose — `Spectral`**: a screen-tuned transitional serif with a calm, bookish color and excellent long-read texture. All wiki paragraphs, glossary glosses, timeline steps, and footnotes. Set ~19px, line-height 1.7, max line length ~66ch. - **Labels / depth-gauge / odometers / captions — `IBM Plex Mono`**: monospace for the fathom ruler numerals, the counter-animate odometers, figure numbers ("Fig. 2.3"), and small uppercase eyebrows ("DEPTH BAND 04 · THE GARDEN OF VARIANTS"). Tracking `0.12em` when uppercase. The mono is the "research-instrument" voice against the romantic serifs. **Palette — retro-futuristic (vintage sci-fi paperback meets bioluminescent reef):** - `#0B1F2A` — **abyssal teal-black** (deepest band background, depth-gauge rail) - `#123C46` — **trench teal** (mid-depth section grounds) - `#1E6F6B` — **lagoon viridian** (the recurring "Layer-2 water" tone; coral-reef band base) - `#E7D9B8` — **aged-paper cream** (the surface band + all body text on dark grounds; the codex page) - `#F2A65A` — **tangerine sun** (primary accent — the warm sci-fi-cover orange; band titles' drop-shadow glow, active depth-dot, link underlines) - `#E2603B` — **burnt coral** (secondary accent — Optimistic-rollup reef, warning footnotes, the "challenge window" odometer) - `#7FD8C9` — **bioluminescent mint** (tertiary accent — ZK-rollup reef, the proof-light glow, hover states) - `#C9A8D6` — **faerie heliotrope** (quaternary, used sparingly — the petal/fern decorative filigree, the Validium card, dusk-light gradients) - Chrome rims: a 1px `#D8E6E1` hairline on cards to evoke the brushed-steel keyline of a 1970s book jacket. Gradients are used as *light through water*: vertical washes from `#E7D9B8` (top, glare) → `#1E6F6B` → `#123C46` → `#0B1F2A` (bottom, abyss), so the whole page is one long descent of color. ## Imagery and Motifs **Imagery is icon-heavy (the "imagery: icon-heavy" seed) — hand-drawn-feeling SVG line plates, never photography.** Every concept gets its own little engraved icon-plate in the Haeckel-meets-instrument-panel style: 1.2px viridian or cream stroke, hairline cross-hatching, a tiny mono caption number. Examples: - **Tropical fish as the central recurring motif (the "motifs: tropical-fish" seed):** individual fish = individual transactions; a *school* of fish = a batch; one large "batch fish" carrying tiny passenger-fish in its translucent belly = the rolled-up batch posted to L1. Species drawn flat-side-on, fairycore-delicate: a ribbon eel for the "long bridge withdrawal", a cleaner wrasse for "sequencer", an angelfish for "validator", a school of cardinal tetras for "mempool". Fish drift slowly across bands on parallax; on hover over a glossary term, the matching fish does one slow tail-flick. - **Coral / reef / kelp:** the two rollup "reefs" are stylized brain-coral and staghorn-coral plates; the variant taxonomy cards float on kelp-frond stems. - **Fairycore filigree:** pressed-fern fronds, dragonfly-wing veining, and dandelion-seed motes used as section dividers and corner ornaments — extremely fine line, low opacity, never garish. - **Retro-futuristic instrument bezels:** the counter-animate odometers sit inside little brushed-chrome rounded-rect "gauge" frames with a faux-glass highlight; the depth-gauge rail looks like the etched scale on a brass dive computer. - **Bridge as porthole-stack:** the Bridge Trench timeline steps are circular portholes with a chrome rim, each framing a tiny scene of the transaction's journey. - **Bioluminescent particulate:** a slow upward drift of faint mint and heliotrope motes in the deeper bands — the "marine snow" of the data sea — done with a few hundred tiny CSS/canvas dots, parallax-layered. - **Margin glosses & footnote daggers:** scholarly apparatus rendered visually — `†`, `‡`, superscript figures, a thin rule above the references — to sell the "wiki authored by a faerie naturalist" conceit. ## Prompts for Implementation Build layer2.wiki as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The page is a ~90-second guided dive through seven depth bands of a Layer-2 wiki. There is **no CTA, no pricing table, no stats-grid hero, no email capture, no testimonials, no logo wall, no contact form, no FAQ accordion, no chatbot, no cookie banner, no newsletter**. It is a reading experience first and last. **Storytelling structure (the descent):** 1. **Surface masthead.** Full-viewport pale band: `layer2.wiki` set huge in Playfair Display, a thin shimmering horizon line, one angelfish breaking the meniscus, a one-line italic abstract ("*A field codex of the tidal shelf beneath the mainnet — rollups, bridges, validiums, and the schooling of transactions.*"). A faint "↓ descend" mono cue. Background already begins gradienting toward viridian at the bottom edge. 2. **Band 1 — The Thermocline.** As the user scrolls in, the cream "page" slides up over the viridian water (parallax: page layer faster than water layer). Two-column codex spread: a stack of glossary cards on the left (icon-plate + term + one-sentence gloss for *Layer 1, Layer 2, sequencer, data availability, batch, finality*), running scholarly prose on the right defining what an L2 actually is. Each glossary card's icon-fish does a single tail-flick when its card enters the viewport (stagger the flicks). 3. **Band 2 — The Rollup Reef.** The signature scene. Two coral outcrops: **brain-coral (left, burnt-coral `#E2603B`) = Optimistic rollups**, **staghorn-coral (right, mint `#7FD8C9`) = ZK rollups**. On scroll-trigger, a school of ~20 tiny transaction-fish swims in from screen edges toward each reef, then condenses into one translucent "batch fish" that swims up and off the top of the band (it'll "arrive" conceptually at L1). Beside each reef, **counter-animate odometers** (the "patterns: counter-animate" seed) roll up from 0 to their values when the band is ≥50% visible — `≈ 4,096 tx / batch`, `≈ 7-day challenge window` (burnt coral), `≈ 12-min proof time` (mint), `≈ 1/100 of L1 fee` — each housed in a chrome gauge bezel. Numbers should ease with a slight overshoot-then-settle, like a real dial. A short comparison paragraph runs beneath, in Spectral. 4. **Band 3 — The Bridge Trench.** The viewport narrows visually (dark teal canyon walls slide in from the sides as a parallax frame). A vertical timeline of **6 numbered portholes** tracing one asset's round trip: *(1) deposit on L1 → (2) lock in bridge contract → (3) mint representation on L2 → (4) trade freely, cheaply on L2 → (5) request withdrawal → (6) prove & release on L1 (slow if optimistic, fast if ZK)*. Each porthole draws its chrome rim with a path-draw-svg flourish as it scrolls into center; the connecting line between portholes "fills" with viridian water like a rising tide. 5. **Band 4 — The Garden of Variants.** Loosest band: an asymmetric drifting float-grid (CSS grid with deliberately offset, varied-size cells, gentle parallax bobbing) of ~6 taxonomy cards — *Validium, Volition, Sovereign rollup, Plasma (a fossil specimen), App-chain, Based rollup*. Each card: a Haeckel-style icon-plate, a Playfair-italic "binomial" label, two lines of Spectral gloss, a mono "Fig. n.n", and a `#C9A8D6` heliotrope kelp-stem it appears to hang from. Cards lift slightly and brighten their chrome keyline on hover; no flips, no flashy 3D. 6. **Band 5 — The Pressure Chamber.** The screen goes deep and near-black (`#0B1F2A`), water particulate drifting slowly upward. A single centered column of long-form scholarly prose in `#E7D9B8` Spectral — the genuinely intellectual heart: data-availability trade-offs, sequencer centralization, the trust spectrum, the open research questions. Footnote daggers `†‡` in tangerine, with the footnotes themselves set tiny in IBM Plex Mono at the band's foot. Generous whitespace; this band breathes. 7. **Band 6 — The Floor / Holdfast.** Parallax stops dead — solid bedrock, no movement, signalling the dive's end. A clean journal-style bibliography (author, year, title, in Spectral with mono leading numbers), a "further reading" sub-list, and a colophon line: *"Charted from the lamp-room — typeset in Playfair Display & Spectral — © layer2.wiki"* with a small dragonfly-wing-and-fern faerie sigil. A subtle "↑ resurface" link returns to the masthead. **Animation & interaction notes:** - The hero verb is **parallax-as-descent**: at minimum 3 stacked depth planes per band (far water, mid motifs/fish, near text), each with its own scroll multiplier; the cumulative effect must read as *sinking*, not just "fancy scrolling." - **counter-animate** odometers are the second signature: ease-out with a tiny terminal overshoot, ~1.2s, triggered by IntersectionObserver, formatted with thin-space thousands separators, never re-running once settled. - Fish swim on slow, looping bezier paths; on glossary-term hover the matched fish flicks once. Keep fish counts modest (≤30 on screen at once) and motion *slow* — this is a quiet codex, not an aquarium screensaver. - Section reveals: gentle fade-up + 16px translate, staggered ~80ms, no bounce. Decorative SVG filigree uses path-draw-svg on enter. - Respect `prefers-reduced-motion`: collapse all parallax to static stacked sections, freeze fish, snap odometers to final value, keep the depth-gauge as a plain anchor list. - Cursor: a faint mint ripple-glow follows the pointer in the deeper bands only (off near the bright surface) — subtle, low-alpha, not a spotlight. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A wiki rendered as a physical dive, not a documentation template.** The entire information architecture *is* a depth gradient — sections are water layers, scroll position is literally measured in fathoms on a brass-dive-computer rail. No other site in the corpus uses parallax as a metaphor for vertical depth-of-water this literally; the 1% "parallax-sections" layout is used here as the load-bearing concept rather than decoration. 2. **Fairycore in a scholarly-naturalist register, married to retro sci-fi color.** The 4% "fairycore" aesthetic is almost always deployed as cute/pastoral here; this site keeps fairycore's hairline filigree and pressed-fern delicacy but reroutes it through a footnoted, Latin-binomial, journal-bibliography voice (the 3% "scholarly-intellectual" tone), and lights it with a burnt-amber/teal/coral 1970s-paperback palette (the 5% "retro-futuristic" palette) — a combination that doesn't appear elsewhere. 3. **Tropical fish as a working diagram language for blockchain mechanics.** The 5% "tropical-fish" motif here isn't ambient ocean dressing — schools of fish *are* the mempool, the batch fish *is* a rollup batch, the ribbon eel *is* a slow withdrawal. Paired with the 1% "icon-heavy" imagery (Haeckel-plate SVG icons for every concept) and 12% "counter-animate" gauge odometers, it turns a dense L2 wiki into a legible reef field-guide. 4. **No conversion furniture at all.** Zero CTAs, pricing, stat-grids, hero buttons, email capture, testimonials, or logo walls — the page is a single 90-second read with a beginning (surface), a body (the dive), and an end (bedrock + bibliography), which sets it apart from the CTA-and-card-grid default that dominates the corpus. **Chosen seed:** *aesthetic: fairycore, layout: parallax-sections, typography: playfair-elegant, palette: retro-futuristic, patterns: counter-animate, imagery: icon-heavy, motifs: tropical-fish, tone: scholarly-intellectual* **Avoided patterns from frequency analysis:** sidestepped the over-saturated `hand-drawn` (97%) and `glassmorphism` (71%) aesthetics, `photography` (98%) and `gradient-mesh` imagery, the `full-bleed` / `card-grid` / `centered` layout trio (86–93%), the `warm` + `gradient` palette default (97–98%), and the `cursor-follow` / `spring` / `magnetic` (82–89%) interaction reflexes — using each only minimally or not at all, in favor of the underused parallax-sections + fairycore + retro-futuristic + tropical-fish + icon-heavy + playfair-elegant + scholarly-intellectual + counter-animate combination.