# Design Language for mystery.boo ## Aesthetics and Tone mystery.boo is a **pressed-flower grimoire** — a naturalist's field journal that has been quietly enchanted. The visual world sits at the exact intersection of a Victorian botanical press and a soft gothic herbarium: delicate, slightly haunted, smelling faintly of dried lavender and old paper. Every page element is a specimen that has been collected, pinned, and annotated by someone who studies plants by moonlight. The tone is **nostalgic-retro** but specifically rooted in the aesthetic of 19th-century natural history illustration — not the sepia of old photographs, but the chalky, sun-faded pastels of hand-tinted copperplate engravings. Think of a watercolor field guide left open on a windowsill for a decade: the colors have gentled, the paper has softened, the ink has dreamed into the fibers. The "mystery" of the domain is honored literally. Each scroll section reveals a new specimen that was previously hidden. Nothing is explained too quickly. The page holds secrets the way a closed field journal holds pressed leaves: you must open it, page by page, to discover what lives inside. Mood anchors: - A conservatory greenhouse at dusk, light turning amber - A hand-labeled apothecary cabinet with botanical specimens in glass jars - A child's nature journal from 1887, filled with drawings of ferns and mushrooms - Victorian Wardian cases (glass terrariums) filled with exotic fern species This is NOT dark gothic. It is **soft, curious, and slightly uncanny** — the mystery of natural forms that are beautiful precisely because they are strange. ## Layout Motifs and Structure The layout follows a **single continuous scroll** organized as a series of **specimen plates** — full-viewport sections that each reveal one botanical subject. Each plate fills the entire screen before yielding to the next, like turning the pages of a very large, very old folio. **Macro composition:** - Every plate section is `100vh` minimum, centered on a single specimen SVG illustration - The specimen illustration occupies 55–70% of viewport height, centered both axes - Text lives in the margins — small, annotated, handwritten-feeling — never dominating the illustration - Section transitions use a slow vertical reveal: the next plate rises from below like a new page being turned - No sidebars. No columns. One subject per plate, total focus. **Spatial grammar:** - Generous whitespace (the off-white of aged paper, `#F7F0E6`) is the dominant surface - All text floats in the negative space around illustrations like field notes in a journal's margins - The navigation is a thin vertical line on the left edge — a ribbon bookmark, not a standard nav bar - A faint grid of horizontal rules at 120px intervals creates the sense of a lined journal page beneath everything - Section labels use Roman numerals (I, II, III...) with hand-lettered style, positioned at the top-left corner of each plate **Scroll behavior:** - Scroll-triggered parallax: illustration drifts upward at 0.7× scroll speed, text at 1× (normal), background at 0.5× - On scroll entry: specimen illustration fades in from 0 opacity over 800ms with a gentle upward drift of 30px - Hover on any illustration: subtle lift of 8px over 200ms (box-shadow deepens from none to `0 16px 40px rgba(80,60,40,0.12)`) — the hover-lift pattern - The "page turn" between sections: a horizontal seam line sweeps across the viewport using CSS clip-path animation **Micro-layout of each plate:** 1. Roman numeral (top-left, small, `#B8A090`) 2. Botanical name in italics below the numeral (`Genus species`, small caps) 3. Central illustration — the SVG specimen — fills the heart of the plate 4. A brief annotation block positioned at bottom-right or bottom-left (alternating per plate) 5. A single decorative rule line, hand-drawn feeling (SVG path, 1px stroke, slightly wavy) ## Typography and Palette **Typography (Google Fonts only, verified):** - **Display / Specimen names**: [`DM Serif Display`](https://fonts.google.com/specimen/DM+Serif+Display) — italic, weight 400. Set at `clamp(3rem, 7vw, 6rem)` for specimen common names. DM Serif Display has elegant, organic serifs that evoke 19th-century natural history typefaces without being archaic. Used ONLY for the primary name of each botanical subject. - **Latin / Scientific names**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) — italic weight 300. Set at `clamp(0.9rem, 1.5vw, 1.2rem)` in true italics. Scientific binomials demand a font with genuine italic character — Cormorant Garamond's cursive italic strokes are historically authentic. - **Body / Annotations**: [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville) — weight 400, set at `clamp(0.85rem, 1.2vw, 1rem)`, line-height 1.8. Used for all annotation text, running at a small size with generous leading, like penciled notes in a field journal margin. - **Navigation / Labels**: [`Petit Formal Script`](https://fonts.google.com/specimen/Petit+Formal+Script) — weight 400, used ONLY for the site wordmark `mystery.boo` and section-divider labels. A flowing copperplate-style script that evokes the hand-lettered labels on Victorian specimen jars. - **Numerals / Taxonomy codes**: [`Spectral`](https://fonts.google.com/specimen/Spectral) — weight 200, for Roman numeral section markers and taxonomy classification codes. Spectral's ultra-light weight at large sizes creates ghostly, structural markers. **Color Palette:** | Role | Name | Hex | |------|------|-----| | Page ground | Aged Vellum | `#F7F0E6` | | Primary text | Ink-brown | `#3D2B1F` | | Accent / rules | Dusty Rose | `#C9A0A0` | | Botanical green | Sage Mist | `#8FAE8B` | | Botanical accent | Wisteria Pale | `#B8A8C8` | | Soft highlight | Butter Cream | `#F0E6C8` | | Deep shadow | Umbra | `#2A1F18` | | Margin tint | Blush Wash | `#EDD8D0` | The palette is strictly pastel — no saturated colors anywhere. Every botanical specimen is rendered in the same dulled, sun-faded palette, as if the pigments have been sitting in a drawer for 130 years. The SVG illustrations use 2–3 colors maximum per specimen: one leaf green (Sage Mist), one accent (Dusty Rose or Wisteria Pale), and Ink-brown for line work. ## Imagery and Motifs **All imagery is line-illustration as inline SVG** — no photography, no raster images, no icon fonts. Each botanical specimen is drawn as a single-color or two-color SVG with: - Stroke-based line work: 1.2px stroke, no fills (or very light flat fill at 15% opacity) - Organic, slightly imperfect paths — not geometric regularity but hand-drawn feeling - Cross-hatching or stippling as texture (SVG patterns, not raster) - Each illustration has a visible pin or mounting point at the top, evoking a pressed specimen on display board **Specimen roster (6 botanical subjects, one per plate):** 1. **Fern frond** (*Polypodium vulgare*) — the opener. A large curving frond with individual pinnae extending from a central rachis. Classical fern shape, widely recognizable. Sage Mist fill at 12% + Ink-brown stroke. 2. **Moonflower** (*Ipomoea alba*) — night-blooming morning glory. A single open bloom with radiating veins, shown with twisting vine tendrils. Wisteria Pale fill at 15% + Ink-brown stroke. The "moon" connects to mystery. 3. **Mandrake root** (*Mandragora officinarum*) — the uncanny specimen. A forked root with anthropomorphic silhouette, surrounded by dark waxy leaves and small bell flowers. Dusty Rose for flowers + Ink-brown lines. This is the "mystery" specimen — slightly eerie in a charming way. 4. **Night-blooming cereus** (*Selenicereus grandiflorus*) — ornate cactus bloom that opens only at night, shown as complex overlapping petals. Multi-layer SVG with Butter Cream inner petals + Sage Mist outer + Ink-brown line work. 5. **Deadly nightshade** (*Atropa belladonna*) — small, perfect flowers and berries. The leaf-organic motif fully expressed — flowing heart-shaped leaves with prominent veins, pendant purple-to-white flowers, small spherical berries. Wisteria Pale for flowers. 6. **Mistletoe** (*Viscum album*) — the parasitic plant. Waxy oval leaves in pairs, translucent white berries. A gift-plant that is also poisonous. Closes the herbarium with ambiguity. Sage Mist for leaves + Butter Cream for berries. **Recurring motifs:** - **Mounting pins**: small SVG circle + vertical line at the top of each illustration, in Dusty Rose - **Annotation arrows**: hand-drawn SVG paths pointing from text to illustration details - **Specimen tags**: small rectangle in Butter Cream with Ink-brown border and text, hanging from a thin string - **Page foxing**: subtle SVG texture of soft rust-colored irregular dots scattered near corners, suggesting age spots on old paper - **Leaf vein networks**: used as decorative section dividers — a single large leaf with veins that branch across the full viewport width ## Prompts for Implementation **The story to tell.** A visitor opens a mysterious herbarium discovered in a forgotten greenhouse. The herbarium belongs to an unnamed naturalist who collected plants that bloom only at night, plants with folklore attached, plants that are beautiful and lethal. As the visitor scrolls, each page of the herbarium is revealed. The naturalist's annotations appear, written in small italic text. The mystery is never explained — it is suggested, specimen by specimen, note by note. **Structural blueprint (6 plates + intro/outro):** **COVER — `mystery.boo`** Full viewport. Cream vellum background. The wordmark `mystery.boo` in Petit Formal Script at `clamp(3rem, 8vw, 7rem)`, centered, with a decorative botanical border of small SVG leaf-and-tendril motifs framing it like a title page from an 1890 field guide. Below the wordmark, a single italic line in Cormorant Garamond: *"A private herbarium of curious specimens"*. No call to action. No navigation visible except the thin ribbon bookmark on the left edge. The cover fades in over 1.2s on load. **PLATE I — Fern Frond** The first reveal. As the visitor scrolls past the cover, the fern frond illustration rises from below the viewport edge over 900ms. Annotation text appears at left, 300ms after illustration is fully visible. The plate background is slightly cooler Aged Vellum (`#F5EFE8`) to subtly signal "page turned." **PLATE II — Moonflower** Background warms slightly to `#F8F1E8`. The moonflower illustration is larger than the fern — it should feel like turning to a more elaborate plate. Tendrils extend beyond the central illustration frame, creating organic overflow into the margins. The annotation mentions nocturnal blooming habits. A faint moon SVG (3px stroke circle, 20% opacity Wisteria Pale) floats in the upper-right corner. **PLATE III — Mandrake Root** The pivot plate — this is where "mystery" deepens. Background cools to `#F2EBE4`. The mandrake illustration is oriented so the root's anthropomorphic fork faces the viewer directly. The annotation, in Libre Baskerville 0.9rem italic, reads a fragment of medieval herbalism lore. A small `⚠` in Dusty Rose appears next to the annotation — a Victorian-style caution mark. Hover on the illustration: a second annotation appears (opacity 0→1 over 300ms) describing the root's mythological properties. **PLATE IV — Night-Blooming Cereus** The most ornate plate. Full-height illustration. The complex overlapping petal layers are animated with staggered SVG stroke-dashoffset drawing on scroll entry — each petal layer draws itself over 600ms, staggered by 80ms per layer. The background shifts toward a very faint warm pink `#F9F0E9`. This plate has two annotations: one at top-left (blooming schedule) and one at bottom-right (discovery history). **PLATE V — Deadly Nightshade** The leaves dominate this plate — the leaf-organic motif at full expression. Large, flowing, veined leaves fill 80% of the plate, with small pendant flowers and berries in the remaining 20%. The background is the coolest in the sequence: `#F0ECE8`. The annotation is sparse — just the plant's historical uses. A small "handle with care" stamp in Dusty Rose, rotated 12°, positioned in the upper-right corner, evoking apothecary warning labels. **PLATE VI — Mistletoe (Closing)** The final plate. The mistletoe wreath forms a gentle circle, framing a small central text block: *"The naturalist's cabinet is now closed."* Below, in very small Cormorant Garamond: *"Return when the moon permits."* This plate fades to a slightly darker Aged Vellum (`#EDE5D8`) — as if the greenhouse lights are dimming. After 3 seconds of inactivity on this plate, the mounting pins on the illustration gently pulse (scale 1→1.15→1, 2s ease-in-out, infinite) — the only looping animation in the entire page. **CSS / JS implementation notes:** - Use `IntersectionObserver` (threshold: 0.3) for all scroll-triggered animations — no scroll event listeners - CSS custom properties for all palette values — single source of truth - Each plate is a `
` with `min-height: 100vh` and `display: flex; align-items: center; justify-content: center` - Illustration SVGs are inline (not ``) for full CSS animation access - The hover-lift pattern: `.specimen-illustration { transition: transform 200ms ease, box-shadow 200ms ease; } .specimen-illustration:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(80,60,40,0.12); }` - Parallax: use CSS `transform: translateY()` driven by a single `requestAnimationFrame` loop that reads `window.scrollY` — only runs when page is in motion (use `passive: true` scroll listener to set a dirty flag, rAF checks dirty flag) - Fonts loaded via `@import` from Google Fonts: DM Serif Display (400i), Cormorant Garamond (300i), Libre Baskerville (400), Petit Formal Script (400), Spectral (200) - No JavaScript frameworks. Vanilla HTML/CSS/JS only. - The left-edge ribbon bookmark: a `