# Design Language for haskell.quest ## Aesthetics and Tone A quest-RPG adventure through functional programming concepts -- haskell.quest gamifies the Haskell learning journey as a dungeon crawl where each room contains a programming challenge and each level-up unlocks a new type class. The aesthetic is dungeon-map: hand-drawn graph paper textures, dotted exploration paths, and treasure-chest icons built from CSS create an old-school RPG adventure atmosphere. Haskell's purple brand color becomes the magical glow of discovered artifacts (monads, functors, applicatives). The tone is quest-narrative -- written as if the learner is an adventurer discovering functional programming treasures in a mathematical dungeon. ## Layout Motifs and Structure The layout uses a **dungeon-map** architecture -- content is arranged as rooms on a visible grid, connected by dotted paths that trace the learning journey. **Map System:** - A background grid of faint squares (48x48px, 1px #d0c4e8 at 12% opacity) covers the viewport - Content "rooms" are positioned on this grid as rectangular cards with thick borders (3px solid #5e5086) - Dotted SVG paths connect rooms, showing the progression order - The map scrolls vertically, with rooms arranged in a winding path pattern **Section Flow:** 1. **Quest Start (Hero):** A parchment-styled card with "HASKELL.QUEST" in bold type, a small quest-scroll icon (CSS-drawn rectangle with rolled edges via border-radius), and "Begin your functional adventure" subtitle. 2. **The Path:** Connected room-cards, each containing a Haskell concept as a "challenge": Types (Level 1), Functions (Level 2), Pattern Matching (Level 3), Higher-Order Functions (Level 4), Type Classes (Level 5), Monads (Boss Level). 3. **The Loot:** A treasure-display section showing "artifacts" (useful Haskell libraries/tools) as small icon cards with names and one-line descriptions. 4. **Quest Log (Footer):** A styled log/journal section with key learnings summarized in a parchment-style card. ## Typography and Palette **Typography:** - **Headlines:** "Cinzel" (Google Fonts) -- a classicist serif with ancient/epic qualities that matches the quest-adventure theme. Used at 1.5rem-3rem, weight 700, letter-spacing: 0.03em, text-transform: uppercase. - **Body:** "Alegreya" (Google Fonts) -- a literature serif with calligraphic warmth suited to narrative text. Used at 1rem, weight 400, line-height 1.7. - **Code/Data:** "Fira Code" (Google Fonts) at 0.85rem for Haskell code examples within challenge rooms. - **Level Labels:** "Cinzel" at 0.75rem, weight 400, for room labels and level numbers. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Parchment | Warm beige | #f5f0e0 | Primary background | | Dungeon Stone | Dark gray-brown | #3a3530 | Card borders, primary text | | Magic Purple | Haskell purple | #5e5086 | Accent, room borders, links | | Gold | Treasure gold | #c8a23c | Achievement highlights, level numbers | | Path Dot | Medium brown | #8a7a6a | Dotted connection paths | | Ink | Dark ink | #2a2520 | Headlines, strong emphasis | | Muted | Warm gray | #7a7068 | Body text, descriptions | | Glow | Light purple | #e8e0f5 | Hover backgrounds, active room tint | ## Imagery and Motifs **Grid Paper Background:** A repeating CSS grid (48x48px squares) in faint purple-gray creates the dungeon map foundation. This is achieved with repeating-linear-gradient in both directions. **Dotted Connection Paths:** SVG paths with stroke-dasharray (6px dash, 4px gap) in #8a7a6a connect room-cards, showing the learning progression. Paths bend at right angles following the grid. **Room Cards as Dungeon Chambers:** Each concept card has a thick 3px border in #5e5086, a parchment-tinted background (#f5f0e0), and a small level badge in the top-left corner (gold circle with white number). **CSS Treasure Icons:** Small decorative elements built from CSS: a treasure chest (two stacked rectangles with rounded top), a scroll (rectangle with circular ends), a potion bottle (circle on a trapezoid). All drawn with border, border-radius, and clip-path. **Hover Glow:** Hovering a room card adds a faint purple glow: box-shadow: 0 0 16px rgba(94,80,134,0.25), and the border brightens to full #5e5086. ## Prompts for Implementation Build the page as an adventure map through Haskell concepts. The grid background establishes the dungeon-map metaphor immediately. Room-cards should feel like distinct locations on the map, each self-contained with a concept name, difficulty level, code example, and brief narrative description ("You enter the Chamber of Monads..."). Dotted SVG paths between rooms create a visual learning journey -- the user can follow the path from Level 1 to the Boss Level. The parchment palette and classical serif typography maintain the fantasy-adventure atmosphere while remaining readable. Code blocks within room-cards use the standard Fira Code monospace. Gold accents mark achievements and level numbers. The overall experience should make learning Haskell feel like an adventure worth undertaking. AVOID: modern minimalism, dark themes, corporate layouts, neon colors, heavy animations, marketing language, stock imagery. ## Uniqueness Notes 1. **Dungeon-map layout for programming education:** Positioning learning content as rooms on an adventure map is a unique educational design pattern. 2. **Dotted SVG path connections on grid paper:** The visible quest path connecting concept-rooms creates a tangible sense of progression. 3. **Classical serif typography for programming content:** Using Cinzel and Alegreya for Haskell content creates an unexpected collision of ancient and modern. 4. **Quest-narrative tone for type theory:** Writing about monads and functors as dungeon treasures makes abstract concepts feel adventurous. Document chosen seed/style: aesthetic: dungeon-map, layout: quest-path, typography: classical-serif, palette: parchment-gold, patterns: dotted-path, imagery: css-icons, motifs: adventure-rpg, tone: quest-narrative Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)