# Design Language for haskell.quest ## Aesthetics and Tone haskell.quest is **a wabi-sabi tea-house for lazy evaluation** — a quiet, centered, slightly-faded room where the visitor is invited on a contemplative *quest* through the ideas of a purely functional language, narrated in a **nostalgic-retro** voice that remembers learning Haskell from a worn paperback under a desk lamp. The domain reads "haskell — quest": not a product page, not a tutorial index, but a slow pilgrimage through laziness, purity, types, and the strange serenity of a language where nothing happens until you ask for it. The governing metaphor — and it is load-bearing, not decorative — is that **a lazy language's unevaluated value (a "thunk") looks exactly like a skeleton-loading placeholder**. In Haskell, `take 5 [1..]` produces an answer even though `[1..]` is infinite, because the rest of the list is never forced. So this site renders **every not-yet-needed thing as a shimmer block** — a soft burgundy-on-cream pulse where a definition, a code sample, an image, a paragraph *could* be — and only resolves it into real content when the visitor's attention (scroll position, hover, dwell time) "forces the thunk". The corpus's `skeleton-loading` pattern sits at a thin 3%; here it is not a loading state, it is **the entire epistemology of the page**. The visitor watches values get demanded into existence. The aesthetic seed is **wabi-sabi (2% in the aesthetic corpus — almost untouched), realised through a centered layout (83% — the one crowded slot in the seed, so it is reframed: not "centered hero", but a single narrow scroll-column like a hanging scroll / kakemono, edges left raw), display-bold typography (7% — claiming sparse territory), a burgundy-cream palette (3% — the rare claim, the most distinctive colour element of the seed), skeleton-loading patterning (3% — used as the site's core mechanic, not a spinner), 3d-render imagery (used for soft clay vessels, never glossy product shots), flowing-curves motifs (5% — the asymmetric brushstroke contour, never a perfect circle), and nostalgic-retro tone (3% — the remembered-paperback voice).** This eight-axis combination has not been claimed elsewhere in the read references. The mood is **a worn ryokan room at dusk, lit by one lamp, with a single chipped tea-bowl and a 1990s programming textbook open on the tatami**. Wabi-sabi on the web has metastasised into a kitsch shorthand — beige gradients, generic "imperfect" wonky borders, a stock photo of a Japanese maple, a pull-quote about transience attributed to nobody — and haskell.quest deliberately strips all of that out. There are no maple leaves. No bamboo. No enso circles drawn with a calligraphy SVG filter. No "less is more" epigraph. Wabi-sabi here is reduced to its three actual ingredients: **(a) asymmetry and the deliberately unfinished — content that arrives incomplete and stays a little incomplete; (b) the texture of age — paper grain, mended cracks (kintsugi seams in pale gold), faded ink; and (c) a tight earthen palette of burgundy and cream that never brightens, never neons, never glows.** Everything the corpus calls "wabi-sabi" beyond that is treated as forbidden. The voice — **nostalgic-retro** — is the second load-bearing decision. The narration speaks like someone who learned Haskell a long time ago and is fond of it the way you are fond of a first programming book whose spine has cracked. Sentences are unhurried. The page remembers things ("there was a time when the answer to *what is a monad* was a 40-message thread; here it is a tea-bowl"). There is **no call-to-action. No "get started". No pricing. No "join the community". No testimonials. No stats grid. No FAQ accordion. No newsletter field.** The visitor reads a pilgrimage; the narrator is the fond elder; the quest ends and the lamp is turned off. Closest emotional reference points: the typesetting of *The Little Schemer* / *Simon Peyton Jones' "Implementing Functional Languages"* read at 1am; the patina of a much-handled `:type` prompt in a green-on-cream terminal screenshot from 1998; the stillness of a Sōetsu Yanagi essay on the unknown craftsman; the colour of dried sumac and unbleached rice paper. The aesthetic is **earthen, not muddy. Faded, not dull. Retro, not ironic** — the narrator does not wink at the past, they simply still live near it. ## Layout Motifs and Structure The site is a **centered single column** — but reframed entirely away from the "centered hero + card grid" default that dominates 83% of the corpus. Here "centered" means **one narrow vertical scroll, 62ch wide at maximum, hung in the middle of a wide cream field like a kakemono (Japanese hanging scroll)** — the field on either side is intentionally empty, slightly textured paper, no sidebar, no decoration, just *ma* (negative space) that makes the column read as a single mounted artefact. There is no second page. There is no router. There is no nav bar, no hamburger, no footer menu. The visitor lands at the top of the scroll and descends. **The scroll is divided into seven "stations" of the quest**, each a self-contained passage that begins fully as skeleton blocks and resolves as the visitor arrives: 1. **Station 0 — The Empty Bowl (the opening).** The display-bold wordmark `haskell.quest` sits centered, but it *boots in as a skeleton wordmark first* — a shimmer block the exact size of the word — and resolves into real letterforms over 1.8s, character by character, slightly out of vertical alignment with one another (asymmetry). Below it, a single line of nostalgic narration and one 3d-rendered clay tea-bowl, off-centre, casting a soft long shadow into the cream. 2. **Station 1 — Nothing Happens Yet (laziness).** A passage on lazy evaluation. The body text arrives as three skeleton paragraphs; as the visitor scrolls past 30% of the section, the first paragraph "forces" (shimmer → text). The second forces at 60%, the third at 90%. A code sample `take 5 [1..]` sits in a recessed cream panel; the right-hand side of the result list is *still skeleton* — five real numbers, then `…` then shimmer that never resolves, because that part of the list is never demanded. 3. **Station 2 — Pure Water (purity & referential transparency).** A passage on pure functions. A 3d-rendered shallow clay dish of still water, rendered with no caustics, no glints — matte. The text explains that a pure function, called twice, returns the same answer; to demonstrate, a small inline widget shows `double 21` written twice — and the *second* call is rendered as a skeleton that, when hovered, resolves to the identical `42`, then fades back to skeleton, then resolves again — the value is always the same, so the page treats it as cheap to re-summon. 4. **Station 3 — The Mended Crack (types & the kintsugi seam).** A passage on the type system. Whenever a type signature is shown (`map :: (a -> b) -> [a] -> [b]`), it is drawn as if it were a *kintsugi seam* — a pale-gold flowing curve threading the cream, with the signature set along it in display-bold. The narration: types are the gold in the cracks; the program was broken and the compiler mended it visibly. The seam is an asymmetric flowing curve, never a straight line, never a perfect arc. 5. **Station 4 — A Tea-Bowl, Not a Burrito (the monad station).** The site's small joke and its centrepiece. A large 3d-rendered chawan (tea-bowl), centered, slightly tilted, with a single faint kintsugi seam. The narration retells the famous "what is a monad" struggle in a fond, retro register, then declines to define it formally — instead it shows three short, real Haskell snippets (`Maybe`, list, `IO`) as actual code, each preceded by a skeleton that the visitor must dwell on for 1.2s before it resolves, "because understanding monads, like tea, should not be rushed". 6. **Station 5 — Folding the Paper (recursion & folds).** A passage on `foldr` / `foldl`. A 3d-rendered sheet of slightly creased rice paper that, on scroll, folds itself in stop-motion-ish steps — each fold is a flowing curve, never a hard crease — while a `foldr (+) 0 [1,2,3]` expansion writes itself out term by term, each term arriving from skeleton. 7. **Station 6 — The Lamp Goes Out (the closing).** The narrator signs off. The 3d tea-bowl from Station 0 reappears, now empty and dimmer. The final line of narration resolves from skeleton one last time, and then — deliberately — **one short skeleton block at the very bottom never resolves at all.** It is the part of the quest that is yours to force. Below it, in small display-bold caps: `— end of the demanded portion —`. **Composition discipline.** The column is centered, but *content inside it is not*. Headings sit flush-left or are nudged 8–24px off-axis. The 3d vessels are always off-centre, casting their shadow toward the column's centre. Section gutters are large — 200px — pure cream. The visual rhythm is: tall skeleton silence → a value forced → a vessel → silence again. **No card grid. No bento. No two-column anything. No carousel. No tab strip.** **Scroll behaviour.** Native scroll, the visitor's pace. No scroll-jacking, no snap. The only scroll-coupled mechanic is the *forcing* of skeleton blocks via `IntersectionObserver` thresholds — and once forced, a block stays forced (a thunk, once evaluated, stays evaluated; this is also why nothing "re-shimmers" on scroll-up, except the two intentional demonstrations in Stations 2 and 4). ## Typography and Palette **Fonts — Google Fonts only, three voices.** - **`Bricolage Grotesque`** — *the load-bearing display-bold face*. A contemporary expressive display grotesque available on Google Fonts, with optical-size and weight axes; here it runs at **wght 700–800, opsz at its display end**, used for: the wordmark `haskell.quest`, all seven station titles, the pull-lines of narration, the `— end of the demanded portion —` sign-off, and every code keyword shown in prose. Station titles are set at `clamp(40px, 7vw, 88px)`, tracked slightly tight (`letter-spacing: -0.01em`), and each title's baseline is deliberately *not* level — successive letters drift ±2px vertically (asymmetry / the unfinished). This is the typographic centre of the site. - **`Newsreader`** — the nostalgic-retro body voice. Newsreader is a Google Fonts variable serif with a warm, slightly old-fashioned newspaper-revival character; here it runs at **opsz 16–24 / wght 400 / italic permitted but rare**, used for every block of narration in the seven stations. Body is 19px Newsreader, line-height 1.72, set ragged-right (never justified), in `#2A0F14` warm ink on `#F4EAD9` cream. Emphasis is given by *italic*, never by bold (bold belongs to Bricolage). Set in the fond-elder register: full sentences, gentle, remembering. - **`Spline Sans Mono`** — the code voice. A Google Fonts monospace with a soft, slightly humanist character (it does not look like a 1980s terminal — it looks like code typeset in a nice 1990s textbook). Used for every real Haskell snippet, type signature (when *not* set along a kintsugi seam — those use Bricolage along the curve), and `ghci`-style prompt. 17px, line-height 1.6, in `#5C1A24` muted burgundy on a recessed `#EDDFC9` panel that is one shade darker than the page so code reads as *pressed into* the paper. The trio — **`Bricolage Grotesque` (display / structure) + `Newsreader` (nostalgic narration) + `Spline Sans Mono` (code)** — is, by inspection of the read references, an unclaimed pairing; the corpus's display-bold slot is usually filled with Bebas or oversized geometric sans, not an expressive variable grotesque, and Newsreader rarely co-occurs with a display grotesque in a wabi-sabi frame. **Palette — burgundy-cream (3% in corpus — claimed), nine earthen values, nothing brighter than the cream and nothing glossier than dried clay.** - `#F4EAD9` — **Unbleached Rice Paper.** The page background and the wide empty side-fields. Warm, faintly grey-yellow, never pure white. Carries a 4–6% paper-grain noise overlay everywhere. - `#EDDFC9` — **Pressed Paper.** One shade darker than the page; the recessed background of code panels and quoted passages, so they read as impressed into the sheet. - `#5C1A24` — **Dried Sumac.** The primary burgundy. Code text, station-title fill, the wordmark. Deep, slightly brown-shifted — a dried-berry red, not a wine red. - `#7A2A33` — **Faded Ink Burgundy.** Secondary burgundy; narration links (underline only, no colour change on hover beyond a slight darken), and the resolved-text colour of forced skeleton paragraphs. - `#2A0F14` — **Lamp-Shadow Brown-Black.** Body narration ink. Almost-black but warm and burgundy-biased — never `#000`. Also the colour of the long soft shadows the 3d vessels cast. - `#C9A24B` — **Kintsugi Gold (matte).** The mended-crack seams, the type-signature curves, the seven small station numerals. Matte ochre-gold, *never* metallic, never with a gradient or specular highlight. Used sparingly — gold is precious because it is rare on the page. - `#B8483C` — **Glaze Crack Red.** A slightly more orange burgundy used only for the *animated* edge of a skeleton block while it is in the act of forcing — a thin running line that traces the block's flowing-curve outline once, then disappears as the content resolves. - `#8C7B5E` — **Old Tatami.** A muted olive-tan; the colour of the 3d clay vessels' mid-tone, and of small caption text under the vessels. - `#D8C6A6` — **Skeleton Shimmer Hi.** The bright pole of every skeleton block's shimmer gradient (the low pole is `#EDDFC9` Pressed Paper). The shimmer is *slow* — a 2.6s sweep — and *low-contrast*; a thunk should look patient, not impatient. There is no blue, no green, no purple, no neon, no pure white, no pure black, no glossy highlight, no glow, no gradient mesh, no aurora anywhere on the page. The only gradient permitted is the two-stop shimmer gradient inside skeleton blocks, and even that is a 14% lightness spread — barely a gradient at all. Error states (a deliberately-wrong code sample shown in Station 3 before the compiler "mends" it) are rendered in `#B8483C` Glaze Crack Red, then healed with a `#C9A24B` Kintsugi Gold seam — the page does not believe in alarm; it believes in mending. ## Imagery and Motifs **The site uses no photography. No stock illustration. No icon library. No glassmorphic cards. No line-art.** The corpus has photography at 99%; haskell.quest claims the under-used `3d-render` imagery and the `flowing-curves` motif (5%) and combines them with the `skeleton-loading` mechanic so that every visual element is either (a) a soft matte 3D-rendered clay vessel, (b) a hand-authored flowing-curve SVG (kintsugi seam / brushstroke contour), or (c) a skeleton-shimmer block awaiting demand. **The 3D-rendered clay vessels (the recurring object).** Five matte ceramic forms, modelled as if by an unknown potter: an empty tea-bowl (Station 0 and 6), a shallow water dish (Station 2), a tall handle-less cup, a chawan with one gold seam (Station 4), a folded sheet of rice paper (Station 5, technically a soft 3D surface, not a vessel). Each is rendered **matte, with one soft key light, a long low-contrast shadow, and a faint surface roughness** — *no* caustics, *no* specular glints, *no* reflections, *no* studio backdrop, *no* HDRI gloss. They are delivered as static layered PNGs (a body layer + a separate shadow layer) so the shadow can be offset slightly off-axis (asymmetry) and so each vessel can drift 6–10px on scroll-parallax independently of its shadow, suggesting it is sitting *on* the paper rather than pasted onto it. Before each vessel loads, its bounding box is — of course — a skeleton-shimmer block in the vessel's silhouette. **The kintsugi seams (the flowing-curve motif).** Whenever the page shows a type signature, mends a deliberately-broken code sample, or marks one of the seven stations, it draws a **flowing-curve SVG path in matte `#C9A24B` Kintsugi Gold** — an asymmetric, hand-tuned Bézier that wanders like a real crack: never a perfect circle, never a perfect arc, never symmetric, always with one branch a little longer than the other. These seams are the only "decorative" lines on the page, and they are not decorative — each one marks a place where something was incomplete and got mended. The seams `path-draw` themselves in over 1.4–2.2s when their station is reached. **The skeleton blocks (the core visual mechanic).** Every passage of narration, every code sample, every vessel, the wordmark, the station titles — all of them exist first as **a soft rounded-rectangle (corners 6px, edges very slightly wavy — a flowing-curve clip-path, not a clean rect) filled with the slow 2.6s `#EDDFC9 → #D8C6A6` shimmer**. When the visitor's attention forces the block, a thin `#B8483C` Glaze Crack Red line traces the block's wavy outline once (0.6s), the shimmer stops, and the real content cross-fades in over 0.5s with a tiny upward nudge (8px). Forced blocks do not re-shimmer (a thunk stays evaluated) — except in the two intentional demonstrations (Station 2's re-summoned `42`, Station 4's "don't rush the tea" dwell-forcing), where the re-shimmer is the point. **The paper grain.** A single 4–6% monochrome noise overlay (`mix-blend-mode: multiply`) sits over the entire `#F4EAD9` page at all times — the texture of age. It is subtle enough to be felt, not seen, and it is the same texture on the wide empty side-fields as on the central column, so the column reads as mounted on the same sheet. **No motif appears that is not on the seed list.** No maple leaves. No bamboo. No enso circles. No cherry blossoms. No "imperfect handwriting" font. No torn-paper edges as a Photoshop brush. No beige Squarespace gradient. No glassmorphism. No neon. No photography of a Zen garden. **The corpus's wabi-sabi clichés are aggressively excluded; the only Japanese reference that survives is kintsugi, and only because the site uses it as a structural metaphor for the type system, not as decoration.** ## Prompts for Implementation Build haskell.quest as **one HTML file, one CSS file, one ES module, one SVG sprite of the kintsugi seams, and a folder of static layered PNGs for the five 3D vessels** — no framework, no router, no bundler, no build step. Three external assets only: the three Google Font links (Bricolage Grotesque, Newsreader, Spline Sans Mono). Everything else is hand-authored. **Bias the whole thing toward a slow, full-screen narrative pilgrimage; this is a story you scroll, not a site you navigate.** **Document shell.** A single `
` centered in the viewport with `max-width: 62ch`, wide cream `#F4EAD9` paper-grain fields on either side. Inside it, seven `
` elements stacked vertically with 200px gutters. No header element, no nav, no footer menu — the wordmark in Station 0 and the `— end of the demanded portion —` sign-off in Station 6 are the only chrome. **The skeleton-as-thunk system (do this first; it is the whole site).** Author every piece of resolvable content twice in the markup: a `
` shimmer placeholder *and* its real content inside a `