# Design Language for layer2.wiki ## Aesthetics and Tone layer2.wiki channels a dopamine aesthetic — bright saturated colors, rewarding visual feedback, and the addictive scroll patterns of social media feeds applied to Layer-2 blockchain encyclopedia content. The site makes learning about blockchain scaling feel like the satisfying scroll of a well-curated social feed, where each wiki entry delivers a small hit of visual pleasure through bold colors and engaging hand-drawn illustrations. Inspiration draws from Duolingo's gamified learning, Pinterest's visual discovery grid, Field Notes brand design, and the illustrated margins of medieval manuscripts. The tone is conversational — wiki entries written as friendly explanations rather than dry encyclopedia entries, as if a knowledgeable friend is explaining blockchain concepts over coffee. The portfolio-grid layout showcases wiki entries as visual project cards, making knowledge feel collectible and browsable. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — wiki entries displayed as visual cards in a curated grid, each card featuring a prominent illustration with supporting text, creating a gallery of knowledge. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(340px, 1fr)), gap: 20px, max-width: 1200px centered - Cards: consistent border-radius (16px), varying aspect ratios through content - Featured entries: grid-column: span 2 for important topics - Each card has a prominent illustration zone (200px height) above content text **Section Sequence:** 1. **Welcome Board:** Colorful hero with hand-drawn Layer-2 concept map, wiki title in bold slab-serif, and a search bar with playful placeholder text 2. **Featured Collection:** 2-column span featured articles with large illustrations and summary text 3. **Knowledge Grid:** Main portfolio grid of wiki entry cards organized by topic clusters 4. **Tropical Sidebar:** Sticky navigation with tropical fish icons marking different wiki categories 5. **Contributors:** Footer with community attribution and contribution call-to-action ## Typography and Palette **Typography:** - **Headlines:** "Zilla Slab" (Google Fonts) — sturdy slab-serif at 2rem-3rem, weight 700. Its mechanical slab serifs carry wiki-reference authority while feeling contemporary and bold. - **Body Text:** "Inter" (Google Fonts) — clean UI sans at 0.95rem, weight 400, line height 1.7. Excellent screen readability for dense wiki content. - **Code Snippets:** "Fira Code" (Google Fonts) — ligature monospace at 0.85rem for blockchain addresses and code examples. - **Labels:** "Zilla Slab" at 0.75rem, weight 500 for category tags and metadata. **Color Palette:** - **Muted Sage:** #7a9a78 — soft green for primary backgrounds and card accents - **Muted Coral:** #c87a6a — soft red-orange for highlight accents and interactive elements - **Parchment Base:** #f4f0e8 — warm off-white for page background - **Slate Text:** #3a3a44 — dark gray-blue for primary text - **Muted Gold:** #b8a060 — soft gold for premium content badges and featured borders - **Cloud Blue:** #8aa8c4 — muted blue for link states and secondary accents - **Blush Pink:** #d8a8a0 — soft pink for tag backgrounds and hover states - **Ink Dark:** #2a2a30 — near-black for headings and emphasis ## Imagery and Motifs **Hand-Drawn Wiki Illustrations:** Each wiki entry card features a hand-drawn style illustration (SVG with intentionally imperfect lines — stroke-dasharray with slight randomization, rounded line-caps, varying stroke-width 1.5-2.5px) depicting the concept. Blockchain layers as stacked pancakes, scaling solutions as expanding bridges, consensus as a group huddle. **Tropical Fish Category Icons:** Wiki categories marked with colorful tropical fish icons (SVG, 32x32px) — each species representing a different knowledge domain. Clownfish for basics, angelfish for advanced concepts, pufferfish for security topics. Colors drawn from the muted palette with slightly boosted saturation. **Stagger-Reveal Grid Animation:** Wiki cards enter the viewport with a staggered cascade — each card delays its entrance by 80ms after the previous one (nth-child based animation-delay). Entry animation: opacity 0 to 1, translateY(20px) to 0, over 400ms ease-out. Creates a satisfying waterfall reveal effect that delivers the dopamine hit. **Notebook Paper Texture:** Card backgrounds feature a subtle ruled-line pattern (repeating-linear-gradient with thin Muted Sage lines at 0.06 opacity, spaced 28px apart) suggesting notebook paper pages, reinforcing the wiki-as-study-notes metaphor. **Highlighter Hover Effect:** On card hover, a yellow-tinted gradient sweeps across the card header area (background-position animated from -100% to 0), simulating a highlighter being drawn across text. Color: Muted Gold at 0.15 opacity. ## Prompts for Implementation Build the page as a dopamine-triggering wiki grid. Portfolio grid uses display: grid, grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)), gap: 20px. Featured cards use grid-column: span 2. Stagger animation: cards start with opacity: 0, transform: translateY(20px). On Intersection Observer entry, add .visible class. CSS: .visible { opacity: 1; transform: translateY(0); transition: all 400ms ease-out; } .visible:nth-child(2) { transition-delay: 80ms; } etc up to 12 children. Hand-drawn SVG style: paths use stroke-linecap: round, stroke-linejoin: round, stroke-width varying between 1.5-2.5px. Add slight filter: url(#roughen) with a feTurbulence SVG filter for hand-drawn wobble. Notebook lines: background: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(122,154,120,0.06) 27px, rgba(122,154,120,0.06) 28px). Highlighter hover: card header uses background: linear-gradient(90deg, rgba(184,160,96,0.15) 50%, transparent 50%), background-size: 200% 100%, background-position: 100% 0. On hover: background-position: 0 0, transition: 300ms. AVOID: Dense text walls, sterile wiki formatting, and aggressive conversion elements. Let the colorful grid and hand-drawn illustrations make knowledge discovery feel joyful. ## Uniqueness Notes 1. **Dopamine aesthetic for blockchain wiki:** Applying addictive social-feed design patterns to educational content makes learning feel rewarding and browsable. 2. **Hand-drawn illustrations for technical concepts:** Sketch-style visuals humanize abstract blockchain concepts and create visual memorability. 3. **Tropical fish as knowledge category icons:** Whimsical species-based categorization adds personality to wiki navigation. 4. **Stagger-reveal creating discovery satisfaction:** The cascading card entrance animation delivers the small dopamine hits that keep users scrolling. 5. **Notebook paper texture as study metaphor:** Ruled-line backgrounds frame wiki entries as personal study notes rather than impersonal reference material. **Seed/Style:** aesthetic: dopamine, layout: portfolio-grid, typography: slab-serif, palette: muted, patterns: stagger, imagery: hand-drawn, motifs: tropical-fish, tone: conversational **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 dopamine aesthetic, portfolio-grid layout, muted palette, hand-drawn imagery, and conversational tone.