# Design Language for layer-2.wiki ## Aesthetics and Tone layer-2.wiki is a **vertically scrolling, encyclopedic manifesto** on the second layer -- the layer above the protocol, beneath the application, where receipts, rollups, and reasoning live. The visual identity is **Memphis Group, 1981, recompiled for a technical reference work**: Ettore Sottsass squiggles and terrazzo dots and chevron prints, but rendered with the cold precision of an entry in *Knuth's TAoCP* or a 1970s *Bell System Technical Journal*. The result is loud, geometric, certain -- a wiki that knows what it knows and is willing to stomp on the page in burnt orange to prove it. The tone is **authoritative**, not academic. There are no question marks in headings. Definitions are stated, not negotiated. Where a typical wiki would hedge ("Some sources suggest..."), this site declares ("**Layer 2 is a class of off-chain execution surfaces that inherit security from a settlement layer.**"). The Memphis chaos is the rebellion against that solemnity -- a postmodernist visual joke that says the *content* is serious but the *form* refuses to be a sterile gray monograph. The mood is **playful confidence under fluorescent light**. Picture the lobby of a 1985 architecture firm where the receptionist's desk is a Sottsass *Carlton* bookcase, and pinned to the wall behind her is a 50-page typed dissertation on optimistic rollups. That collision -- decorative arts maximalism cradling cold engineering text -- is the entire register. ## Layout Motifs and Structure **Primary layout: immersive-scroll with broken-grid Memphis collage** The site is a single, long, vertically-scrolled document divided into **seven numbered "Plates"** (a deliberately archaic term lifted from technical manuals and atlases). Each Plate occupies between 100vh and 180vh of natural document height -- *no scroll-snap, no full-screen lock*. The reader scrolls continuously and the Memphis composition unfolds around them like a fold-out diagram in an oversized hardcover. **The seven Plates:** 1. **Plate I -- Cover.** Domain name set as a giant retro-display wordmark (`layer-2.wiki`), surrounded by floating Memphis primitives: a tilted black-and-white checkerboard rectangle, three burnt-orange dots in descending sizes, a single magenta squiggle running off-canvas to the right. 2. **Plate II -- Definition.** A boxed, ruled "encyclopedia entry" set in retro slab serif, occupying ~55% of the column. To its left, a vertical stack of geometric shapes (triangle, half-circle, terrazzo confetti) acts as a marginalia rail. 3. **Plate III -- Taxonomy.** A horizontally-overflowing scrollytelling band: as the user scrolls *vertically*, a row of duotone-photo "specimen cards" (rollups, validiums, plasma, channels) slides *horizontally* in a counter-direction at 0.4x speed. Each card is framed with a thick black rule and a colored squiggle underneath. 4. **Plate IV -- Diagram.** A full-bleed SVG architecture drawing -- L1 base layer at the bottom, L2 execution above, with Memphis decorative arrows (chevron-tipped, dashed, terrazzo-filled). The diagram is annotated with hand-numbered call-outs (1), (2), (3) in burnt-orange circles. 5. **Plate V -- Glossary Stack.** Asymmetric two-column broken-grid where definition cards are stacked at slight rotations (-2deg, +1.5deg, -0.8deg) like physical index cards on a corkboard. Each card has a tab-shape Memphis ornament protruding from its top edge. 6. **Plate VI -- Citations Wall.** A tight grid of monospaced citation rectangles, each one tilted slightly. The grid is interrupted by a giant burnt-orange semicircle that bleeds across three rows like an oversized print mark. 7. **Plate VII -- Colophon.** Single column, centered. The retro-display wordmark returns at half size, followed by a small typeset paragraph ("Set in Bagel Fat One and IBM Plex Mono. Composed on the second layer.") and a final terrazzo dot field that fades into the page edge. **Spatial logic:** The Memphis decorative shapes are positioned with `position: absolute` against a CSS-grid skeleton (12 columns, 8 baseline rows per Plate). Shapes deliberately overlap text edges by 8-16px -- the wiki *content* sits in a calm reading column while the *ornaments* trespass on it. This trespass is the entire point. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Plate Numerals / Wordmark:** **"Bagel Fat One"** -- a single-weight Korean/Latin retro-display face with chunky terminal blobs and confident, pillowy contours. Used uppercase at clamp(3.5rem, 9vw, 7.5rem) for the main wordmark and Plate titles. Tracking: -0.02em. Color: Ink Black (#0d0a08) on cream backgrounds, Cream (#f4ead5) on burnt-orange backgrounds. - **Secondary Display / Section Labels:** **"Rubik Mono One"** -- a geometric monospaced display weight that pairs with Memphis grid sensibility. Used at 1.125rem, uppercase, letter-spacing 0.15em, for labels like "PLATE III", "TAXONOMY", "SEE ALSO". Color: Burnt Orange (#cc4a1b). - **Body / Encyclopedia Prose:** **"Fraunces"** at weight 500, optical-size set to "Soft" -- a wedge-serif revival with retro display DNA at large sizes and surprisingly readable book texture at 16-18px. Used at 1.0625rem with line-height 1.55. Color: Ink Black (#0d0a08). - **Code / Citations / Marginalia:** **"IBM Plex Mono"** at weight 400 and 600. Used at 0.875rem for inline code, citations, footnotes, and the colophon. Color: Charcoal (#2a2622). **Palette (8 swatches, named):** - **Cream Page** `#f4ead5` -- the background of every Plate. A warm, slightly yellowed off-white reminiscent of uncoated 1980s manual paper. - **Burnt Orange** `#cc4a1b` -- *the* signature color. Used for the dot motifs, half-circle bleeds, the call-out numerals, the wordmark accents, and the Plate-numeral underlines. This is the pulse-attention color. - **Deep Terracotta** `#9a3210` -- a darker companion to Burnt Orange, used for hover states, link underlines, and the deepest layer of overlapping Memphis shapes. - **Saffron Yellow** `#f4b942` -- the secondary Memphis accent. Used for terrazzo confetti, decorative squiggles, and the underside of geometric stacks. - **Hot Magenta** `#d83a7c` -- the third Memphis accent, used sparingly (one squiggle per Plate maximum) to inject postmodernist surprise. - **Cobalt Ink** `#1d3aa8` -- a saturated blue that appears in the duotone-photo treatment of Plate III specimen cards (paired with Cream Page as the second duotone tone). - **Ink Black** `#0d0a08` -- the text color and the heavy rule weight on cards and grids. Slightly warm-shifted off pure black. - **Charcoal** `#2a2622` -- a softer dark for body emphasis, captions, and the marginalia rail. The duotone-photo treatment maps photographic specimens (abstract crystalline lattices, fiber-optic light bursts, scaffolding photographs) into a Cobalt Ink + Cream Page two-tone, then overlays a 4% film grain. No specimen photo is ever shown in full color. ## Imagery and Motifs **Memphis-Group geometric vocabulary**, rendered as inline SVG so every shape can pulse, rotate, and scale with the cursor: 1. **The Sottsass Squiggle.** A thick (12px stroke) freehand curve -- 3-4 inflection points, never symmetrical -- in Hot Magenta or Saffron Yellow. One squiggle per Plate, always running diagonally and bleeding off at least one edge of the viewport. Implemented as an SVG `` with `stroke-linecap: round`. 2. **The Terrazzo Confetti Field.** Scatter of 30-60 small irregular polygons (3-6 sided, 6-18px) in Burnt Orange, Saffron Yellow, Cobalt Ink, and Charcoal, distributed by a deterministic Poisson-disk sampler so the field looks "naturally" random but is actually composed. Used as a background on Plate II margins and the final fade-out of Plate VII. 3. **The Stacked Triangle-Half-Circle-Square Totem.** A vertical column of three Memphis primitives, each rotated independently, sitting in the Plate II marginalia rail. This is the quintessential Memphis totem from Sottsass's *Carlton* bookcase, abstracted to 2D. 4. **The Checkerboard Tile.** A 4x4 black-and-white checkerboard, 96x96px, tilted -7 degrees. Used once per Plate as a geometric "anchor" shape, often tucked behind a text block. 5. **The Burnt-Orange Semicircle Bleed.** A giant half-circle (radius up to 60vw on Plate VI) that emerges from the right edge and clips against the page. Inspired by the oversized print marks in 1980s Italian poster design. 6. **The Chevron-Tipped Dashed Arrow.** Used in the Plate IV diagram to connect L1 → L2 components. The arrows have terrazzo-filled bodies, not solid -- a Memphis reinterpretation of a flowchart arrow. 7. **The Numbered Call-Out Disc.** A 32px Burnt Orange filled circle with a Cream Page numeral inside, set in Bagel Fat One. Pulses with the pulse-attention pattern when the disc enters the viewport. 8. **The Index-Card Tab.** A small (60x16px) trapezoidal tab protruding from the top edge of glossary cards in Plate V, in alternating Saffron and Hot Magenta. The tabs are shaped like real-world card-catalog tabs but Memphis-ified with a tiny notch. **Imagery (duotone-photo specimens):** Plate III shows four abstract photographic specimens -- (a) a fiber-optic terminus shot in macro, (b) a steel scaffolding lattice, (c) a topographic contour map photograph, (d) a long-exposure of light traffic at a transit interchange. Each is processed through a Cobalt Ink / Cream Page duotone with 4% grain. They serve as visual metaphors for the abstract concept "L2", never as literal illustrations. ## Prompts for Implementation **Continuous immersive scroll, no snap-locking.** Use natural document flow. The reader should feel they are reading a long, ornate technical document -- not jumping between PowerPoint slides. Total page height should land between 7000-9500px on a 1440px viewport. **Pulse-attention as the signature animation.** The Burnt-Orange numbered call-out discs (Plate IV) and Plate-numeral underlines pulse on viewport entry: a 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite that scales 1.0 → 1.08 → 1.0 while modulating box-shadow `0 0 0 0 rgba(204, 74, 27, 0.55)` → `0 0 0 18px rgba(204, 74, 27, 0)`. Pause on `prefers-reduced-motion`. **Counter-scrolling horizontal taxonomy band (Plate III).** As the user scrolls vertically through Plate III, the row of duotone specimen cards translates horizontally using `transform: translate3d()` driven by an IntersectionObserver-fed scroll progress value. Speed: 0.4x of vertical scroll, direction: leftward. The Sottsass squiggle in the same Plate translates rightward at 0.7x for parallax counterpoint. **SVG path-draw on the Plate IV diagram.** When Plate IV enters the viewport, the architecture diagram's chevron-tipped arrows draw themselves using the classic stroke-dasharray / stroke-dashoffset technique, staggered 180ms apart. Total draw cadence: 2.4 seconds, easing cubic-bezier(0.65, 0, 0.35, 1). **Memphis ornament jitter on cursor proximity.** The free-floating Memphis primitives (squiggles, terrazzo polygons, checkerboard tile) react to cursor distance: within 240px, they translate up to 8px on a magnetic spring (stiffness 120, damping 14). This is a subtle micro-interaction; never let the page feel like a video game. **Glossary card stack rotation lock-in (Plate V).** The cards begin life with their slight rotations (-2deg, +1.5deg, -0.8deg) baked in. On hover, a card rotates back to 0deg, scales to 1.03, and lifts its z-index above its neighbors. Other cards remain rotated. **Type composition, not content composition.** The Bagel Fat One wordmark on Plate I should be enormous -- aim for 18-22vh tall. Allow the descenders of "y" and "2" to interact with the Memphis primitives floating around them. Do not center-align everything; the wordmark should sit at roughly 38% from the left, 52% from the top, with deliberately uneven negative space. **Storytelling priorities:** every Plate must teach the reader one thing about Layer 2. The decoration is permitted *only* because the prose is rigorous. Never let a Plate be ornament without information. The colophon (Plate VII) is the one exception -- it is pure typographic celebration. **AVOIDED on this site:** CTA buttons, signup forms, pricing tiers, stat-grid hero blocks, testimonials, "trusted by" logo strips, gradient meshes, glassmorphism, dark mode, photography in full color, and any animation involving fade-up-on-scroll text reveals (too generic). No corporate gradient, no SaaS-template hero. The site reads like a *book*, not like a landing page. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **Memphis as the carrier aesthetic, not a one-off accent.** The frequency analysis shows `memphis` aesthetic at only 1% of the portfolio. layer-2.wiki commits fully to Sottsass-era postmodernism -- terrazzo, squiggles, totemic primitives, asymmetric color blocking -- across every Plate, not as decoration sprinkled on top of a minimalist grid. The decoration *is* the grid. 2. **Burnt-orange monochromatic with Memphis multi-accents.** The portfolio is saturated with `gradient` palettes (96%) and `warm` palettes (90%), but burnt-orange-driven palettes appear under 2%. This site uses burnt orange (#cc4a1b) as its single dominant signal color, with three Memphis accent colors (saffron, magenta, cobalt) dispatched in tightly rationed doses. There is no gradient anywhere on the site. 3. **Retro-display typography paired with technical-manual prose.** Only 1% of the portfolio uses `retro-display` typography. Bagel Fat One is a chunky display face almost no one in this portfolio is using, and pairing it with Fraunces wedge-serif body text plus IBM Plex Mono citations creates a tri-tone typographic stack that reads as both 1985 design firm and 1975 Bell Labs technical report. 4. **Pulse-attention as the primary motion verb.** While 91% of designs lean on `counter-animate` and 68% on `parallax`, layer-2.wiki uses `pulse-attention` (under 5% in portfolio) as the dominant interaction pattern -- specifically on the numbered call-out discs and Plate underlines. Motion is rhythmic and locative, not narrative. 5. **Duotone-photo (Cobalt + Cream) for abstract specimens.** `duotone-photo` imagery is at 6% portfolio-wide. This site uses it strictly for the four Plate III specimen cards in a Cobalt Ink + Cream Page two-tone, never venturing into full-color photography or 3D renders. 6. **Authoritative tone (24% portfolio) without the usual cool/blue/serif legal styling.** The portfolio's authoritative voice is usually cloaked in navy, slab serifs, and grids. Here, authority is delivered through a Memphis-decorated *encyclopedia* that refuses to apologize for being colorful -- a rare combination of bold-confident voice with playful aesthetic skin. 7. **Immersive-scroll without scroll-snap.** Only 13% of the portfolio uses `immersive-scroll`, and most pair it with viewport snapping. layer-2.wiki uses continuous, book-like scrolling through seven named Plates -- closer to a long-form Smashing Magazine essay than a scroll-jacked product page. **Chosen seed:** aesthetic: memphis, layout: immersive-scroll, typography: retro-display, palette: burnt-orange, patterns: pulse-attention, imagery: duotone-photo, motifs: geometric-shapes, tone: authoritative **Avoided patterns from frequency analysis:** No `corporate` aesthetic (92% saturation), no `centered` layout dominance (92%), no `mono`-only typography (93%), no `gradient` palette (96%), no `counter-animate` as the primary motion (91%), no `mysterious-moody` tone (94%), no full-color `photography` (63%), no `minimal` imagery defaulting (72%).