# Design Language for layer-2.wiki ## Aesthetics and Tone layer-2.wiki channels a pop-art aesthetic — bold outlines, halftone patterns, and the graphic punch of Lichtenstein and Warhol applied to the encyclopedic world of Layer-2 blockchain knowledge. The site transforms dense technical documentation into visually striking, comic-book-inspired information displays where every definition feels like a panel in a graphic novel about blockchain scaling. Inspiration draws from Roy Lichtenstein's Ben-Day dots, Keith Haring's bold outlines, Saul Bass title sequences, and the bold graphic language of vintage comic book encyclopedias. The tone is calm-serene — despite the visual boldness, the written voice maintains a measured, contemplative clarity that makes complex Layer-2 concepts feel approachable and meditative. The HUD-overlay layout frames wiki content within heads-up-display borders, treating the reader as a pilot navigating through layers of blockchain knowledge. ## Layout Motifs and Structure The layout uses a **HUD-overlay** architecture — content is framed within angular, heads-up-display-style borders with data readouts along the edges, creating the feeling of interfacing with a sophisticated knowledge system. **HUD-Overlay Architecture:** - Main viewport: 100vh sections with HUD frame borders (angular corner brackets in 2px lines) - Content zone: max-width 960px centered, with HUD data strips running along left and right edges (40px wide) - HUD corners: CSS-drawn angular brackets (border-left + border-top combinations) at each viewport corner - Side data strips: vertical text labels (writing-mode: vertical-rl) showing section names and navigation indicators - Content scrolls within the HUD frame, maintaining the overlay illusion **Section Sequence:** 1. **Terminal Access:** Hero with HUD frame fully visible, wiki title in bold pop-art typography with halftone background 2. **Knowledge Matrix:** Wiki categories displayed as pop-art panels within the HUD grid — bold colored blocks with thick black outlines 3. **Deep Scan:** Featured articles presented in larger panels with comic-book-style caption boxes and halftone imagery 4. **Cross-Reference:** Related topics connected by HUD-style targeting lines that animate between panels 5. **System Log:** Footer with access-log-styled links within the bottom HUD bar ## Typography and Palette **Typography:** - **Headlines:** "Archivo Black" (Google Fonts) — ultra-bold condensed sans at 2.5rem-4rem, weight 400. Its heavy presence creates the pop-art poster-headline impact needed for wiki article titles. - **Body Text:** "Libre Franklin" (Google Fonts) — clean proportional sans at 1rem, weight 400, line height 1.7. Neutral and readable for wiki article content. - **HUD Labels:** "Overpass Mono" (Google Fonts) — technical monospace at 0.7rem, weight 400, for HUD data strips, coordinates, and system readouts. - **Captions:** "Archivo Black" at 0.85rem for comic-panel-style caption boxes. **Color Palette:** - **Burgundy Bold:** #8a2030 — deep red for primary headlines and bold accents - **Cream Page:** #faf0e0 — warm cream for primary backgrounds (comic page paper) - **Ink Black:** #1a1a1a — pure black for outlines, borders, and HUD frame lines - **Pop Yellow:** #f0d020 — bright yellow for highlight panels and accent backgrounds - **Pop Blue:** #2060d0 — vivid blue for secondary panels and link states - **Halftone Pink:** #e0a0a8 — soft pink for halftone dot patterns - **HUD Green:** #40c060 — screen green for HUD data readouts and active indicators - **Panel Gray:** #d0c8c0 — warm gray for secondary panel backgrounds ## Imagery and Motifs **Vector Art Wiki Illustrations:** Wiki concepts illustrated as bold, flat vector art with thick black outlines (3px stroke) — simplified diagrams of blockchain layers, scaling solutions, and protocol architectures rendered in pop-art primary colors with no gradients, only flat fills. **Retro Halftone Patterns:** Background areas and image zones use CSS-generated halftone patterns — radial-gradient dots (4px) in Halftone Pink at varying densities creating the Ben-Day dot effect. Applied via background: radial-gradient(circle, #e0a0a8 1px, transparent 1px), background-size: 6px 6px. **Blur-Focus Reading Mode:** When a wiki article panel is expanded for reading, the surrounding panels blur (filter: blur(4px)) and darken (opacity: 0.4), creating a calm focus zone. The active panel scales to fill the content area (max-width: 800px) with a smooth 500ms transition. This blur-focus supports the calm-serene tone by eliminating visual noise during reading. **Comic Panel Grid:** Wiki entries are arranged in a comic-panel grid — CSS Grid with varying column spans (1-2 columns) and thick black borders (3px solid Ink Black) between panels. Panels have slightly different background colors from the palette, creating the multi-colored page of a pop-art comic. **HUD Targeting Lines:** Animated SVG lines connect related wiki entries — thin (1px) lines in HUD Green that draw themselves on scroll entry (stroke-dasharray animation), with small diamond endpoints, suggesting the HUD system is mapping knowledge relationships. ## Prompts for Implementation Build the page as a pop-art wiki within a HUD frame. The HUD overlay uses position: fixed corner elements (four divs, each with two borders forming right-angle brackets) and side data strips with writing-mode: vertical-rl text. Comic panel grid: display: grid with grid-template-columns: repeat(4, 1fr) and varying grid-column spans. Each panel has border: 3px solid #1a1a1a and a palette background color. Featured panels use grid-column: span 2. Halftone pattern: background: radial-gradient(circle, #e0a0a8 1px, transparent 1px), background-size: 6px 6px. Apply to panel backgrounds or as a pseudo-element overlay with pointer-events: none and opacity: 0.3. Blur-focus: when a panel is clicked, add .focused class. Siblings get transition: filter 0.5s, opacity 0.5s and receive filter: blur(4px) and opacity: 0.4. Focused panel gets transform: scale(1) (from 0.98) and z-index: 10. HUD targeting lines: SVG with position: absolute. Lines use stroke-dasharray equal to path length, stroke-dashoffset animated from path-length to 0 over 800ms on scroll entry via Intersection Observer. Pop-art bold outlines: all illustration SVGs use stroke: #1a1a1a, stroke-width: 3px, fill with flat palette colors. No gradients, no shadows — pure pop-art flatness. AVOID: Dense text-wall wiki layouts, bland corporate documentation styling, and aggressive conversion elements. Let the pop-art energy and HUD framing make knowledge exploration feel dynamic and visually engaging. ## Uniqueness Notes 1. **Pop-art aesthetic for blockchain wiki content:** Transforming dry technical documentation into bold, comic-inspired panels makes knowledge browsing visually exciting. 2. **HUD-overlay frame for wiki navigation:** The heads-up-display framing creates an immersive knowledge-system interface that feels like piloting through information. 3. **Halftone patterns as wiki page texture:** Ben-Day dots bridge comic-book visual language with encyclopedic content presentation. 4. **Blur-focus reading mode with calm-serene tone:** The focus isolation technique creates meditative reading experiences within the bold visual framework. 5. **HUD targeting lines connecting related entries:** Animated relationship lines visualize the interconnected nature of wiki knowledge as a navigable graph. **Seed/Style:** aesthetic: pop-art, layout: hud-overlay, typography: variable-fluid, palette: burgundy-cream, patterns: blur-focus, imagery: vector-art, motifs: retro-patterns, tone: calm-serene **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses pop-art aesthetic, hud-overlay layout, burgundy-cream palette, vector-art imagery, and calm-serene tone.