# Design Language for economics.quest

## Aesthetics and Tone
A gamified economics education platform where learning is structured as a quest progression -- economics.quest renders as an RPG-style learning interface with experience bars, achievement badges, and level-based content progression. The gamification aesthetic transforms dry economic theory into an adventure: each concept mastered is an achievement unlocked, each topic area is a realm to explore, and the learner is the protagonist.

The tone is mentor-encouraging: the voice of a game-tutorial NPC who genuinely wants the player to succeed. Concepts are introduced progressively, building on each other like quest chains.

## Layout Motifs and Structure
**Quest System:** A central quest-log layout with a progress sidebar and main content area.

**Section Flow:**
1. **The Guild Hall:** Hero with domain name, player "profile" placeholder, and overall progress bar.
2. **The Quest Board:** Grid of quest/topic cards with difficulty ratings (stars) and progress indicators.
3. **The Current Quest:** Active content area with step-by-step lesson format.
4. **The Trophy Room:** Achievement/badge display section.

## Typography and Palette
- **Headlines:** "Fredoka" at 2rem-3.5rem, weight 600 -- friendly and game-like.
- **Body:** "Nunito" at 1rem, weight 400, line-height 1.7.
- **UI:** "Space Mono" at 0.75rem for game-system text (XP, levels).

**Palette:** Deep purple (#1a1030), Gold (#ffd040) for progress/achievements, Emerald (#20c870) for completed, Sky Blue (#40a0f0) for active, Coral (#f06050) for locked, Light (#f0e8ff) for cards.

## Imagery and Motifs
**Progress Bars:** CSS-rendered bars with gold fill on dark backgrounds, showing completion percentage.

**Star Ratings:** Difficulty indicated by 1-5 star icons (CSS triangles or Unicode) in Gold.

**Achievement Badges:** Circular badges (48px) with colored borders and centered icons (CSS shapes or Unicode symbols).

**Quest Cards:** Cards with a thin colored left border indicating status (emerald=complete, blue=active, coral=locked).

## Prompts for Implementation
Build as a game menu screen. The Guild Hall hero loads with the progress bar filling to the user's "current" level (animated, 1.5s). Quest cards appear on the Quest Board with staggered entry (100ms delay per card). Star ratings show difficulty visually. The Current Quest section uses step-by-step formatting (numbered steps, checkmarks for completed). Achievement badges in the Trophy Room pulse briefly when scrolled to. The gamification makes economics engaging without trivializing it. No real user data -- all progress is illustrative/demonstrative.

## Uniqueness Notes
1. **RPG quest-log as education architecture:** The quest/achievement structure makes economics education feel like gameplay.
2. **Progress bars as visual commitment:** CSS progress indicators create tangible sense of advancement.
3. **Star difficulty ratings:** Visual difficulty indicators help learners choose appropriate content levels.
4. **Quest-status color coding:** Left-border colors immediately communicating card status creates efficient scanning.

Document chosen seed/style: aesthetic: gamification, layout: quest-log, typography: playful-sans, palette: purple-gold-game, patterns: progress-bars, imagery: achievement-badges, motifs: star-ratings, tone: mentor-encouraging
<!-- DESIGN STAMP
  timestamp: 2026-03-18T22:25:04
  seed: aesthetic: gamification, layout: quest-log, typography: playful-sans, palette: purple-gold-game
  aesthetic: A gamified economics education platform where learning is structured as a quest progr...
  content_hash: e5f6a7b8c9d0
-->