# Design Language for haskeller.net ## Aesthetics and Tone haskeller.net is **a saltwater reef tank lit by a single dichroic spotlight, where every fish is a lambda and every lambda is lazy** — a site that takes the Haskell community's two oldest in-jokes (the lambda mascot, and "Haskell is so lazy the fish hasn't been evaluated yet") and renders them as a literal **holographic coral reef**. This is not a documentation portal, not a "learn FP in 30 days" funnel, and not a dark-mode terminal tribute. It is a place where a Haskeller arrives, recognizes the reef instantly, and lingers — because the page *behaves* like the language: nothing is computed until you look at it, structures share their tails, and the whole thing is referentially transparent (scroll back up, the reef is exactly where you left it, in exactly the state you left it). The mood is **bright, buoyant, slightly show-off** — energetic in the way a person is energetic when they have just understood `Traversable` for real and want to tell you. The light source is a single moving caustic: a rippling band of refracted sunlight that sweeps across the page as you scroll, and wherever it lands, surfaces turn iridescent — a thin-film soap-bubble shimmer that shifts from teal to magenta to chartreuse depending on the viewing angle (we fake "viewing angle" with scroll position and cursor proximity). Away from the caustic, the reef is calm, deep, and matte. The drama is entirely in that travelling sheen: the page is 90% still water and 10% holographic flash, and the flash is always *moving*. The throughline is **purity made visible**. Haskell's purity is usually explained with prose; here it is explained with water. The "ocean" the reef sits in is mathematically clean — no murk, no particulate, no fog — so you can see all the way to the back wall. Side effects, when the design needs to gesture at them, appear as a single contained bubble-stream rising from one vent in the corner: visible, bounded, clearly *over there*. That is the entire metaphor and it never gets explained in copy; it just is the layout. ## Layout Motifs and Structure The page is **a single horizontal reef wall, ~6800px tall, scrolled vertically, composed as a stack of seven Z-pattern reading zones** — and the Z is the load-bearing structure, not a decoration. Web frequency analysis shows z-pattern layout sits at only 4% of the registry; here it is the spine of the entire composition. Each zone is a full-viewport band, and within each band the eye is deliberately walked along a Z: a strong element top-left, a horizontal sweep to top-right, a long diagonal drop down to bottom-left, then a final horizontal pull to bottom-right where the zone's one "answer" lives (a type signature, a tiny code result, a fish that finally got evaluated). The diagonal stroke of each Z is drawn — literally — as a thin caustic light-streak SVG path that animates its `stroke-dasharray` as the band scrolls into view, so the reader watches the Z get *drawn* through the water. **Seven Z-zones, top to bottom:** 1. **Surface.** The waterline. Big grotesque wordmark `haskeller` top-left with the dot of nothing where `.net` will resolve later; horizontal sweep right to a floating school of lambda-fish silhouettes (not yet iridescent — not yet looked at); diagonal down through a shaft of light to bottom-left where a single fish has caught the caustic and gone full holographic; bottom-right: the tagline, set small. The waterline ripples — a `clip-path` wave on the entire band's top edge. 2. **The Lazy Fish.** A single large hero fish, rendered as a layered photographic cutout, that is *grayscale and motionless* until it enters the viewport center — then the caustic hits it, it shimmers into color, and it begins a slow lazy drift. Copy along the Z explains laziness without the word "monad" appearing once. 3. **Shared Tails.** Three lambda-fish swimming in formation whose *bodies are distinct but whose tail-fins are the same SVG path instance* — a visual pun on cons-list tail-sharing. The Z walks from one fish's head, across the shared tail, down to a small inline diagram. 4. **Pure Water.** The clear-water zone: a near-empty band, deep teal-to-midnight gradient, one tiny `IO`-bubble vent fizzing in the bottom-right corner of the Z. The most negative space on the page. The point is the emptiness. 5. **The Reef Itself.** The densest band: a coral wall built from stacked, overlapping holographic plates (each "coral" is a CSS gradient-filled blob with a thin iridescent rim-light), with lambda-fish nosing between them. Progressive-disclosure pockets live here: certain corals, when hovered or focused, *open* — the plate splits and a type signature or a four-line snippet unfolds from inside, like a clam. 6. **Caustic.** A band given entirely to the moving light: the refracted-sunlight band slows down here and the reader scrolls *through* it, every surface flaring iridescent at once. Almost no text — a single sentence riding the diagonal. 7. **Deep / Footer.** The reef wall recedes into clean dark water. The wordmark resolves: `haskeller.net` now complete, the dot filled. Small print, contact-as-a-fish-that-swims-to-your-cursor. No CTA banner, no newsletter wall, no pricing — the reef just gets quiet and deep. Navigation is **a vertical strip of seven tiny fish on the right edge**, one per Z-zone; the fish nearest your scroll position is the only iridescent one. Click a fish, the page glides to that zone. On mobile the Z-zones collapse to single-column stacked bands but the diagonal caustic streak is preserved as a true diagonal element so the rhythm survives. The grid underneath is a **14-column reef grid** with generous gutters; Z-anchors snap to columns 1–2 (top-left), 12–14 (top-right), 1–3 (bottom-left), 11–14 (bottom-right). `transform-style: preserve-3d` on each band gives the corals a shallow 60px parallax depth between foreground fish, mid-reef, and back wall — three planes, no more, kept honest. ## Typography and Palette **Type system — Google Fonts only, three families, grotesque-neo as the headline voice.** Grotesque-neo sits at just 3% in the registry; it is the entire personality of the type here. - **Hanken Grotesk** (variable, 100–900) — the **grotesque-neo** display and headline face. Used for the wordmark, every Z-zone title, and the big pull-statements. Set tight at headline scale (tracking -0.03em), weight 700–900, optical size large: `clamp(48px, 8.2vw, 156px)`. Its slightly humanist, slightly mechanical letterforms read as "modern functional programmer" without going full Helvetica or full sci-fi mono. When a headline rides a caustic streak, individual glyphs pick up a 1px iridescent text-shadow that shifts hue with scroll. - **Schibsted Grotesk** (variable) — the workhorse for body copy, captions, the right-edge fish-nav labels, and the unfolded progressive-disclosure prose. Set 17–19px, line-height 1.62, weight 400, tracking 0. Calm, readable, gets out of the way. - **JetBrains Mono** (weights 400, 700) — used *only* for actual Haskell: type signatures (`traverse :: (Traversable t, Applicative f) => (a -> f b) -> t a -> f (t b)`), the four-line snippets inside coral clams, and the `λ>` ghci prompt that appears when a fish is "evaluated." Never used for UI chrome. Ligatures on (so `->` and `=>` and `<$>` set as the operators a Haskeller expects to see). **Palette — a reef-water gradient that runs deep, with a holographic film layered on top.** Gradient palettes are common (97%), so the differentiation is in the *specific* reef-water ramp plus the thin-film overlay math. - `#04141C` — **abyss teal**, the deepest water; page background floor, deep-zone, footer. - `#0A2F3D` — **reef shadow**, mid-water; the base of most bands. - `#0E5C6E` — **lagoon teal**, the lit shallows; upper bands, the Z-anchor zones. - `#1FB6C9` — **caustic cyan**, the moving light's core color; the travelling sheen band, active fish-nav fish, focus rings. - `#7BE0CE` — **shallows mint**, foam and light-scatter highlights; thin rim-lights on coral. - `#F6F4EC` — **bone white**, the only near-white; body text on dark, the resolved wordmark dot, ghci output. - Holographic film triad, used *only* as `mix-blend-mode: screen` or `color-dodge` thin overlays that shift with `--scroll`/`--cursor`: `#FF4FB0` **iris magenta**, `#C9F24A` **iris chartreuse**, `#5AA0FF` **iris azure**. These are never solid fills — they are 8–14% opacity gradient sweeps that ride across surfaces, the soap-bubble shimmer. Default to abyss-and-lagoon teal (matte, deep, 90% of pixels); let caustic-cyan and the holographic triad do all the flashing (the energetic 10%). High contrast between bone-white type and the dark water keeps everything legible without a single box-shadow card. ## Imagery and Motifs **The reef is built from three image types — no stock-photo hero, no 3D renders, no Lottie.** 1. **Photographic fish cutouts, treated.** Real reef-fish photographs (think mandarinfish, regal tang, clown triggerfish — chosen for their *already-iridescent* scales) are masked to clean cutouts, desaturated to grayscale as their "unevaluated" state, then recolored via a CSS `filter` + a screen-blended holographic gradient when the caustic hits them. The treatment is deliberately a *little* artificial — these are fish-shaped thunks, not a nature documentary. Photography sits at 99% in the registry; the differentiation is using it *as a lazy-evaluation state machine* rather than as a backdrop. 2. **Lambda-fish silhouettes (SVG).** The schools and the right-edge nav are built from a single hand-drawn glyph: a fish whose body curve is the lower bowl of a lowercase **λ** and whose tail is the lambda's ascending stroke. One path, scaled, flipped, and instanced dozens of times. These are vector, crisp at any size, and they're what makes the metaphor click in half a second. 3. **Holographic coral plates (CSS).** Each coral is a `border-radius`-blobbed div with a layered `radial-gradient` body (lagoon teal core, abyss edges) and a 1.5px `conic-gradient` rim that cycles the holographic triad — a thin-film iridescent edge-light. Stacked at three depth planes. The progressive-disclosure "clams" are corals with a hidden second layer that translates and fades in on `:hover`/`:focus-within`. **Recurring motifs:** the **travelling caustic** (one rippling refracted-light band, the page's only real light source); the **bubble vent** (the single contained `IO` fizz, bottom-right of the Pure Water zone, the lone gesture toward side effects); the **shared tail** (the cons-list pun); **rising scroll-progress as depth** — the deeper you scroll, the darker and clearer the water, with a thin bone-white "depth: Nm" tick climbing the left margin. Tropical-fish motif sits at 6% in the registry and almost always pairs with calm-serene or whimsical tones; pairing it with **energetic** + **holographic** is the move nobody's made. ## Prompts for Implementation Build haskeller.net as **one HTML file, one CSS file, two ES modules, one hand-drawn lambda-fish SVG (instanced), ~6 treated fish-photo PNGs with alpha, and a single 1600×400 caustic-light PNG (or a tileable noise used to drive a CSS mask)**. No framework, no router, no build step. No GSAP, no Three.js, no WebGL, no canvas particle system. The animation surface is **CSS custom properties driven by one `scroll` listener + one `pointermove` listener (both rAF-throttled) + one `IntersectionObserver`** — that is sufficient for every effect described. **Storytelling is the organizing principle, and the story is "the page behaves like the language."** - **Laziness is real, not themed.** Fish photos load `loading="lazy"` and start grayscale (`filter: grayscale(1)`); they only "evaluate" — recolor, start drifting — when their `IntersectionObserver` entry fires. Coral clams render their snippet HTML but keep it `visibility: hidden` + zero-height until hovered/focused. Nothing computes until looked at; say so, quietly, in one caption. - **The caustic is the protagonist.** One `
` fixed-positioned, its `background-position` (or `mask-position`) tied to `--scroll`. Wherever it overlaps a `.shimmerable` surface, that surface's `--iris` opacity ramps up via a sibling/ancestor calc or a small JS hit-test against the 7 band rects. Everything else iridescent on the page is downstream of where this band is. The seed pattern is **progressive-disclosure** (2% in registry) — the caustic *is* progressive disclosure of the reef's color. - **The Z-zones must read as Z's.** Each `
` is `display: grid` over the 14-col reef grid; its four anchor children sit at the four corners; the diagonal `` streak connecting top-right to bottom-left animates `stroke-dashoffset` from full to 0 as the section crosses 20–80% of viewport. The reader's eye should physically trace the Z. Do not center everything — asymmetry along the diagonal is the point. - **Grotesque-neo carries the voice.** Hanken Grotesk huge and tight for the seven zone titles and the wordmark; let the wordmark's `.net` literally resolve (the dot fills bone-white) only in zone 7. Type that rides a caustic gets a hue-shifting 1px text-shadow; type in still water is flat. - **Energetic, not frantic.** Drifts are slow (8–22s loops), the caustic sweep is unhurried, but the *recoloring* moments are snappy (220–360ms) — the energy is in the flashes, not the ambient motion. `prefers-reduced-motion`: kill all drift loops and the caustic travel; keep the still iridescent state on every surface so the reef is still vivid, just frozen mid-shimmer. - **AVOID:** CTA-stacked hero, pricing tiers, feature-card grids, stat counters, testimonial carousels, newsletter modals, "trusted by" logo walls. There is no conversion funnel. The footer is a quiet deep-water fade with small print and one fish that swims toward the cursor. The whole page is a reef you scroll through and recognize — that is the experience. ## Uniqueness Notes Six concrete differentiators from the existing 230 designs in the registry: 1. **Z-pattern (4%) used as the literal compositional spine of all seven zones**, with the Z's diagonal stroke drawn as an animated caustic streak — not a one-off "hero is a Z" gesture but the page's entire skeleton. Most of the 4% mention z-pattern in passing; here it is unmissable. 2. **Tropical-fish motif (6%) welded to energetic tone (16%) and holographic aesthetic (10%)** — every existing tropical-fish site in the registry pairs the motif with calm-serene, whimsical, or pastoral tones. A *show-off, buoyant* reef under a moving holographic caustic is an unoccupied corner. 3. **The page mechanically behaves like Haskell** — lazy fish (grayscale thunks that evaluate on view), shared SVG tails (cons-list tail-sharing), one contained `IO` bubble-vent (purity), referential transparency on scroll-back. The metaphor is the layout, never the copy. 4. **Holographic done as a single travelling caustic over 90% matte deep-teal water**, not as all-over chrome/iridescence. The iris-magenta/chartreuse/azure triad exists only as 8–14% screen-blended sweeps that move — the opposite of the typical "everything is shiny" holographic page. 5. **Grotesque-neo (3%) as the sole headline voice via Hanken Grotesk**, with a wordmark whose `.net` literally resolves at the bottom of the scroll — typography as a tiny narrative payoff. 6. **Progressive-disclosure (2%) implemented twice over** — corals that unfold type signatures like clams, *and* the caustic itself as the progressive reveal of the reef's color — in a registry where progressive-disclosure barely appears. Chosen seed/style: **aesthetic: holographic, layout: z-pattern, typography: grotesque-neo, palette: gradient, patterns: progressive-disclosure, imagery: photography, motifs: tropical-fish, tone: energetic.** Avoided per frequency analysis: hand-drawn aesthetic (96% — saturated), glassmorphism (64%), card-grid layout (86%), centered layout (83%), full-bleed (94%), mono-dominant typography (95%), cursor-follow/spring/stagger/magnetic as the *headline* patterns (79–86% — present here only as minor footer/nav touches, not the identity), warm palette (97% — this site is deliberately cool teal), parallax as the lead effect (96% — used here only as a restrained 3-plane 60px depth).