# Design Language for layer2.wiki ## Aesthetics and Tone layer2.wiki is a living encyclopedia of "second layers" -- the membranes, canopies, reef-shelves, and understories that sit *on top of* a primary surface and quietly do most of the real work. The blockchain reading ("Layer 2" scaling, rollups, channels) is the surface text; the deeper text is a naturalist's monograph on stratification itself. The visual identity is **botanical-scholarly**: a digitized herbarium crossed with a public aquarium's interpretive signage. Picture the reading room of a Victorian botanical institute that has been gently flooded -- glass cabinets of pressed specimens, brass-cornered index drawers, hand-lettered Latin binomials -- but now light filters down through water, and a school of small tropical fish drifts between the display cases as if the whole archive were a tide pool. The mood is **cool, patient, and intellectually generous**. Nothing shouts. The page behaves like a well-curated museum gallery at 10am on a Tuesday: hushed, precise, faintly humid. Color stays in a disciplined band of cool grays -- slate, dove, fog, the gray-green of lichen on north-facing bark -- so that the few living accents (a coral fin, a leaf-vein chartreuse) land like a single specimen pinned under glass. The tone of voice in copy is that of a generous lecturer mid-sentence: footnoted, cross-referenced, faintly delighted by its own tangents, never condescending. This is reference material that wants to be *read*, not skimmed -- so the design rewards lingering: hover a term and its etymology unfurls; scroll into a section and its diagram assembles itself like a flower opening at dawn. Anti-goals: no dashboards, no token tickers, no "Get Started" funnels, no neon crypto-glow, no hero-with-CTA. This is a wiki, a herbarium, a quiet stratum -- treat it as one. ## Layout Motifs and Structure **Primary layout: sidebar (persistent left rail) with a single flowing reading column -- a digital herbarium with its index drawer always open.** - **The Index Rail (left, ~280px, fixed):** A vertical "specimen drawer" running the full height of the viewport. It holds the table of contents rendered as a *botanical key* -- nested, dichotomous, indented like a field guide ("1a. Has its own consensus → go to 2 / 1b. Borrows consensus → Rollup"). The active entry is marked not with a highlight bar but with a small pressed-leaf glyph and a hairline that draws itself along the entry on hover (underline-draw, but vertical and organic). At the very top of the rail sits the wordmark; at the bottom, a tiny "depth gauge" -- a vertical ruler in fathoms/strata that fills as you scroll the main column, so you always know how deep into the canopy you are. On narrow screens the rail collapses into a slim ribbon that expands on tap with a soft bounce. - **The Reading Column (center, max ~720px, generously margined):** One continuous scroll, organized as numbered *strata* (§1 Substrate, §2 The Canopy Layer, §3 Rollups, §4 Channels & Plasma, §5 Glossary / Specimen Index). Generous leading, hanging indents for definition lists, marginal notes that float into the right gutter on wide screens. Section headers arrive as **botanical plates**: a thin-ruled rectangular frame, a Latin-style binomial in italic ("*Optimismum rollupii*"), a plate number in the corner, and a small isometric line-diagram of the concept (a tank, a stack of glass shelves, a branching root) that draws itself in when the section enters the viewport. - **The Right Gutter (wide screens only, ~200px):** Reserved for marginalia -- footnote text, cross-reference chips ("see also: §3.2"), and the occasional drifting fish that swims slowly from the bottom of one section to the top of the next, pausing to "nibble" at a marginal note. - **No footer CTA.** The page ends the way a monograph ends: a colophon (typeface notes, "specimens collected 2026", a pressed-leaf flourish) and a single quiet line linking back to the index. Composition principle: **stratification made literal**. Every section visually layers a frame (the cabinet), a plate (the specimen), prose (the label), and water-light (a faint cool gradient wash drifting at 0.2x scroll). Depth comes from these translucent overlapping planes, never from drop-shadows-as-buttons. ## Typography and Palette **Typography -- "variable-fluid": a single superfamily breathing across weight and optical size, with one expressive serif companion.** - **Body & UI / Index Rail:** "Source Serif 4" (Google Fonts) -- a variable serif with genuine optical-size and weight axes. Body text set fluidly: `font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.1875rem)`; line-height ~1.7. As the viewport narrows, weight nudges very slightly heavier and optical size smaller for legibility -- type that *adapts* like a leaf turning toward light. Hanging punctuation in definition lists. - **Display / Section Plate Titles / Latin Binomials:** "Fraunces" (Google Fonts) -- a "wonky", soft-serif variable display face with a SOFT axis; used italic for the mock-Linnaean binomials and upright for plate titles. Sizes fluid: `clamp(1.9rem, 1.4rem + 2.6vw, 3.4rem)`, letter-spacing slightly negative at large sizes. Its slight wobble reads as hand-engraved, herbarium-label-like. - **Wordmark / Plate Numbers / Depth Gauge / Captions:** "IBM Plex Mono" (Google Fonts), small, wide-tracked, lowercase -- the cataloguer's typewriter. Used for "fig. 3.2", "plate xi", "layer2.wiki", footnote superscripts, and the fathom ruler. - **Marginalia / footnotes:** Source Serif 4 at the small optical size, ~0.85em, set in the cooler text gray. **Palette -- "cool-grays" with two living specimens and water-light:** - `#11161a` — Abyssal Slate (deepest text, plate frames, the rail's pressed-leaf glyph) - `#2b3640` — Lichen Slate (headings, primary ink) - `#4f5d68` — Fathom Gray (body text on light grounds, the depth gauge) - `#8a98a3` — Dove Gray (secondary text, hairlines, inactive index entries) - `#c3ccd2` — Fog Gray (rules, frame strokes, dividers) - `#e7ebee` — Ice Paper (primary background -- a cool, faintly bluish off-white, like museum glass) - `#f4f6f7` — Vellum Mist (alternating section wash / card grounds) - `#3f7e74` — Eelgrass Green (the botanical living accent: leaf veins, active links underline, root-diagram strokes) — used sparingly - `#e2664f` — Coral Fin (the singular hot accent: the drifting fish, current-stratum marker, hover state on key terms) — used like a single drop of dye Backgrounds carry an extremely subtle cool radial gradient (`#eef1f3` → `#e2e7ea`) that drifts on scroll to suggest light moving through water. Never any warm tone -- warmth is forbidden here; this is a north-light room. ## Imagery and Motifs **Imagery direction: "isometric-icons" -- a consistent set of fine-line isometric line drawings, plus pressed-botanical and aquatic motifs. No photography. No gradients-as-images. Everything is drawn.** 1. **The Isometric Specimen Plates.** Each major concept gets a small (~120-180px) isometric line illustration in 1.25px Fathom Gray stroke on transparent ground: a stack of glass shelves (the layer stack), a sealed glass tank with a tube running out the top (a rollup posting to L1), two cabinets joined by a brass pipe (a state channel), a branching mangrove root submerged in a planter (Plasma trees), an index-card drawer half-open (the glossary). All share the same 30° isometric grid and the same stroke weight so they read as one engraved series. Eelgrass Green appears only on "veins" / "flow lines" within them; Coral Fin only on a single highlighted node. 2. **The Pressed Leaf.** The site's signature mark: an SVG of a single pressed, flattened leaf with visible venation -- used as the favicon, the active-index glyph, the colophon flourish, and the "end of section" divider (a leaf laid across a hairline rule). Stroke-only in Abyssal Slate, with veins in Eelgrass Green. 3. **The Drifting Fish.** A small school (3-5) of minimalist line-drawn tropical fish -- think a tang, a wrasse, a single clownfish-silhouette -- rendered in 1px stroke, mostly Dove Gray, with exactly *one* fish filled Coral Fin. They drift slowly across the right gutter and occasionally cross behind the reading column at low opacity, on a slow sine-wave path. They are decorative ambient life, never interactive UI -- the wiki is a tide pool and they live in it. 4. **Stratum Hairlines.** Thin horizontal rules with tiny tick marks (like a geological core sample or a ruler) separating strata; the depth gauge in the rail uses the same vocabulary. 5. **Herbarium Frame.** A consistent rectangular plate frame -- 1px Fog Gray outer, 4px inset margin, then a hairline inner rule -- around section-opening illustrations and glossary cards, with a mono plate number tucked in the top-left corner. 6. **Caustic Light.** A barely-there animated SVG/CSS pattern of rippling water-caustic lines, ~4% opacity, drifting across the page background -- the only thing in the entire design that hints "you are underwater." ## Prompts for Implementation **Build it as a single long-scroll reference document with a fixed left index rail. No router, no tabs -- one continuous flowing page of strata, navigated by anchor links in the rail. The whole experience should feel like reading a beautifully typeset monograph in a flooded library.** - **Layout skeleton:** CSS Grid at the body level — `grid-template-columns: 280px minmax(0, 1fr) 200px` on wide screens, collapsing to a single column with a collapsible top ribbon below ~900px. The left rail is `position: sticky; top: 0; height: 100vh; overflow-y: auto`. The reading column has `max-width: 720px; margin-inline: auto`. The right gutter holds absolutely-positioned marginalia anchored to their referenced paragraphs. - **Index rail as a botanical key:** Render the TOC as nested `