# Design Language for haskell.monster ## Aesthetics and Tone haskell.monster exists in the visual reality of a decommissioned orbital research station where functional programming is not software but architecture -- where lambda calculus is etched into hull plating with plasma torches, where type signatures glow in phosphorescent green along corridor walls, and where monadic composition is visualized as chains of light threading through zero-gravity corridors. The aesthetic is **cyberpunk type theory**: the neon-drenched, rain-streaked visual language of dystopian megacities filtered through the austere, mathematical beauty of Haskell's type system. Every surface tells you that in this world, purity and side effects are not abstractions but physical forces -- pure functions radiate clean white-cyan light, while IO monads pulse with volatile magenta energy behind containment barriers. The tone is raw-authentic -- no corporate polish, no marketing sheen. This is a site that feels like it was built by someone who programs in Haskell at 3AM while synth music bleeds from cheap speakers and rain hammers against a window overlooking a city that never sleeps. There is no attempt to be approachable or friendly. The site respects the visitor enough to be direct, strange, and unapologetically technical. It does not explain itself. It does not welcome you. It simply exists, like a well-typed program -- correct by construction. The visual inspiration draws from: the monitor-glow aesthetic of early cyberpunk cinema (Blade Runner's Tyrell Corporation interfaces, Ghost in the Shell's data streams), the brutalist clarity of academic papers on category theory, the raw energy of underground electronic music visualizers, and the cold precision of aerospace HUD displays overlaying chaotic urban landscapes. ## Layout Motifs and Structure The layout follows a **HUD-overlay architecture** -- a system of transparent, edge-anchored panels and floating data readouts layered over a deep, atmospheric background, as if the entire site is a heads-up display projected onto the inside of a pilot's visor while they navigate through an abstract representation of Haskell's type universe. **The HUD System:** The viewport is treated as a cockpit canopy. The background is a slow-moving, deep-space gradient field (#0a0a0f to #0d0b1a) with extremely subtle animated noise grain (CSS background with SVG noise filter, opacity 0.04) that gives the emptiness a lived-in, CRT-phosphor texture. Overlaid on this void are the HUD elements: - **Edge Rails:** Thin (#1px) lines of dim cyan (#00e5ff at 15% opacity) running along the viewport edges at 24px inset, creating a constant rectangular frame. These rails have small tick marks at regular intervals (every 120px), like measurement graduations on a targeting scope. The corner junctions feature small decorative brackets -- L-shaped line segments with 8px arms. - **Status Bar (Top):** A 40px-tall strip anchored to the top of the viewport, containing the domain name "haskell.monster" at left (in monospaced type, letter-spaced at 0.3em, all-caps, #00e5ff at 60% opacity) and a pseudo-system readout at right displaying a slowly incrementing "LAMBDA_CYCLES" counter animated with CSS `counter-animate`. The status bar has a bottom border of 1px solid rgba(0, 229, 255, 0.12). - **Content Panels:** The main content is organized into floating rectangular panels -- not full-width sections, but distinct, bordered containers with `border: 1px solid rgba(0, 229, 255, 0.15)`, `background: rgba(10, 10, 20, 0.85)`, and `backdrop-filter: blur(4px)`. These panels are positioned asymmetrically within the HUD frame, with generous negative space between them. Panel corners feature small triangular clip-paths or angled corner decorations (using CSS `clip-path` or pseudo-elements) that evoke technical schematics. - **Floating Annotations:** Small text labels positioned outside the main content panels, connected by thin dotted lines (1px dashed, #00e5ff at 20% opacity), providing meta-commentary on the content -- like "// type-safe since 1990" or "-- IO action contained" -- rendered in 10px monospace at very low opacity (30-40%). These float at oblique angles and positions, creating an annotated-blueprint feeling. - **Depth Layering:** Three distinct z-layers: (1) the atmospheric background, (2) the grid-line skeleton and annotations at z-10, (3) the content panels at z-20. Parallax is deliberately NOT used. Instead, the panels have a subtle `hover-lift` effect -- on mouse proximity (tracked via lightweight JS calculating distance from cursor to panel center), panels translate upward 4-6px on the Y axis and increase their border opacity from 15% to 40%, accompanied by a faint box-shadow: `0 8px 32px rgba(0, 229, 255, 0.08)`. This creates depth through interaction rather than scroll-driven motion. **Grid Specifics:** The underlying grid is a 12-column system at 1440px max-width, but content panels deliberately span irregular column counts (3-col, 5-col, 7-col) and are offset from each other vertically, creating the asymmetric, instrument-cluster feel of an actual HUD rather than a neat web layout. Mobile breakpoints collapse to stacked full-width panels but retain the edge-rail framing and corner decorations. ## Typography and Palette **Typography:** - **Display / Headlines:** "Orbitron" (Google Fonts) -- a geometric, futuristic sans-serif designed explicitly for science-fiction and technology contexts. Its sharp, squared letterforms with precise geometry evoke spacecraft instrumentation and digital readouts. Used at 2rem-5rem for section titles and major headings. Set with `font-weight: 700`, `letter-spacing: 0.08em`, `text-transform: uppercase`, `line-height: 1.15`. Color: Electric Cyan (#00e5ff). Headlines receive a subtle `text-shadow: 0 0 20px rgba(0, 229, 255, 0.3), 0 0 60px rgba(0, 229, 255, 0.1)` that creates a neon-glow bloom effect, as if the text is a light source burning through a fogged cockpit visor. - **Body / Expressive Variable:** "Recursive" (Google Fonts) -- a variable font with axes for monospace-to-sans-serif interpolation (MONO), casual-to-formal (CASL), weight (wght), slant (slnt), and cursive (CRSV). This is the expressive heart of the typography system. Body text is set at `font-variation-settings: 'MONO' 0.5, 'CASL' 0, 'wght' 380, 'slnt' 0;` producing a hybrid between mono and proportional that feels like reading annotated source code in a sophisticated editor. Size: 1rem (16px), `line-height: 1.7`, color: #b8c4d4 (Phosphor Silver). On hover over text blocks, the CASL axis animates from 0 to 0.4 over 400ms (`transition: font-variation-settings 0.4s ease`), giving the text a subtle shift toward handwritten warmth -- as if the machine is briefly showing its human author. - **Code / Annotations:** "JetBrains Mono" (Google Fonts) -- a developer-focused monospace font with increased letter height and distinctive programming ligatures. Used for all code snippets, floating annotations, and the HUD status bar. Set at `font-weight: 400`, 0.85rem, `letter-spacing: 0.02em`, color: #00e5ff at 50-70% opacity depending on hierarchy. Line-height: 1.6. - **Accent / Labels:** "Recursive" again, but with `font-variation-settings: 'MONO' 1, 'CASL' 0.8, 'wght' 600;` -- fully monospaced and semi-casual, creating a hand-labeled-instrument feeling for small UI labels, tags, and navigation elements. Size: 0.75rem, `text-transform: uppercase`, `letter-spacing: 0.15em`, color: Volatile Magenta (#ff2d6a) at 80% opacity. **Palette:** The palette is dopamine-neon -- high-energy chromatic accents burning against abyssal darkness, creating maximum contrast without warmth. Every color is either a deep void or a searing luminous accent, with no middle-ground pastels or earth tones. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Void Black | #0a0a0f | Main viewport background, deepest layer | | Background Secondary | Abyss Indigo | #0d0b1a | Panel backgrounds, gradient terminus | | Background Tertiary | Cockpit Charcoal | #141422 | Elevated panel surfaces, card interiors | | Accent Primary | Electric Cyan | #00e5ff | Headlines, border highlights, HUD elements, link hover | | Accent Secondary | Volatile Magenta | #ff2d6a | Critical highlights, tags, error states, active navigation | | Accent Tertiary | Lambda Green | #39ff14 | Success states, code syntax highlights, "pure function" indicators | | Text Primary | Phosphor Silver | #b8c4d4 | Body text, primary readable content | | Text Secondary | Dim Tungsten | #5a6478 | Annotations, secondary labels, metadata | | Glow Overlay | Neon Bleed | #00e5ff at 8-15% opacity | Box-shadows, text-shadows, atmospheric glow effects | | Warning Accent | Impure Orange | #ff8c00 | Side-effect warnings, IO monad indicators | **Gradient Usage:** - Background gradient: `linear-gradient(170deg, #0a0a0f 0%, #0d0b1a 40%, #0f0a1f 100%)` -- a nearly imperceptible shift from pure black through indigo to a faint violet-black, creating subtle depth in the void. - Accent gradient (sparingly): `linear-gradient(90deg, #00e5ff, #ff2d6a)` -- the cyan-to-magenta sweep used ONLY on rare, high-importance elements like a single featured panel border or a loading bar animation. ## Imagery and Motifs **Glitch-Art as Visual Language:** All imagery follows a strict glitch-art vocabulary where visual corruption, data artifacts, and signal degradation are treated as aesthetic features rather than errors -- a direct metaphor for Haskell's relationship with side effects (controlled, contained, but always present as a force that must be reckoned with). **Primary Visual Systems:** 1. **Circuit-Trace Decorations (SVG):** The primary decorative motif is the circuit board trace -- thin (#1px), right-angled line paths rendered as inline SVGs that connect content panels to each other and to the HUD edge rails. These traces are colored Electric Cyan (#00e5ff) at 12-20% opacity and feature small circular nodes (4px diameter, filled) at junction points and termini. The traces do not represent actual circuitry; they are abstract connection diagrams that visually express the "data flow" between content sections, like a visual representation of function composition (`f . g . h`). On hover, individual trace segments brighten to 50% opacity with a 300ms transition, and the terminal nodes pulse (CSS `animation: pulse 2s ease-in-out infinite` with scale 1.0 to 1.3). 2. **Glitch Displacement Effects (CSS):** Key visual elements -- the site title, featured images, section headers -- periodically undergo brief glitch events. These are implemented as CSS animations that apply `clip-path: inset()` with rapidly shifting values, combined with `transform: translate()` micro-offsets (1-3px horizontal) and brief RGB channel splitting (using layered pseudo-elements with the same text in cyan and magenta, offset by 2px in opposite directions, at 60% opacity, composited with `mix-blend-mode: screen`). Glitch events are NOT constant -- they trigger on a slow interval (every 8-12 seconds, randomized via CSS animation-delay variations) and last only 150-300ms, creating moments of controlled chaos that punctuate the calm of the HUD. 3. **Scan-Line Overlay (CSS):** A full-viewport pseudo-element overlay (`::after` on `body`) renders extremely subtle horizontal scan lines -- `background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 229, 255, 0.015) 2px, rgba(0, 229, 255, 0.015) 4px)`. This 4px-period pattern, barely visible at 1.5% opacity, gives the entire site the subliminal feeling of being displayed on a CRT or holographic projection surface rather than a modern LCD. 4. **Type Signature Watermarks:** Behind major content sections, large Haskell type signatures are rendered as decorative watermarks -- e.g., `(>>=) :: Monad m => m a -> (a -> m b) -> m b` -- using JetBrains Mono at 6-8rem, color #0d0b1a (barely darker than the background), rotated -3deg, positioned with `overflow: hidden` on the container. These are invisible until the panel is hovered, at which point they fade to 8% opacity over 600ms, revealing the underlying "source code" of the section. 5. **Noise Grain Texture (CSS):** A subtle SVG-based noise filter (``) applied as a full-page overlay at 3-4% opacity, creating the organic, film-grain texture that prevents the digital palette from feeling sterile. The noise is static (not animated) to avoid performance issues. **Decorative Elements:** - **Corner Brackets:** Every content panel features corner decorations -- small L-shaped line segments (12px x 12px, 1px stroke, Electric Cyan at 25% opacity) positioned at each corner using absolute-positioned pseudo-elements. These evoke targeting reticles and technical drawing conventions. - **Data Ticker:** A slow-scrolling horizontal ticker at the bottom of the viewport (above the bottom edge rail) displaying pseudo-Haskell expressions that evaluate and reduce in real-time using CSS animation: `map (+1) [1,2,3]` slowly transforms character-by-character into `[2,3,4]`, then the next expression begins. Rendered in JetBrains Mono at 0.7rem, Dim Tungsten color, 40% opacity. - **Cursor Proximity Glow:** The user's cursor position generates a radial gradient overlay (tracked via JS, applied as a CSS custom property `--cursor-x` and `--cursor-y`): `radial-gradient(600px circle at var(--cursor-x) var(--cursor-y), rgba(0, 229, 255, 0.04), transparent 70%)`. This creates a subtle "flashlight" effect, as if the user is scanning the HUD with a handheld light source. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens with a full-viewport Void Black (#0a0a0f) screen. No content is visible. After a 400ms pause, the edge rails draw themselves in from the corners -- each L-shaped corner bracket appears first (CSS animation: opacity 0 to 1 over 200ms), then the connecting rail lines extend from each corner toward the midpoints of each edge (CSS `scaleX` / `scaleY` from 0 to 1, `transform-origin` at the respective corner, 800ms duration, `cubic-bezier(0.16, 1, 0.3, 1)` easing). The effect is a targeting reticle locking onto the viewport. Once the rails complete (total: ~1200ms from load), the scan-line overlay fades in (opacity 0 to target over 300ms). Then the domain name "haskell.monster" assembles in the center of the viewport: each character appears individually with a 40ms stagger delay, each one entering with a micro-glitch (2px horizontal offset + cyan/magenta split for 100ms, then settling to final position). The font is Orbitron at 4rem with full neon text-shadow bloom. Beneath it, a type signature fades in: `:: Monster -> IO ()` in JetBrains Mono at 1rem, Dim Tungsten, 50% opacity. After a 2-second hold, the title translates upward to its final position in the top status bar (shrinking from 4rem to the status-bar size), and the content panels begin their entrance. Each panel slides in from off-screen with hover-lift motion -- rising from 20px below their final position while fading from 0 to 1 opacity, with a stagger of 150ms between panels. No bounce, no spring. The motion is mechanical and precise, like instruments powering on in sequence. **Content Panel Behavior:** Each content panel is a self-contained HUD instrument. On hover, the panel executes the hover-lift interaction: `transform: translateY(-5px)`, border-color transitions from 15% to 40% cyan opacity, box-shadow activates (`0 8px 32px rgba(0, 229, 255, 0.08)`), and the internal type-signature watermark fades in. The transition duration is 350ms with `cubic-bezier(0.25, 0.46, 0.45, 0.94)` easing. On hover-out, the descent is slower (500ms) to create an asymmetric, settling feel. **Glitch Events:** Implement a global CSS animation class `.glitch-active` that can be toggled on key elements. The glitch sequence: (1) `clip-path: inset(20% 0 50% 0)` for 50ms, (2) `transform: translateX(3px)` + cyan pseudo-element offset for 50ms, (3) `clip-path: inset(60% 0 10% 0)` for 50ms, (4) return to normal for 50ms, (5) one final `translateX(-2px)` for 50ms, (6) settle to rest. Total: 250ms. Trigger via CSS `animation-delay` staggering or a minimal JS `setInterval` with random timing (8000-15000ms). **Scroll Behavior:** The site does NOT use parallax or heavy scroll-triggered animations. Instead, content panels that are below the fold enter the viewport with a single, clean fade-and-rise (IntersectionObserver, threshold 0.15): `opacity: 0 -> 1`, `translateY(16px) -> 0`, duration 500ms, easing `ease-out`. Once entered, they remain static. The circuit-trace SVGs connecting panels draw themselves (stroke-dashoffset animation) as both connected panels become visible. This creates a narrative of "systems coming online" as the user scrolls, without the heavy, attention-demanding scroll-jacking that dominates the existing portfolio. **Interactive Easter Eggs:** - Clicking the "LAMBDA_CYCLES" counter in the status bar triggers a full-page glitch event (all glitch-active elements fire simultaneously) lasting 500ms. - Hovering over the type-signature watermarks causes them to "evaluate" -- e.g., `fmap (+1) (Just 3)` slowly character-shifts to `Just 4` using a CSS/JS text-swap animation. - The data ticker at the bottom can be "paused" by hovering, and the current expression highlights in Electric Cyan. **AVOID in Implementation:** - CTA buttons, pricing blocks, stat-grids, testimonial carousels - Warm color temperatures, rounded-friendly UI elements, playful animations - Stock photography, hero images, full-bleed photo sections - Centered single-column blog layouts - Parallax scroll effects - Any "welcome" or "get started" language **BIAS TOWARD:** - Full-screen narrative immersion from first pixel - Technical atmosphere that rewards close reading - Moments of controlled visual disruption (glitch) within otherwise calm precision - The feeling of interfacing with a system, not browsing a website ## Uniqueness Notes **Differentiators from other designs:** 1. **Cyberpunk HUD-Overlay Layout (Both at 3-4% Frequency):** No other design in the portfolio combines the cyberpunk aesthetic with a HUD-overlay layout system. While a few designs use dashboard-style layouts (17%), the HUD-overlay approach -- with edge rails, corner brackets, floating annotations, and circuit-trace connections -- creates a fundamentally different spatial experience. The visitor is not reading a page; they are operating an instrument. This is the only design where the viewport frame itself is a decorative and functional element. 2. **Glitch-Art Imagery Without Glitch Aesthetic Dominance:** While glitch effects appear at 11% in the aesthetic category, glitch-art as a primary imagery language appears at only 3%. This design uses glitch not as a constant visual state but as punctuated disruption -- brief, timed events that break the calm precision of the HUD. The restraint is the differentiator: glitch as controlled side effect, not aesthetic identity. This mirrors Haskell's own philosophy of IO -- impurity exists, but it is contained, typed, and deliberate. 3. **Expressive Variable Typography (Recursive Font) with Axis Animation:** At 3% frequency, expressive-variable typography is nearly absent from the portfolio. This design leverages Recursive's five-axis variable space to create typography that literally transforms between machine and human expression (MONO and CASL axes). No other design animates variable font axes on user interaction to create a thematic narrative (machine precision yielding to human warmth on hover). The typography is not just styled -- it is interactive and meaningful. 4. **Raw-Authentic Tone in a Technical Context:** The raw-authentic tone (4% frequency) combined with cyberpunk creates a voice that is neither the friendly-approachable default (97% frequency) nor the cold-corporate alternative. This site does not try to sell, educate, or welcome. It presents itself as a found artifact -- a HUD interface that exists for its own purposes, which the visitor happens to be observing. This anti-marketing stance is almost entirely unique in the portfolio. 5. **Cursor-Proximity Interaction Model Instead of Scroll-Driven Animation:** While 96% of existing designs rely on scroll-triggered animations and 80% use parallax, this design deliberately rejects both in favor of cursor-proximity interactions (hover-lift, cursor flashlight glow, proximity-based border brightening). The primary interaction axis is spatial (where is the cursor?) rather than temporal (how far has the user scrolled?). This creates a fundamentally different engagement model -- exploratory rather than sequential. **Chosen Seed / Style:** `aesthetic: cyberpunk, layout: hud-overlay, typography: expressive-variable, palette: dopamine-neon, patterns: hover-lift, imagery: glitch-art, motifs: circuit, tone: raw-authentic` **Avoided Overused Patterns:** - Playful aesthetic (97%) -- replaced with cyberpunk severity - Centered layout (99%) -- replaced with asymmetric HUD-overlay - Warm palette (100%) -- replaced with cold dopamine-neon - Scroll-triggered animations (96%) -- replaced with hover-lift and cursor-proximity - Mono typography as primary (99%) -- replaced with expressive-variable (Recursive) as primary, mono (JetBrains Mono) as secondary - Friendly tone (97%) -- replaced with raw-authentic - Minimal imagery (95%) -- replaced with glitch-art - Parallax (80%) -- deliberately excluded - Vintage motifs (80%) -- replaced with circuit traces