# Design Language for layer2.quest ## Aesthetics and Tone layer2.quest channels an isometric aesthetic — precise 30-degree angles, three-dimensional block constructions, and the architectural clarity of axonometric projection applied to Layer-2 blockchain quest experiences. The site presents blockchain quests as explorable isometric worlds — miniature diorama-like environments where users navigate through layered challenge spaces rendered in clean geometric perspective. Inspiration draws from isometric video game worlds (Monument Valley, Fez), architectural axonometric drawings, M.C. Escher's impossible constructions, and the detailed miniature worlds of tilt-shift photography. The tone is luxurious — quests positioned as premium, carefully crafted experiences rather than gamified checklists, with the polish of a high-end strategy game. The dashboard layout maps quest progress across a structured control surface where each panel reveals a different facet of the quest ecosystem. ## Layout Motifs and Structure The layout uses a **dashboard** architecture — a structured command center organizing quest data, progress tracking, and challenge interfaces into clearly defined zones, each rendered with isometric visual treatment. **Dashboard Architecture:** - Top bar: 56px header with isometric logo block, quest selector dropdown, and progress summary - Left panel: 220px sidebar with quest category navigation presented as stacked isometric blocks - Main area: CSS Grid, columns: repeat(auto-fill, minmax(320px, 1fr)), gap: 16px for quest module cards - Feature panels: Selected cards expand to 2-column span for detailed quest views - Container respects full viewport height with overflow-y: auto on the main content zone only **Section Sequence:** 1. **Command Deck:** Header strip showing active quest title, overall completion percentage, and reward tier in isometric badge form 2. **Quest Tower:** Sidebar navigation where quest categories stack as isometric building floors — each floor a clickable navigation element 3. **Mission Grid:** Main dashboard area with quest module cards — each showing a miniature isometric scene representing the challenge type 4. **Architect View:** Expanded detail panel (spans grid width) showing quest requirements, milestones, and reward paths as isometric flowcharts 5. **Foundation:** Footer as the ground plane of the isometric world, with links arranged as ground-level signposts ## Typography and Palette **Typography:** - **Headlines:** "Poiret One" (Google Fonts) — geometric art-deco display at 2rem-3.5rem, weight 400. Its precise geometry complements the mathematical precision of isometric projection while adding deco luxury. - **Body Text:** "Work Sans" (Google Fonts) — clean geometric sans at 0.95rem, weight 400, line height 1.65. Neutral and professional for dashboard data. - **Data/Stats:** "Space Mono" (Google Fonts) — technical monospace at 0.85rem for quest metrics, completion percentages, and reward values. - **Labels:** "Work Sans" at 0.7rem, weight 600, uppercase, letter-spacing 0.08em for panel headers and category markers. **Color Palette:** - **Forest Emerald:** #1a6a3a — deep forest green for primary backgrounds and isometric block faces - **Forest Light:** #2a9a50 — medium green for isometric block top faces (lighter plane) - **Forest Shadow:** #104a28 — dark green for isometric block side faces (shadow plane) - **Gold Luxe:** #d4a840 — warm gold for achievement highlights, reward indicators, and premium elements - **Cream Ground:** #f4f0e4 — warm cream for main content area backgrounds - **Stone Gray:** #6a6a6a — neutral gray for secondary text and inactive elements - **Onyx Dark:** #1a1a24 — near-black for header bar and text on light backgrounds - **Jade Mist:** #d0e8d8 — pale green for card backgrounds and hover states ## Imagery and Motifs **Bokeh Background Depth Field:** Behind the dashboard grid, soft bokeh circles (CSS radial gradients, 40-120px, at 0.06-0.12 opacity) in Forest Emerald, Gold Luxe, and Jade Mist float at varying positions, creating a dreamy depth-of-field effect that makes the crisp isometric foreground elements feel like miniature tilt-shift scenes. **Tech Isometric Block Constructions:** Quest modules represented as isometric block constructions — CSS-drawn parallelograms and diamonds (using transform: rotate(45deg) skew() combinations) in the three-tone green system (top: Forest Light, left: Forest Emerald, right: Forest Shadow) creating convincing 3D blocks without any actual 3D rendering. **Blur-Focus Quest Spotlight:** When a quest module is selected, it gains sharp focus while surrounding modules blur (filter: blur(3px)) and desaturate (filter: saturate(0.3)), creating a camera-focus effect. The active module gains a Gold Luxe border glow (box-shadow: 0 0 16px rgba(212,168,64,0.4)). Transition: 350ms ease-out. **Isometric Grid Lines:** The dashboard background features subtle isometric grid lines — two sets of parallel lines at 30-degree angles (created with repeating-linear-gradient at 30deg and 150deg) in Forest Emerald at 0.04 opacity, establishing the isometric coordinate system. **Reward Shimmer Animation:** Quest reward indicators (badges, tokens, achievements) feature a slow shimmer effect — a diagonal linear-gradient highlight (white at 0.3 opacity, 20px wide) translating across the element surface over 3 seconds, creating the premium shimmer of precious materials. ## Prompts for Implementation Build the page as an isometric quest dashboard. Layout uses CSS Grid: grid-template-columns: 220px 1fr, grid-template-rows: 56px 1fr auto. Main content zone: display: grid, grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)), gap: 16px. Isometric blocks: three divs (top, left, right faces). Top face: transform: rotate(45deg) scale(0.707), background: Forest Light. Left face: transform: skewY(30deg), background: Forest Emerald. Right face: transform: skewY(-30deg), background: Forest Shadow. Assemble with position: absolute within a relatively-positioned container. Bokeh background: 8-12 divs with border-radius: 50%, positioned absolutely behind the grid, sizes 40-120px, palette colors at 0.06-0.12 opacity, with slow drift animation (@keyframes: translateX/translateY small values over 20-30s, infinite, alternate). Blur-focus: on card click, add .active class. Siblings receive filter: blur(3px) saturate(0.3) with transition: filter 350ms ease-out. Active card receives box-shadow: 0 0 16px rgba(212,168,64,0.4) and z-index: 10. Reward shimmer: @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }. Applied with background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%), background-size: 200% 100%, animation: shimmer 3s ease-in-out infinite. Isometric grid background: background: repeating-linear-gradient(30deg, rgba(26,106,58,0.04) 0px, rgba(26,106,58,0.04) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(150deg, rgba(26,106,58,0.04) 0px, rgba(26,106,58,0.04) 1px, transparent 1px, transparent 30px). AVOID: Flat, generic dashboard templates, gamification that feels cheap, and dense data tables without spatial treatment. Let the isometric world-building and luxurious tone create a premium quest experience. ## Uniqueness Notes 1. **Isometric aesthetic for blockchain quests:** Presenting quests as explorable isometric worlds transforms progress tracking into spatial navigation through miniature environments. 2. **Dashboard as isometric command center:** The control panel layout gains architectural depth through three-tone isometric block rendering on every UI element. 3. **Bokeh depth-of-field behind crisp isometrics:** The contrast between soft background bokeh and sharp foreground geometry creates a tilt-shift miniature effect. 4. **Blur-focus quest spotlight interaction:** Camera-like focus isolation makes quest selection feel cinematic and intentional. 5. **Reward shimmer as luxury signal:** The precious-material shimmer effect on achievements reinforces the luxurious, premium tone of the quest experience. **Seed/Style:** aesthetic: isometric, layout: dashboard, typography: art-deco-display, palette: forest-green, patterns: blur-focus, imagery: bokeh-background, motifs: tech, tone: luxurious **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%), tech motifs (80% — used here but implemented through isometric construction rather than generic tech imagery). This design uses isometric aesthetic, dashboard layout, forest-green palette, bokeh-background imagery, and luxurious tone.