# Design Language for PPUZZL.com ## Aesthetics and Tone PPUZZL.com is a **grainy-textured**, **mysterious-moody** archive — a cold-storage vault for unsolved jigsaws, half-remembered crosswords, and ciphertexts that nobody has yet cracked. Imagine a 1970s parapsychology laboratory whose filing cabinets have been dragged into the basement of the Mariinsky Library: each drawer pulls out into a fog of silver-gelatin dust, and inside each drawer is a single puzzle, photographed once, in low light, by someone who left no name. The entire site behaves as if it has been photocopied a few generations too many — not as decoration, but because the truth here is dim by nature, and you have to lean in to read it. The mood is *mysterious-moody*, never thrilling. There is no jump-scare, no neon, no drama. Instead the site holds the temperature of a cold room with a single lamp on. The visitor is not a customer; they are a researcher who has been granted late-night access to an unindexed collection. Pages do not "load"; they **emerge from grain**, the way a Polaroid resolves under a thumb. There is no hero banner, no value proposition, no call to action. There is a quiet authority — the authority of an institution that does not need to introduce itself — and below that, a faint hum of unease, because every puzzle in the archive is, by definition, one that resisted being solved. The site's emotional register sits between **Chris Marker's *La Jetée*** (still photographs and a low narrator), **Mark Z. Danielewski's *House of Leaves*** (footnotes that disagree with the main text), and **the Voynich Manuscript facsimiles in the Beinecke Library**: visible, touchable, beautifully photographed, and still completely opaque. PPUZZL is not entertainment. PPUZZL is a place where unsolved things are kept with care. ## Layout Motifs and Structure The whole site is a **masonry** of irregular tiles — not a grid, but a **packed-bottom masonry** in which each puzzle-card has its own measured aspect ratio (1:1, 2:3, 3:5, 4:5, 5:8 — only Fibonacci or near-Fibonacci ratios, never 16:9), and the algorithm fills upward from the bottom of the viewport rather than down from the top, so the visual weight rests against the floor of the screen the way real objects rest in a drawer. CSS Grid with `grid-template-rows: masonry` is the target layout (with a JavaScript polyfill fallback running on every browser); column count is `clamp(2, 8vw, 5)` so wide screens never get more than five columns and the masonry stays dense. A **Specimen Shelf** sits as the spine of the layout. It is not a navigation bar — it is a horizontal strip of 14 small thumbnail crops (60×80px each), grain-heavy, hung at the very top of the viewport at `top: 0` with a 1px hairline below in `#3A372F`. Hovering a thumbnail does not preview the puzzle; it dims every other tile in the masonry to 18% opacity, leaving only the matching tile at full luminance, as if a librarian had pulled one card from a tray. There is no logo at the top-left. The site's name — `PPUZZL` — is set as a tiny serial in the bottom-right of every page in 11px humanist small caps, letter-spaced 0.18em, the way a museum labels the back of a print. **Card composition.** Each masonry card is a vintage photograph of a puzzle in some state of partial assembly. The card carries: - A duotone photograph (#1F1B16 → #C5BBA7), grain overlay layered at multiply blend - A 1px hairline border in `#48433A` that is *just barely* darker than the background, never solid black - A serial number in the bottom-left in `JetBrains Mono`, 10px, format `PZ-1973-00△△△` where the last three glyphs are sometimes triangles, circles, or moons rather than digits — a quiet typographic mystery - A four-word caption in the bottom-right, in `Cormorant Infant` italic 13px, e.g. *"recovered from estate, undated"*, *"three pieces missing, possibly,"*, *"shelf 14, drawer green-7"* **The Drawer.** Clicking any card does not modal-pop it. The card stays in place; instead, a wide horizontal **drawer** slides open from the bottom of the viewport (height 62vh, easing `cubic-bezier(0.22, 0.61, 0.36, 1)`, duration 720ms) carrying the puzzle's full record: a large duotone plate, a transcript, a list of provenance notes, a "last attempted by" line dated to a year between 1923 and 1998, and a single button — `request access` — that, when clicked, opens an email composer with no subject line. The masonry above the drawer dims to 32% and slightly desaturates. There is never more than one drawer open at once. **Vertical rhythm.** The page is intentionally tall — a single masonry can extend to 12,000–18,000px — and there is no pagination. Scrolling is the only navigation. Roughly every 3,000px of scroll, a **plate** interrupts the masonry: a full-bleed (column-spanning, not viewport-spanning) duotone photograph 78vh tall, captioned with a single line of Cormorant italic and a year. The plate is a breath, not a section header. ## Typography and Palette **Typefaces — Google Fonts only.** - **Fraunces** (variable, weight 100–900, optical size axis 9–144, soft axis 0–100). The primary humanist face. Headings use weight 350, optical size 96, soft 100 — Fraunces at high optical size and high softness has an almost handwritten warmth that matches the archival mood. Body copy is Fraunces 16px, weight 400, optical size 14, soft 30 — readable, slightly bookish, never starchy. This is where the design meets the **humanist** seed: not Garamond, not Caslon, but Fraunces' contemporary humanism with eccentric ball terminals and a confident italic. - **Cormorant Infant** (italic, weight 300 / 500). The captioning voice. Used only for the four-word card captions, the plate captions, and marginalia. Its infantile (smaller-than-text-size) aperture and its slightly precious italic do the emotional work that the body type refuses to do. - **JetBrains Mono** (variable, 100–800). Reserved for serial numbers, archival call-numbers, dates, coordinates, and the small typographic mysteries (the triangles, circles, moons that interrupt digits). Set at 10–12px, never display-size. Mono is here a clerk's hand, not an aesthetic choice. Type is set with `font-feature-settings: 'ss01','ss02','onum','liga','dlig'` enabled on Fraunces — old-style figures, discretionary ligatures, the alternate single-story `a`. Body line-length is held to 56–62 characters via `max-width: 34em`. Leading is generous: `line-height: 1.72` on body, `1.18` on display. Letter-spacing is *negative* on Fraunces display (`-0.018em`) and *positive* on the small-caps serial in the bottom-right of every page (`0.18em`). **Palette — muted, eight colors, no gradient anywhere.** - `#1F1B16` — *Oxblood Bitumen.* The deepest tone. Used for backgrounds in drawer-open state and for the dark stop of every duotone photograph. Never pure black. - `#2A2620` — *Cabinet Walnut.* The base background of the entire site. The masonry rests on this color the way photographs rest on a felt mat. - `#3A372F` — *Hairline Umber.* The 1px borders, grid lines, divider rules. - `#48433A` — *Card Edge.* The subtle border of each masonry card. Almost invisible against #2A2620 in isolation, but visible enough to organize the eye. - `#7A6F5C` — *Foxed Linen.* Used for body type and for the lighter stop of every duotone photograph. - `#A89E89` — *Index Card.* The color of mid-tone captions and serials. - `#C5BBA7` — *Bone Grain.* The lightest ink. Used for headings and for the light stop of high-contrast duotones. - `#8A1F1A` — *Cinnabar Tag.* The single accent. Used **only** on hover/focus and on the serial-number triangles. Less than 2% of any page is ever this color, but it is the only saturated value in the entire palette, and its presence is what makes the rest of the design feel like an archive rather than a swatch book. A persistent grain layer (`url('data:image/svg+xml;base64,...')` of 220×220px monochrome noise at 8% opacity, `mix-blend-mode: multiply`, `pointer-events: none`) sits as the topmost element of the page and ties every color, every photograph, every type setting into a single dust-laden atmosphere. ## Imagery and Motifs **Vintage photography is the only imagery used on the site.** No vector illustration, no 3D render, no hand-drawn line art, no icon set. Every image on PPUZZL.com is, or pretends to be, a photograph taken between 1923 and 1998 of a puzzle in some state of incompletion. All photographs are presented as **duotones** mapping `#1F1B16` (shadows) → `#C5BBA7` (highlights), with grain dialed up to roughly 8–14% strength. The sources are: - **Public-domain archival scans** of jigsaw puzzles, crossword fragments, cipher disks, Rubik mechanisms in mid-rotation, tangram tiles photographed in raking light. The Internet Archive, Library of Congress, and Wellcome Collection are the primary wells. - **Ben-Day-style halftone re-screening** of the duotones, applied via SVG `feTurbulence` + `feComponentTransfer` filters at 70 dpi equivalent — so the dot structure is visible if the user zooms past 150%, the way it would be on a real photocopied book. - **No people, no faces, no hands.** The archive holds objects, never agents. If a hand appears in a source photograph, the design crops it out. **The crystalline motif** is the only ornament. It appears in three places, all SVG-generated: 1. **Index ornaments.** Between every plate and the masonry resumes, a small crystalline polyhedron — an irregular **Voronoi crystal** with 7–13 facets, each facet rendered with a 1px Hairline Umber stroke and a fill of Cabinet Walnut — sits centered, 96×96px. It rotates 0.06 turns over 90 seconds, the slowest motion on the entire site. Each crystal is procedurally seeded from the page's URL, so two visitors see slightly different facetings. 2. **Drawer corners.** The four corners of an opened drawer are notched with tiny triangulated **fracture marks** — 6×6px crystalline shards, three per corner, in Cinnabar Tag at 40% opacity. They imply that the drawer has been pried open, not slid open. 3. **Serial-number glyphs.** The triangles, circles, and moons that occasionally replace digits in `PZ-1973-00△△△` are themselves miniature crystalline forms, each one a single irregular polygon, never a clean Unicode shape. The crystalline motif is intentionally cold, geometric, and **fractured** — never decorative, never floral, never tech-circuit. It is the visual analog of an unsolved problem: a thing that has facets but does not yet hold light. ## Prompts for Implementation Build PPUZZL.com as a **single, full-screen archival experience**. The default state is one long, scroll-only masonry. There is no SPA, no router, no horizontal navigation, no header, no footer, no contact page. The site is a single document; the user reads it the way you read a long photograph. **Loading and skeleton-loading.** The page does not wait for everything to be ready before appearing. Instead it employs **skeleton-loading** as its primary load aesthetic — but a *photographic* skeleton, not a UI shimmer. On first paint: - Every masonry card materializes immediately as a **gray-grain rectangle** in Cabinet Walnut, 1px Hairline Umber border, with a single thin horizontal sweep of Foxed Linen at 6% opacity moving once across the card over 1.4s — a darkroom safelight passing over the print. - The card's serial number and four-word caption fade in *first*, in JetBrains Mono and Cormorant Infant, while the duotone photograph behind them is still a gray rectangle. The user reads the metadata before the image exists. This is a deliberate inversion of the usual "image first, caption second" web pattern. - The duotone photograph then resolves over 1.6–2.4s, randomly per card, via a **grain-to-image dissolve**: a CSS mask using a high-frequency `feTurbulence` whose `baseFrequency` animates from 4.0 down to 0.3, so the photograph appears to crystallize out of dust rather than fade in. Cards that are off-screen do not start their resolve until they are within 600px of the viewport. - If the network is slow, the skeleton state holds indefinitely with the safelight sweep continuing. There is never a spinner. There is never an error. A puzzle that cannot be photographed today is one that will be photographed tomorrow. **Cursor and motion language.** The cursor is replaced, on the masonry only, with a small (14×14px) crystalline polygon in Foxed Linen at 60% opacity. It does not magnetic-snap, does not blob, does not trail. It rotates 0.25 turns when the user begins to scroll and stays at the new rotation. Hover on a card shifts the cursor to Cinnabar Tag. There is no mouse-trail. **Scroll behavior.** Scrolling is `scroll-snap-type: none` — the user is never forced into a section. However, every plate (the full-column-bleed photograph that interrupts the masonry every ~3000px) has `scroll-snap-align: center` so a long, lazy scroll can settle on a plate without the user aiming for it. The plate's caption — one Cormorant italic line and a four-digit year — fades in from 0 to 100% opacity as the plate centers in the viewport, using `IntersectionObserver` thresholds at 0.5 / 0.75 / 0.95. **The Drawer interaction.** When a card is clicked: 1. The card itself does *not* move. It remains in the masonry, but its serial number turns Cinnabar Tag and its border thickens to 1.5px. 2. A drawer panel slides up from `bottom: -62vh` to `bottom: 0` over 720ms, carrying the full plate, transcript, and provenance. 3. The masonry behind it dims to `opacity: 0.32` and `filter: saturate(0.6)` — desaturated and dimmed but not blurred (blurring would feel like glassmorphism, which this design refuses). 4. Pressing `Escape` or clicking outside the drawer slides it back down. The opened-card state persists in `URL hash` so it can be deep-linked. **Storytelling through provenance.** Every puzzle in the archive carries a small false history: a year, a previous owner, a shelf number, a "last attempted by" name (always a real-sounding 20th-century name, never a celebrity), and one cryptic line of Cormorant italic that hints at why the puzzle was never solved — *"the corner pieces were marked, all four, with the same letter"*, *"piece 47 was found later in a different box,"* *"an unsigned note inside reads: don't"*. These are the only words on the site outside of metadata. There is no marketing copy. There is no about page. The provenance lines, taken together, are the writing. **Audio.** Optional, off by default, behind a small Cinnabar Tag toggle in the bottom-right corner. When enabled: a single looped 11-minute field recording of a quiet archive room — paper rustle, a chair creak at minute 7, a faraway boiler — at -28dB. No music. No score. Just room tone. **AVOID, by explicit instruction:** CTA buttons of any kind, pricing tiers, stats grids ("12,000 puzzles!"), feature lists, testimonial blocks, footer link farms, hamburger menus, mobile drawers labeled "menu," modal pop-ups, cookie banners visible above the fold, gradients of any kind, glassmorphic blur, parallax backgrounds, hand-drawn elements, photography that is in color, fonts other than Fraunces / Cormorant Infant / JetBrains Mono, palettes that include any saturated hue other than `#8A1F1A`. The design forbids any visual element that signals "marketing surface." This is an archive. Behave like one. ## Uniqueness Notes This design's seven differentiators — each a deliberate departure from the rest of the CMassC catalog and from default web aesthetics: 1. **Skeleton-loading inverted: metadata before image.** Almost every site that uses skeleton states reveals the *image* first and the text last. PPUZZL deliberately reverses this. The serial number and the four-word caption appear while the photograph is still a gray rectangle. The user reads what the librarian wrote before they see what the librarian saw. No other CMassC site uses skeleton-loading as a primary aesthetic, and none invert the reveal order. Pattern frequency analysis: skeleton-loading appears in 0% of the 20 sampled designs. 2. **Masonry that fills upward from the bottom.** Standard masonry libraries fill top-to-bottom and the visual weight floats. PPUZZL's masonry uses Fibonacci-only aspect ratios and packs **upward from the floor of the viewport**, so the page feels heavy at the bottom — the way real objects rest in a drawer. Pattern frequency: masonry appears in only 5% of sampled designs, and none use the floor-packed variant. 3. **Vintage-photography as the *only* imagery, all duotone, all grain.** No vector, no illustration, no 3D, no icon. Every visual on the site is, or pretends to be, an archival photograph from 1923–1998. Frequency analysis shows photography at 95%, but vintage-photography specifically at only 5%, and no other site commits to *exclusively* vintage-duotone imagery with no other visual mode. This is the load-bearing imagery decision. 4. **Mysterious-moody tone in a category that overwhelmingly defaults to warm-inviting / playful.** The frequency table shows mysterious-moody at roughly 1% across all sampled designs. PPUZZL leans entirely into archival unease, and refuses the warmth that 80% of the catalog prefers. 5. **Crystalline ornament used as a metaphor for unsolved problems.** Crystalline appears in 10% of sampled designs but always as decoration. PPUZZL makes the crystal *meaningful*: each polyhedron is procedurally seeded from the page URL, the drawer corners are *fractured* (not framed), and the serial-number glyphs themselves are tiny crystals replacing digits. The crystalline motif is the visual rhyme of "puzzle that has facets but does not yet hold light." 6. **Humanist typography (Fraunces) instead of mono-led, in a category that is 85% mono.** The frequency analysis shows mono typography at 85% across the catalog; humanist sits at 15%. PPUZZL chooses Fraunces — a contemporary humanist with a soft axis — as its primary voice, and demotes JetBrains Mono to the role of a clerk's hand. The site reads like a book, not a terminal. 7. **No CTA, no pricing, no stat grid, no header, no footer.** Per the design prompt's explicit instruction to avoid CTA-heavy / stat-grid layouts, PPUZZL removes every standard marketing surface. There is one (1) interactive button on the entire site — `request access` — and it opens an email composer with no subject line. The site does not sell. The site catalogs. **Chosen seed:** `aesthetic: grainy-textured, layout: masonry, typography: humanist, palette: muted, patterns: skeleton-loading, imagery: vintage-photography, motifs: crystalline, tone: mysterious-moody`. Every one of the eight seed dimensions appears in fewer than 16% of sampled designs (most under 10%), and the combination is unprecedented in the CMassC catalog. **Avoided patterns from frequency analysis:** hand-drawn (80% — used nowhere on this site), glassmorphism (55% — explicitly forbidden), photography-default (95% — replaced with vintage-photography-only), full-bleed centered hero (80%/75% — replaced with floor-packed masonry and no hero), parallax (85% — replaced with snap-on-plate rather than parallax-on-scroll), gradient (85% — zero gradients anywhere on the site), warm palette (80% — replaced with cold muted archive palette), mono-led typography (85% — replaced with Fraunces humanist primary).