# Design Language for haskell.quest ## Aesthetics and Tone haskell.quest is a meditation on the invisible architecture of pure functions -- a digital rock garden where lambda calculus and type theory dissolve into the silence between stones. The zen aesthetic does not simply mean "clean"; it means the deliberate cultivation of emptiness as a semantic force. Inspired by the dry landscape gardens (karesansui) of Ryoan-ji temple, where fifteen stones are arranged so that no more than fourteen are visible from any single vantage point, this site reveals its logic incrementally through restraint. Every element earns its presence through absence of everything else. The mood channels the liminal stillness of Mono no aware -- the bittersweet awareness of impermanence -- applied to computational concepts. A Haskell type signature appears like calligraphy brushstrokes suspended in fog. Category theory diagrams fade in like morning dew forming on a spider's web. The visual language treats code as poetry and mathematics as landscape: the Curry-Howard correspondence is not explained but experienced as a slow dissolve between natural deduction trees and program structures. The tone is zen-contemplative: unhurried, precise, reverent toward both the mathematical and the organic. There is no eagerness to impress, no urgency to convert. The site breathes. Visitors arrive at a single stone in an ocean of whitespace and must wait, observe, and scroll to discover what lies beneath the surface -- a quest not for answers but for the right questions. ## Layout Motifs and Structure The layout is centered but employs the principle of "ma" (negative space as active compositional element) to subvert the static quality that centered layouts often carry. Rather than content stacked in a predictable vertical rhythm, the page operates as a series of breathing chambers -- viewport-height sections where a single element (a type signature, a glyph, a stone-like shape) occupies the center while vast margins create gravitational tension. **Spatial Architecture:** - **The Garden Gate (Entry):** A full-viewport opening screen containing only the domain name "haskell.quest" rendered in condensed type at modest scale (1.8rem), vertically and horizontally centered. Below it, a single lambda character (λ) serves as the only visual anchor. The background is a flat field of #121212. No navigation, no scroll indicator, no decoration. The emptiness is the design. After 2.5 seconds of stillness, the lambda begins a slow fade-reveal pulse -- opacity cycling between 0.3 and 1.0 over 4 seconds -- the first sign that the page is alive. - **The First Stone (Section 1):** Scrolling reveals a single centered block of text -- no more than 40 characters wide -- floating in the viewport center. The text describes a Haskell concept in the cadence of a haiku: compressed, evocative, incomplete. The block fades in from opacity 0 over 1200ms as it enters the viewport center. Surrounding it: nothing. The content-to-void ratio is approximately 1:15. - **The Raked Sand (Section 2):** A full-width section where thin horizontal lines (1px, #2a2a2a on #121212) create a subtle rake-pattern effect across the viewport, evocative of the groomed gravel in a zen garden. Within this field, a centered monospace code block appears -- a pure Haskell function definition -- each line fading in sequentially with 200ms stagger. The lines themselves are the raked sand; the code is the stone placed within. - **The Bridge (Section 3):** A narrow vertical corridor (max-width: 280px, centered) where prose and code alternate in a call-and-response rhythm. Each pair (prose paragraph + code snippet) is separated by 100vh of empty space, forcing the visitor to travel through void to reach the next thought. This is the "quest" -- the journey between ideas is as important as the ideas themselves. - **The Reflection Pool (Final):** The closing section mirrors the opening: the domain name reappears, but now rendered at 0.6rem with letter-spacing of 0.5em, spread thin like a reflection in still water. Below it, a single period (.) marks the end. The page fades to pure black over the final 200px of scroll. **Grid System:** No traditional grid. Content is centered using flexbox with `align-items: center; justify-content: center` on viewport-height containers. Maximum content width varies by section: 600px for prose, 720px for code blocks, 280px for the bridge corridor. The inconsistency is intentional -- like stones of different sizes in a garden, each section has its own natural width. ## Typography and Palette **Typography:** - **Display / Domain Name:** "Barlow Condensed" (Google Fonts) -- weight 300 (light), used exclusively for the domain name and section titles. The condensed letterforms carry vertical energy, like bamboo stalks or the narrow proportions of Japanese calligraphy columns. Set at 1.8rem for the opening, scaling down to 0.6rem in the reflection pool. Letter-spacing: 0.15em to give each character room to breathe within the condensed frame. Text-transform: lowercase always -- zen rejects the assertiveness of capitals. - **Body / Prose:** "IBM Plex Sans" (Google Fonts) -- weight 300 (light), with weight 400 for emphasis instead of bold. A humanist sans-serif with enough warmth to prevent the monochrome palette from feeling clinical, but enough precision to honor the mathematical subject matter. Set at 0.95rem, line-height: 1.85, max-width: 38ch. The generous line-height creates vertical breathing room within each text block, echoing the macro-level spacing between sections. - **Code / Monospace:** "JetBrains Mono" (Google Fonts) -- weight 300, used for all Haskell code snippets and type signatures. Font-feature-settings include ligatures enabled for the characteristic Haskell operators (>>=, ->, =>). Set at 0.85rem with line-height: 1.7. Code is never syntax-highlighted with multiple colors; instead, it uses only two values from the monochrome palette -- #e0e0e0 for the code itself and #666666 for comments -- maintaining the ink-wash quality of sumi-e painting. **Palette:** The palette is strictly monochrome, drawing from the ink-wash gradients of sumi-e (Japanese ink painting). No hue, no saturation. Every color is a shade of gray between absolute black and near-white. | Role | Hex | Description | |------|-----|-------------| | Void (Background) | #121212 | The deepest black that isn't pure black -- allows elements to disappear into it while retaining a sense of material depth, like wet ink on handmade paper | | Stone (Primary Text) | #e0e0e0 | Warm-neutral white that avoids the harshness of #ffffff, reading like aged rice paper | | Gravel (Secondary) | #888888 | Mid-gray for secondary prose, annotations, and the raked-line patterns | | Shadow (Tertiary) | #3d3d3d | Dark gray for subtle structural elements -- the lines in the raked sand, borders on code blocks | | Fog (Accent) | #666666 | Used for code comments, the fading lambda, and transitional states | | Ink (Hover/Focus) | #c0c0c0 | Slightly brighter than Stone, used only for interactive hover states -- a gentle brightening, like ink catching light | | Paper (Rare Highlight) | #f5f5f0 | The single warm-tinged value in the palette -- a barely perceptible cream used only once, for the final period (.) glyph, suggesting the faintest echo of organic warmth in the mathematical void | ## Imagery and Motifs **Minimal Imagery as Negative Space:** The site contains no photographs, no illustrations, no icons, no SVGs beyond typography. The "imagery" is the emptiness itself -- the vast monochrome fields that surround each text element. This is minimal imagery taken to its philosophical extreme: the most powerful image on the page is the absence of image. **Nature Motifs Through Abstraction:** Nature appears not through depiction but through structural metaphor: 1. **The Rake Pattern:** Thin horizontal lines (#2a2a2a, 1px height, spaced 12px apart) spanning the full viewport width in Section 2, created purely with CSS `repeating-linear-gradient`. These evoke the groomed gravel patterns (samon) of karesansui gardens without literally depicting them. The lines have a subtle animation: on scroll, they shift horizontally by 2px per 100px scrolled, creating a barely perceptible ripple effect like wind across sand. 2. **The Stone Forms:** Each centered text block casts a subtle "shadow" -- not a CSS box-shadow, but a blurred duplicate of the text itself rendered in #1a1a1a, positioned 3px below and 1px right, using `text-shadow`. This gives text elements the dimensional quality of stones resting on a surface, grounding them in the void. 3. **The Lambda as Leaf:** The lambda (λ) character in the opening section serves as the site's singular decorative motif -- a leaf-like organic form that happens to be the foundational symbol of lambda calculus. Its slow fade-reveal breathing animation (opacity oscillation over 4 seconds) mimics the rhythm of wind moving through foliage. The lambda is rendered in Barlow Condensed at 4rem, weight 100 (thin), creating a form so delicate it seems to tremble. 4. **Water Through Typography:** In the reflection pool closing section, the domain name is rendered with `letter-spacing: 0.5em` and `opacity: 0.4`, then a CSS `filter: blur(0.5px)` is applied. This creates the impression of text reflected in still water -- slightly diffused, stretched, quieter than its source. 5. **Seasonal Decay (Wabi-sabi Detail):** A single CSS `background-image` using a noise texture (`url(data:image/svg+xml,...)` with SVG turbulence) at 2% opacity covers the entire page. This imperceptible grain -- like the texture of handmade washi paper or the patina on aged wood -- prevents the monochrome surfaces from feeling digitally sterile. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must open as an absolute void -- a full-viewport black (#121212) screen with nothing visible for the first 800ms. Then, the domain name "haskell.quest" fades in at the precise center (opacity 0 to 1 over 1500ms, using CSS `@keyframes` with `ease-in-out`). After another 700ms pause, the lambda appears below it with the same fade timing. This staged entrance establishes the temporal rhythm of the entire experience: things appear slowly, deliberately, as if the page itself is thinking. **Scroll Behavior:** - CSS `scroll-behavior: smooth` is enabled globally - Each section is `min-height: 100vh` with content centered via flexbox - The fade-reveal pattern is the primary animation trigger: elements begin at `opacity: 0; transform: translateY(8px)` and transition to `opacity: 1; transform: translateY(0)` when they enter the viewport center (not the top) - Use Intersection Observer with `threshold: 0.5` and `rootMargin: "-20% 0px"` so elements only reveal when they reach the middle third of the viewport -- this prevents premature reveals and maintains the sense of content emerging from stillness - NO parallax effects -- parallax creates a sense of layered depth that contradicts the flat, ink-on-paper quality of the zen aesthetic - NO scroll-triggered animations beyond fade-reveal -- the site has one animation language and uses it consistently **The Stagger in the Raked Sand:** In Section 2, the code block lines appear sequentially: each line begins its fade-reveal 200ms after the previous line starts. Implement with Intersection Observer on the parent container, then apply `transition-delay` incrementally to child elements: `nth-child(1)` gets 0ms, `nth-child(2)` gets 200ms, `nth-child(3)` gets 400ms, etc. The stagger should feel like watching ink flow down a page -- inevitable, gravitational. **The Bridge Corridor Pacing:** In Section 3, the extreme spacing (100vh between content pairs) creates a meditative walking pace. The emptiness IS the content here. Implementation: each prose-code pair is wrapped in a flex container with `min-height: 100vh`. Between them, empty `
` spacers with `height: 50vh` create additional breathing room. The total scroll distance of Section 3 should be at least 500vh for 3-4 content pairs, making it the longest section by far. **Color Discipline:** Under no circumstances should any color with saturation > 0 appear on the page. No blue links, no green highlights, no colored borders. The `::selection` pseudo-element should use `background: #3d3d3d; color: #e0e0e0`. Focus outlines should use `outline: 1px solid #666666`. The monochrome constraint is inviolable -- it is the fundamental design principle, not a suggestion. **Performance and Feel:** All animations use `opacity` and `transform` only (GPU-composited properties). No `top/left` animations, no `width/height` transitions. The site should feel weightless -- elements drift into view like smoke rather than sliding or bouncing. Easing for all transitions: `cubic-bezier(0.25, 0.1, 0.25, 1.0)` -- a gentle ease-out that decelerates gracefully, like a stone settling into sand. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids - Navigation bars, hamburger menus, footer link collections - Any element that suggests commercial intent or conversion optimization - Parallax scrolling (contradicts the flat zen aesthetic) - Scroll-triggered animations beyond the single fade-reveal pattern - Multiple animation types -- this site speaks one visual language ## Uniqueness Notes **Differentiators from other designs:** 1. **Monochrome as Absolute Commitment:** While monochrome appears at only 9% frequency in the existing portfolio, most implementations still smuggle in accent colors or colored syntax highlighting. haskell.quest enforces zero-saturation across every pixel -- including code blocks, selection highlights, and focus states. The palette contains seven carefully graduated grays, each with a defined semantic role, proving that richness and monotone are not opposites. This level of chromatic discipline is unprecedented in the portfolio. 2. **Content-to-Void Ratio as Design Language:** No other design in the portfolio uses emptiness as aggressively as the 1:15 content-to-void ratio in the First Stone section or the 100vh spacers in the Bridge corridor. Where other centered layouts (99% frequency) fill their center columns with content, haskell.quest empties them. The centered layout seed is subverted by making the center an island in an ocean -- technically centered, experientially vast. 3. **Single Animation Pattern (Fade-Reveal Only):** The portfolio overwhelmingly relies on scroll-triggered (96%) and parallax (81%) as primary animation patterns. haskell.quest uses only fade-reveal (9% frequency) as its sole animation language. No parallax, no stagger beyond the code-line sequence, no morph, no spring physics. This radical reduction creates a unified temporal rhythm that no multi-pattern design can achieve -- every element enters the world the same way, like breathing. 4. **Code as Landscape (Domain-Specific Metaphor):** The Haskell programming language's emphasis on purity, immutability, and mathematical elegance maps naturally onto zen principles of stillness and essence. No other design in the portfolio treats programming syntax as a meditative visual element rather than a functional display. Type signatures become calligraphy; function definitions become haiku. The domain name itself -- "haskell.quest" -- frames the experience as a journey, and the Bridge corridor section literalizes this by requiring extensive scrolling through emptiness to reach each new insight. 5. **Wabi-sabi Texture Layer:** The imperceptible SVG noise grain at 2% opacity across the entire page introduces an organic imperfection that counters the mathematical precision of the content. At only 4% frequency, wabi-sabi aesthetics are rare in the portfolio. This subtle texture is the design equivalent of handmade paper -- invisible at a glance, but felt subconsciously, preventing the monochrome void from reading as a loading error or an unfinished page. **Chosen Seed:** aesthetic: zen, layout: centered, typography: condensed, palette: monochrome, patterns: fade-reveal, imagery: minimal, motifs: nature, tone: minimal **Avoided Overused Patterns:** - playful aesthetic (97%) -- replaced with zen (7%) - scroll-triggered as primary pattern (96%) -- replaced with fade-reveal (9%) - parallax (81%) -- explicitly prohibited in implementation notes - warm palette (100%) -- replaced with monochrome (9%) - gradient palette (90%) -- no gradients in palette - friendly tone (97%) -- replaced with zen-contemplative (3%) - stagger pattern (56%) -- used only once, minimally, for code lines