# Design Language for haskell.day
## Aesthetics and Tone
haskell.day is **The Lazy Foundry** — a retro-futuristic isometric machine-room where the entire screen is rendered as a single vast factory floor seen from a fixed 30-degree axonometric angle, and every visible object is a piece of *equipment for evaluating an expression*. The conceit is literal and unapologetically nerdy: Haskell's defining trait is non-strict (lazy) evaluation, so this site is built as a **pneumatic-tube delivery system for thunks**. Capsules — small chrome cylinders with a glowing core — sit parked in racks until something *demands* them; when a demand arrives, a capsule whooshes down a brass-and-glass tube, gets cracked open at a forge-block, reduces to a value (or to another thunk that fires off more capsules), and the result slots into a receiving bay with a satisfying mechanical *chunk*. The whole experience is the visual translation of "nothing computes until it's needed, and then exactly enough computes."
The mood is **futuristic-cutting-edge** but warmed by a 1970s-aerospace-control-room patina: think the bridge of a starship that was built by people who also loved Bauhaus poster art and brushed brass. It is confident, precise, slightly playful, and deeply *deliberate* — every animation has a reason, every block snaps to the isometric grid, nothing floats freely. Where most "functional programming" sites lean either on austere academic minimalism or on terminal-green hacker cosplay, The Lazy Foundry leans into **industrial wonder**: Haskell as a beautiful, over-engineered, gleaming machine that does the least possible work with the most possible elegance. The tone of the copy matches — terse, technically literate, a little proud, never cute. Section headings are stamped onto the equipment like serial-number plates. The visitor is treated as an engineer being given a tour of the plant, not a customer being sold a product.
A second, quieter layer: **purity as cleanliness**. The foundry floor is spotless. No rust, no grime, no smoke — because side effects are quarantined. There is exactly one room, behind a heavy gasketed door labeled `IO`, where things are allowed to be messy: steam, sparks, a flickering monitor. Everywhere else is climate-controlled, color-graded, immaculate. This gives the design a built-in narrative tension — order versus the one permitted chamber of chaos — without ever needing to explain monads in prose.
## Layout Motifs and Structure
The layout is **modular-blocks** (3% in the corpus — deliberately chosen for its rarity and because it *is* the metaphor: a Haskell program is composed of small pure blocks wired together, and so is this page). The entire site is one continuous full-bleed isometric plane — there is no centered content column, no max-width wrapper, no traditional header bar floating over a hero image. Instead the viewport is the **foundry floor**, and content lives inside discrete extruded **machine modules**, each one a chamfered isometric box (a `2.5D` parallelepiped drawn with CSS transforms: `rotateX(54.7deg) rotateZ(45deg)` family, or pre-baked SVG faces) sitting on a faint blueprint grid.
Spatial system:
- **The grid is sacred.** A 96px isometric tile underlies everything. Every module's footprint is an integer number of tiles. Modules never overlap; they connect via **pneumatic tubes** — brass pipes with glass windows — that run only along grid lines (horizontal, vertical, or 45-degree diagonals matching the iso projection). The tubes are the navigation *and* the storytelling device.
- **Vertical scroll = walking deeper into the plant.** As you scroll, the camera doesn't tilt or rotate (the axonometric angle is locked — that's the whole point of isometric) but it *pans* across the floor, revealing new modules. Scroll is on rails: a long, slow, deliberate dolly. Six main module-clusters from top to bottom:
1. **Intake Bay** — the title plate `haskell.day` stamped in giant condensed caps onto the largest module; a single parked capsule pulsing, waiting. A line of copy: *"Nothing here has run yet."*
2. **The Thunk Racks** — wall of small capsules, each labeled with a Haskell concept (`fold`, `Maybe`, `<$>`, `where`, `~`). Hovering a capsule makes it *scale up* and glow (the `scale-hover` pattern, see below).
3. **The Reduction Forge** — the centerpiece: a large module where a capsule visibly cracks open and a small expression tree unfolds, each node a tiny isometric block, edges drawn as SVG paths.
4. **The Purity Wing vs. the IO Chamber** — a split: a long clean corridor of identical pale modules on one side, and on the other, the single dark gasketed `IO` room with steam leaking from its seams.
5. **The Type Lattice** — a honeycomb-adjacent arrangement of hexagonal-topped modules connected by tubes, representing the type system as a load-bearing structure.
6. **The Loading Dock / Colophon** — where finished values are crated up; the footer, styled as a shipping manifest stamped on a pallet.
- **No floating UI.** Even the (minimal) nav is diegetic: a small brass console module fixed in the lower-left corner with six etched buttons that, when pressed, send a fast capsule shooting along the tubes to that section while the camera follows. Pressing a button physically depresses (a CSS transform + shadow change).
- **Depth via stacking, not blur.** Because everything is isometric, "in front" and "behind" are expressed by literal z-position on the floor and by which tube passes over which — never by drop-shadow-y glassmorphism. The one allowed atmospheric effect is a very subtle bottom-of-viewport haze gradient suggesting the floor recedes.
This is explicitly *not* a card-grid, *not* a centered hero, *not* a dashboard, *not* a bento box of equal tiles. The modules are different sizes, wired in a deliberate non-symmetrical topology, and read as a *circuit* you trace, not a menu you browse.
## Typography and Palette
**Typography — bebas-bold as the dominant display voice (5% in the corpus, deliberately chosen).** Bebas Neue's tall, tight, all-caps industrial condensed letterforms are exactly the typeface you'd find silkscreened onto 1970s aerospace equipment — and stamped onto serial plates. It gives the foundry its *signage*. It is paired with a precise geometric/grotesque sans for running text and a true monospace for code, because this is a *programming* site and code must look like code.
- **`Bebas Neue`** (Google Fonts) — all major headings, the `haskell.day` wordmark, module serial plates, section numbers. Always uppercase, generous letter-spacing (`0.06em`–`0.12em`), used at large sizes (clamp from `2.4rem` to `7vw`). Treated as *engraving*, often with a subtle inset/embossed shadow so it reads as physically stamped into a metal face.
- **`Archivo`** (Google Fonts, variable) — body copy, captions, tube labels, manifest text. A grotesque with an industrial, slightly squared character that sits comfortably next to Bebas. Use the SemiCondensed-ish settings via `font-stretch` where supported. Weights 400 / 500 / 700.
- **`JetBrains Mono`** (Google Fonts) — every fragment of Haskell code, every capsule label, the IO chamber's flickering monitor text, type signatures in the Type Lattice. Ligatures *on* (so `<$>`, `>>=`, `->` render as the operators Haskellers expect). This is the only "warm/human" voice — code is where the actual thinking lives.
Hierarchy is built on **scale and case contrast**, not on many weights: huge condensed caps (Bebas) → medium uppercase Archivo for labels → sentence-case Archivo for prose → mono for code. Numbers and section markers ("MODULE 03 / THE REDUCTION FORGE") use Bebas + JetBrains Mono together on the same plate.
**Palette — retro-futuristic (3% in the corpus, deliberately chosen).** A 1970s-control-room scheme: cool industrial bases, a single hot accent, brass, and a phosphor glow. Minimum well over three colors:
- `#0E1A24` — **Hangar Blue-Black.** The deepest background, the floor in shadow, the IO chamber. Near-black with a blue undertone.
- `#16293A` — **Steel Bay.** Mid-dark panel color, the sides of most isometric modules.
- `#1F3C52` — **Cobalt Floor.** The lit foundry floor and the tops of modules; slightly lighter so the iso "tops" read as catching overhead light.
- `#E9E2D0` — **Bone Decal.** The off-white of stamped Bebas text, decals, blueprint linework on dark; warm so it never looks sterile.
- `#C8923D` — **Brass Tube.** The signature warm metallic — every pneumatic pipe, every fitting, every "active" highlight. The plant's gold.
- `#FF6A3D` — **Forge Orange.** The hot accent: a capsule's core when demanded, the crack of a reduction, the only color allowed to *blink*. Used sparingly — it's heat.
- `#5CE0C8` — **Phosphor Mint.** The cool counter-accent: idle capsule cores, the IO monitor's CRT glow, "this evaluated successfully" confirmations. Reads as 1970s-oscilloscope green-cyan.
- `#7A8DA0` — **Ash Steel.** Muted slate for secondary text, tube labels, and the un-hovered state of rack capsules.
Gradients are used *only* as soft directional lighting on the iso faces (a 6–10% top-to-bottom lighten on module tops, a faint warm bloom around the forge), never as decorative full-screen mesh. The overall feel: 90% cool steel-and-blue, 10% brass-and-fire — disciplined, with one room that breaks the rules.
## Imagery and Motifs
**Imagery — duotone-photo (3% in the corpus, deliberately chosen), used precisely and rarely.** There is *no* generic stock photography. Where photographic texture appears, it is a single hero treatment: a few real macro photographs of **vintage industrial hardware** — brass pneumatic-tube valves, oscilloscope screens, punch-card readers, the inside of an old mainframe — each rendered as a hard **duotone** mapped to `#0E1A24` → `#5CE0C8` (for cool surfaces) or `#16293A` → `#C8923D` (for brass), with visible halftone dithering at the dark end so it reads as a *printed technical manual plate*, not a photo. These appear only as the "real material" inset on three or four key modules (e.g. the actual valve photo set into the side of the Reduction Forge), giving the otherwise-vector world a tactile anchor. Everything else is built, not shot.
**Motifs — circuit (7% in the corpus, deliberately chosen) as the connective tissue.** The pneumatic tubes *are* a circuit diagram drawn in 3D: they branch at right angles and 45-degree miters, they have "junction" fittings (rendered like the dots on a schematic), they carry "current" as travelling capsules and as a faint pulsing dash-flow along the pipe interior. Secondary motifs:
- **Isometric extruded blocks** — the foundry modules themselves; chamfered edges, a 2px bone-colored top-edge highlight, an inked bottom-edge line.
- **Serial plates & decals** — small rectangular metal nameplates with rounded rivets in the corners, Bebas text engraved; stuck onto modules at jaunty (but grid-snapped) positions.
- **The thunk capsule** — a recurring icon: a small rounded cylinder, glass body, glowing core (mint when idle, orange when forced). It's the site's mascot, appearing at every scale from 12px nav-tracers to a meter-tall hero capsule.
- **Expression-tree skeletons** — thin SVG node-and-edge diagrams that *grow* (path-draw) when a reduction happens; nodes are tiny iso blocks, edges are brass hairlines.
- **Blueprint grid** — a faint `#7A8DA0` isometric grid underlying the whole floor, with slightly brighter lines every 8th tile, like engineering graph paper. It never scrolls *with* parallax exactly — it has its own slower drift so the floor feels vast.
- **Halftone dither** — at the boundary of every duotone inset and in the IO chamber's shadows, a coarse dot pattern that nods to printed manuals.
No emoji, no rounded-friendly-blob illustration, no gradient mesh, no glassmorphic frosted cards. The visual language is **technical-manual-meets-starship**: precise linework, stamped type, brass, phosphor, and exactly one warm fire-colored thing per view.
## Prompts for Implementation
**Build a single full-screen, scroll-driven narrative — a guided dolly across an isometric factory floor. Vanilla HTML + CSS + ES modules. No framework, no router, no CTA stack, no pricing table, no stat-grid.**
**Document structure (HTML):**
```
… … … … … …
```
**Isometric technique:** establish one true axonometric basis. Either (a) wrap the `.foundry` in `transform: rotateX(54.736deg) rotateZ(45deg)` with `transform-style: preserve-3d` and build modules as 3D boxes (six faces, the top lit, sides darker), or (b) draw each module as a pre-composed SVG with three visible faces (top + two sides) and place them on a 2:1 iso pixel grid. Option (b) is more robust for text legibility — text on the "top" face stays readable; reserve true 3D transforms for purely decorative chamfers. **Lock the angle — never rotate the camera on scroll.** Scroll only translates the plane (a slow `translateX/translateY` dolly mapped to scroll progress with eased lerp).
**Storytelling beats (the scroll script):**
1. **Intake (0–15% scroll):** the wordmark stamps in — Bebas caps with an emboss shadow, letter-by-letter `stagger`, as if a press is hitting each glyph. One mint-glowing capsule sits parked. Copy fades up: *"Lazy by design. Nothing here has run yet."* The grid drifts.
2. **Racks (15–35%):** camera dollies right; the thunk-rack wall slides in, capsules `stagger`-popping into their slots. This is the only place hover-rich interaction lives.
3. **Forge (35–60%):** the showpiece. As this module centers, a capsule detaches from the previous rack, whooshes along a tube (capsule-traffic canvas), arrives at the forge, the forge's iso "lid" lifts, the capsule cracks (Forge Orange flash + small particle burst — coarse square particles, no soft glow), and an **expression tree path-draws** outward: `SVG stroke-dashoffset` animation, nodes scaling in at each branch, brass hairline edges. End state: a mint "✓ value delivered" plate `chunk`s into a receiving bay. Scrubbed to scroll, so users can scrub the reduction back and forth.
4. **Purity vs IO (60–75%):** the floor splits. Left: a long colonnade of identical pale clean modules, perfectly aligned, silent. Right: the `IO` chamber — dark, gasket-sealed, JetBrains-Mono text flickering on a phosphor-mint CRT inset, faint steam (a slow CSS `filter`/`mask` animated noise) leaking from its door seams. Copy, terse: *"Effects live in exactly one room. The rest of the plant stays clean."*
5. **Lattice (75–90%):** hex-topped modules connected by tubes form a load-bearing truss; type signatures in JetBrains Mono engraved on each (`Functor f => …`). Tubes between them light up sequentially (`path-draw-svg` of the dash-flow).
6. **Dock (90–100%):** finished capsules get crated; the footer is a **shipping manifest** stamped on a wooden pallet (the one place wood texture appears) — colophon, credits, "Built lazily." A final capsule rolls off-screen.
**Signature interactions:**
- **`scale-hover` (3% in the corpus — make it the headline micro-interaction):** every rack capsule and every nav button responds to pointer with a crisp `transform: scale(1.14)` on a snappy `spring`/cubic-bezier, the core glow ramping mint→brighter, a soft brass ring drawing around it (`border-animate`), and a one-line JetBrains-Mono tooltip slug appearing on a tiny serial plate ("`foldr :: (a -> b -> b) -> b -> [a] -> b`"). On leave it `spring`s back. No tilt-3d, no parallax-on-hover — pure decisive scale, because a thunk being *demanded* is a discrete, all-or-nothing event.
- **Demand-on-click:** clicking a rack capsule "forces" it — it detaches, shoots down a tube to the forge, and the forge plays its reduction with *that* capsule's label as the expression. (Pre-script 5–6 of these.)
- **`parallax` (subtle, layered-depth):** three depth planes only — the fixed blueprint grid (slowest), the module floor (scroll-locked dolly), the travelling capsules + tube highlights (slightly faster) — so the iso world has gentle dimensionality without ever breaking the locked angle.
- **`stagger` everywhere blocks enter:** modules, capsules, tree nodes, lattice cells — all arrive in ordered cascades, never all-at-once, reinforcing "things happen in dependency order."
- **Sound is optional and off by default**, but if implemented: pneumatic *whoosh* on capsule travel, mechanical *chunk* on delivery, a soft tube-resonance hum under the IO chamber.
**Performance/feel notes:** prefer transforms and opacity for all animation; the capsule-traffic canvas runs a tiny fixed pool of sprites (≤20) along precomputed bezier paths derived from the SVG tube geometry; the blueprint grid is a single tiled background, not DOM nodes; respect `prefers-reduced-motion` by collapsing scroll-scrubbed sequences to their end states and disabling steam/particles.
**AVOID:** CTA-heavy hero with a big "Get Started" button stack; pricing/plan blocks; stat-grids ("10k users / 99.9% uptime"); generic glassmorphic frosted cards; soft pastel blob illustration; centered single-column marketing layout; testimonial carousels. This is an exhibit, not a funnel — the visitor leaves having *understood laziness*, not having signed up for anything.
## Uniqueness Notes
Deliberate departures from the 230 designs already in the corpus and from the usual functional-programming visual canon:
1. **Laziness rendered as a literal pneumatic-tube logistics machine.** Most FP sites either go austere-academic (white paper, serif, lots of math) or terminal-hacker (black bg, green mono, ASCII). This one commits to a single sustained physical metaphor — *thunks are capsules, demand is a signal that sends them down brass tubes, reduction is a forge* — and builds every section, every animation, and every interaction inside that fiction. Nothing on the page is decoration without diegetic justification.
2. **Locked isometric camera as a structural rule, not a style flourish.** `isometric` sits at 11% of the corpus but is almost always used for spot illustrations or icon sets. Here the *entire site is one axonometric plane* and the camera angle is never allowed to change — scroll is a dolly, not a tilt — which makes the iso projection load-bearing for the navigation (tubes only run along iso grid lines) and the storytelling (you "walk" the plant).
3. **`scale-hover` (3%) and `modular-blocks` (3%) and `retro-futuristic` palette (3%) and `duotone-photo` (3%) stacked together** — four of the rarest tokens in the corpus, used in mutual reinforcement rather than as isolated quirks: blocks are the program, scale-on-hover is a thunk being forced, the palette is a 1970s control room, and the only photographic texture is a duotone technical-manual plate. The combination doesn't resemble anything else in the set.
4. **One quarantined room of chaos (`IO`) inside an otherwise immaculate plant** — a built-in narrative tension (purity vs. effects) expressed purely through environment art (clean colonnade vs. gasketed steaming chamber) instead of explanatory copy. No other design uses "the cleanliness of the space" as the message.
5. **Bebas Neue as engraved industrial signage paired with JetBrains Mono as the only "human" voice** — type hierarchy built on case + scale contrast (stamped caps → label caps → prose → ligature-rich code) rather than weight ramps, which is unusual versus the corpus's heavy reliance on humanist sans + handwritten accents.
**Avoided overused patterns from the frequency analysis:** no `hand-drawn` aesthetic (96%), no `glassmorphism` (64%), no `photography`-as-stock (99% — only hard duotone manual plates here), no `card-grid` (86%), no `centered` marketing column (83%), no `cursor-follow` cursor toys (86%), no `magnetic` buttons (79%), no `warm`+`gradient` mesh palette default (97%/97% — this palette is 90% cool steel with a single fire accent), no `pastoral-romantic` tone (37%). Patterns used are the deliberately underused ones that fit the machine: `scale-hover` (3%), `parallax`/`stagger`/`spring` in restrained, narrative service, `path-draw-svg` for the expression trees and tube flow, `border-animate` for the brass rings.
**Chosen seed/style:** aesthetic: isometric, layout: modular-blocks, typography: bebas-bold, palette: retro-futuristic, patterns: scale-hover, imagery: duotone-photo, motifs: circuit, tone: futuristic-cutting-edge.