# Design Language for ppuzzl.net
## Aesthetics and Tone
ppuzzl.net is a scholarly-intellectual puzzle domain rendered through the lens of a Victorian-era botanical atlas that has been pressed between frosted glass plates and illuminated from behind. The aesthetic is **botanical** -- not the trendy houseplant-on-a-shelf variety, but the rigorous, obsessive, almost devotional botanical illustration tradition of 18th and 19th century naturalists like Ernst Haeckel and Maria Sibylla Merian. Every visual element references the language of taxonomy: pressed specimens, labeled diagrams, cross-sections, annotated margins. The tone is **scholarly-intellectual** -- the site speaks with the quiet authority of a university library's rare book collection, where knowledge is not broadcast but discovered. There is no eagerness to sell or convert; instead, the site presents itself as a cabinet of curiosities waiting to be opened. The mood sits at the intersection of reverence and mystery: a puzzle whose pieces are botanical fragments scattered across frosted translucent surfaces, each piece revealing more of the underlying pattern when the viewer engages deeply.
## Layout Motifs and Structure
The layout uses a **full-bleed** approach where content stretches edge-to-edge with no visible container boundaries, creating the sensation of peering into an infinite herbarium. The structural metaphor is a series of frosted glass plates stacked in depth, each plate holding different botanical specimens and text fragments.
**Primary Grid: Overlapping Botanical Plates**
The page is composed of 5-7 full-viewport sections, each functioning as a translucent "glass plate" that slides into view. Within each plate, content is arranged using a **loose asymmetric placement** inspired by how botanists pin specimens to mounting boards -- elements are positioned with apparent casualness but careful balance. CSS Grid with `grid-template-areas` defines named regions ("specimen", "annotation", "margin-note", "cross-section") that shift between sections.
**Margin Annotations:**
A persistent 120px right margin (collapsing to a slide-out panel on mobile) contains running annotations, taxonomic classifications, and navigational cues -- styled as handwritten margin notes in a scholarly text. This margin uses `position: sticky` and scrolls at 0.7x the main content speed, creating a parallax dialogue between primary content and marginal commentary.
**Section Transitions:**
Between full-bleed sections, a 40px gap appears containing a thin botanical line drawing (a vine, a root system, a branching pattern) rendered as an inline SVG that draws itself as it enters the viewport. These interstitial dividers function as visual "joints" connecting the glass plates.
**Depth Layering:**
Three z-index layers operate simultaneously: (1) the deepest layer holds large-scale duotone botanical photography at 15% opacity as atmospheric texture; (2) the middle layer contains the primary content panels with frosted-glass `backdrop-filter: blur(12px) saturate(1.2)`; (3) the foreground layer holds interactive elements, hover states, and annotation callouts. This three-layer sandwich creates genuine optical depth without relying on drop-shadows.
## Typography and Palette
**Typography:**
- **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- a refined, high-contrast serif with delicate hairlines that evoke engraved botanical plate titles. Used at weights 300-600, sizes 2.5rem to 5.5rem. Letter-spacing: 0.08em for that engraved-title spaciousness. Headings are set in small-caps (`font-variant: small-caps`) to reinforce the scholarly register.
- **Body / Prose:** "Source Serif 4" (Google Fonts) -- a humanist serif with warm, readable proportions descended from the Enlightenment printing tradition. Weight 400 for body, 600 for emphasis. Size 1.125rem, line-height 1.75. The generous leading creates breathing room that mirrors the white space of a well-typeset academic journal.
- **Annotations / Margin Notes:** "Caveat" (Google Fonts) -- a handwritten font with natural irregularity, used exclusively in the margin annotation system and specimen labels. Size 0.875rem, weight 400. This creates a palimpsest effect: the formal printed text in the center, the scholar's personal notes in the margins.
- **Taxonomic Labels / Data:** "IBM Plex Mono" (Google Fonts) -- a humanist monospace used only for specimen identifiers, puzzle coordinates, and classification codes. Weight 400, size 0.8rem, letter-spacing 0.05em. Applied sparingly to maintain the botanical-catalog conceit.
**Palette: Translucent Frost**
The palette draws from the experience of viewing pressed botanical specimens through frosted glass in cold morning light:
| Role | Color | Hex | Description |
|------|-------|-----|-------------|
| Deep Background | Midnight Herbarium | #0D1B2A | The darkness behind the glass plates -- a near-black navy that absorbs light |
| Glass Surface | Frost Veil | #E8EDF2 | The frosted glass itself -- a cool, barely-blue white at 85% opacity |
| Warm Accent | Pressed Sepia | #A67C52 | The aged brown of pressed-flower paper and leather bindings |
| Cool Accent | Specimen Teal | #3D8B8B | The verdigris green of aged copper specimen pins and botanical ink |
| Highlight | Pollen Gold | #D4A843 | A warm ochre-gold for interactive states, hover effects, and key labels |
| Text Primary | Ink Carbon | #1C2833 | Dense, warm black for body text -- never pure #000 |
| Text Secondary | Faded Notation | #6B7B8D | Desaturated blue-gray for secondary text, timestamps, margin notes |
| Frost Overlay | Alpine Mist | #F0F4F8 | Used as rgba(240,244,248,0.7) for the translucent panel backgrounds |
All panel backgrounds use `background: rgba(240,244,248,0.72)` paired with `backdrop-filter: blur(14px) saturate(1.15)` to achieve the translucent-frost effect. Interactive elements transition from Frost Veil to Pollen Gold on hover with a 300ms ease-out curve.
## Imagery and Motifs
**Duotone Botanical Photography:**
All photographic imagery is processed through a **duotone filter** mapping shadows to Midnight Herbarium (#0D1B2A) and highlights to Specimen Teal (#3D8B8B). This creates a unified cyan-dark tonal range that makes every photograph feel like a cyanotype print -- the historical photographic process used by botanist Anna Atkins to catalog plant specimens. CSS implementation: `filter: grayscale(100%) sepia(30%) hue-rotate(160deg) saturate(0.7)` on `` elements, with a `mix-blend-mode: multiply` overlay of the teal color.
**Retro Pattern System:**
Decorative patterns reference **retro-patterns** from 1960s-70s botanical textbooks and scientific publications:
- **Cross-hatch fills:** SVG pattern tiles using 45-degree line hatching at 2px intervals, applied as backgrounds to secondary panels. Stroke color: rgba(61,139,139,0.15).
- **Dot-grid specimens:** A regular dot grid (4px circles at 24px intervals) used as the background of "specimen mounting" areas where interactive puzzle pieces are displayed. Evokes the ruled grids of scientific illustration boards.
- **Vine border frames:** Thin botanical vine illustrations (hand-drawn SVG paths) used as decorative frames around key content blocks. These are not heavy ornate borders but delicate, single-weight line drawings that animate via `stroke-dasharray` and `stroke-dashoffset` on scroll entry.
- **Tessellation puzzles:** Since this is a puzzle domain, background patterns occasionally shift into Escher-like tessellations where botanical leaf shapes interlock into puzzle-piece geometries. These are subtle, appearing at ~8% opacity as section backgrounds.
**Motif: The Herbarium Page**
Each major content section is framed as a "herbarium page" -- a translucent panel with a thin 1px border in Pressed Sepia (#A67C52), a small taxonomic label in the upper-right corner (using IBM Plex Mono), and a subtle paper-grain texture overlay achieved via CSS: `background-image: url('data:image/svg+xml,...')` containing a procedural noise pattern at 3% opacity.
**Motif: Puzzle Interlocking**
The domain name "ppuzzl" demands a puzzle motif. This manifests as: (1) content panels that have one irregular edge -- a single puzzle-tab protrusion or indentation cut with CSS `clip-path: path(...)`, suggesting the panel is a puzzle piece; (2) hover interactions where adjacent panels subtly shift 4-6px toward each other, as if magnetically drawn to interlock; (3) a decorative SVG puzzle-piece outline that appears in the footer area, composed entirely of botanical elements (leaves forming the tabs, stems forming the edges).
## Prompts for Implementation
**Full-Screen Botanical Narrative Experience:**
The site unfolds as a vertical journey through a botanical collection. The hero section is a full-viewport frosted panel with the domain name "ppuzzl.net" typeset in Cormorant Garamond small-caps at 5rem, positioned slightly above center. Behind the frost, a large duotone botanical photograph (a fern frond, a pressed flower arrangement) is visible at 40% opacity, slowly drifting upward at 0.3px/s via a CSS `@keyframes` translateY animation. A single handwritten annotation in Caveat ("specimen no. 001 / unclassified") sits in the bottom-right margin.
**Elastic Scroll Interactions:**
All scroll-triggered animations use **elastic easing** (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`) to create a springy, organic feel that contrasts with the scholarly aesthetic. When content panels enter the viewport, they arrive with a slight overshoot (translating from `translateY(60px)` to `translateY(-4px)` to `translateY(0)`), as if being pressed into place by an unseen hand. This elastic motion should feel like pressing a botanical specimen onto its mounting page -- a gentle bounce as it settles.
**Frosted Glass Layer System:**
Implement the three-depth-layer system using CSS `isolation: isolate` on the main container. The background botanical images use `position: fixed` and `z-index: 0`. Content panels use `position: relative`, `z-index: 1`, and the full `backdrop-filter` frost treatment. Foreground interactive elements use `z-index: 2` with `pointer-events: auto` while the frost panels use `pointer-events: none` on non-interactive regions to allow click-through to background botanical images for a lightbox reveal.
**SVG Vine Divider Animation:**
Between sections, a thin vine SVG (single `` element, total length ~800px) draws itself using: `stroke-dasharray: 800; stroke-dashoffset: 800;` transitioning to `stroke-dashoffset: 0` over 1.8s with elastic easing when the divider enters 30% of the viewport via IntersectionObserver. The vine grows from left to right, with small leaf-shaped `` elements at branch points that scale from 0 to 1 with a 200ms staggered delay.
**Puzzle-Piece Panel Clips:**
At least 3 content panels should use `clip-path: path(...)` to create an irregular puzzle-tab edge on one side. The clip-path coordinates should be calculated relative to the panel dimensions. When two adjacent panels are both visible, a subtle CSS animation nudges them 4px closer together over 600ms, suggesting they want to connect. This uses `IntersectionObserver` to detect co-visibility and toggles a class that applies `transform: translateX(4px)` or `translateX(-4px)`.
**Annotation Margin System:**
The right margin annotation track uses `position: sticky; top: 20vh` and scrolls at a different rate than the main content. Each annotation is a `