# Design Language for PPUZZL.dev ## Aesthetics and Tone PPUZZL.dev is a **quiet pastel atelier for puzzle architects** — picture a 1960s industrial-design studio in Milan, walls washed in chalky robin's-egg, a long pearwood table covered in printed paper offcuts, technical drawings of polyomino tilings tacked over old gallery posters. The site presents `PPUZZL.dev` as the working journal of a small, fictional engineering practice that designs *the puzzles other puzzles wish they were* — combinatorial toys, lattice solvers, dissection theorems, board-game atoms. The tone is unmistakably **professional**: every line of copy reads like the lead engineer dictated it to a careful typist; every diagram is captioned with a figure number; every asset has a date and a project code (e.g. *Fig. 14 — PPZ/2026/Δ-04*). The mood is **minimalist** in the strictest 1960s sense — reductive, *not* sparse-for-decoration's-sake. Empty cream space is loaded with as much intention as a printed mark; a half-millimeter shift in margin reads as a deliberate edit. Air, paper, and rule. Yet — and this is the inversion that distinguishes PPUZZL.dev from every other minimalist site in the corpus — every quiet page **conceals a second page beneath it**: a deeper layer of paper, half-cut, peeking out at the edges, waiting to be lifted by a slow scroll or a deliberate hover. The aesthetic vocabulary is hushed; the *interaction* vocabulary is patient and revealing. The reader is never shouted at. They are *invited to lift the corner*. Inspirational anchors: Bruno Munari's *Libro Illeggibile MN1*, Sister Mary Corita Kent's late teaching slides re-printed on Arches paper, Charles & Ray Eames' *Mathematica* exhibition graphics, the 1973 Olivetti studio annual report, Massimo Vignelli's grid for *Architectural Record*, and a single page from a 1958 Steinberg sketchbook where a dotted line slowly becomes a coastline. Nothing is loud. Everything is *exact*. ## Layout Motifs and Structure The composition is **layered-depth** — but not the duplicated-card-with-shadow flavor of most sites. PPUZZL.dev is built as a **stack of seven cream paper sheets**, each sheet 96% the width of the one beneath it, offset by a 6-degree rotation increment (−9°, −6°, −3°, 0°, +3°, +6°, +9°), each sheet carrying one chapter of the practice's casework. The sheets are *physically* layered — `position: absolute`, `transform: translate3d() rotate()`, `box-shadow` of `0 1px 0 rgba(74,67,60,0.06), 0 18px 36px -22px rgba(74,67,60,0.18)` to fake the thinness of museum-grade rag board. The reader sees only the top sheet plus three rotation-offset ribbons of the underlayers, fanning at the right margin like a hand of cards held loosely. This is **not** a card-grid. It is a **single physical object that disassembles in slow motion** as the user scrolls. A scroll-driven engine de-stacks the sheets one at a time: - **0% — 14% scroll:** Top sheet (Sheet 0, project index) sits flat, fully visible, all six underlayers fanned at +3° increments. Reader can read the index. - **14% — 28% scroll:** Sheet 0 lifts off — translates to `translateY(-118vh) rotate(-14deg)` and fades to 0 — revealing Sheet 1 (puzzle archive, ascending). Sheet 1 rotates to 0°. - **28% — 42%:** Sheet 1 peels off; Sheet 2 (the *Δ-04 dissection paper*) becomes active. - And so on through Sheet 6 (the *commission* sheet at the bottom of the pile, slightly yellowed, hand-stamped). Each sheet occupies the **full viewport** when active, but is composed on a strict **5-column Vignelli grid (84-px columns, 24-px gutters, 32-px outer margin)** — the columns are visible as **hairline ruled lines** at 0.4px ink-brown, fading from 8% opacity at the top of the sheet to 0% by the third row. Text never spans more than 3 columns; figures span 2 or 5; nothing spans 4. Captions live in column 1 *only*, in 11px italic. Within a sheet, content is arranged with **deliberate negative weight**: a typical sheet is two-thirds breath, one-third mark. The eye is led down the page by **figure numbers** in left margin (running 14 → 15 → 16 ...), set in olive-grey, never bigger than 13px. The reader's instinct is to follow them like a footpath. There is no traditional navigation bar. A **slim rotated tab** at the right margin (vertical text, 11px, letter-spacing 0.18em, reading "PPUZZL.DEV — A WORKBOOK ON PUZZLES") is the only persistent chrome. A pin-prick **page counter** at lower-right ("sheet 03 / 07") replaces a progress bar. ## Typography and Palette **Typography (all Google Fonts):** - **Playfair Display** (weights 400, 600 italic, 800) — primary display face. The **`PPUZZL.dev`** wordmark is set in Playfair Display 800 at `clamp(120px, 16vw, 280px)`, line-height 0.84, letter-spacing -0.024em, in **ink-charcoal** on the cream sheet. The doubled `PP` is a deliberate typographic event: the two `P`s are kerned to overlap by 6px so their bowls *touch* — a typographic puzzle in the wordmark itself, since the eye must un-puzzle the doubled letter to read the name. The italic 600 is reserved for *running heads* on each sheet ("*Sheet III — Polyomino Studies*") at 28-44px and for *figure captions* at 11px italic. Playfair's high contrast and didone bracket-serifs are essential — they carry the entire elegance of the site without any ornament beyond the letterforms. - **Inter** (weights 400, 500, 600) — body and UI. All running prose, list items, and mathematical inline expressions are set in Inter 400 at 15.5px, line-height 1.62, in **graphite-warm**. Inter is chosen for its near-invisible neutrality — it disappears against Playfair, exactly as a 1960s caption should disappear against a Bodoni headline. Inter 500 is used for *single-word labels* in margin diagrams ("hexomino", "L-trio", "twelfth"). - **JetBrains Mono** (weight 400) — the *single* technical accent face, used **only** for project codes (`PPZ/2026/Δ-04`), date stamps (`05.IX.2026`), and the dissection-equation lines that appear under figures (`∑ aᵢ × pᵢ = 28`). Set in **olive-rule** at 11.5px. This deliberate single-mono-stripe across an otherwise serif page is a signature. **Palette — strict pastel, eight colors total, no gradients:** - **`#F4EDDF` Cream Vellum** — primary paper field. Every sheet is this color. ~62% of the visible page. - **`#E7E0CF` Cream Shadow** — the *underlayer* paper, visible only at fanned edges. The 0.6-shade-darker tint creates the depth read. - **`#1F1A14` Ink Charcoal** — the only "dark" in the palette. Used for the wordmark, all primary type, and 0.4px hairline rules. Never pure black. - **`#8E837A` Graphite Warm** — body copy color. Reads as "deeply read text on aging paper." Slightly warmer than neutral grey to keep the page calm. - **`#7C6E3D` Olive Rule** — figure numbers, JetBrains Mono accents, hairline column rules. Earthy mossed-bronze. - **`#B7CFC7` Pastel Mint** — accent #1. Used **exclusively** for the *current* sheet's chapter tab and for the slow underline that draws beneath a hovered link. Never as fill on a large area. - **`#E9CFC2` Pastel Clay** — accent #2. Used **only** for one element per sheet: the *primary illustrated figure's flat-fill polygons*. (E.g., the L-tromino on Sheet III is filled in clay.) One sheet gets one figure in clay; this rule is invariant. - **`#C9D2E4` Pastel Periwinkle** — accent #3. Used **only** for the *secondary* polygon in any figure that has more than one (e.g., the partner J-tromino). Mint, clay, periwinkle — three pastels, each playing a structural role, none decorative. The palette law: any color outside these eight is forbidden. The three pastels (mint, clay, periwinkle) **never** touch each other directly without a hairline ink-charcoal stroke between them. ## Imagery and Motifs The imagery system is **collage** — but a *quiet, technical* collage, not a riotous one. PPUZZL.dev is built from five recurring artifact types, each rendered with the care of a museum reproduction. **1. Polyomino Plates (the heart of the imagery).** Each sheet has at least one large *plate*: an SVG diagram of polyominoes (dominoes, triominoes, tetrominoes, pentominoes, hexominoes) tiled within an outlined region — a 6×6 chessboard, an L-shaped region, a parallelogram, the Conway-Soifer triangle, an aperiodic Penrose patch. Plates are rendered as flat SVG with: - 0.8px ink-charcoal stroke on every cell boundary, - flat fills in pastel mint, pastel clay, or pastel periwinkle (one figure: one or two of these, never all three), - a hand-numbered cell index in 9px Inter 500 olive-rule placed at each cell's centroid, - a 4mm "thumb-tack" SVG (a 6px circle with a tiny radial cast-shadow) anchoring the plate's top-left corner — the only photographic-feeling element on the page. Plates animate on sheet-entry: cells *paint themselves in* one at a time using a `clip-path: polygon()` reveal, staggered 60ms per cell, in the order a solver would place them. The eye watches a puzzle solve itself in slow motion. **2. The Cut-Paper Margin Strip.** Down the left margin of every sheet runs a 14px-wide ribbon of **printed retro-pattern paper**, repeated as a CSS background-image SVG. The pattern is a fine 1960s **lattice motif** — alternating overlapping circles and interlocking quadrants in olive-rule on cream-shadow, at 28px pitch. This is the single concession to **retro-patterns** in the site. The ribbon is visually *cut* along its right edge with a `clip-path` that approximates pinking-shears (a periodic 3px sawtooth). It is the only "decorative" surface on the page, and even it serves a compositional purpose: it visually weights the leftmost column so that the off-center grid feels balanced. **3. Tipped-In Photographic Index Cards.** On Sheet 0 (the index) and Sheet 6 (commissions), a small set of **3×5 index cards** are *tipped in* at slight rotations (±2.4°). Each card carries a duotone photograph (washed in cream-vellum + ink-charcoal) of a real-world puzzle artifact: a wooden Tangram, a 19th-century slide-block toy, a Burr puzzle exploded by hand on a pearwood desk, a printed sheet of pentominoes. Each card has a 0.6mm white border, a hand-typed caption strip glued at the bottom in Inter 11px, and a faint shadow under its lower-right corner. *Five cards on each tipped-in sheet, no more.* This is the second collage element. **4. Hand-Drawn Marginalia.** Each sheet has 1–3 tiny **hand-drawn pencil notes** in olive-rule SVG strokes — an arrow correcting the count of a plate, a circled number with an exclamation, a rough sketch of an alternate dissection. These are 18–60px in size, set at the angles a left-handed engineer would draw them. They are **never** decorative; each one annotates a real fact in the figure beside it. **5. Hairline Ornaments.** Between major prose blocks, a single **0.4px ink-charcoal hairline rule** spans 1 column, decorated at its midpoint with a 5px cut-paper *diamond* in pastel clay outlined in ink-charcoal. This is the entire ornament vocabulary of the site. No flourishes. No icons. No emojis. ## Prompts for Implementation Build PPUZZL.dev as **a single full-viewport, scroll-driven HTML document that disassembles a stack of seven paper sheets** in slow motion, revealing one chapter at a time. The page is roughly **6.4 viewport heights tall** — long enough to deliver each sheet a slow read, short enough to be apprehended as a single object. **Storytelling architecture (sheets, not sections):** - **Sheet 0 — *The Index*.** Loads first. Cream vellum, the wordmark `PPUZZL.dev` set in Playfair 800 at the top-left, locked to the 5-column grid (cols 1–4). The doubled-`P` overlap animation runs once on load: the second `P` slides in from `+18px translateX, opacity 0` over 1.2s with a 280ms delay, *settling* into its overlapped kerned position with a soft 16-frame elastic ease. Below the wordmark, an **index of seven sheets** is set as a numbered list in Playfair italic 24px: *I. Polyomino Studies* — *II. The Δ-04 Dissection* — *III. Lattice Solvers* — *IV. Aperiodic Patches* — *V. Burr & Chinese Cross* — *VI. Sliding-Block Theorems* — *VII. Commissions, 2024–2026*. Each entry has its corresponding sheet's tiny rotation angle drawn beside it as a dim olive-rule arc. Five tipped-in index cards (item 3 above) sit in the lower half of the sheet at gentle rotations. - **Sheets 1 — 6** present six casework chapters. Each sheet is composed of: 1. A *running head* in Playfair italic at the top of the sheet (e.g. *Sheet III — Polyomino Studies*), in column 2. 2. A *project code* in JetBrains Mono in column 5 (`PPZ/2026/Δ-03`). 3. **One large polyomino plate** (item 1 above) occupying columns 2–4, painted in on entry. 4. A *prose body* of 110–180 words in Inter 15.5px, columns 2–3, reading like a working engineer's note: *"The L-tromino fits the 6×6 deficient board iff the missing cell is congruent to the central monomial of any odd-parity coloring."* Caption text — figure numbers and equations — in JetBrains Mono in column 1. 5. A *pencil marginalia mark* (item 4) annotating one specific polygon of the plate. 6. A *quiet page-turn cue* at lower-right: the corner of the next sheet visible at +3° rotation, *just* peeking out, with a 1px text label "next →" that fades up at 80% sheet-progress. - **Sheet 7 — *Commissions*.** The *bottom* of the pile. Slightly yellowed (the cream is warmed 4% toward `#F0E6CF`), with a faint stamped impression top-right reading "ARCHIVED" in JetBrains Mono 14px set at -7° rotation, in olive-rule at 22% opacity. Five tipped-in cards. A short colophon in Playfair italic 11px at the foot: *"Set in Playfair Display & Inter. Printed in cream vellum. Bound, by hand, in Milan."* **The Layered-Depth Mechanic (signature interaction):** Use `position: sticky` on a master `.stack` container at viewport height. Each `.sheet` is `position: absolute` within the stack, with its own `transform: translateY() rotate()`. A central `requestAnimationFrame`-driven controller maps `window.scrollY` (normalized to the stack's progress 0..1) to a *per-sheet* visibility profile: each sheet is *flat & active* in its own 1/7 progress band, *fanned & visible* before its band, and *lifted away* after its band. Use `will-change: transform, opacity` on each sheet, and `prefers-reduced-motion` halts the animation while keeping the stack readable as a static, fanned composition. Lifting transitions are **slow**: 1.4s `cubic-bezier(0.22, 0.61, 0.36, 1)` for the active sheet's exit (`translateY(-118vh) rotate(-14deg) opacity 0`), with the *next* sheet rising into focus across the same arc but inverted. The fanned underlayer rotation snap-corrects to its new role with a 240ms spring as the stack reshuffles. **Progressive-Disclosure (signature pattern, deliberately underused in the corpus):** This is the soul of the site. Three layers of disclosure are wired throughout: 1. **Hover-disclosure on plates:** mousing over any polyomino cell *reveals* its row/column coordinates and its solver-step index in a tiny tooltip set in JetBrains Mono 10px, drawn as a 0.4px-bordered cream tag. After 320ms hold, a *second* layer appears: a hand-drawn arrow connecting the cell to its symmetric twin elsewhere in the plate. 2. **Click-disclosure on figures:** clicking the figure number in the margin *expands* the figure to fill columns 1–5 over a 600ms ease, the prose flowing aside in two columns. A `Esc` key collapses it. 3. **Dwell-disclosure on prose blocks:** if the user lingers on a paragraph for >2.4s (intersection-observer + dwell timer), a tiny mint-pastel 3px square appears in the right margin signaling "there is a footnote here". Clicking it surfaces the footnote in the same margin, in 11px Inter. **No CTAs, no pricing tiers, no stat grids, no testimonials, no logos-of-companies-we-work-with row.** The site is a *workbook*, not a sales surface. It earns trust by *being* the practice's finest work, not by claiming anything. **Cursor:** the default cursor over plates is replaced by a 14px cream-vellum *measuring caliper* SVG with a 0.4px ink stroke. Over prose, the standard text I-beam. **Sound:** none. Silence is part of the aesthetic. **Loading state:** the cream-vellum field paints in first, then a single horizontal hairline draws across at the wordmark's baseline, left-to-right over 600ms. Only then does the wordmark fade in. Total perceived load < 900ms. ## Uniqueness Notes This design commits to choices that deliberately differ from the rest of the corpus. Seed used: **`aesthetic: minimalist, layout: layered-depth, typography: playfair-elegant, palette: pastel, patterns: progressive-disclosure, imagery: collage, motifs: retro-patterns, tone: professional`**. 1. **Minimalist aesthetic — only 5% of the corpus.** Frequency analysis shows hand-drawn (80%), glassmorphism (55%), editorial (30%), and dopamine (30%) dominating. *No other site* in the analyzed batch commits to a strict mid-century-Italian minimalism with a Vignelli-grid backbone and a Munari-tinted soul. PPUZZL.dev is the quietest site in the corpus — and the quietness is its loudest move. 2. **Pastel palette — only 10% prevalence — used structurally, not decoratively.** Every other pastel site treats pastel as a wash. PPUZZL.dev assigns each of three pastels (mint, clay, periwinkle) a **structural role** — chapter-tab, primary-figure-fill, secondary-figure-fill — and forbids any other use. The palette obeys a *grammar*, not a vibe. 3. **Progressive-disclosure pattern — only 5% prevalence — implemented in three layers.** The corpus is dominated by parallax (85%), spring (50%), stagger (45%), and cursor-follow (40%). PPUZZL.dev refuses all of these as primary patterns and stakes its interaction identity on *layered disclosure* (hover-coords → dwell-arrows → click-expand → dwell-footnotes). The reader is always *one slow attention away* from the next layer. 4. **Layered-depth as physical paper-stack mechanic, not card shadows.** Layered-depth is at 10% in the corpus, but every other instance uses it as a "hero card with backdrop" device. PPUZZL.dev makes the entire site a **single stack of seven physical sheets** that disassembles in scroll. This is a structural use of the seed term, not a decorative one. 5. **Playfair Display as wordmark hero with the doubled-`P` overlap signature.** The corpus is 85% mono in typography and only 10% serif-classic. PPUZZL.dev uses Playfair Display 800 as the *hero* face — and turns the doubled `P` of `PPUZZL` into a kerned overlap that the reader's eye must *un-puzzle* on first sight. The wordmark is itself the first puzzle of the site. 6. **Collage imagery (rare in batch) executed as tipped-in 3×5 index cards plus polyomino plates.** No other site uses collage as the imagery backbone, and no other site renders collage with the *quiet, technical, museum-display* register PPUZZL.dev demands. Collage here is an *archival* device, not a maximalist one. 7. **Retro-patterns confined to a single 14px left-margin ribbon.** Every other retro/vintage site in the corpus lets retro patterns dominate; PPUZZL.dev quarantines them to a single cut-paper strip with pinking-shears edges, weighting the off-center grid. The motif is *present*, but contained — it serves composition, not nostalgia. 8. **Professional tone — only 5% prevalence — earned through caption discipline, not stock language.** No "we are a leading firm" copy. Every line is dictated as if from a senior engineer's notebook. Project codes, figure numbers, dates, and equations stand in for marketing voice. Trust is conveyed by *craft*, not by claim. 9. **No CTAs, no pricing, no stats grid.** This is a workbook, not a landing page. The corpus norm of stat-grids and testimonial rows is explicitly absent. The site sells nothing on its surface — it *demonstrates*. This is the surest signal of its category. 10. **JetBrains Mono used as a single-stripe technical accent (not a body face).** Mono is at 85% in the corpus, but always as primary type. PPUZZL.dev demotes mono to the *single* role of project codes / dates / equations — a 11.5px olive-rule whisper, never a shout. This inversion of the corpus norm is one of the site's signature moves.