# Design Language for haskeller.net ## Aesthetics and Tone haskeller.net evokes the atmosphere of a well-loved academic library that has been overtaken by spring: dark mahogany shelves and aged leather bindings coexist with bursts of botanical illustration, retro-futuristic neon accents, and cheerful rounded letterforms that refuse to take themselves too seriously. The tone is that of a knowledgeable friend who enjoys functional programming the way others enjoy jazz — with deep affection, playful riffs, and an earnest invitation to listen. The mood draws from 1960s–1970s science-fiction book covers (the kind with planets and sine waves in amber and teal) overlaid on the quiet gravitas of a dark-academia study. Warm amber candlelight competes with the cool glow of cathode-ray phosphor green. Everything feels hand-curated, slightly imperfect, deeply intentional. Lambda calculus is treated like a love language. The retro-futuristic palette is anchored in deep ink-black, punctuated by electric chartreuse and phosphor teal — the colour of old terminals blinking awake in a candlelit room. Spring enters through botanical line art (pressed-flower SVGs, branching fern fractals) that weave through data-viz elements: lambda trees rendered as botanical specimens, type hierarchies as cabinet-of-curiosities diagrams. The overall effect: warmly nerdy, visually lush, never intimidating, always delightful. ## Layout Motifs and Structure The page is built around a deliberate asymmetric tension: a wide left column serves as the "book spine" — tall, narrow, typographically dense — while the right two-thirds breathes with botanical illustrations, interactive data-viz, and generous dark-parchment space. **Entry: Full-bleed dark parchment banner** — a single centred lambda symbol rendered as an illuminated-manuscript initial, surrounded by spring vine illustrations. No hero text clutter, just the symbol and the domain name in a friendly rounded serif. On page load the vines animate outward from the lambda using spring physics (CSS cubic-bezier easing), as if growing in real time. **Left column (~28% width, sticky):** Navigation styled as a hand-numbered table of contents from an old textbook. Each nav item has a small ink numeral and a dot leader drawn with CSS `content` counters. The column is `position: sticky; height: 100vh` at desktop. **Right column (~72% width, scrolling):** All main content. Sections separated by botanical SVG dividers — thin fern-frond lines that "draw" via strokeDashoffset animation on scroll-into-view (Intersection Observer). Content cards have a subtle paper-texture appearance using layered CSS box-shadows. **Data-viz islands:** Full-width interlude sections where lambda expression trees appear as Victorian botanical cabinet diagrams. Each AST node is a flower-head or leaf junction; edges are illustrated as inked stems. These diagrams are interactive SVG — hover a node to highlight its sub-expression with a spring-scale animation. **Spring scatter background:** A `position: fixed; z-index: 0; pointer-events: none` layer of small botanical glyphs (fern fronds, seeds) at 4% opacity, drifting at 0.3× scroll speed via a `scroll` event handler. **Footer:** A dark band with a horizontal scroll strip styled after an 1890s scientific illustration periodical — each Haskell milestone (GHC 1.0, Haskell 98, GHC 7.0, Haskell 2010) framed inside an engraving-style oval with cross-hatched SVG fill. CSS `scroll-snap-type: x mandatory` governs horizontal navigation. At tablet breakpoint (<1024px): the left column lifts to a horizontal scrollable nav strip. At mobile (<640px): single column, nav collapses behind a hamburger trigger. ## Typography and Palette **Display / Hero font: "Nunito"** (Google Fonts) — Extra Bold weight. The round terminals give warm approachability that counters the dark-academia backdrop. Used for the oversized lambda initial, section headings, and all numerals in the timeline. **Body / Long-form font: "Lora"** (Google Fonts) — a transitional serif that reads like a well-printed textbook. Slightly increased line-height (1.8) for a studied-at-leisure quality. **Code / Monospace font: "JetBrains Mono"** (Google Fonts) — ligature-enabled, used for all Haskell snippets. Styled with a soft CRT-green glow (`text-shadow`) on dark backgrounds. **Accent / Label font: "Pacifico"** (Google Fonts) — used very sparingly for decorative specimen labels only (one or two words maximum). Bridges playful-rounded and vintage motifs. Color palette — Ink Night `#12100e` (deep background), Dark Parchment `#1e1a14` (section background), Aged Paper `#2a2318` (card background), Warm Ivory `#f0e8d0` (primary text), Faded Sepia `#a89070` (secondary text and nav), Phosphor Teal `#00e5c8` (accent 1 — electric neon), Chartreuse Bloom `#b5e345` (accent 2 — spring neon), Amber Terminal `#f5a623` (accent 3 — retro warm, active nav, labels), Sage Ink `#6a8c69` (botanical line art), CRT Green `#39ff14` (code block text glow). The retro-futuristic atmosphere comes from placing Phosphor Teal and Chartreuse Bloom as neon highlights against the very dark backgrounds — like signals illuminated in a lightless library. Amber Terminal bridges the warm-academic and cool-futuristic registers without either winning outright. ## Imagery and Motifs **Botanical lambda trees** are the signature visual device. Haskell AST nodes are rendered as Victorian botanical specimen diagrams: each node is a flower head or leaf junction; edges are curved ink-sketch paths with `stroke-dasharray` crosshatch shading. These appear as static SVG section openers and as interactive explorers where hovering a node highlights its sub-expression (spring-scale transform with `cubic-bezier(0.34, 1.56, 0.64, 1)`) and draws connecting edges via `strokeDashoffset` animation. **Cabinet of curiosities cards** style each content panel as a Victorian natural-history collection label: thin double-rule border, a small hand-drawn specimen number in Pacifico at the top-left corner (`#f5a623`), a full-width top rule and bottom rule in Faded Sepia (`#a89070`). Background is Aged Paper (`#2a2318`) with an inset box-shadow for depth. **Vintage Haskell timeline** in the footer: each milestone sits inside an SVG oval with cross-hatched background fill (a repeating SVG pattern of 1px diagonal lines at 45°). The oval frames are drawn in Faded Sepia; the year text uses Nunito Bold in Amber Terminal; the event name uses Lora italic in Warm Ivory. The strip scrolls horizontally with CSS scroll-snap. **Phosphor code blocks** present all Haskell snippets in JetBrains Mono at `#39ff14` on `#12100e`, with a `position: absolute; inset: 0` CRT scanline overlay using `repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px)` and `text-shadow: 0 0 8px rgba(57, 255, 20, 0.6)`. **Spring botanical SVG dividers** — pressed-flower and fern-frond motifs at Sage Ink `#6a8c69` / 40% opacity serve as section breaks. On scroll-into-view (Intersection Observer), the SVG paths animate from zero to full `stroke-dasharray` length over 1.2 seconds with `ease-out`, creating an ink-drawing effect. **The illuminated lambda initial** — a 20vw Nunito Extra Bold λ in Phosphor Teal `#00e5c8` is the hero centrepiece. Surrounding it is an SVG botanical vine that grows outward on page load using spring-easing CSS animation (`cubic-bezier(0.34, 1.56, 0.64, 1)`). A subtle scanline overlay covers the entire hero section. On scroll, the lambda fades and the vines drift upward via `translateY` parallax. ## Prompts for Implementation Build the page as a single long-scroll narrative journey through functional programming. No tabs, no separate pages — one continuous parchment scroll. JavaScript is limited to three purposeful interactions: the botanical lambda tree explorer, CRT glow pulse on code blocks, and spring-physics vine animation on the hero lambda. No frameworks required; vanilla JS and inline SVG suffice. **Hero section:** Full-bleed `#12100e` background. Centred layout. The λ sits at roughly `font-size: 20vw` in Nunito Extra Bold, coloured Phosphor Teal `#00e5c8`. An SVG botanical vine surrounds it and grows on `DOMContentLoaded` via CSS animation (`@keyframes vine-grow` driving `stroke-dashoffset` from path length to 0). Domain name "haskeller.net" below in Lora italic, Warm Ivory `#f0e8d0`, `font-size: 2rem`. Full-hero CRT scanline overlay using a `::before` pseudo-element with `repeating-linear-gradient`. On scroll: lambda opacity fades to 0 and vines `translateY` upward by `scrollY * 0.4`. **Asymmetric grid:** `display: grid; grid-template-columns: 28% 1fr` at desktop (>1024px). Left column: `position: sticky; top: 2rem; height: calc(100vh - 4rem); overflow: hidden`. Nav items use CSS counters for ink numerals, Lora italic, Faded Sepia `#a89070` default colour, Amber Terminal `#f5a623` when active (controlled via `IntersectionObserver` on section headings). Dot leaders via `::after { content: ''; flex: 1; border-bottom: 1px dotted #a89070; }` in a flex row. At tablet: left column becomes a `position: sticky; top: 0; overflow-x: auto` horizontal strip. At mobile: hamburger toggle. **Cabinet cards:** `background: #2a2318; border: 1px solid rgba(165, 140, 100, 0.3); box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 2px 12px rgba(0,0,0,0.6); padding: 2rem 2.5rem; position: relative`. Specimen number via `::before` pseudo-element: `font-family: 'Pacifico'; color: #f5a623; font-size: 0.75rem; position: absolute; top: 0.5rem; left: 0.75rem`. Top and bottom rules via `border-top: 1px solid #a89070; border-bottom: 1px solid #a89070; padding: 1.5rem 0`. **Botanical data-viz lambda tree:** Inline SVG, JavaScript-driven. Nodes: `` with Sage Ink `#6a8c69` stroke, Aged Paper `#2a2318` fill, Warm Ivory label in JetBrains Mono 0.8rem. Edges: `` cubic bezier with `stroke-dasharray: 4 3` for ink-sketch texture. On node `mouseenter`: `transform: scale(1.08)` with `transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1)`. Connected edge: `strokeDashoffset` animated from path length to 0. A Pacifico specimen-label tooltip appears in Amber Terminal `#f5a623` background. **Phosphor code blocks:** `background: #12100e; color: #39ff14; font-family: 'JetBrains Mono'; text-shadow: 0 0 8px rgba(57,255,20,0.6); position: relative; overflow: hidden`. CRT scanline overlay via `::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px); pointer-events: none }`. **Botanical dividers:** Between each major section, a full-width SVG fern or pressed-flower motif at `stroke: #6a8c69; opacity: 0.4`. Each SVG path has `stroke-dasharray` set to its computed length via JavaScript on load; `stroke-dashoffset` begins equal to length. An `IntersectionObserver` at `threshold: 0.3` adds a class that transitions `stroke-dashoffset` to 0 over `1.2s ease-out`, drawing the botanical line as the section enters the viewport. **Spring scatter parallax:** A `
` with `position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.04` containing a dozen small botanical SVG glyphs at CSS-custom-property-defined positions. `window.addEventListener('scroll', () => { el.style.transform = 'translateY(' + scrollY * 0.3 + 'px)' })`. **Vintage timeline footer:** `background: #0e0c09; border-top: 2px solid #a89070; overflow-x: auto; display: flex; gap: 2rem; padding: 3rem; scroll-snap-type: x mandatory`. Each timeline item: `scroll-snap-align: start; flex-shrink: 0`. Oval frame: SVG `` with a `` fill of diagonal crosshatch lines, Faded Sepia stroke. Year: Nunito Bold, Amber Terminal `#f5a623`. Event: Lora italic, Warm Ivory. AVOID: call-to-action buttons ("Sign Up", "Get Started"), pricing tables, testimonial carousels, stat counters, modal popups, cookie banners. The page is one immersive scroll through the world of functional Haskell — like reading a beautifully illustrated academic monograph, not visiting a SaaS landing page. ## Uniqueness Notes - **Botanical lambda trees as primary identity:** Haskell's abstract syntax trees visualized as Victorian botanical cabinet specimens is a first in this portfolio. No other design merges data-viz with vintage botanical illustration at the level of a primary identity element. The pressed-flower aesthetic transforms abstract type trees into something frame-worthy. - **Dark-academia meets retro-futuristic tension:** Most dark-academia sites commit fully to sepia warmth; most retro-futuristic sites go all-in on neon. This design holds both in productive tension — phosphor neon glows feel like secrets illuminated inside a library at night. The amber-teal-chartreuse palette (`#f5a623`, `#00e5c8`, `#b5e345`) is novel for a Haskell developer community site. - **Textbook asymmetric layout with spring-physics animations:** The sticky left table-of-contents (styled as a hand-numbered academic index) combined with a scrolling right content column is drawn directly from printed academic monographs — a layout almost absent from the developer-site genre. Spring-physics vine animations on the hero lambda bridge the scholarly and the playful in an unexpected way. - **CRT phosphor code blocks with scanline overlay:** Rather than the ubiquitous neutral dark-mode code block, the terminal-green scanline treatment (`#39ff14`, `repeating-linear-gradient` scanlines) anchors functional programming in its actual historical context — the early terminal culture where Haskell and its predecessors Miranda and ML first lived. - **Spring seasonality as structural logic, not decoration:** Botanical spring motifs are not wallpaper here — they are the structural language of section transitions (SVG drawing animations), diagram edges (inked botanical stems), and the hero animation (growing vines). The site literally grows on first load and breathes through scroll. This makes the spring/patterns seed integral to UX rather than superficial theming. Chosen seed and style: aesthetic: dark-academia, layout: asymmetric, typography: playful-rounded, palette: retro-futuristic, patterns: spring, imagery: data-viz, motifs: vintage, tone: friendly. Avoided patterns from frequency analysis: avoided serif-revival (4% — overused) — Lora used only as body font, not display hero; avoided bebas-bold (3% — overused) — chose Nunito Extra Bold for rounded warmth instead of condensed impact; avoided futura-geometric (3% — overused) — no geometric sans anywhere in the design. Leaned into kinetic-animated (1% — underused) — spring-physics vine growth and interactive AST tree are prominent kinetic elements. Leaned into display-bold (2% — underused) — the oversized 20vw lambda hero uses a full display-scale bold treatment.