# Design Language for haskell.monster ## Aesthetics and Tone A playful kaiju-meets-category-theory mashup -- haskell.monster reimagines functional programming concepts as friendly monsters that inhabit an abstract mathematical universe. Each monad is a creature, each functor a species, each type class a family of beasts. The aesthetic is neon-creature: vivid green-on-dark backgrounds (channeling terminal culture) meet illustrated monster silhouettes built from CSS shapes. Think retro arcade game manual meets graduate-level type theory textbook, with monsters made of parentheses and lambda symbols. The tone is irreverent-clever -- wielding humor and monster metaphors to make advanced Haskell concepts feel approachable and entertaining. ## Layout Motifs and Structure The layout uses a **bestiary-grid** architecture -- content is arranged as a collection of monster profile cards, like entries in a creature encyclopedia. **Bestiary System:** - CSS Grid: 2 columns on desktop (each card 50% viewport width), 1 on mobile - Each "monster card" is a full section: left side has the creature silhouette/visualization, right side has the description and code example - Cards alternate orientation: odd cards have creature on left, even cards have creature on right - 0px gap between cards -- they butt against each other for a dense, manual-like feel **Section Flow:** 1. **Title Screen (Hero):** Dark background (#0a0f0a). "HASKELL.MONSTER" in large pixel-inspired type, with the "O" in MONSTER replaced by a CSS-drawn eye (circle with inner circle). A blinking cursor after the text. 2. **The Bestiary:** Monster profile cards for key Haskell concepts: - The Monad (a many-armed creature that chains computations) - The Functor (a shapeshifter that maps between worlds) - The Applicative (a duplicator that applies wrapped functions) - The Monoid (a self-combining blob that always has an identity) 3. **The Lab:** A section styled as a terminal where you can "observe" monsters -- code examples with comments that describe the monster's behavior. 4. **Credits Crawl:** The closing section with references and links styled as retro game credits scrolling upward. ## Typography and Palette **Typography:** - **Display:** "Press Start 2P" (Google Fonts) -- a pixel-style font that channels retro gaming and terminal culture. Used at 1.5rem-3rem, weight 400 (single weight), letter-spacing: 0.02em. Note: used sparingly due to low readability at small sizes. - **Body:** "Space Grotesk" (Google Fonts) -- a geometric sans-serif with techy character that bridges the pixel aesthetic and modern readability. Used at 1rem, weight 400, line-height 1.7. - **Code:** "Fira Code" (Google Fonts) at 0.875rem for code blocks, with ligatures enabled for Haskell operators. - **Monster Names:** "Press Start 2P" at 1.2rem for creature names in the bestiary. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void | Near-black green | #0a0f0a | Primary background | | Terminal Green | Classic green | #00ff41 | Primary accent, text highlights | | Monster Purple | Vivid purple | #b24bf3 | Monster-related accents, creature glows | | Plasma Blue | Electric blue | #00b4d8 | Secondary accent, links | | Warning Red | Bright red | #ff3a3a | Error states, dangerous monsters | | Amber | Retro amber | #ffb627 | Warnings, type annotations | | Text Green | Soft green | #b8e6c0 | Body text on dark backgrounds | | Text Dim | Dark green | #3a5a3a | Muted text, comments | | Card Surface | Dark green-gray | #121a12 | Card backgrounds | ## Imagery and Motifs **CSS Monster Silhouettes:** Each Haskell concept has a monster built from CSS shapes: circles, triangles (clip-path), and rounded rectangles arranged to suggest creatures. The Monad monster has multiple arms (elongated rectangles), the Functor has a morphing outline (border-radius animation), the Monoid is a simple blob that duplicates on hover (CSS ::after clone). **Terminal Green Text Effects:** Key text elements have a subtle green glow: text-shadow: 0 0 8px rgba(0,255,65,0.5). Display text has a slight CRT scan-line effect achieved with a repeating-linear-gradient overlay (2px tall bands alternating between transparent and rgba(0,0,0,0.1)). **Blinking Cursor Motif:** A CSS-animated blinking cursor (|) appears after key headings and in the terminal section, creating a "live system" feeling. Animation: opacity stepping between 0 and 1 every 800ms. **Monster Hover Reactions:** Hovering over a bestiary card triggers a creature-specific CSS animation: the Monad's arms wave (rotate transform), the Functor shifts colors (filter: hue-rotate), the Monoid duplicates (::after element scales in), the Applicative pulsates (scale oscillation). ## Prompts for Implementation Build the page as a retro gaming bestiary of Haskell concepts. The hero should feel like a title screen: "HASKELL.MONSTER" in pixel font, blinking cursor, dark terminal void. The bestiary cards are the centerpiece -- each monster needs a distinct CSS-built silhouette that characterizes the Haskell concept it represents. The alternating left/right layout creates visual variety while maintaining consistency. Code blocks in each card should show the actual Haskell type class or function, with comments written in monster-metaphor language (e.g., "-- The Monad extends its arms to chain computations"). The terminal green palette establishes the hacker/coder identity while the monster purple adds playful personality. CRT scan-line effects and blinking cursors reinforce the retro aesthetic. Make it feel like discovering creatures in a game manual. AVOID: light themes, corporate layouts, serious academic tone, stock imagery, marketing CTAs, traditional web patterns, subtle colors. ## Uniqueness Notes 1. **Haskell-concepts-as-monsters bestiary:** Personifying type classes as creatures with distinct visual forms and behaviors is a wholly original conceit. 2. **CSS-built creature silhouettes:** Monsters constructed from pure CSS shapes (circles, clip-paths, border-radius) demonstrate creative CSS while staying image-free. 3. **Retro-gaming meets type theory:** The collision of pixel fonts and terminal aesthetics with advanced functional programming concepts creates a unique cultural mashup. 4. **Monster-specific hover animations:** Each creature responding to hover with a concept-appropriate animation (chaining, mapping, combining, applying) makes the interaction itself educational. Document chosen seed/style: aesthetic: neon-creature, layout: bestiary-grid, typography: pixel-retro, palette: terminal-monster, patterns: hover-react, imagery: css-creatures, motifs: retro-game, tone: irreverent-clever Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)