# Design Language for ppuzzl.net ## Aesthetics and Tone ppuzzl.net is a puzzle site wearing the coat of a forgotten curiosity shop — part goblin's hoard, part Victorian apothecary back-room, part nostalgic afternoon in a grandparent's attic. The aesthetic is **goblincore-meets-botanical-retro**: earthy and sensory, a place where objects have history and every puzzle feels like unearthing something half-buried in moss. The tone is **nostalgic-retro** without irony — warm, tactile, sincere. This is not camp or pastiche. It is the genuine pleasure of old things: the weight of a wooden puzzle box lid, the smell of aged linen paper, the particular amber of late-afternoon light coming through amber glass. The site never shouts; it murmurs and invites you closer. Mood board: a greenhouse potting shed in October — terracotta pots, dried botanical specimens tacked to wooden boards, amber glass apothecary jars, handwritten labels in faded ink, the soft creak of floorboards, aurora-tinged window glass catching the last light. The emotional arc of a single scroll is: *discovery → curiosity → delight → belonging*. A visitor should feel they have stumbled into something that was waiting specifically for them. ## Layout Motifs and Structure The structure is **minimal-navigation** taken literally: no top navigation bar, no sidebar, no hamburger menu. The site is a single vertical scroll that functions as an unfurling scroll of botanical field notes — each section is a "specimen entry" with its own marginal annotation space. **Primary grid:** A single centered column of 660px maximum width, flanked by 180px "margin" zones on each side at desktop. The margins hold ornamental annotations — small botanical SVG sketches, handwritten-style labels, page-edge decorations — that drift subtly on parallax as the user scrolls. The column itself is clear and readable. **Parallax architecture (three-layer):** - Layer 1 (background): Soft aurora-light wash gradient that shifts hue very slowly — muted teal-to-amber spectrum — as the user scrolls. The gradient does not move fast; it breathes. - Layer 2 (mid): Large botanical illustration plates at 15% opacity that scroll at 0.4× document scroll speed, creating depth without distraction. - Layer 3 (foreground): The actual text column, scrolling at 1× — normal flow. The parallax is purely decorative depth, never obscuring content. **Section rhythm:** Each section begins with a small decorative header ornament (a pressed-fern motif rendered in SVG ink-line) and a drop cap in Libre Baskerville italic. Sections breathe with 10vh top-margin between them. No section feels crowded. **Aurora accent strip:** A single full-width aurora-lights element — a semi-transparent horizontal band of aurora gradient (#5B8FA8 → #A8B89C → #C87C52) at roughly 30% opacity — appears once at the fold break between the hero and the first puzzle section. It is the site's single most visually distinctive structural element. ## Typography and Palette **Typography:** - **Primary body serif:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), weight 400 and 400 italic. Used for all body copy, drop caps, and the wordmark. At 18px/1.75 line-height. Libre Baskerville carries the refined authority of a 19th-century field journal — narrow counters, sturdy serifs — without feeling stiff. - **Display / headings:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weight 700 italic. Used sparingly: section frontispiece titles only, set at clamp(2rem, 5vw, 4rem). The high-contrast stroke variation of Playfair Display is the typographic equivalent of a copperplate botanical plate caption. - **Marginal annotations / labels:** [Caveat](https://fonts.google.com/specimen/Caveat), weight 400. Used at 13–14px for margin notes, specimen labels, and decorative secondary text. Gives the handwritten-in-pencil quality of a naturalist's field notes. - **No sans-serif typefaces** — the corpus heavily favors sans; this site is serif-exclusive throughout. **Palette — Terracotta Warm:** | Role | Name | Hex | |------|------|-----| | Page ground | Parchment | `#F5EDD9` | | Primary text | Inkwell | `#2C1F14` | | Terracotta accent | Fired Earth | `#B8572A` | | Secondary accent | Old Sage | `#7A8F5F` | | Pale aurora teal | Mosswater | `#7FADB5` | | Aurora amber | Amber Glass | `#C8943A` | | Aurora highlight | Twilight Blush | `#C2788A` | | Surface wash | Cream Veil | `#F0E6C8` | The background `#F5EDD9` reads as aged vellum — warm enough to feel physical, pale enough not to tire the eye. The terracotta `#B8572A` is used for pull-quotes, ornamental rules, and hover states. Old Sage `#7A8F5F` marks interactive elements (puzzle category links) without feeling digital. The three aurora hues appear only in the gradient band and in the parallax background wash. ## Imagery and Motifs **Botanical illustration plates:** Three to five large-format botanical illustrations used as the site's primary imagery, rendered in a style faithful to 18th-century copper-engraved botanical prints — fine hatch-work lines, formal taxonomic composition, each plant specimen centered on an off-white field. These are the dominant visual anchors. They appear behind content at low opacity in the parallax mid-layer, and at full opacity in dedicated "specimen plate" breakpoints between puzzle sections. **Aurora-lights motif:** The aurora is treated as a natural atmospheric phenomenon rendered in the palette of aged glass — not the neon cyan/magenta of modern aurora photography. The site's aurora is the amber-and-sage aurora of antique hand-painted glass, the kind of aurora that appears in Victorian-era scientific illustrations of atmospheric optics. The gradient band at the fold is the primary expression; subtle aurora-colored halos also appear behind each botanical plate. **Goblincore objects (SVG illustrations):** Small decorative SVG line-drawings scattered in page margins and section transitions — a skeleton key, a ceramic shard, an acorn cap, a trilobite fossil, a moth with spread wings, a glass inkwell. Each is 40–60px, rendered as single-stroke ink-line in `#2C1F14`, requiring no external assets. These are the "goblin hoard" signature of the design — objects found and treasured, never precious. **Puzzle-specific motifs:** The site's puzzle imagery uses physical puzzle piece forms — hand-drawn, irregular, like pieces cut from wood rather than stamped from cardboard — as section dividers and category markers. These replace the typical tab or card UI component. A puzzle piece outline (SVG) marks each category. **Texture overlay:** A single full-page grain texture overlay at 6% opacity (CSS noise pattern via SVG `feTurbulence`) gives the parchment surface tactility without a raster image. ## Prompts for Implementation **The story to tell:** A visitor has found an old puzzle cabinet in a curiosity shop. The shop belongs to no one in particular — or perhaps it belongs to the moss and the fossils and the pressed flowers that crowd every shelf. The puzzles here are not games in the modern sense; they are objects with histories. Scrolling through the site is the experience of opening drawer after drawer of the cabinet, each one revealing something unexpected. **Parallax implementation:** Use CSS custom properties for scroll position (`--scroll-y` updated by a single requestAnimationFrame loop). Apply `transform: translateY(calc(var(--scroll-y) * -0.4))` to the botanical mid-layer container. Apply `filter: hue-rotate(calc(var(--scroll-y) * 0.02deg))` to the aurora background gradient so it shifts almost imperceptibly as the user scrolls — the aurora "moves" over a very long scroll distance. **Aurora gradient band:** A `
` positioned `position: sticky; top: 100vh` so it appears at the fold and remains anchored as the user crosses that boundary. Background: `linear-gradient(135deg, #7FADB5 0%, #7A8F5F 30%, #C8943A 60%, #C2788A 85%, #B8572A 100%)` at `opacity: 0.28`. Blur it with `filter: blur(40px)` and let it span 120vw to prevent edge lines. **Typography rhythm:** Set `--measure: 60ch` on the main column. Use `font-feature-settings: "kern" 1, "liga" 1, "onum" 1` to enable old-style numerals in Libre Baskerville — these look correct on a botanical-retro page, as if the puzzle numbers were set in lead type. Drop caps via CSS `::first-letter` pseudo-element, Playfair Display 700 italic, 3.2em, float left, line-height 0.85. **Goblincore object scatter:** On page load, place 8–12 SVG goblincore objects in margin positions using a seeded pseudo-random layout (deterministic `sin(i * 2.3 + 1.7)` formula, no JS Math.random — the layout is the same every load, like objects placed with care rather than scattered randomly). Each object gets a gentle `animation: drift 8s ease-in-out infinite alternate` with `transform: translateY(±4px) rotate(±2deg)`. **Puzzle category cards:** No card-grid. Instead, each puzzle category is a "specimen entry" — a horizontal rule of terracotta (`#B8572A`, 1px), followed by a Caveat annotation in the left margin naming the category, then a Playfair Display heading, then Libre Baskerville body text. The puzzle piece SVG icon sits in the right margin. This is not a standard card or grid; it is typeset prose that happens to describe puzzles. **No CTAs, no pricing blocks, no stat-grids.** The site does not sell with urgency language. Puzzle counts, difficulty ratings, and other metadata appear as marginalia — small Caveat labels in the outer margin column — not as prominent badges or numbers. **Hover states:** On botanical plate images, hovering shifts `filter: sepia(0.3)` to `filter: sepia(0)` with a 600ms ease — the plate "comes alive" as if under better light. On goblincore objects, hovering shifts the rotation by 5deg with a 400ms ease. These are the only interactive animations; there are no expanding panels, no modals, no loading spinners. **Scroll entry animations:** Each specimen entry fades in with `opacity: 0 → 1` and `translateY(20px → 0)` over 500ms as it enters the viewport (IntersectionObserver). No bounce, no spring — these are old objects appearing from shadow, not bouncing into existence. ## Uniqueness Notes 1. **Baskerville-refined at 2% corpus frequency, used here in full serif-only commitment.** The frequency report shows `baskerville-refined` at just 3% and the broader corpus dominated by sans-grotesk and variable-fluid typography. This site refuses every sans typeface — not a single letter in Inter, Outfit, or DM Sans. Three distinct serif/script faces (Libre Baskerville, Playfair Display, Caveat) do all typographic work, creating a register of body/display/handwritten that is rare in the corpus. 2. **Goblincore aesthetic at 0% current usage — the only goblincore site in the corpus.** The frequency report shows zero designs using goblincore as their aesthetic key. This site treats goblincore not as chaos or maximalism but as *attentive curation of found objects* — a quieter, more nostalgic reading of the aesthetic than the "cluttered forest witch" stereotype. The minimal-navigation layout constraint keeps the goblincore sensibility from becoming overwhelming. 3. **Terracotta-warm palette at 2% — the aurora treatment is novel.** `terracotta-warm` is among the rarest palettes in the corpus at 2%. Crucially, this design's aurora-lights motif is rendered in the terracotta palette (amber glass, old sage, twilight blush) rather than the standard cyan-magenta aurora. No other design in the corpus uses `aurora-lights` with a warm terracotta palette; the usual aurora designs are cool and spectral. 4. **Parallax used as a breathing environmental layer, not a hero-section trick.** The frequency report shows parallax appearing but the corpus pattern is almost always the "parallax hero image" cliché — a large background image scrolls at a different rate than the foreground text on the landing section only. This site deploys parallax as a continuous three-layer environmental system throughout the entire page length, so the parchment, botanical plates, and aurora all move at different speeds for the full scroll journey. 5. **Puzzle-specific marginal layout — no card grids.** The corpus uses card grids at very high frequency for any site with categorized content. ppuzzl.net replaces every card grid with a typeset specimen-entry format borrowed from botanical monographs, making the content layout itself a design statement about the nature of the puzzles as physical, historical objects rather than digital game tiles. **Seed:** aesthetic: goblincore, layout: minimal-navigation, typography: baskerville-refined, palette: terracotta-warm, patterns: parallax, imagery: botanical-illustration, motifs: aurora-lights, tone: nostalgic-retro **Avoided from frequency analysis:** sans-grotesk (6% — avoided), variable-fluid (6% — avoided), card-grid layouts, hero-only parallax, centered CTA stacks, gradient backgrounds as primary palette.