# Design Language for layer-2.wiki ## Aesthetics and Tone `layer-2.wiki` is a **dopamine-charged marble library** — imagine the Bibliotheca Alexandrina rebuilt by someone who spent too long staring at Ethereum gas charts. The aesthetic premise: serious scholarly knowledge deserves serious visual weight, but weight does not have to mean grey. The marble is real — Calacatta veining, travertine warmth, deep Nero Marquina inlays — but it glows. The gloss on the stone is not candlelight; it is the faint blue-violet bioluminescence of a blockchain node achieving finality. The tone is scholarly-intellectual without being dry. This is the wiki that serious Layer 2 researchers bookmark before they bookmark the whitepapers. It speaks with the authority of a peer-reviewed journal and the visual energy of a dopamine reward loop. Every section feels like an insight earned — and the page rewards that intellectual progress with small chromatic celebrations: a ripple of color when a definition expands, a honeyed amber flash when a cross-reference resolves. The color story is triadic: deep Byzantine violet (#2D1B69), hot saffron-amber (#F59E0B), and vivid verdigris (#10B981). These three are ancient dye colors — lapis lazuli, turmeric, copper patina — repurposed as the three symbolic pillars of Layer 2 research: security (violet), efficiency (amber), scalability (verdigris). They are never mixed into muddy intermediates; they collide sharply, separated by marble-white (#FAFAF8) and near-black onyx (#0D0D14). The site has no hero CTA, no pricing tiers, no testimonial rails. It is a knowledge artifact, not a product page. Every screen is a reading surface. ## Layout Motifs and Structure The structural conceit is a **hexagonal honeycomb grid** — but not the decorative honeycomb of blockchain marketing decks. This is a *functional* tessellation where each hexagonal cell is a knowledge unit: a concept node, a protocol overview, a theorem statement. The honeycomb is the information architecture made visible. At viewport scale, the hex grid operates on a 96px unit with a 4px gap. Cells can occupy 1 hex unit (atom-level definitions), 3 hex units in a triangular cluster (concept families), or 7 hex units in a full rosette (major protocol pages like Optimism, Arbitrum, zkSync). The rosette clusters float in the viewport with a subtle 3D tilt — each cluster sits at a different Z-depth, creating a layered constellation of knowledge. Navigation is radial: the root page shows the full honeycomb constellation; drilling into a cluster zooms the viewport into that rosette and expands its cells. There is no sidebar. There is no top navigation bar. The navigation *is* the content structure. Below the fold on any article page, a single-column reading strip replaces the hex grid — 680px wide, centered, marble-white background with onyx type. The hex geometry lives in the margins as a decorative wire-frame ghost, barely visible at 4% opacity, a reminder of where this article sits in the larger constellation. Section dividers are carved marble bas-relief SVGs — a 2px horizontal rule with a small hexagonal medallion at its midpoint, inlaid with the triadic color appropriate to the section's epistemic category (security = violet, efficiency = amber, scalability = verdigris). The overall spatial metaphor is a **floor plan of a Roman civic basilica** — an ordered nave with flanking aisles, where the nave is the reading column and the aisles are the hex-navigation glyphs. The basilica is where arguments were adjudicated; this is where Layer 2 claims are adjudicated. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & H1 — `Cormorant Garamond`** (weight 600, italic). This is the font of renaissance scholarship. At 72px on the hero node and 48px on article titles, it carries the weight of centuries of typographic authority. Optical kerning is set to `auto`; letter-spacing at -0.02em. The italic cut is used exclusively for the top title; all other headings use the upright roman cut. - **H2 / H3 Headings — `Cormorant Garamond`** (weight 500, roman). At H2: 32px, line-height 1.2, tracking -0.01em. At H3: 22px, line-height 1.3. Headings never use all-caps; classical typography uses case contrast (large caps vs small running text) not shouted uppercase. - **Body text — `Spectral`** (weight 400 for body, 600 for strong). A contemporary text face with Old Style figures and true small caps. At 17px, line-height 1.75, measure capped at 68 characters per line. Spectral was designed for long-form reading at screen resolution; its slightly condensed proportions give more content per line without sacrificing comfort. - **Code & Protocol Names — `JetBrains Mono`** (weight 400). Inline code fragments appear on a semi-transparent marble card — onyx text on a white surface with the faintest violet-hued drop shadow. Block code gets a dedicated onyx slab with amber line numbers and verdigris string literals. - **Caption & Metadata — `Spectral SC`** (small caps, weight 400 at 13px). Used for article datestamps, contributor credits, and taxonomy labels. Small caps on a scholarly page signal that the metadata is real metadata, not decorative text scaled down. **Palette:** | Role | Name | Hex | |------|------|-----| | Primary (violet) | Byzantine Lapis | #2D1B69 | | Secondary (amber) | Saffron Turmeric | #F59E0B | | Tertiary (verdigris) | Copper Patina | #10B981 | | Background | Calacatta White | #FAFAF8 | | Deep background | Travertine Warm | #F0ECE4 | | Text primary | Nero Onyx | #0D0D14 | | Text secondary | Charcoal Vein | #3D3A4A | | Marble accent | Carrara Mist | #E8E4DE | | Gloss highlight | Crystal Clear | #FFFFFF | | Void | Absolute Black | #050508 | The triadic structure is disciplined: violet anchors navigation and knowledge-graph edges; amber fires on all reward moments (hover states, successful cross-references, expanding definitions); verdigris marks scalability/throughput content and all "what this achieves" sections. The marble tones provide the neutral substrate — they are not merely white but have the warmth of quarried stone. ## Imagery and Motifs **Glassmorphic Cards as primary content vessels.** Every knowledge node — whether a hex cell in the constellation or an inline definition card — is a glassmorphic surface: `background: rgba(250, 250, 248, 0.72)`, `backdrop-filter: blur(24px) saturate(1.4)`, `border: 1px solid rgba(255,255,255,0.6)`, box-shadow with a 2px violet inset shadow and a 24px diffuse drop shadow. The glass reads as polished marble-top glass — the material of a museum vitrine over an ancient artifact. Protocol cards float above the hex grid like specimens under museum glass. **Marble-classical motifs woven into the structural chrome.** The decorative vocabulary is drawn from classical architecture rendered as SVG line art at 0.8px stroke: - *Column capitals*: Corinthian capital silhouettes used as section-break ornaments, redrawn at 60px height, filled with the triadic color of the section - *Hexagonal meander*: A Greek key pattern reinterpreted with hexagonal geometry — instead of right-angle turns, the key makes 60° turns. Used as a repeating border motif on the page frame at 8px height, barely visible at 15% opacity in Carrara Mist - *Veining overlay*: A procedurally-drawn SVG network of branching lines (Perlin-noise paths, stroke-width 0.4px, #E8E4DE) covers the Travertine Warm background sections at 30% opacity. This is the marble grain. It moves extremely slowly on scroll — a parallax at 0.02× scroll speed — suggesting depth in the stone rather than movement of the stone **No photography.** The registry shows photography at high frequency; layer-2.wiki opts out entirely. All illustrative content is either SVG line art, data visualization (network graphs of rollup architectures drawn as force-directed hex-node graphs), or the glassmorphic card surfaces themselves. **Protocol identity badges.** Each Layer 2 protocol (Optimism, Arbitrum, zkSync, Polygon, Starknet, etc.) gets a bespoke hexagonal badge: a hex cell with the protocol's primary brand color as a semi-transparent fill inside the glass card, the protocol's logotype redrawn in a unified stroke weight (2px), and a small triadic color pip in the lower-right corner indicating category (optimistic rollup = amber, zk-rollup = verdigris, state channel = violet). ## Prompts for Implementation Build this as **a navigable knowledge constellation** — a single page that is simultaneously a navigation surface, a reading surface, and a knowledge graph. The page does not scroll traditionally; it *zooms*. The root view shows the full hex constellation. Clicking any cluster transitions to a focused view of that cluster (CSS `transform: scale()` + `translate()` animated over 600ms with an `ease-in-out-cubic` curve). Reading a full article transitions to the column-reading mode with the hex wireframe ghosted in the margins. **Hex Grid Implementation:** - Use CSS Grid with `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)` for hex cell shaping - The grid is offset-column layout: odd columns sit 48px lower than even columns (half the 96px unit height) - Each cell has a `transition: transform 240ms ease, box-shadow 240ms ease` for hover lift - On hover: `transform: translateY(-4px) scale(1.02)` and box-shadow deepens to 32px — the glass floats higher **Ripple Pattern:** - Every interactive event (cell click, definition expand, cross-reference resolve) triggers a CSS radial ripple from the event's cursor coordinates - The ripple uses the triadic color appropriate to the cell's category, at 40% opacity, expanding from 0px to 160px diameter over 480ms, then fading opacity to 0 over the final 120ms - Implementation: inject a `` at cursor coordinates, animate with `@keyframes`, remove after 600ms - The ripple is the dopamine reward signal — it confirms the knowledge interaction was registered **Marble texture rendering:** - The veining overlay is a single SVG element placed `position: fixed` at z-index 0, behind all content - Generate 40–60 Bezier curves from randomized but seeded control points (seed = domain name hash) so the veining is deterministic and consistent across sessions - Stroke: `#E8E4DE`, width: 0.4px, opacity: 0.28 on Calacatta White sections, 0.18 on hex card surfaces **Typography rendering:** - Load Cormorant Garamond with `font-display: swap` and preload the 600 italic woff2 variant - Use `font-variant-ligatures: common-ligatures discretionary-ligatures` on all Cormorant Garamond instances — the Renaissance ligatures (st, ct, sp) signal that this is a typographically serious document - Body Spectral at 17px with `font-feature-settings: "onum" 1, "kern" 1, "liga" 1` — old-style figures in running text, no lining numerals except in code blocks **Glassmorphic Card Layering:** - Stack three blur layers: background veining (no blur), card glass layer (blur 24px), floating protocol badge (blur 8px, higher Z) - Use `will-change: transform` only on the actively-animated card, not all cards simultaneously - On Safari: test `backdrop-filter` support; provide a `@supports not (backdrop-filter: blur(1px))` fallback with solid `rgba(250,250,248,0.92)` background **Scroll and zoom narrative:** The reading experience has three acts: 1. *Constellation* — full hex grid, bird's-eye view of all Layer 2 knowledge 2. *Cluster* — zoom into a protocol family rosette; cells expand to show summaries 3. *Article* — zoom into a single cell; it unfolds into the full column reading strip Each act transition uses a single CSS transform (scale + translate) on a wrapper `
`, making the whole experience feel like a continuous zoom into a marble floor plan rather than a conventional page navigation. **AVOID:** hero CTAs, "Get started" buttons, pricing tiers, stat grids, testimonial sections, feature comparison tables, stock photography, gradient mesh blobs, hamburger menus, sticky headers that obscure content, footer link farms. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **dopamine**, layout = **hexagonal-honeycomb**, typography = **serif-classic**, palette = **triadic**, patterns = **ripple**, imagery = **glassmorphic-cards**, motifs = **marble-classical**, tone = **scholarly-intellectual**. **Differentiators from other designs in the registry:** 1. **Hexagonal-honeycomb as functional information architecture, not decoration.** The frequency analysis shows hexagonal layouts at 0% (not appearing in any of the 202 analyzed designs). Every other hex use in the wild is purely decorative background pattern. Here the hex grid *is* the navigation — it encodes the ontological structure of Layer 2 knowledge. The zoom-into-constellation navigation model is unprecedented in the registry. 2. **Dopamine aesthetic married to scholarly-intellectual tone.** The registry shows dopamine aesthetics at low frequency but typically paired with playful or energetic tones. Pairing it with scholarly-intellectual creates a productive contradiction: the visual reward loops (ripple effects, hover floats, chromatic pips) serve *epistemological* events (learning a definition, resolving a cross-reference, completing a concept cluster) rather than marketing events. Dopamine as intellectual reinforcement, not engagement bait. 3. **Triadic palette drawn from historical pigment sources with semantic coding.** Most triadic palettes in the registry are arbitrary. Here the three colors (Byzantine lapis violet, saffron amber, copper verdigris) are mapped to three epistemic dimensions of Layer 2 research (security, efficiency, scalability) with consistent application across the entire site. Every color usage is a semantic signal, not a decorative choice. 4. **Marble-classical motifs rendered as functional SVG chrome, not background texture.** Marble texture is usually a JPEG background in the registry. Here the Corinthian capitals, hexagonal meander borders, and marble veining are all procedural SVG — lightweight, scalable, and animated (the veining has a 0.02× parallax scroll factor). The marble is structural to the design system, not applied on top of it. 5. **Protocol identity system using a unified badge grammar.** Each of the 20+ Layer 2 protocols gets a bespoke hex badge with a unified visual grammar (stroke weight, glass fill, triadic pip) rather than raw brand logos. This creates a coherent visual system that communicates protocol relationships (same badge shape = same network type) at a glance — a scholarly taxonomy expressed as visual design. **Avoided patterns (from frequency analysis):** - hand-drawn (61% — avoided entirely; all line art is precise SVG, never sketched) - editorial layout (49% — avoided; the layout is radial/hexagonal, not editorial-column) - terminal aesthetic (29% — avoided; the JetBrains Mono is confined to code blocks only; the overall aesthetic is marble-library, not command-line) - botanical motifs (25% — avoided; classical architectural ornament replaces botanical illustration) - full-bleed photography (high frequency — avoided; zero photography used)