# Design Language for haskell.monster ## Aesthetics and Tone haskell.monster is a friendly lab where a soft, glowing creature made of pure functions blobs around the screen. The aesthetic is **blobitecture** — everything is a rounded, gel-like volume with no hard corners anywhere. Think of inflatable architecture pavilions, lava-lamp wax, mercury droplets, and the kind of squishy 3D rendering you get from a metaball solver. The "monster" is not scary; it is a gooey orange amoeba that loves currying, lazy evaluation, and pattern matching. The tone is unapologetically **playful**: chatty microcopy, puns about monads as "burritos that compose," a creature that reacts when you poke it, and a HUD that talks back. Mood board: a 1970s Verner Panton interior melted into a synthwave terminal; orange agar-agar lit from inside; a pet slime in a glass tank that pulses gently when it has something to say. The whole site should feel like you are tickling a warm, intelligent blob and watching ripples travel across its surface. Nothing is corporate. Nothing is a pitch. It is a toy you can pet, and the toy happens to teach you about purely functional programming. Crucially: this is **not** the over-used hand-drawn or glassmorphism look. There are no doodle arrows, no frosted-glass cards, no notebook paper. Surfaces are matte-to-glossy rubber. Light is volumetric and warm. Geometry is exclusively curved. ## Layout Motifs and Structure The structural conceit is a **HUD overlay** painted on top of a living blob simulation. The blob (a full-viewport canvas/SVG metaball field) is the *world*; the HUD is a thin, semi-translucent instrument panel that floats above it at the screen edges — never a box in the center, never a card grid. - **Corners as instruments.** Four rounded HUD pods anchor the viewport corners: top-left = "creature status" readout (mood, hunger for arguments, evaluation strategy = LAZY), top-right = navigation reticle (a ring of orbiting capsule-buttons), bottom-left = a live REPL ticker scrolling `λ`-expressions the blob is "thinking", bottom-right = a squishy "POKE" control. - **Edge rails, not columns.** Long-form content rides in a single soft channel that snakes down the right third of the screen like a tube of toothpaste — an organic-flow column with a wavy left edge that the blob occasionally bulges into. - **No card-grid.** Where other sites would drop a 3-up feature grid, here three blobs *fuse and split* — sections are revealed by the monster pinching off a droplet that inflates into the content for that section. - **Reticle navigation.** Section links are capsule pills riding a curved orbital path; the active one swells (pulse-attention) and the blob leans toward it. - **Depth via gel layers.** 2–3 translucent blob layers at different blur/scale parallax-drift behind the HUD so the world feels deep and gooey, not flat. Scroll is a **journey through the creature's interior**: you descend from its glossy skin (intro) → into a chamber of suspended thunks (laziness) → through a braided tube of composed arrows (function composition / monads) → into a warm core where types glow (the type system) → out the bottom into a playground REPL. The HUD stays pinned; only the world changes around it. ## Typography and Palette **Typography — mono-forward, with one rounded companion:** - Display & headings: **Space Mono** (Google Fonts) — chunky, slightly retro monospace; used large and tight for headings, with the `λ`, `->`, `>>=`, `::` ligature-feel of code baked into the visual rhythm. Letterforms read like glyphs sitting inside the blob. - HUD readouts, REPL ticker, code: **JetBrains Mono** (Google Fonts) — crisp, legible monospace for live `λ`-expressions, type signatures, status lines. - Body / playful microcopy: **Fredoka** (Google Fonts) — soft, rounded, bouncy sans for the chatty creature dialogue and longer prose; its roundness echoes the blobitecture so the whole page rhymes visually. (If a single secondary face is preferred, **Quicksand** from Google Fonts is an acceptable swap — same friendly roundness.) **Palette — burnt-orange core, warm and glowing:** - `#0E0A07` — Tar Black: deep near-black brown for the void behind the world. - `#1C140D` — Singed Umber: slightly lifted background for HUD pod fills (translucent over it). - `#C7491B` — Burnt Orange: THE creature color — the primary blob fill, headings glow, active states. - `#E2742E` — Ember Orange: highlight on blob crests and hover states; the "lit from inside" rim. - `#F4A24C` — Amber Glow: soft glow halos, focus rings, the pulse-attention bloom. - `#FCEBD2` — Warm Bone: primary text on dark; the HUD's hairline strokes and labels. - `#7BC4B6` — Cooled Teal: the single, sparing complement — used ONLY for the type-system glow and `::` signatures, so types feel like a different "temperature" of magic. Roughly 5% of the palette by area. Contrast logic: warm-on-near-black for everything except types, which read teal-on-warm. The accent is the *blob itself*, not buttons. ## Imagery and Motifs Imagery is deliberately **minimal** — no photography, no stock illustration, no icon sets. Everything is generated geometry: - **The metaball monster.** A 4–7 ball metaball field rendered with SVG `feGaussianBlur` + `feColorMatrix` "goo" filter, or canvas marching-squares — a single connected gel that breathes, drips, and reaches toward the cursor. - **Flowing-curves motif everywhere.** Section dividers are not lines but slow sine-warped ribbons; the content channel has a wavy edge; the orbital nav path is a Bézier loop; loading states are a curve being drawn and erased. Curves are the *only* connective tissue on the page. - **Thunks as suspended droplets.** In the laziness section, little unevaluated `( _ )` bubbles hang in the blob; clicking one makes it "force" — it pops with a ripple and reveals its value. - **Composed arrows as braided tubes.** `f . g` shown as two glossy orange tubes that twist into one — a literal pipeline you can drag a droplet through and watch it transform. - **Type glow.** Type signatures float as faint teal isolines (like a heat map's contour rings) around the relevant blob region. - **HUD glyphs.** Tiny rounded-rect "screws", a reticle ring, a battery-like "laziness meter" — all drawn as soft 2px-stroke vector marks in Warm Bone, never filled icons. - **Grain of warmth.** A very subtle animated film-grain / noise overlay (low opacity) to keep the gradients from banding and to add organic shimmer to the gel. ## Prompts for Implementation Build this as a **single full-viewport narrative experience**, scroll-driven, with the HUD as a fixed shell and the blob world as the moving stage. Storytelling first; there is no funnel. - **Hero (skin):** Full-screen burnt-orange metaball blob, gently breathing (perlin-noise displacement on ball centers). It tracks the cursor — the nearest surface bulges toward the pointer with spring physics. Centered-ish over it, in Space Mono, the title `haskell.monster` with `λ` standing in for one letter; subtitle in Fredoka: "a friendly blob made of pure functions. poke it." The bottom-right "POKE" pad, when pressed, sends a visible ripple wave across the entire blob surface and the creature-status pod blurts a random one-liner ("ooh, side effect!", "i felt that — referentially."). - **HUD pods:** Four corner pods, each a rounded-rect with `backdrop` darken (not glass-frost — matte tint), 2px Warm Bone hairline, slightly inflated drop-shadow. Top-left status pod animates a "mood" word and a laziness meter that *never quite fills* (joke: it'll evaluate it later). Bottom-left REPL ticker continuously types `λ`-expressions in JetBrains Mono with a typewriter-effect, occasionally "evaluating" one with a small bloom. - **Navigation reticle (top-right):** 4–5 capsule pills on a Bézier orbit. Hover = magnetic pull + the pill swells; the active section pill does a slow **pulse-attention** breathing glow (scale 1.0↔1.06, halo opacity oscillation) so the eye always knows where it is. Clicking smooth-scrolls and the blob "leans" toward that section. - **Section transitions:** As you scroll, the monster *pinches off a droplet* that inflates to fill the content channel — implement as metaball ball-count animating up, then a sub-cluster scaling out while the parent recovers. Each section's prose lives in the wavy right-third channel; Fredoka body, Space Mono subheads, JetBrains Mono for any code. - **Laziness chamber:** Suspended `( _ )` droplets float in the blob; click to "force" — pop + ripple + reveal value, and the laziness meter ticks down a hair. Microcopy stays cheeky. - **Composition tube:** Two glossy tubes twist into one (`(.)`); user drags a small droplet in one end, watches it morph color/shape as it passes each function, exits transformed. Optional: a `>>=` variant where the droplet briefly splits and rejoins ("the burrito unwraps"). - **Type core:** Warmest part of the page; teal isolines bloom around the blob; hovering a value shows its inferred type as a teal `::` signature that draws on with path-draw-svg. This is the ONLY teal on the site — make it feel like a cooler, sacred magic. - **REPL playground (bottom):** The blob settles into a glass-tank shape; a real-feeling prompt where pre-baked expressions can be "run" and the blob reacts to each (a `map` ripples a wave; `filter` shrinks it; `foldr` collapses it to a droplet). End on the creature waving a pseudopod and a Fredoka line: "come back and poke me anytime." - **Motion language:** Everything springs and settles — no linear easing. Curves draw and erase for loaders. Subtle film-grain overlay at ~4% opacity. Respect reduced-motion by freezing the blob into a calm pose and disabling ripples (but keep it warm and alive-looking). - **AVOID:** CTA buttons, pricing blocks, stat/metric grids, testimonial rows, feature card-grids, hand-drawn doodles, frosted-glass panels, hero "Get Started" funnels. There is nothing to buy here — only a blob to befriend. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **Blobitecture as the literal subject, not a texture.** The entire page is one continuous metaball creature that you interact with; content is *extruded from the monster*, not laid into cards. Almost no site here treats curved gel geometry as the primary content surface (blobitecture sits at ~2% in the frequency analysis). 2. **HUD-overlay shell over a living simulation.** Fixed corner instrument pods + an orbital reticle navigation, with a wavy single-channel content tube — a deliberate rejection of the card-grid / centered-hero layout that ~85% of sites use. HUD-overlay layout is at ~2%. 3. **Burnt-orange monochrome with one sacred teal accent.** A warm, near-monochrome `#C7491B` world where the only complement (`#7BC4B6`) is reserved exclusively for the type system — semantic color, not decoration. Burnt-orange palette appears in only ~2% of designs; here it is the creature itself. 4. **Pulse-attention used as wayfinding, not alarm.** The breathing glow on the active nav reticle pill (a pattern in only ~3% of sites) plus the "laziness meter that never fills" gag tie the animation directly to the playful Haskell theme. 5. **Pedagogy through petting.** Functional-programming concepts (laziness/thunks, composition, monads, type inference) are taught as physical interactions with a squishy pet — flowing-curves motif as the only connective tissue, minimal generated imagery, zero photography or stock art. Chosen seed/style: **aesthetic: blobitecture, layout: hud-overlay, typography: mono, palette: burnt-orange, patterns: pulse-attention, imagery: minimal, motifs: flowing-curves, tone: playful** (matches "blobitecture fluid layout" / "sci-fi hud overlay stats" seeds from seeds.json). Avoided per frequency analysis: hand-drawn aesthetic (96%), glassmorphism (64%), photography imagery (99%), card-grid + centered layouts (~85%), gradient/warm-default palettes used generically, cursor-follow/parallax as the *only* idea — here they serve the blob simulation rather than standing in for design.