# Design Language for layer2.wiki ## Aesthetics and Tone The name **layer2.wiki** is a precise technical signal: Layer 2 refers to the blockchain scaling solutions built atop Ethereum — Arbitrum, Optimism, zkSync, Starknet, Polygon — the infrastructure layer that processes thousands of transactions per second while settling security to the base chain. The word "wiki" adds a collaborative, open-knowledge dimension: this is a living reference, not a product page. The visual language is **graffiti futurism** — the aesthetic of illicit knowledge sprayed on concrete walls at 3am, now elevated to encyclopedic precision. Think: the underside of a freeway overpass where someone has mapped the entire zkEVM proof system in spray paint and stencil, annotated with arrow callouts in marker. The surface is gritty and urban; the information is exacting. This is not cyberpunk gloom — the palette is **candy-bright**, vivid pinks and electric yellows blooming against deep charcoal, like day-glo graffiti under a black light. Tone is **futuristic-cutting-edge**: the site speaks to engineers and crypto-native users who are already building. No hand-holding, no marketing fluff. The copy is terse, precise, hyper-linked. The aesthetic treats blockchain infrastructure as urban infrastructure — invisible to most, absolutely essential, and covered in the marks of everyone who has worked on it. Differentiators: 1. Graffiti aesthetic on technical wiki content — the contradiction is the brand 2. Candy-bright palette against charcoal/asphalt rather than the typical dark-mode neon or warm editorial look 3. Skeleton loading as a primary UI motif — every content section reveals with a shimmer-then-fill sequence that references how L2 blocks are sequenced and confirmed 4. Sidebar navigation treated as a spray-painted legend/map rather than a sterile tree-view ## Layout Motifs and Structure The page uses a **persistent sidebar + main content area** split — a classic wiki layout, but executed with raw urban energy rather than sterile documentation chrome. **Sidebar (280px fixed, left):** The sidebar is the "map" — a spray-stencil legend of the entire L2 landscape. Section headers are rendered in stencil-style caps (uppercase, tracked, with slight roughness via CSS `filter: url(#stencil-noise)`). Navigation links are listed like wiki categories but styled as tagged nodes — each entry has a small icon glyph preceding it (chain icons, proof-type icons, bridge icons). Active state is a vivid candy-pink left border with a glow. The sidebar background is `#1a1a1a` (asphalt) with a subtle noise texture overlay. **Main content (fluid, right of sidebar):** Content loads as skeleton screens before the actual text and icons resolve. The skeleton uses a shimmer animation in `#2d2d2d` → `#3a3a3a` — a concrete-colored shimmer, not the typical grey-white. Once loaded, content is organized in **modular blocks** — each L2 protocol gets a card block with icon header, key stats row, and expandable detail sections. **No hero section, no CTA strip, no pricing block.** This is an encyclopedia. Users arrive looking for specific information, not to be converted. **Macro composition:** - Sidebar: `#1a1a1a` background, fixed, with top logo mark (a spray-can nozzle pointing right, CSS-drawn) and bottom social links - Content area: `#111111` background with `#1f1f1f` card blocks, each with a 1px `#ff2d78` (candy-pink) top border as a "tag" indicator - The top header bar is 48px, contains the site name in the display font with a particle-effect canvas behind it - No footer in the traditional sense — the sidebar extends full height; the main content ends with "edit this page" style links ## Typography and Palette **Typography:** - **Display / Logo**: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weight 900 italic — the central typographic provocation. Playfair Display is a high-contrast didone revival, normally used for luxury editorial. Here it is set in candy-pink on charcoal at 48px+, creating maximum cognitive dissonance: an elegant 18th-century type system used to label blockchain infrastructure, as if someone has spray-painted a Vogue masthead on a server rack. The italicized form adds velocity, like the letterforms are mid-spray. - **Section Headers / Protocol Names**: [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 700, all caps, letter-spacing 0.12em — geometric, technical, slightly alien. Used for H2/H3 level headings, sidebar category labels, and card block headers. Set in `#f7f700` (electric yellow) or `#ff2d78` (candy pink) depending on section type. - **Body / Reference Text**: [DM Mono](https://fonts.google.com/specimen/DM+Mono), weight 400, size 13–14px — monospace but refined. Every fact in this wiki reads like a terminal output: precise, structured, no ambiguity. Used for all paragraph text, table cells, and inline code. - **Tag / Badge Labels**: [DM Mono](https://fonts.google.com/specimen/DM+Mono), weight 600, 11px — for protocol tags, status badges, proof-type indicators. **Palette:** | Role | Name | Hex | |------|------|-----| | Background (page) | Asphalt | `#111111` | | Background (sidebar) | Deep Asphalt | `#1a1a1a` | | Background (card) | Concrete | `#1f1f1f` | | Skeleton shimmer base | Wet Concrete | `#2d2d2d` | | Skeleton shimmer highlight | Dry Concrete | `#3a3a3a` | | Primary accent | Candy Pink | `#ff2d78` | | Secondary accent | Electric Yellow | `#f7f700` | | Tertiary accent | Neon Mint | `#00ffb3` | | Quaternary accent | Void Purple | `#9b5de5` | | Text primary | Off-White | `#e8e8e8` | | Text secondary | Chalk | `#9a9a9a` | | Border / divider | Gutter | `#2a2a2a` | The candy-bright accents are used sparingly against the near-black background — they are graffiti tags on a dark wall, not the wall itself. Never more than 2 accent colors in a single card block. ## Imagery and Motifs **Icon-heavy visual language:** Every L2 protocol, concept, and action is represented by a custom icon glyph. Icons are 24×24px SVG, single-color fill (the protocol's assigned accent color), rendered in a style that is somewhere between technical diagram symbols and spray-can stencils — geometric but with slight imperfections. Categories: - Protocol identity icons (Arbitrum glyph, zkSync lightning, Optimism red circle with inner mark, Starknet star-fragment) - Proof type icons (ZK proof: zero/cipher symbol; Optimistic: eye-open symbol; Validity: checkmark-circuit) - Bridge icons (arrow-through-gate symbol family) - Status icons (sequencer-online: pulse dot; batch-submitted: stacked-layers; finalized: lock-closed) No photography. No stock imagery. No abstract gradient meshes as decoration. Icons and typography carry all visual weight. **Particle effects (canvas-based, persistent):** The top header bar contains a `` element with a lightweight particle system: ~80 particles in the 3 accent colors (pink, yellow, mint), drifting slowly upward like embers from a spray can that's been lit. Particles are small (2–4px radius), low opacity (0.3–0.6), and do not react to mouse movement — they are ambient, not interactive. The canvas is `position: absolute`, `z-index: 0`, behind the logo text. This is the only animation that runs continuously; all other animations are triggered. **Skeleton loading motif:** All major content blocks (protocol cards, comparison tables, proof diagrams) load as skeleton screens first, then resolve. The skeleton is not generic grey boxes — it is shaped like the actual content layout: the skeleton of a protocol card has the correct icon-sized circle, the correct header height, the correct stats row shape. Shimmer animation: `background: linear-gradient(90deg, #2d2d2d 25%, #3a3a3a 50%, #2d2d2d 75%)` animated left-to-right at 1.5s. This intentionally evokes L2 transaction confirmation timing — the moment of uncertainty before finality. **Graffiti texture motif:** A subtle SVG filter (`feTurbulence` + `feDisplacementMap`) is applied to select elements (sidebar headers, card top borders, section dividers) to introduce 2–3px of organic displacement — as if the element was spray-painted rather than pixel-perfect. The effect is imperceptible at a glance but feels right on second look: slightly alive, slightly rough. **Wall texture:** The `body` background has a repeating SVG noise pattern at 4% opacity — simulates the slight grain of a concrete wall. Implemented as `background-image: url("data:image/svg+xml,...")` with a small tile, no JS required. ## Prompts for Implementation **Core HTML structure:** ```