# Design Language for haskell.quest ## Aesthetics and Tone haskell.quest is a **honey-lit herbarium** — a digital commonplace book where every page feels pressed between vellum, annotated by a botanist who also happened to understand monads. The site breathes the slow air of a Victorian cottage in late August: beeswax candles, dried lavender bundles strung across ceiling beams, dog-eared field guides stacked beside a cast-iron stove. The functional purity of Haskell is rendered not as sterile abstraction but as *natural law* — the lambda is a fern frond curling; the type system is a honeycomb's structural perfection; referential transparency is pressed botanicals that never fade. The mood is **nostalgic-retro** threaded with genuine tenderness. This is not parody nostalgia (no deliberate kitsch), but the real warmth of something made slowly and kept carefully. Visitors should feel they've discovered a hand-bound chapbook from someone who loved both wildflowers and pure functions equally. The visual language draws on **19th-century botanical illustration**: copperplate engravings, hand-lettered specimen labels, herbarium sheets with their pressed-and-mounted specimens. The hexagonal honeycomb grid is not arbitrary decoration — it echoes the architecture of efficiency that bees discovered before programmers: pure parallel construction, no wasted cell, perfect tessellation. Haskell's own elegance mirrors this. Color palette is warm amber and parchment: the tone of aged paper, beeswax, dried chamomile, and ink that has mellowed over decades. Never cold, never sharp. ## Layout Motifs and Structure **Hexagonal honeycomb grid** is the compositional spine. The entire page is constructed around tessellating hexagonal cells — not as decorative trim but as the actual layout container system. Content nodes (concept explanations, type signatures, code fragments, botanical illustrations) each inhabit a hexagonal frame. Cells cluster into organic colonies that grow and contract with scroll. **Spatial logic:** - **The Colony Map** — the hero section presents a large hexagonal cluster (7 cells in a centered flower pattern: 1 center + 6 surrounding) rendered as an SVG honeycomb. Each cell is a portal: hover causes the cell to fill with warm amber glow and reveal a phrase. The central cell holds the wordmark. - **Asymmetric colony drift** — below the hero, hexagonal cells do not lock to a strict grid but drift slightly organically (±12px translation, ±3° rotation per cell), as if the comb were drawn freehand. Cells gap with 6px between — exactly the thickness of a wax wall. - **Three-column honey-flow on desktop** — hexagons arrange into columns of 3, with the middle column offset by half a cell height (the natural honeycomb stagger). On mobile, single-column, cells stretch to full width with flat tops. - **Botanical margin annotations** — a fixed 72px left gutter on desktop holds vertical running text (upright, letter-spaced), illustrative vignettes of individual botanical elements (a single bee, a curled fern tip, a seed pod), and section indicators in the style of herbarium specimen labels. - **Counter-animate interplay** — as the visitor scrolls downward, certain hexagonal cells rise gently upward (parallax opposition), creating a sense that the comb is alive, breathing. The botanical illustrations in the margins drift *opposite* to the scroll direction, as if pinned to a different surface than the main content. - **Fold lines** — thin 0.5px lines in #C4A96A crossing the background at 60° angles (echoing the geometry of hexagon construction), faint enough to read as aged paper grain but present enough to feel structural. ## Typography and Palette **Typography (Google Fonts only — serif-revival tradition):** - **Primary display (wordmark and H1):** `Cormorant Garamond` (Google Fonts, variable wght 300→700, italic). Set at clamp(3.4rem, 8.5vw, 7.2rem), weight 400 italic for main wordmark. The long, narrow serifs and high contrast recall 19th-century scientific publication headers. Specimen labels and section titles in Cormorant Garamond SC (small-caps variant) weight 500 at 1.4rem with 0.18em letter-spacing. - **Secondary serif (body and annotations):** `EB Garamond` (Google Fonts, variable wght 400→800). Body text at 17px / 30px line-height, weight 400. Long-form explanatory prose and botanical field-note descriptions. Italic variant used for Latin botanical names and Haskell type signatures in text flow. - **Monospace (code specimens):** `Inconsolata` (Google Fonts, variable wdth/wght). All Haskell code fragments styled as herbarium specimen labels: set inside a hexagonal clip-path cell, background #F5EDD6, border 1px solid #C4A96A, at 14px / 24px line-height. The monospace face has enough warmth to feel at home among the serifs. - **Accent label face:** `Playfair Display` (Google Fonts). Used only for pull-quote callouts and the botanical specimen-label header text. Set at 2.2rem weight 700 with tight line-height (1.1), in #5C3A1E. **Palette — Honeyed Neutral:** | Name | Hex | Use | |---|---|---| | Aged Parchment | `#F7EDD8` | Primary background, page base | | Beeswax | `#E8C97A` | Hexagonal cell fill on hover, amber glows | | Deep Amber | `#C4843A` | Primary accent, borders, highlights | | Bark Brown | `#5C3A1E` | Primary text, headings | | Dried Chamomile | `#D4B97A` | Secondary borders, subtle dividers | | Forest Shadow | `#2C4A2E` | Botanical illustration ink, dark text variant | | Honeycomb Line | `#C4A96A` | Grid lines, fold marks, cell borders | | Soft Cream | `#FBF6EC` | Card interiors, elevated surfaces | | Antique Rose | `#C4856A` | Rare accent for emphasis, dried-flower notes | Typography sizing scale: Major Third (1.25) ratio from 16px base. All sizing in `clamp()` for fluid scaling. ## Imagery and Motifs **Botanical copperplate illustration is the exclusive visual vocabulary.** No photography. No icon libraries. No raster images. Every image is an SVG illustration executed in a single-weight engraving style: 1.2px hairline strokes in Forest Shadow (#2C4A2E), no fills except for the hexagonal cells themselves, with cross-hatching at 45° for shadow depth (parallel strokes 0.5px, 35% opacity). **Recurring illustration subjects:** - **The Honeycomb Cell** — the most recurring motif. Hexagonal frames appear as: page section dividers, image containers, pull-quote borders, code blocks. Every hexagon is hand-drawn-feel (slight irregularity, no perfect machine precision — paths have 0.3px jitter applied via SVG filter `feTurbulence`). - **Pressed Botanical Specimens** — each major content section is anchored by a botanical illustration: lavender sprigs, chamomile heads, oak-gall specimens (the historical source of iron-gall ink), honeybee with anatomical label lines, fern fronds with sori patterns. Each specimen is paired with a handwritten-feel label in Cormorant Garamond italic: genus, species, collection date, location. - **The Lambda Fern** — a custom SVG illustration where the Greek lambda (λ) is organically grown from a curling fern frond. Used as the site's secondary mark, appearing in the footer, section breaks, and as a watermark-layer at 6% opacity behind hero text. - **Type Signature Labels** — Haskell type signatures rendered as herbarium specimen cards: `fmap :: (a -> b) -> f a -> f b` inside a hexagonal cell with a botanical sprig in the corner and a handwritten annotation like *"found in: Functor class, habitat: any lawful container, notes: lifts function into context."* - **Honey Flow Animation** — a subtle SVG path animation of honey flowing in amber droplets along hexagonal edges. Runs on a 12-second infinite loop, `ease-in-out`, opacity 0.35. Visible only in the hero and section transition points, not continuously throughout. **Counter-animate system:** - Hexagonal cells in the main content grid animate **downward** as user scrolls down (drift: `translateY(+0.15 * scrollDelta)`), while botanical margin illustrations animate **upward** (`translateY(-0.22 * scrollDelta)`). - On the hero, the 6 surrounding cells gently orbit the center cell in opposite rotational directions: 3 cells clockwise at 0.008deg/frame, 3 cells counter-clockwise at 0.008deg/frame — imperceptibly slow, detectable only after 10+ seconds of stillness. - Hover on any hexagonal cell: the cell lifts (`translateY(-6px)`) with a honey-fill that sweeps from bottom-to-top (CSS clip-path animation, 320ms ease-out), and a faint wax-seal emboss shadow appears (`box-shadow: inset 0 -3px 8px rgba(92,58,30,0.18)`). ## Prompts for Implementation Build haskell.quest as a **slow specimen journey** — a single-page herbarium of functional programming concepts, structured as if the visitor is turning the pages of an annotated field guide. The page has **no traditional navigation bar** — instead a subtle left-margin botanical strip serves as landmark. There are no CTAs, no pricing sections, no hero buttons — only discovery. **Structural blueprint (7 movements):** 1. **THE FRONTISPIECE** — Full-viewport opening. A large hexagonal cluster (SVG, viewBox spans 100vw × 100vh) with 7 cells arranged in a flower pattern. Center cell: wordmark `haskell.quest` in Cormorant Garamond italic 400, clamp(3rem, 7vw, 6.5rem), color #5C3A1E. Surrounding 6 cells each contain one concept word: `pure`, `lazy`, `typed`, `elegant`, `total`, `fearless` — all in EB Garamond 400 italic, 1.8rem. Background #F7EDD8. At load, cells animate in one by one with a stagger (0ms, 120ms, 240ms... each) rising from `translateY(24px) opacity:0` to resting position. The Lambda Fern SVG mark sits at lower-left at 12% opacity. Honey-flow animation runs along the outer hexagon edges. 2. **THE FIELD NOTES — What is Haskell?** — Two-column layout: left column is a botanical illustration (a spreading oak-gall branch with label annotations), right column is a slim prose block in EB Garamond body. The text describes Haskell as if it were a discovered species: *"Haskell polymorphus — first catalogued 1990, habitat: purely functional environments, notable trait: referential transparency, conservation status: thriving."* The hexagonal grid underlies the text column. Section separator: a full-width line of tessellating tiny hexagons (12px wide, 1px stroke, 40% opacity). 3. **THE HONEYCOMB TYPOLOGY — Core Concepts** — A colony of 12 hexagonal cells (4×3 staggered grid), each representing a Haskell concept: Purity, Laziness, Type Classes, Monads, Functors, Algebraic Data Types, Pattern Matching, Higher-Order Functions, Type Inference, Immutability, Currying, List Comprehensions. Each cell: Cormorant Garamond SC label at top (the concept name), EB Garamond italic 16px description below, a tiny botanical vignette in one corner. On hover: amber flood fill from bottom, description text becomes #FBF6EC (light cream), the botanical vignette animates (a single leaf unfurls). Cells counter-animate against the scroll. 4. **THE SPECIMEN CABINET — Type Signatures as Pressed Flora** — A horizontal scroll track (overflow-x: scroll, scroll-snap: mandatory) of 8 specimen cards. Each card is hexagonal-clipped (CSS clip-path), holds a single Haskell type signature rendered in Inconsolata monospace against aged parchment, with EB Garamond italic annotations and a botanical sprig illustration. Cards slide in from the right as the section enters viewport. No scroll indicator — the cards' visible edge suggests continuation. 5. **THE POLLINATOR PATHS — Learning Pathways** — Three hexagonal columns representing beginner/intermediate/advanced learning paths, visually structured as three bee-flight paths (SVG dashed paths in #C4843A connecting hexagonal waypoints). Each waypoint hexagon contains a topic name. The paths animate on scroll-entry: the SVG stroke-dashoffset animates from full-length to 0 (drawing in), as if a bee is tracing its route in real time. 2.4s duration, ease-in-out. 6. **THE PRESSED ARCHIVE — Code Gallery** — Full-width dark section (background #2C4A2E, Forest Shadow) with code specimens displayed as botanical herbarium sheets: white cards (background #FBF6EC) with Inconsolata code, Cormorant Garamond specimen labels, and botanical illustration accents. Against the dark background, the cards appear luminous, as if lit from within. A subtle paper texture (SVG filter `feTurbulence` + `feDisplacementMap`) gives each card the feel of aged cartridge paper. 7. **THE COLOPHON — Footer / Closing** — Small, intimate. The Lambda Fern mark centered at 60% opacity. Below: `haskell.quest` in Cormorant Garamond SC 1.2rem, letter-spacing 0.25em. A single line of EB Garamond italic: *"A field guide to pure functions, kept carefully."* The background returns to #F7EDD8. No links grid, no social icons, no legal text — just the mark and the closing line, like a colophon in a hand-bound book. **Animation principles:** - All transitions: prefer `ease-in-out` curves; never linear - Honey-fill hover: CSS clip-path + background-color, 320ms - Cell entry animations: `@keyframes risingSpecimen` — `from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; }` - Counter-scroll: use `IntersectionObserver` + CSS custom properties to pass scroll delta; avoid heavy JS scroll listeners - Honey flow: SVG `` along hexagonal edge paths, not canvas - The orbit in hero: CSS `@keyframes orbit-cw` rotating cells around the center using `transform-origin` at center of cluster — no JS required **Implementation notes:** - Hexagonal CSS: use `clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)` for flat-top hexagons; for pointy-top use the rotated variant - The staggered grid: achieved with `margin-top: -[hex-height * 0.25]` on alternating columns, no CSS Grid hexagon hacks needed - SVG botanical illustrations: inline SVG, not `` tags, so they respond to CSS color variables (use `currentColor` for strokes so illustrations can invert in the dark section) - `feTurbulence` paper texture: apply as a shared SVG filter via `` in an invisible SVG in ``, reference via `url(#paper-grain)` in CSS `filter` on content blocks ## Uniqueness Notes **Differentiators from the existing design registry:** 1. **Hexagonal honeycomb as a true layout system, not decoration** — No other design in the registry uses hexagonal cells as the primary content container and grid unit. Hexagons appear as decorative elements elsewhere (backgrounds, patterns), but here the hexagon IS the grid: every content node lives inside a hexagonal frame, and the tessellation drives spatial composition. This is structurally unique. 2. **Counter-animate as a depth mechanic** — The planned seed's `counter-animate` pattern is implemented as a genuine parallax opposition system: main content hexagons drift one direction while botanical margin illustrations drift the opposite direction, creating a layered diorama effect. This dual-layer opposition is not present in the frequency analysis of existing designs, which favor either parallax (one-directional) or static scroll. 3. **Botanical copperplate illustration as Haskell metaphor** — The marriage of 19th-century natural history illustration with pure functional programming concepts is conceptually specific to this site. The herbarium framing (specimens, field notes, type signatures as pressed flora) creates a coherent narrative metaphor that has no equivalent in the registry: code as preserved specimen, types as taxonomic labels, pure functions as immutable pressed flowers. 4. **Honey-fill animation as primary interaction** — The amber flood-fill that sweeps upward through hexagonal cells on hover is a tactile, material interaction (liquid filling a vessel) rather than a standard color-transition hover. It communicates the wax-and-honey materiality of the design in motion, not just static appearance. 5. **No hero CTA, no navigation bar, no pricing** — The site is structured as an annotated field guide, not a product page. The absence of conversion-oriented UI (no buttons, no pricing tiers, no stat grids) is a deliberate design statement that the frequency analysis confirms is unusual: most registry designs include at least one CTA-heavy section. **Chosen seed/style:** aesthetic: cottagecore, layout: hexagonal-honeycomb, typography: serif-revival, palette: honeyed-neutral, patterns: counter-animate, imagery: generative-art (rendered as botanical copperplate SVG illustration), motifs: floral-botanical, tone: nostalgic-retro **Avoided patterns from frequency analysis:** - Photography (91% overuse in registry) — zero photography used; all imagery is SVG botanical illustration - Minimal/clean layouts (37% overuse) — deliberately rich, layered, textured — not minimal - Gradient-mesh (8%) — avoided; depth achieved via botanical layering, not color gradients