# Design Language for layer-2.wiki ## Aesthetics and Tone layer-2.wiki is a **soft-clay control room for the second floor of a blockchain** — a place where the noise of mainnet has been muffled, where every batch of transactions has already been folded, compressed, and set down gently on a warm felt table. The aesthetic is **neomorphism rendered in a sunlit beeswax workshop**: not the cold blue-grey "soft UI" of dribbble shots, but a tactile world of *butter-toned plastic, pressed and dimpled*, where buttons rise like rising dough and panels sink like thumbprints in clay. Imagine a 1970s electronic-organ control surface — knobs, sliders, illuminated rocker switches — re-cast entirely in a single warm cream resin, then photographed under late-afternoon studio light so that every extrusion casts a tiny twin shadow (one dark below-right, one light above-left). The tone is **professional**, not playful-cute and not corporate-sterile — it is the voice of a *patient field engineer* who knows L2 deeply and explains it without condescension or hype: "here is the batch, here is the proof, here is where it settles, here is what it costs." There is no moon-talk, no rocket emoji energy, no "wagmi." The site behaves like documentation that respects your time but rewards your attention — calm, exact, quietly confident. Where it allows itself one indulgence, it is the **bubble-playful motif**: small rounded blobs that drift through the negative space like soft-bodied data — a reminder that underneath the engineering rigor, this thing is alive and breathing. The mood word is **upholstered clarity**: dense technical content, but every edge rounded, every surface padded, every transition cushioned. ## Layout Motifs and Structure The site is a **single-page dashboard**, but a *narrative* dashboard — not a metrics wall. It is composed as a **stack of seven embossed instrument panels**, each occupying roughly a full viewport, each one a different "module" of the Layer 2 story, and each rendered as a single large neomorphic slab — *raised* from the page background — onto which smaller controls and read-outs are *recessed*. - **The dual-shadow grammar.** Every element obeys one rule: it is either **extruded** (lifted toward the viewer, `box-shadow: -8px -8px 16px var(--clay-light), 8px 8px 16px var(--clay-shadow)`) or **inset** (pressed into the surface, the same shadows but `inset`). Raised = "this is a thing you act on or read." Inset = "this is a slot, a track, a well, a display." Nothing is flat. Nothing has a hard 1px border. The entire visual hierarchy is communicated through *how far above or below the clay* an element sits. - **The dashboard column-and-gauge skeleton.** Each of the seven panels uses a **12-column grid** but never as equal cards — instead as an instrument layout: a wide left "schematic" zone (7–8 cols) holding the diagram or 3D render for that module, and a right "read-out stack" (4–5 cols) holding 2–4 recessed gauge-wells with rounded numerals and short captions. The eye reads left (the picture) then right (the figures), like scanning a real control panel. - **Rounded everything.** Border-radius is never below 18px on any container, never below 999px (pill) on any interactive control. Corners are *generously* round — the felt-table feel depends on the absence of sharp geometry. - **Bubble negative space.** The gaps *between* panels are not empty — they are a soft warm field through which **8–14 translucent rounded blobs** of varying size drift slowly upward (CSS-animated, ~40–70s loops), each blob a faint blurred circle in a cream-adjacent tint. They pass *behind* the panels (lower z-index), so as you scroll, panels appear to float over a gently bubbling substrate. This is the only "decoration" the design permits, and it is quiet — opacity 0.18–0.35, heavily blurred. - **No hero CTA, no pricing tier, no testimonial carousel, no stat-grid-as-landing.** The seven panels are: (1) *Welcome / What Is Layer 2*, (2) *The Rollup Mechanism* (batching animation), (3) *Optimistic vs. Zero-Knowledge* (a two-state toggle panel), (4) *The Settlement Layer* (how proofs land on L1), (5) *Data Availability* (the felt where batch-data is laid out), (6) *The Bridge* (asset movement, the most "bubble-playful" panel), (7) *The Wiki Index* (a recessed list of entry-links, the only navigational payload). The page *ends* on the index, not on a sales pitch. ## Typography and Palette **Typography — rounded-sans, two voices, both on Google Fonts:** - **Display & headings — `Quicksand` (weights 500, 600, 700).** Quicksand's geometric-but-soft letterforms (perfectly circular bowls on `o`, `e`, `a`; rounded terminals everywhere) are the literal typographic echo of the neomorphic surfaces. Used for panel titles (set 38–64px, weight 600, letter-spacing +0.01em) and the wordmark "layer-2.wiki" (the "2" is the lone slightly-larger glyph, rendered in the accent amber). Headings never go uppercase — that would feel too rigid for this clay world. - **Body, captions, gauge labels & code — `Nunito Sans` (weights 400, 600, 700; also its italic).** Nunito Sans is the slightly more reserved, more legible sibling — humanist enough to carry dense paragraphs of L2 explanation at 16–18px, with a tall x-height that survives being set on a low-contrast cream surface. For inline technical tokens (`calldata`, `0x…`, `eth_call`), Nunito Sans 700 in the deep-cocoa ink, set inside a tiny recessed pill — *not* a monospace font, deliberately: this wiki refuses the terminal cliché and keeps even its code feeling upholstered. **Palette — warm, low-contrast, single-resin:** The whole site is essentially *one warm cream* in seven lightnesses, plus two accents. This is non-negotiable for neomorphism: the dual shadows only read if the surface is mid-tone and the light/dark shadow tints are siblings of it. - `#EDE4D6` — **Beeswax Base** — the page background, the "table." - `#F6EFE2` — **Risen Cream** — raised panel surfaces (the primary slab color). - `#FBF7EF` — **Highlight Clay** — the lightest tint, used for the upper-left shadow / extrusion glints. - `#D6C9B4` — **Pressed Sand** — the lower-right shadow tint and the inside of inset wells. - `#C2B299` — **Deep Felt** — used sparingly for recessed track interiors and panel-edge ambient shadow. - `#5C4A36` — **Cocoa Ink** — all body text, headings, diagram strokes. Never pure black; black would shatter the warmth. - `#E08A2B` — **Signal Amber** — the single bright accent: the active toggle, the "2" in the wordmark, the proof-confirmed glow, the drifting-bubble core tint at higher opacity. Used at maybe 4% of pixel area, no more. - `#7FB59A` — **Settled Sage** — secondary accent, a soft muted green for the "settled on L1 / finalized" state and one of the bubble tints — gives the amber something to converse with without breaking the warm field. **Shake-error treatment:** any invalid interaction (e.g. dragging the batch-slider past its track, or a malformed search query in the wiki index) triggers a **soft horizontal shake** on the offending control — a 4-keyframe `translateX` wobble (±6px, ±3px, 320ms, `cubic-bezier(.36,.07,.19,.97)`) — and the control's inset shadow briefly deepens to a warm rust (`#B5612A`) before easing back to Pressed Sand. The shake is *gentle* (it's a clay panel, not glass) and accompanied by no sound, no red banner — just the wobble and a one-line cocoa-ink note that fades in beneath. ## Imagery and Motifs **3D-render is the imagery spine.** Each of the seven panels carries one **soft-shaded 3D illustration** rendered (in look, via CSS/SVG gradients and layered shadows — no raster photos, no stock) in the *same beeswax resin* as the UI, so the diagrams look like physical models sitting on the panels: 1. **Welcome panel** — a tall translucent-amber cube ("L1") with a smaller rounded slab hovering above it ("L2"), connected by three soft tubes. Slow idle rotation, ~30s. 2. **Rollup panel** — a hopper: hundreds of tiny rounded "transaction beads" pour in, get squeezed through a funnel, and emerge as a single fat compressed capsule labeled with a count. This is the page's signature animation. 3. **Optimistic vs ZK panel** — two model "machines": the Optimistic one a slow clockwork with a visible 7-day "challenge timer" dial; the ZK one a crisp folding press that stamps a small glowing **proof-pill** instantly. A neomorphic rocker-switch toggles which is foregrounded. 4. **Settlement panel** — proof-pills travel down a curved chute and *click* into recessed slots on a wide "L1 ledger" slab; each settled slot gets the Settled-Sage inset glow. 5. **Data Availability panel** — a flat felt mat onto which batch-data unrolls like a soft ribbon; users can hover segments to see what's in them. 6. **Bridge panel** — the **bubble-playful peak**: rounded "asset blobs" lift off the L1 cube, float across a soft arc as wobbling soap-bubble shapes (squash-and-stretch on a spring), and settle — slightly bouncing — onto the L2 slab. The most alive panel; even here the tone stays professional via precise labels ("lock", "mint", "burn", "release"). 7. **Wiki Index panel** — no 3D model; instead a deeply recessed "card catalog" well holding a scrollable list of entry-links, each link a small raised pill that depresses (inset) on hover. **Recurring motifs:** (a) the **dual-shadow extrusion** itself, treated as the brand mark; (b) the **proof-pill** — a small amber-cored rounded capsule that recurs across panels 3–5 as the visual token for "a validity proof"; (c) **drifting bubbles** in all negative space; (d) **dimpled affordances** — every slider, toggle, and slot is a believable physical control with a thumb-divot. Iconography is custom, all single-weight rounded-stroke (3–4px, rounded caps/joins), drawn as if pressed into the clay (faint inset shadow on the stroke). ## Prompts for Implementation Build layer-2.wiki as **one HTML file, one CSS file, one ES module** — no framework, no build step. The page is a ~90-second descent through seven neomorphic instrument panels that together explain Layer 2 from "what is it" to "here's the wiki." There is **no CTA button, no pricing block, no testimonial row, no stat-grid hero, no email capture, no logo wall, no cookie banner, no chatbot**. The terminal payload is the wiki index — entries, not conversions. **CSS / surface system (do this first, everything depends on it):** - Define `--clay-light: #FBF7EF` and `--clay-shadow: #D6C9B4` (and a deeper `--clay-shadow-2: #C2B299` for big slabs). Create two utility classes: `.raised` (`box-shadow: -8px -8px 18px var(--clay-light), 9px 9px 22px var(--clay-shadow)`) and `.inset` (same offsets/tints, prefixed `inset`, smaller blur). Scale shadow distance with element size — big panels get 14–24px offsets, small pills get 3–5px. - `border-radius`: 24–32px on panels, 999px on all controls, 18px minimum anywhere else. Never a hard corner. Never a 1px border. Never a flat fill against a flat fill. - Background: `--clay-base: #EDE4D6` on `body`; panels are `--clay-risen: #F6EFE2`. The 1–2 lightness step between them is what lets panels "float." - All text `#5C4A36`. Amber `#E08A2B` only on active states, the wordmark "2", and proof-pill cores. Sage `#7FB59A` only on "settled/finalized" states. **Storytelling & animation (panel by panel):** 1. **Welcome.** Wordmark presses up out of the clay (a `.raised` entrance: starts `inset`, springs to `raised` over 600ms). One sentence of what L2 is. The L1-cube/L2-slab 3D model idles. A scroll-cue dimple pulses softly at the bottom. 2. **Rollup.** On scroll-into-view, trigger the **hopper animation**: ~120 transaction beads (tiny `.raised` circles) cascade with `stagger` (8–12ms each), funnel down, and morph/merge into one fat capsule whose label `counter-animate`s up to a batch size. Re-triggers on each entry. 3. **Optimistic vs ZK.** A real neomorphic **rocker-switch** (clickable). Flipping it slides one machine forward (`.raised`, sharp shadow) and the other back (toward `.inset`, blurred), with a soft `spring`. The Optimistic dial sweeps its 7-day timer; the ZK press stamps a proof-pill with a quick amber flash. If a user tries to "force" both on (rapid double-toggle), apply the **shake-error** wobble to the switch. 4. **Settlement.** Proof-pills generated above slide down a Bézier chute (`path` motion) and `click` into recessed L1 slots; each landing fires a brief Sage inset-glow + a 4px settle-bounce. 5. **Data Availability.** A soft ribbon `path-draw`s open across the felt mat; hovering a segment lifts it slightly (`.raised` micro-bump) and reveals its contents in an inset caption-well below. 6. **Bridge** (the playful peak). Asset blobs detach from the L1 cube, travel a soft arc as **squash-and-stretch soap-bubbles** on a bouncy `spring`, and land on the L2 slab with a settle-wobble. Hovering the bridge "core" makes nearby drifting bubbles drift toward the cursor (a gentle `cursor-follow`, max ~30px pull, heavily damped — never snappy). Labels stay terse and technical. 7. **Wiki Index.** A deep `.inset` "card catalog" well; inside, a scrollable column of `.raised` link-pills. Hover depresses a pill to `.inset` with a 120ms ease. A small inset search field at the top; a malformed query triggers the **shake-error** wobble + a fading cocoa-ink hint. No "sign up to read more" — the entries are the end of the page. **Global motion rules:** everything eases on warm springs (`cubic-bezier(.34,1.3,.64,1)` for entrances, gentler for hovers). Drifting background bubbles loop 40–70s, `opacity 0.18–0.35`, `filter: blur(40–80px)`, z-index below panels. Respect `prefers-reduced-motion` by freezing the hopper/bridge animations to their end-state and stopping the bubble drift — but keep the static neomorphic depth. Nothing flashes, nothing autoplays sound, nothing pops a modal. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Neomorphism in *warm beeswax*, not cold blue-grey.** Neomorphism sits at only 3% in the aesthetic frequency analysis, and the few that exist almost universally use the canonical `#e0e5ec` cool-grey "soft UI" palette. layer-2.wiki re-casts the entire dual-shadow language in a sunlit cream resin (`#F6EFE2` surfaces, cocoa-ink text, amber accent) — a warm-palette neomorphism that, per the corpus, is unclaimed. 2. **A *narrative* dashboard, not a metrics dashboard.** Dashboard layout is at 34% but is overwhelmingly used for stat-grids, analytics walls, and KPI cards. Here the dashboard is a seven-panel *instrument-room story* that ends on a wiki index, not a number wall — collapsing the 34% dashboard convention into a no-CTA, no-stat-hero immersive scroll. 3. **Professional tone over a playful skin.** Tone "professional" is only 4% and "bubble-playful" motif only 5%; the corpus tends to pair playful visuals with whimsical voice. This site keeps the rounded, blobby, soap-bubble *visual* register but speaks like a field engineer — terse, exact, hype-free L2 documentation. The blobs are alive; the prose is not cute. 4. **A blockchain site with zero "crypto" visual clichés.** No dark mode, no neon, no hexagonal honeycombs, no glowing nodes-and-edges network graph, no terminal/mono type, no "to the moon" energy. The only nods to the subject are the *proof-pill* token and the L1-cube/L2-slab 3D model — rendered in the same warm clay as the buttons. 5. **No monospace anywhere, including code tokens.** 94% of the corpus uses mono type; this wiki deliberately sets even `0x…` calldata in rounded Nunito Sans inside a tiny recessed pill, refusing the terminal aesthetic entirely. 6. **Shake-error as a *soft* clay wobble.** Shake-error is at 4%; where it appears it's usually a sharp form-validation jolt. Here it's a damped, low-amplitude wobble on a physical-feeling control with a warm-rust shadow deepening — error feedback that matches the upholstered world rather than breaking it. Chosen seed: *aesthetic: neomorphism, layout: dashboard, typography: rounded-sans, palette: warm, patterns: shake-error, imagery: 3d-render, motifs: bubble-playful, tone: professional* Avoided per frequency analysis: hand-drawn (97%), glassmorphism (71%), photography imagery (98%), full-bleed/card-grid/centered defaults, parallax/cursor-follow-as-gimmick (used here only as a tiny damped bridge interaction), mono typography (94%), pastoral-romantic/warm-inviting tone defaults, and the entire crypto-dark-mode/neon/circuit cluster.