# Design Language for economics.quest ## Aesthetics and Tone economics.quest embraces a maximalist aesthetic -- dense, layered, and information-rich -- to create an economic RPG experience. "Quest" transforms economics from dry theory into adventure. Imagine a fantasy RPG where instead of slaying dragons, the player must solve economic crises: defeat inflation, negotiate trade agreements, and manage a kingdom's treasury. The visual language draws from classic RPG interfaces (Final Fantasy menu systems, Dragon Quest item screens), dark fantasy illustration, and the ornate borders of medieval economic manuscripts. The palette is dark-neon -- deep blacks with electric accent colors that pop like potions and spell effects. Marble textures ground the fantasy in classical economic tradition. Floral-botanical decorations reference the agricultural roots of economic thought (physiocrats, land-based value). The tone is mysterious-moody -- economics as an arcane art with hidden rules and dangerous consequences. ## Layout Motifs and Structure The layout uses a **single-column** structure evoking the narrow scroll of a quest journal or RPG text log. **Primary structure:** - **Quest log opening (100vh):** A dark background with a central "quest scroll" (a narrow rectangle, max-width 640px, centered, with ornate border treatment simulating a parchment scroll). Title "ECONOMICS QUEST" in geometric-futuristic type. The scroll has a marble-textured background. - **Quest chapters (6 sections, ~80vh each):** Each chapter is a single-column entry in the quest log, presenting an economic concept as a quest objective. Content uses RPG-style formatting: bold objective headers, descriptive paragraphs, and "reward" callout boxes (small bordered cards listing what the reader gains from understanding the concept). - **Floral-botanical treasury (100vh):** A section styled as a treasure room filled with botanical riches -- CSS-drawn plants and flowers in neon colors on dark backgrounds, each representing an economic resource (wheat for agriculture, cotton for textiles, spices for trade). Glitch effects on hover suggest the instability of resource-based economies. - **Boss encounter section (80vh):** A dramatic section presenting a major economic concept (e.g., hyperinflation) as a "boss battle." The visual treatment intensifies -- larger type, brighter neon accents, and a marble-textured "arena floor." - **Quest complete footer (50vh):** A dark section with "QUEST COMPLETE" in neon type and a summary of "experience gained" (key economic insights). **Spacing philosophy:** Single-column restraint with generous vertical spacing (clamp(40px, 6vh, 72px) between entries). The narrow column (640px) creates intimate, focused reading. Ornate borders provide visual richness within the narrow frame. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Orbitron" (Google Fonts) -- geometric, futuristic, RPG-HUD-style display font. Weight 700. Size clamp(24px, 3.5vw, 48px). Letter-spacing: 0.04em. - **Body text:** "Crimson Text" (Google Fonts) -- scholarly serif for quest-journal body text. Weight 400. Size clamp(15px, 1.05vw, 18px). Line-height: 1.8. - **Quest labels:** "Press Start 2P" (Google Fonts) -- pixel font for RPG-style labels, rewards, and status indicators. Weight 400, size 12px. **Palette:** - **Dungeon Black** `#08080F` -- primary dark background - **Scroll Parchment** `#F0E0C8` -- quest log scroll background - **Neon Potion** `#00FF88` -- bright green accent for success and rewards - **Neon Spell** `#FF4488` -- bright pink for boss encounters and warnings - **Gold Coin** `#FFD040` -- gold for treasure and economic value references - **Marble Cream** `#E8E0D0` -- marble-textured surfaces ## Imagery and Motifs **Core visual motifs:** - **Marble-textured scroll:** The quest log column uses a CSS marble texture (layered gradients simulating veined marble) as its background, giving the RPG scroll a classical economic weight. - **Floral-botanical neon plants:** CSS-drawn plant forms (stems as vertical lines, leaves as rotated ellipses, flowers as layered circles) rendered in neon colors (Neon Potion, Gold Coin) on Dungeon Black. Each plant represents an economic resource. - **RPG-style reward boxes:** Small bordered cards (border: 2px solid Gold Coin, border-radius: 4px, padding: 16px) containing bullet-pointed lists of "rewards" (key insights). Styled with pixel-font headers. - **Glitch effects on botanical elements:** Hover over neon plants triggers RGB split (text-shadow offsets) and brief horizontal displacement (translateX oscillation), representing economic instability. - **Boss encounter neon intensification:** The boss section uses larger neon accents, more aggressive shadows (box-shadow: 0 0 40px Neon Spell at 20%), and a pulsing background glow. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like playing through an economics-themed RPG quest journal. Each chapter is a quest entry. The botanical treasury is a treasure room. The boss encounter is a dramatic climax. The experience should be immersive and gamified. **Opening animation sequence:** - Frame 0-300ms: Dungeon Black background. - Frame 300-900ms: The marble-textured scroll materializes at center (height 0 to full, with ornate borders drawing simultaneously). - Frame 900-1400ms: "ECONOMICS" types in Orbitron with neon glow (Neon Potion text-shadow). - Frame 1400-1800ms: "QUEST" appears with a Gold Coin flash effect. - Frame 1800-2400ms: First quest chapter entry fades in below. **Scroll behavior:** Quest chapters enter with fade-in (opacity 0 to 1, 400ms). Reward boxes scale in with bounce (scale 0.9 to 1 with overshoot). The botanical treasury's neon plants "grow" as the section scrolls into view (height from 0 to full). The boss encounter section pulses with neon glow when entering the viewport. **Interaction details:** - Botanical neon plants glitch on hover (RGB split, displacement). - Reward boxes glow Gold Coin on hover (box-shadow: 0 0 12px Gold Coin). - Boss encounter heading intensifies neon glow on hover. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Economics as RPG quest:** Framing economic concepts as RPG quest objectives with rewards and boss encounters gamifies academic content in a unique way. 2. **Neon botanical economic resources:** Rendering economic resources (wheat, cotton, spices) as neon-colored CSS plants on dark backgrounds creates a fantasy-economics fusion that is visually distinctive. 3. **Marble scroll as classical-digital fusion:** The marble-textured quest scroll combines classical economic gravitas with RPG-game formatting, bridging centuries of economic tradition with gaming culture. 4. **Boss encounter as economic crisis:** Presenting major economic concepts (hyperinflation, depression) as "boss battles" with intensified visual treatment creates a dramatic learning experience. **Chosen seed/style:** aesthetic: maximalist, layout: single-column, typography: futura-geometric, palette: dark-neon, patterns: glitch, imagery: marble-texture, motifs: floral-botanical, tone: mysterious-moody **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Used maximalist (2%) aesthetic, dark-neon (7%) palette, and single-column (27%) layout. Marble-texture (4%) imagery and floral-botanical (7%) motifs are moderately used.