# Design Language for ppuzzle.net
## Aesthetics and Tone
ppuzzle.net is a **Victorian puzzle cabinet made digital** — the kind of thing a London gentleman's club might have commissioned in 1887 if electricity had arrived early and mechanical clockwork had been replaced by scrolling light. The aesthetic is `victorian-ornate` rendered without irony: not steampunk cosplay, but the genuine confidence of late-Victorian decorative authority. Ornament here is *structure* — the filigree frames are load-bearing, the dividing rules are information, the baroque flourishes are navigational wayfinding.
The tone is **authoritative** in the way a master puzzler's treatise is authoritative: declarative, unhurried, precise. No marketing language. No "discover your journey." The site speaks with the voice of a Victorian scientific society publishing its annual proceedings — the kind of document that assumes the reader is already interested and need not be persuaded. Every heading is a chapter title. Every paragraph is a considered statement.
The mood is a **firelit reading room** at approximately 9pm in November: terracotta walls, brass lamp-glow reflecting off polished mahogany, a glass display case containing crystalline mineral specimens laid on velvet, and a large folded puzzle-map spread flat on the centre table. The crystalline specimens are not decorative — they are the subject. Puzzle as gemological specimen: each facet is a logic surface, each cleavage plane is a rule system.
## Layout Motifs and Structure
The layout follows the **F-pattern** reading flow rigorously — but Victorian scholarship enforces it through *typographic convention* rather than interface convention. The F is not a grid; it is the natural eye-path of a reader encountering a scholarly folio page.
**Page architecture (desktop, 1200px canvas):**
- A **masthead band** full-width at top, containing the domain logotype in engraved-style letterpress Commissioner display, flanked by fine ornamental rules — this is the horizontal stroke of the F
- A **primary reading column** 620px wide, left-aligned starting at left margin — this is the vertical stroke of the F. The column holds all running prose and primary puzzle content.
- A **secondary annotation column** 280px wide, right side, separated from the primary by a 1px column rule with small ornamental dingbats at intervals — this is the abbreviated second horizontal stroke of the F, reserved for annotations, asides, and classification metadata
- A **deep footer** functioning as the colophon: typeset dense, justified, small caps, no links
**Spatial logic:** Content descends as a single unbroken scroll, no pagination, no tabbed sections. Horizontal rules (``) between sections are ornamental — 3px thick, decorated with a small centered crystalline-lozenge SVG divider (hand-drawn inline SVG, not a raster image). Vertical rhythm is strict 8px baseline grid. Section openings use a **decorative drop-cap** in a terracotta fill with a thin black stroke, set 3 lines high.
**Victorian frame device:** The masthead and the first fold of the page are enclosed in a decorative rectangular border built from tiled SVG corner-piece and straight-edge SVG segments — the same technique used in Victorian trade cards. The border is 3px double-line (outer 2px, inner 1px, gap 4px) in `#6B3A2A` (deep terracotta). The border does not appear below the fold; the page "breaks out" of the frame as the user scrolls, establishing that the frame is an entry portal, not a container.
**F-pattern reinforcement:** On scroll, the left-aligned primary column receives a subtle left-border accent line (2px, `#C4673A`) that trails the viewport — a Victorian "thumb tab" marking where reading is happening.
## Typography and Palette
**Typography — Google Fonts only, verified:**
- **Display and masthead: `Commissioner`** (Google Fonts variable, wght 100–900). Commissioner is a versatile humanist sans with a slightly broad, confident stance — at heavy weights it reads as engraved sans, at light weights as an airy caption. Set masthead `font-weight: 800`, `letter-spacing: 0.06em`, `text-transform: uppercase`, giving it the look of a Victorian institution nameplate. At 72–96px it commands authority without needing serifs.
- **Section headings: `Libre Baskerville`** (Google Fonts, regular + bold + italic). Baskerville is the canonical late-18th-century British typeface, still in active Victorian use by 1887. It pairs with Commissioner the way a secretary's handwritten label pairs with an engraved plate — different register, same authority. Set headings in `Libre Baskerville` regular, `font-size: clamp(22px, 3.5vw, 38px)`, with a fine hairline underline rule that extends to the column edge.
- **Body: `Commissioner`** variable at `font-weight: 340`, 18px / 28px leading on a strict 8px grid. Commissioner is rare enough in body copy usage (2% in corpus) that this is fresh. The body text is **fully justified** with `hyphens: auto` — Victorian typographers justified everything.
- **Annotations (right column): `Commissioner`** at `font-weight: 300`, 14px italic, `color: #8C5440` (mid terracotta). Right-column content is styled as marginalia.
- **Small caps and captions: `Commissioner`** at `font-weight: 500`, `font-variant: small-caps`, `letter-spacing: 0.1em`. Used for figure captions, classification labels, and the footer colophon.
**Palette — terracotta-warm, but unmistakably Victorian:**
| Role | Hex | Name |
|---|---|---|
| Background (page) | `#F5EDE0` | Vellum cream |
| Background (masthead) | `#2B1810` | Deep mahogany |
| Primary text | `#1E0F08` | Ink-black |
| Accent / drop-cap fill | `#C4673A` | Fired terracotta |
| Border / ornament | `#6B3A2A` | Deep terracotta |
| Annotation text | `#8C5440` | Terracotta mid |
| Divider / rule | `#A0785C` | Warm umber |
| Highlight hover | `#E8B99A` | Pale terra blush |
| Masthead text | `#F5EDE0` | Vellum (reversed) |
| Column rule | `#D4B8A0` | Aged linen |
The palette is **warm but not cozy** — vellum and mahogany read as a formal archive, not a farmhouse kitchen. The terracotta is the color of Roman tile unearthed from a dig, not a terracotta pot at a garden centre.
## Imagery and Motifs
**Imagery is exclusively hand-drawn ink illustration** — but the "hand-drawn" approach is Victorian scientific engraving, not whimsical sketch-art. Every illustration is a **copper-plate-style inline SVG**: crosshatched, precise, drawn as if for reproduction in a Victorian natural-history folio. This is the 1% of hand-drawn that has never appeared in the corpus as engraved scientific illustration.
**The illustration corpus (4–6 total, scattered through the primary column):**
1. **The Crystalline Puzzle Fragment** — A hand-drawn hexagonal crystal cluster (quartz formation), rendered as a 340×240 SVG with crosshatch shading at 45°. Used as the primary hero illustration immediately below the masthead, set inside the Victorian border frame. This crystal is the visual metaphor: puzzles have facets, cleavage planes, internal structure you can only see if you hold them to the light.
2. **The Dissection Map** — A hand-drawn plan-view illustration of a jigsaw puzzle mid-dissection, pieces scattered but catalogued with small Roman-numeral labels, like a Victorian archaeologist's site plan. Appears in the first major content section.
3. **The Magnifying Glass Over Grid** — Victorian scientific instrument illustration: a brass-handled magnifying glass held over a logic grid (5×5), the glass distorting the grid cells beneath it in SVG using a `feTurbulence` + `feDisplacementMap` filter. Appears in the annotation column, approximately 60% down the page.
4. **The Cabinet Interior** — A cross-section line-drawing of a Victorian display cabinet with crystalline specimens on velvet, labelled with small copper-plate-style text. Appears near the bottom of the page as a colophon illustration.
**Motifs — crystalline:**
The crystalline motif appears in four registers:
- **SVG ornamental dividers** between sections: a hand-drawn crystal lozenge (hexagonal facets, minimal fill, `stroke: #6B3A2A`)
- **Drop-cap background**: the terracotta drop-cap letter sits on a faint crystalline facet-pattern background (SVG `` of intersecting hexagons at 10% opacity)
- **Column rule dingbats**: small 5px crystalline diamond shapes (`◆`) in `#A0785C` placed at 200px intervals along the column divider rule
- **Hover state**: when the user hovers a puzzle-content block, a thin crystalline facet border (SVG `clip-path` hexagonal) appears around it, as if the block is being examined through a specimen case
**No photography. No raster images.** The only raster element permitted is the CSS `background-image` on the body: a very subtle, low-contrast repeating tile of an aged vellum paper texture at 4% opacity over `#F5EDE0`, adding micro-grain without competing with the SVG illustrations.
## Prompts for Implementation
Build ppuzzle.net as a **single unbroken folio scroll** — the experience of reading a Victorian natural-history monograph from first page to last, without chapters, without menus, without calls to action. The site *is* the object. The puzzle is the monograph. The monograph is the experience.
**Implementation vows:**
**Vow 1 — The Victorian border is a real SVG, not a CSS box.**
Build the masthead enclosure border as a `