# Design Language for PPUZZL.bid ## Aesthetics and Tone PPUZZL.bid is a **Victorian-ornate auction house for puzzles that have not yet been solved** — a centered, hand-bound parlour where each lot is a problem still missing its key, and the bids are not money but *guesses, conjectures, and partial proofs*. The `.bid` TLD is treated literally: this is an auction floor, but the auctioneer is a fog-soft, pastoral-romantic ghost in a damp greenhouse, and every lot in the catalogue is a half-resolved riddle resting on a velvet pillow under glass. The overall mood is **pastoral-romantic** at its core, but rendered in a strictly **cool-grays** palette — no sepia, no warmth, no honey. Picture an English country estate in November: low fog over a topiary garden, slate roofs wet with rain, oxidised silver candelabra on a rosewood writing desk, and a single ledger open to a column of bids written in graphite. The "puzzle" of PPUZZL is not a Rubik's cube or a crossword — it is the 19th-century romantic sense of *enigma*: a mystery one falls in love with, a beloved problem one cannot abandon. The tone whispers rather than announces. There are no exclamation marks anywhere in the copy. Every section title is a half-completed sentence, ending in an em-dash, as if the auctioneer trailed off into thought. Critical inversion of expectation: where most Victorian-ornate web designs reach for gold-and-burgundy opulence, PPUZZL.bid is **silver-and-fog**. The ornament is real (filigree borders, drop-caps, decorative dingbats, brocade-textured separators) but the colour temperature is **deliberately cold**, like daguerreotype tarnish. The pastoral feeling comes not from sunlight but from *moisture* — soft blur, rolling fog gradients, lens-defocus on every photograph, the quality of light at 4pm in a glass conservatory in late autumn. A second inversion: the ornament does not stay still. Every flourish is a slow-morphing **organic blob** masked by a Victorian gilt frame — so the page feels like a 19th-century parlour where the wallpaper is breathing, the cameo brooches are pulsing, and the chart on the auctioneer's desk is a living lung of grey ink. ## Layout Motifs and Structure The layout is uncompromisingly **centered**, but in a 19th-century *book-plate* sense, not a modern hero-block sense. The viewport is treated as a single sheet of grey laid paper, ~720px reading column, sitting on a 100vw fog-grey field. There is no full-bleed photography. There is no card grid. There is no sidebar. The page reads top-to-bottom in a single column, like a Christie's catalogue from 1887 — title plate, frontispiece, lot listings, marginalia, colophon — and the only horizontal rhythm comes from **decorative symmetry within the column**, never from sibling cards laid side-by-side. The page is structured as **seven plates**, each occupying at least 100vh, each centered within a heavy filigree border: 1. **Frontispiece** — the site's signet "P.P." rendered as an enormous Bodoni 72 ampersand-style monogram, set against a slowly drifting cool-grey blob mass. 2. **The Catalogue** — a centered, vertically stacked list of seven Lots, each a hand-set entry (lot number in roman numerals, title in retro-display caps, two-line italic description, current bid as graphite-grey numerals). 3. **The Floor** — a wide-margined "auction floor" page where a single live data-viz blob expands and contracts with simulated bid activity, surrounded by velvet-rope filigree. 4. **The Provenance** — a centered narrative essay, drop-cap initial, decorative paragraph dingbats, set in a 9pt-equivalent reading face, telling the imagined history of the puzzles. 5. **The Lacuna** — a deliberately empty plate, only an em-dash, a date, and a soft fog gradient. Negative space as ornament. 6. **The Standing Bids** — a centered ledger, ruled lines drawn in cool-grey, each bid blurred according to its age (recent bids sharp, week-old bids dissolved into mist). 7. **The Colophon** — a centered closing plate with hand-set typesetter's marks, a final blob signature, and the date in roman numerals. Within every plate, the central reading column is bordered by **double-rule filigree** — a thin outer line, a thicker inner line, with corner ornaments (acanthus leaves, ammonite spirals, cameos) drawn in SVG, occupying ~80px on each side. The filigree is not decorative wallpaper; it is a *picture frame* containing the day's most prized lot. Every plate's frame is slightly different — Plate 1 is acanthus, Plate 3 is fern-frond, Plate 7 is wheat-sheaf — so scrolling feels like turning leaves in a heavy hand-bound folio. **Outside** the centered column, the wide-margined left and right gutters (each ~22vw) are not empty but home to **marginalia**: tiny italic asides in a smaller serif, footnote daggers, hand-pointing manicules that swing slightly toward the reader's cursor with a magnetic ease, and a single drifting organic blob per gutter that exists purely as atmospheric fog. There is a **sticky vertical rule** running down the centre of the viewport, hairline cool-grey, only visible when the cursor is within 200px of it — a phantom plumb-line, the auctioneer's invisible center axis, suggesting the precision underlying all this softness. ## Typography and Palette Type system (Google Fonts only, no invented faces): - **Bodoni Moda** — primary display face, used for plate titles and the monogram. Weight 800, optical size set to maximum. Display sizes range from clamp(4rem → 9.6rem) for plate titles down to ~3.2rem for lot numbers. The vertical thin-thick contrast of Bodoni is the entire visual register of the site — needle-thin verticals, fat slab horizontals, a typeface that looks like wrought iron seen edge-on. - **IM Fell Double Pica** — retro-display **historical face** for body copy, lot titles, and the catalogue listings. This is a Google-Fonts-revival of a 17th–18th century English type, irregular baseline, slightly inked-over edges, perfect for the antique-catalogue mood. Set at 18px reading size, line-height 1.7, used in italic for lot descriptions and roman for narrative essay. - **Cormorant Unicase** — used only for plate sub-titles and the small caps that mark new sections. Letter-spacing +0.18em, weight 500. Provides a contemplative, scholarly counterpoint between Bodoni's drama and IM Fell's antiquarian texture. - **JetBrains Mono** — used at exactly one place: the "Standing Bids" ledger, where the numerical bid amounts are rendered in mono so the columns of digits align. Weight 300, size 14px, colour cool-grey. The mono digits among the IM Fell narrative create a small visual shock — the only modern voice in the room. Drop-caps in the narrative essay use **Bodoni Moda 800** at 6.4rem, sitting four lines deep, with a hand-drawn SVG acanthus tendril curling from the cap into the first sentence. Palette (strictly cool-grays — no warmth whatsoever): - `#0E1116` — deepest plate-edge near-black, used for primary text on light grounds and for the outermost rule of the filigree borders. Has a slight blue cast (B>R), never warm. - `#1F2630` — slate-iron, used for plate-title type and decorative weights. - `#3A4452` — wet-stone grey, used for marginalia, footnotes, and the lighter side of filigree. - `#6B7783` — fog grey, used for body-text dimming, hover-trail grey, and the mid-tone of organic blob fills. - `#A6AEB6` — pearl-ash, used for ruled lines, hairlines, and the dimmer half of inactive lots. - `#D6DBDF` — wash-grey, used as the page-paper field and reading-column ground. - `#EAEDEF` — bone-cool, used as the brightest highlight, the hover-glow of manicules, and the inside of the filigree where the lot photo would sit. - `#7E97A8` — a single muted *cool* accent, a daguerreotype-blue, used for live-bid pulse, the sticky plumb-line, and the eye of an auction-floor blob when it is mid-breath. This is the only chromatic relief in the entire palette and it is still cold. No gradients except **fog gradients**: radial cool-grey haloes at 4–10% opacity, behind the central column, slowly drifting at 0.05 turns / 90s, the way mist rolls. ## Imagery and Motifs Imagery category is **data-viz**, motifs category is **organic-blobs**, and PPUZZL.bid fuses the two into a single visual idiom: **the auction floor is a living organism rendered as a slow chart**. The defining motif is the **bid-blob** — a SVG `` constructed from 24 control points, each driven by a noise function, that breathes once every 6 seconds. Three sizes appear throughout the site: - *Atmospheric blobs* in the gutters, ~360px, 4% opacity, drifting laterally at 8px / 4s, providing the "fog" of the parlour. - *Lot blobs*, one per catalogue entry, ~120px, 12% opacity, gently inflating when the cursor approaches and deflating when it leaves — the blob is the *living current bid* of that lot, its volume proportional to the bid amount. - *Floor blob*, one only, on Plate 3, ~640px, 24% opacity, behaving as a real-time data-viz: every 4 seconds a new "bid" is simulated and the blob extends a slow pseudopod in that direction, then settles. Over 30 seconds the floor blob writes a fingerprint of the night's auction in cool-grey ink. Data-viz reinterpretations specific to PPUZZL.bid: - **The Bid Curve** — on Plate 3, behind the floor blob, a slowly accumulating SVG `` traces the bid history as a Victorian *fever chart*, complete with hand-drawn axis ticks (rendered as tiny serifs), and an italic IM Fell label at each peak ("a clean treble"; "the hesitation"; "the gentleman from the gallery"). - **The Standing Bids ledger** — Plate 6 — is a real ruled ledger with dotted leaders linking lot titles to bid amounts, but the *amount* of each bid determines a `filter: blur()` applied to the entire row: highest bid is sharp (0px blur), lowest is dissolved (12px blur), reading the page becomes a focus exercise. - **The Lacuna chart** — Plate 5 — is a single SVG `` filled with a slowly mutating cool-grey noise, labelled in IM Fell italic "no bids received between 03:14 and 03:47" — a chart of *absence*, an empty data-viz. Decorative motifs that recur across plates: - **Filigree corners** — acanthus, fern-frond, wheat-sheaf, oak-leaf, ammonite, hellebore, lily-of-the-valley — one set per plate, drawn as SVG paths with hairline cool-grey stroke and slight breathing animation (scale 1.0 ↔ 1.02 over 8s). - **Manicules** — pointing hand symbols (☞), eight per page, scattered in margins, with a slight magnetic lean toward the cursor when within 240px. - **Typesetter's dingbats** — section breaks marked with three centered fleurons (❦) or three asterisks (⁂), in IM Fell at 1.4em, slightly faded. - **Cameo silhouettes** — small SVG ovals containing a plain cool-grey gradient, used as "lot thumbnails" — every puzzle is too mysterious to depict, so its image is replaced with a fog-filled cameo, the way a Victorian locket might hold the ghost of a face. - **Velvet-rope frames** — Plate 3 is bordered by a SVG-rendered braided cord, two strands, slate-grey and pearl-ash, that twists slowly along its length at 120s/loop. No photography of any kind. No icons from icon libraries. No 3D renders. The visual world is entirely SVG, hand-tuned, monochrome cool-grey, organic-curve dominant. ## Prompts for Implementation Build PPUZZL.bid as a **single tall scroll**, seven plates, each centered, each wrapped in its own filigree, the entire page reading like leaves in a hand-bound folio of unsolved puzzles up for auction. Prioritize storytelling, atmosphere, and slow reveal. Avoid any conversion-oriented pattern — there are no buy buttons, no pricing tiers, no stat grids, no testimonial cards, no FAQ accordions, no email-capture footers. The page does not sell; it presents a catalogue and lets the reader fall in love. **Frontispiece (Plate 1).** Page loads on `#D6DBDF`. Three concurrent animations begin. First, a radial fog gradient at the centre fades from 0% to 100% over 1.4s, settling at 8% opacity. Second, the monogram "P.P." in Bodoni Moda 800 fades up letter by letter (stagger 0.18s), the period between them appearing last as a single graphite dot. Third, a single atmospheric blob, ~640px, 14% opacity, drifts in from the upper-left and parks behind the monogram, beginning its slow 6s breath cycle. No header, no nav. The only interactive element is a small italic IM Fell line beneath the monogram — *"a catalogue of unsolved problems, offered this evening for your consideration —"* — followed by a soft hairline rule that draws itself across the centre column over 2.4s. As the user begins to scroll, the monogram scales 1.0 → 0.6 and rises into a *running header* position at the top of the column, where it remains throughout the rest of the document. **Plate 2, The Catalogue.** Seven lots, vertically stacked, each ~30vh tall, separated by triple-fleuron breaks. Each lot is structured as: a roman-numeral lot number (Bodoni Moda 800, 5.6rem, far left of the centred reading column), the lot's title (IM Fell Double Pica caps, 1.4rem, with letter-spacing +0.06em), a two-line italic description, a small lot-blob to the right of the title (12% opacity, slow breath), and a current-bid line in JetBrains Mono ("standing — XII conjectures") in `#7E97A8`. Hovering a lot row triggers three changes: the lot-blob swells to 32% opacity over 0.6s with a spring easing, the title's letter-spacing increases by +0.04em, and the cool-grey daguerreotype-blue accent sweeps under the title as a hand-drawn SVG underline-draw (path-draw-svg, 0.8s). Clicking a lot does *not* navigate — it triggers a soft blur-focus event where every other lot in the catalogue blurs to 6px while the chosen lot sharpens, and a deeper italic IM Fell paragraph (the "expert's note") fades in below the description over 1.2s. Clicking again restores the full catalogue. This is the entire interaction model: **bidding is not buying, it is reading more deeply**. **Plate 3, The Floor.** Centered viewport. The Floor Blob is anchored at the geometric centre, 640px wide, 24% opacity. Every 4 seconds, a `setInterval` simulates an incoming bid: a random point on the blob's perimeter is selected, that control point is pushed outward by 24–60px with a spring (stiffness 60, damping 12), and the blob settles back to its baseline shape over 1.8s. Behind the blob, the Bid Curve `` extends one new point to the right with each simulated bid, drawing itself in `#3A4452` hairline, accumulating across the plate's width over the course of the user's visit. Italic IM Fell labels appear at the curve's peaks via a small NLP-feel templating pass — the labels are pre-written stock auctioneer phrases ("a clean treble"; "the gentleman from the gallery"; "a conjecture withdrawn") that fade in at 0.4 opacity over 0.8s. Velvet-rope frame around the entire plate twists slowly (120s/loop). The user can hover the blob to *pause* the auction — the `setInterval` halts, the blob stops breathing, the curve stops extending, and a tiny italic label reads *"the floor holds —"*. This is an entire interaction with no business purpose; it exists only to give the reader a moment of held breath. **Plate 4, Provenance.** Pure narrative. A 720px reading column, IM Fell Double Pica at 18px, line-height 1.7, justified text, manual hyphenation hints in the markup. The first paragraph opens with a Bodoni Moda 800 drop-cap, six lines deep, with an SVG acanthus tendril (animated draw on enter, 1.6s) curling from the descender of the cap into the first line of text. The essay tells, in 600–900 words, the imagined provenance of the catalogue: *"these puzzles were collected over forty years by a Mr. Algernon, of the Department of Conjectures, and offered now in a single evening because the Department itself, as the bidders may already know, no longer exists —"*. Marginalia (italic, smaller, in `#6B7783`) appears in the right gutter, anchored to specific paragraphs, fading in via IntersectionObserver as each anchor enters viewport. **Plate 5, Lacuna.** A single 90vh plate with only three things: a centered em-dash in Bodoni Moda 800 at 12rem, a date *"between 03:14 and 03:47"* in IM Fell italic, and a 480px×120px noise-rect that mutates softly via canvas. No filigree on this plate — the absence of ornament is itself the ornament. Scroll velocity is intentionally slowed via a JS `wheel` listener that scales `deltaY` to 0.6 within this plate, a quiet narrative *ritardando*. When the user finally scrolls past, normal velocity resumes. **Plate 6, Standing Bids.** A centered ledger ~640px wide, 18 ruled rows, each row containing: lot number (left), title (centre), bid amount (right, JetBrains Mono). The bid amount column has dotted leaders connecting title to amount. Each row's age (a `data-age` attribute) drives a blur: `filter: blur(calc(var(--age) * 1px))` so a 12-hour-old bid is at 12px blur. Hovering a row clears its blur over 0.4s and snaps a daguerreotype-blue underline beneath the title. The page becomes a microscope: the reader leans into the ledger, restoring focus row by row, recovering the night's history. **Plate 7, Colophon.** A centered final plate. A single typesetter's mark (¶ in Bodoni Moda), the date in roman numerals, a final small organic blob at 30% opacity, and a hairline rule that draws itself slowly across the column on enter. No links. No social. No nav. The page ends as a book ends, not as a web page ends. **Cross-cutting techniques.** - All blobs are SVG `` with `` or rAF-driven control-point morphing using a 1D Perlin-style noise. Twenty-four control points per blob, 6s cycle, slight phase offset per blob so no two breathe in sync. - Filigree is SVG, drawn on enter via `stroke-dasharray` / `stroke-dashoffset` animation (path-draw-svg) at 1.4s per corner, staggered. - Manicules use `pointer-events: none`, listen to `mousemove` at the document level, and apply a `transform: rotate()` that biases their hand toward the cursor's quadrant with a 0.4s ease. - The plumb-line is a single `
` 1px wide, fixed centred, opacity bound to `clamp(0, (200 - distanceToCursor) / 200, 1)`. - Blur-focus is the dominant interaction — it is used in Plate 2 (lot expansion), Plate 6 (ledger leaning), and as a global hover-trail on marginalia. Default reading state is *slightly defocused* (1px blur on dimmed text) so that user attention is the act of *resolving the page*. - Cool-grey fog gradients are a fixed CSS layer at z-index 0, slowly drifting via `transform: rotate()` at 0.05 turns / 90s, with a `mix-blend-mode: multiply` tying them to the paper field. - Reduced-motion preferences disable blob-breathing and curve-drawing but leave the centred typographic layout intact — the page remains a 19th-century catalogue regardless. The whole site should read, to a visitor, as: *I have walked into the back room of an auction house at midnight, and the lots are not paintings or vases but unresolved problems, and the bids are guesses, and the auctioneer is humming an English folksong somewhere just out of sight.* ## Uniqueness Notes Differentiators from other PPUZZL siblings and from the broader catalogue: 1. **Cool-grays Victorian-ornate.** The codebase has 86% warm palettes; PPUZZL.bid is strictly cool, no warm tones permitted. Victorian aesthetics almost universally pair with sepia/burgundy/gold; here the ornament is real (filigree, drop-caps, dingbats) but rendered in slate, pearl-ash, and a single daguerreotype-blue accent. The collision of 19th-century ornament with strictly cold colour temperature is the design's central inversion. 2. **`.bid` taken literally — but bids are conjectures, not money.** The auction frame is honoured (lots, ledger, floor, colophon) yet there is no purchase path. The user cannot buy anything. Bidding is *reading more deeply* — clicking a lot blurs every other lot and reveals an expert's note. This treats the TLD as a metaphor instead of a sales funnel and explicitly avoids CTA-heavy / pricing-block / stat-grid layouts. 3. **Centered single-column layout used in the Victorian book-plate sense, not the modern hero sense.** Centered is a 68% pattern in the catalogue, but always implemented as hero blocks; PPUZZL.bid uses centred 720px columns wrapped in filigree borders, top-to-bottom, like a hand-bound folio. No card grid. No sidebar. No bento. 4. **Organic-blobs as living data-viz.** Imagery `organic-blobs` (3%) and `data-viz` (3%) are both rare; their fusion — the floor blob as a real-time auction breath, the lot blobs as bid-volume indicators, the ledger blur as bid age — is unprecedented in the catalogue. 5. **Blur-focus as the primary interaction model.** Pattern `blur-focus` (6%) is the dominant verb here, not a flourish: every meaningful interaction is the resolution of a defocused element. The default reading state is slightly blurred; user attention sharpens the page. This makes *focus itself* the navigation, not clicks or scrolls. 6. **Retro-display historical typography (IM Fell Double Pica + Bodoni Moda).** Typography `retro-display` (6%) realised through a genuine 17th–18th century revival face (IM Fell) paired with Bodoni Moda's high-contrast 19th-century drama. No mono primary, no sans, no humanist — bucks the 89% mono dominance entirely. 7. **Pastoral-romantic tone (6%) executed without warmth.** The mood is foggy English-conservatory romance — but the climate is November, the temperature is cold, and the only floral element is hellebore (a winter bloom). Tone `pastoral-romantic` is rare; an explicitly cold pastoral-romantic is unique. 8. **The Lacuna plate.** A deliberate 90vh of structured emptiness — only an em-dash, a date, and a noise field — within a Victorian catalogue. Negative space treated as a *lot* in itself, an absence offered for bidding. The scroll deliberately slows on this plate. Avoided patterns from frequency analysis: no parallax (89%), no spring-on-arrival (55%), no stagger entrance grids (51%), no cursor-follow blob trail (44%), no card-grid (51%), no full-bleed photography (82% / 93%), no warm palette (86%), no gradient backgrounds (86%), no mono primary type (89%), no glassmorphism (55%), no hand-drawn aesthetic (86%). The design deliberately occupies the column "Victorian ornament + cold + literally enacted auction metaphor" that no sibling has touched. Chosen seed: **aesthetic: victorian-ornate, layout: centered, typography: retro-display, palette: cool-grays, patterns: blur-focus, imagery: data-viz, motifs: organic-blobs, tone: pastoral-romantic**.