# Design Language for haskell.day ## Aesthetics and Tone A type-theoretic celebration rendered in the visual language of mathematical proof -- haskell.day is a commemorative site for the Haskell programming language that treats functional programming concepts as objects of aesthetic beauty. The design channels the elegance of lambda calculus: clean composition, logical hierarchy, and precise spacing reflect the language's emphasis on purity and correctness. The aesthetic is mathematical-elegant: whiteboard-clean backgrounds meet carefully structured content blocks that mirror the composability of Haskell's type system. Purple (Haskell's brand color) is the singular accent threading through an otherwise monochromatic palette. The tone is intellectually-warm -- rigorous and precise but genuinely enthusiastic about the beauty of pure functional programming. ## Layout Motifs and Structure The layout uses a **theorem-proof** architecture -- content is structured like a mathematical paper, with definitions, examples, and explanations arranged in a formal but readable hierarchy. **Document System:** - Single centered column, 740px max-width (optimized for reading code and prose) - Clear hierarchical spacing: h1 sections separated by 80px, h2 by 48px, paragraphs by 24px - Code blocks are first-class citizens: indented 24px from body text with a distinct background - Definition blocks (key concepts) have a left border in Haskell purple and a tinted background **Section Flow:** 1. **Lambda Header (Hero):** A centered lambda symbol (λ) at 8rem in purple, above "haskell.day" in clean sans-serif. Below: a Haskell type signature rendered in monospace as a subtitle. 2. **Definitions:** Core concepts (purity, laziness, types, composition) presented as formal definitions with labeled blocks, each beginning with a bold term and colon. 3. **Code Gallery:** Elegant Haskell code examples with syntax highlighting in the Haskell purple palette. Each example has a descriptive title above. 4. **Timeline:** Key moments in Haskell's history, presented as a vertical list with year labels aligned left and descriptions right. 5. **Closing Type Signature:** A full-width centered Haskell type signature serving as a poetic closing statement, rendered large in monospace. ## Typography and Palette **Typography:** - **Headlines:** "Inter" (Google Fonts) -- precise, neutral sans-serif with tight metrics and excellent rendering. Used at 1.5rem-3rem, weight 700, letter-spacing: -0.02em, line-height 1.2. - **Body:** "Source Serif 4" (Google Fonts) -- a readable serif with technical character, bringing the warmth of mathematical typesetting (like LaTeX). Used at 1rem, weight 400, line-height 1.75. - **Code:** "JetBrains Mono" (Google Fonts) -- monospace with programming ligatures for Haskell's operators (>>=, ->, =>). Used at 0.9rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper | Warm white | #fafafa | Primary background | | Haskell Purple | Brand purple | #5e5086 | Primary accent, links, borders | | Purple Light | Tinted bg | #f0ecf5 | Definition blocks, code block bg | | Purple Dark | Deep purple | #3c2f5a | Lambda symbol, strong emphasis | | Text Primary | Near-black | #1a1a2e | Headlines, body text | | Text Secondary | Warm gray | #6b6880 | Metadata, captions | | Code BG | Light purple-gray | #f5f3f8 | Code block backgrounds | | Syntax Green | Muted green | #4a9375 | String literals in code | | Syntax Orange | Warm orange | #c07020 | Type constructors in code | ## Imagery and Motifs **Lambda Symbol as Icon:** The λ character appears as the primary visual motif -- large in the hero (8rem, purple), and as small decorative markers (1rem) at section transitions. It is THE icon of the entire site. **Type Signature Decoration:** Haskell-style type signatures (e.g., `map :: (a -> b) -> [a] -> [b]`) are displayed as decorative elements between sections, rendered in monospace at 1.2rem with the `::` and `->` in purple. **Definition Blocks:** Key concept sections have a 3px left border in Haskell purple (#5e5086) and a #f0ecf5 background, mimicking the convention of mathematical definitions in textbooks. **Minimal Animations:** Only two: (1) the lambda symbol in the hero fades in with a subtle scale (0.95 to 1.0, 600ms), and (2) code blocks gain a slightly brighter border on hover. Everything else is static -- reflecting Haskell's preference for immutability. ## Prompts for Implementation Build the page as a beautiful mathematical document celebrating Haskell. The content should feel like reading a well-typeset paper or textbook -- clean, hierarchical, and precise. The lambda symbol hero establishes the identity immediately. Code blocks should be prominent and beautifully formatted, with syntax highlighting that uses the purple-based palette. Definition blocks with their purple left borders create a recurring structural motif. The serif body font (Source Serif 4) brings the warmth of mathematical typesetting, making dense content feel approachable. Type signatures displayed as decorative elements between sections serve as both visual rhythm and content. The overall impression should be: this is a language worth celebrating because its ideas are beautiful. AVOID: dark themes (this is a celebration, not an IDE), flashy animations, gaming aesthetics, corporate layouts, marketing language, card grids, heavy imagery. ## Uniqueness Notes 1. **Theorem-proof layout architecture:** Structuring web content like a mathematical paper with formal definitions and type-signature decorations is unique to this domain's subject matter. 2. **Lambda symbol as singular icon motif:** Using λ as both brand mark and decorative element throughout creates a unified visual identity from a single character. 3. **Mathematical typesetting aesthetic (Source Serif + code):** The combination of LaTeX-like serif body with Haskell code blocks bridges academic publishing and programming culture. 4. **Intellectually-warm tone:** Rigorous and precise but genuinely enthusiastic -- avoiding both dry academic writing and marketing hype. Document chosen seed/style: aesthetic: mathematical-elegant, layout: theorem-proof, typography: serif-code, palette: haskell-purple, patterns: definition-block, imagery: lambda-symbol, motifs: type-signature, tone: intellectually-warm Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)