# Design Language for ppuzzl.in ## Aesthetics and Tone ppuzzl.in is a **puzzle-as-artifact** — a curated intellectual cabinet where each puzzle is treated not as a digital game but as a scholarly specimen mounted on archival board. The aesthetic is that of a nineteenth-century naturalist's study crossed with a Oxbridge mathematical problem set: hand-drawn ruling lines, ink-washed margins, geometric constructions made with compass and straightedge, and a persistent sense that someone very serious has spent hours in quiet deliberation over this page. The "hand-drawn" quality here is **not cute, not whimsical, not doodle-casual** — that is the trap (58% overuse in registry). Instead it is **draughtsman-precise**: the kind of hand-drawing that is indistinguishable from technical illustration until you lean in close and see the slight wobble of a compass-drawn circle, the faint ghost of an erased construction line, the pressure variation in an inked diagonal. This is the hand of a geometer, not a scrapbooker. The sepia-nostalgic palette reads as aged vellum and oxidized iron ink — the color of a Royal Society proceedings volume left in a slant of afternoon light. Every interaction has the weight and deliberateness of turning a page. Nothing is urgent. Everything rewards patience. Tone is **scholarly-intellectual**: the site speaks in the register of a journal abstract, never a pitch deck. Puzzles are "problems" or "specimens." Categories are "domains." Difficulty is expressed as "complexity class," not stars or progress bars. ## Layout Motifs and Structure The layout is **minimal-navigation** — a radical editorial reduction. There is no traditional navbar. Navigation is embedded in the typographic system itself: a thin left-rail margin strip (64px) carries ordinal indices and section designators in micro-type, like the running folio of a printed book. The main content column (740px max) is all that exists. No header band, no footer grid, no sidebar column. **Page architecture:** - **Folio strip** (left, 64px, fixed): Roman numerals I–VI mark the six domains of puzzles. Clicking a numeral scrolls to that domain. The strip is ruled with a 0.5px sepia vertical line and uses `letter-spacing: 0.2em` micro-type in weight 300. - **Title zone**: The domain name ("ppuzzl.in") appears once, large, set at the crown of the page in a grotesque at weight 800, tracked at -0.04em. Beneath it, one sentence of description in weight 300 at 16px — nothing more. - **Puzzle cards**: Each puzzle occupies a full-column horizontal band. No card shadows, no rounded corners. The band is divided by a 0.5px horizontal rule top and bottom, like a table row in a ledger. Inside the band: a large geometric construction in SVG (left 40%), and specimen text (right 60%). - **Domain headers**: Drop-cap style — a single large capital letter in grotesque, weight 900, at 80px, anchoring a horizontal rule. The domain name follows in small-caps at 14px, weight 400. - **Scale-hover** is the sole interaction pattern: hovering a puzzle band scales its SVG construction from 1.0 to 1.04 over 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94), and the horizontal rules shift from `#C4A882` to `#8B6B4A` — as if the specimen is being lifted from the cabinet drawer. - No modals, no overlays, no carousels. Click a puzzle band to navigate to that puzzle's own long-form page. **Spatial logic**: generous top padding (120px), tight internal rhythm (48px between bands), absolute minimum whitespace between the folio strip and the column. The page breathes through vertical space, not horizontal margins. **Layered-depth motif**: Three visual planes exist simultaneously. Plane 1 (background): a faint geometric construction grid drawn at 8% opacity — compass arcs, diagonal guides — that never shifts or scrolls. Plane 2 (mid): the content column and its ruled bands. Plane 3 (foreground): the folio strip and the scale-hover SVG constructions that momentarily lift. The layers never overlap except during hover — this creates the sense of specimens arranged in a shallow vitrine. ## Typography and Palette **Type system (all Google Fonts):** - **Display and heading — `Space Grotesk`** (variable, wght 300–700). Used for all headings, domain headers, and the site wordmark. H1 at 72px, weight 800 (via font-weight: 800 with synthesis), letter-spacing -0.04em. H2 (domain headers) at 80px, weight 900, as drop-capital anchors. H3 (puzzle titles) at 22px, weight 600, letter-spacing -0.01em. - **Body and specimen text — `Spectral`** (variable, wght 200–800, ital). Spectral is a screen-optimized serif with letterpress-era proportions — its ink-trap apertures echo the pressure variation of hand-drawn type. Body at 16px, weight 400, line-height 1.75. Difficulty descriptors and complexity classes in `Spectral` italic weight 300, 13px. - **Folio and micro-annotation — `Space Grotesk`** weight 300, 11px, letter-spacing 0.2em, all-caps. Roman numerals in the folio strip. - **NO monospace** — this is not a technical site. No code blocks. **Palette (sepia-nostalgic, seven values):** | Token | Hex | Usage | |-------|-----|-------| | `--vellum` | `#F5EDDF` | Page background — aged uncoated stock | | `--ink` | `#2C1F0E` | Primary text — oxidized brown-black ink | | `--sepia` | `#8B6B4A` | Secondary text, active rules, accents | | `--pale-rule` | `#C4A882` | Passive horizontal rules and grid lines | | `--ghost` | `#E8DDD0` | Plane 1 background construction grid | | `--copper` | `#A0622A` | Hover state for SVG constructions and domain caps | | `--foxing` | `#D4BC9A` | Mid-tone for SVG construction fill tints | **No black (#000000), no white (#ffffff), no grays.** Every value is warm and aged. The palette has a temperature of approximately 2700K — it reads under candlelight, not fluorescent. ## Imagery and Motifs All imagery is **geometric-abstract** and generated in SVG — no photography, no raster imagery, no illustrations from stock. The registry shows photography at high prevalence; ppuzzl.in opts out entirely. **Geometric construction corpus — specimen SVGs:** Each puzzle has its own SVG construction that visualizes its mathematical structure. These are drawn in the style of Euclidean geometric proofs: 1. **Compass arc constructions**: arcs in `stroke: #8B6B4A`, `stroke-width: 0.8`, `fill: none`. Radius points marked with small `×` glyphs at 8px in `Space Grotesk` weight 300. Construction lines (not final) at `stroke-opacity: 0.35`. 2. **Polygon dissections**: filled polygons using `--foxing` at `fill-opacity: 0.25`, outlined at `stroke: #8B6B4A`. Dashed diagonals at `stroke-dasharray: 3 4`. 3. **Graph-theory diagrams**: nodes as 4px circles, edges as 0.6px lines, using `--sepia` throughout. No arrowheads — undirected only. 4. **Number-field arrays**: grid of small numerals arranged in the shape that the puzzle investigates — triangle numbers in triangular arrangement, magic squares in a grid — set in `Spectral` 10px, `--sepia` at 70% opacity. **Layered-depth SVG behavior**: Each SVG has three `` layers: `class="plane-bg"` (construction aids, opacity 0.3), `class="plane-mid"` (primary figure), `class="plane-fg"` (annotations, labels). On hover, `plane-fg` translates -2px vertically over 280ms, giving the depth-plane illusion of a specimen lifting out of its mount. **Background construction grid (Plane 1)**: A single tiling SVG `pattern` element at `8% opacity` — a compass rose subdivision pattern with 120px cells, showing arc intersections and diagonal guides. It tiles the full viewport, is `position: fixed`, and does not scroll. Color: `--ghost` strokes on `--vellum` background. **No icons, no emoji, no UI chrome elements.** The only non-typographic non-geometric element permitted is the folio strip's 0.5px vertical rule. ## Prompts for Implementation Build ppuzzl.in as a **single long-scroll specimen catalogue** — the front page is the complete catalogue, one puzzle band per entry, organized into six domains separated by domain-header drop-capitals. There is no landing page hero section, no splash, no call-to-action. The first thing the user sees, after the wordmark and its single descriptor sentence, is domain I and its first puzzle band. **Implementation mandates:** **1 — The background is alive but still.** The Plane 1 SVG pattern (`position: fixed`, `z-index: 0`, `pointer-events: none`) is rendered once on paint and never updates. It must be an actual SVG `` element tiling a compass-rose cell at 8% opacity. No Canvas, no WebGL, no JS. Pure CSS + inline SVG. **2 — Scale-hover is the only motion.** The only animation on the page is the `transform: scale(1.04)` on a `.puzzle-band:hover .specimen-svg` and the rule color shift. Implement with CSS `transition` only — no JS scroll events, no Intersection Observer, no keyframe animations. The scroll experience must be absolutely quiet and frictionless. **3 — The folio strip is position:sticky.** The left-rail folio (64px wide) uses `position: sticky; top: 0; height: 100vh` so it travels with the viewport. The active domain numeral shifts from `--sepia` weight 300 to `--ink` weight 700 as the user scrolls into that domain — implemented with a minimal IntersectionObserver that adds a `.active` class to the corresponding folio numeral. **4 — Typography is the information architecture.** No decorative dividers, no colored bands, no background colors for sections. The only structure is: horizontal rules (`border-top: 0.5px solid var(--pale-rule)`), domain drop-capitals, and the vertical rhythm of `Spectral` body text. If you are tempted to add a colored section background, use vertical space instead. **5 — Puzzle bands are table rows, not cards.** Implement `.puzzle-band` as `display: grid; grid-template-columns: 2fr 3fr; gap: 32px; padding: 48px 0; border-top: 0.5px solid var(--pale-rule)`. No `border-radius`, no `box-shadow`, no `background`. The band IS the rule, not a box inside the rules. **6 — Every SVG construction is authored, not generated at runtime.** Each puzzle's specimen SVG is a static inline `` with hand-crafted `d` attributes, not procedurally generated. This enforces the draughtsman-precision aesthetic — each one is unique and deliberate. **7 — Responsive behavior**: Below 768px, the folio strip disappears (`display: none`) and domain navigators become inline anchors above each domain header. The specimen SVG stacks above the text column, at full width. The grotesque drop-capitals shrink to 48px. Everything else is unchanged. ## Uniqueness Notes **Planned seed (per assignment):** aesthetic: hand-drawn, layout: minimal-navigation, typography: grotesque-neo, palette: sepia-nostalgic, patterns: scale-hover, imagery: geometric-abstract, motifs: layered-depth, tone: scholarly-intellectual. **Three or more deliberate differentiators from the existing corpus:** 1. **Hand-drawn subverted into draughtsman precision.** The registry shows hand-drawn at 58% — the highest overuse in the aesthetics category — and almost all of those 58% use it as doodle, sketch, whimsy, or notebook scrawl. ppuzzl.in takes the pattern and inverts it: hand-drawn here means the trembling exactitude of a technical draftsman, not the casualness of a Moleskine. The wobble is deliberate, the imprecision is calibrated, and the result reads closer to a 1910 engineering drawing than a 2024 illustration blog. 2. **Navigation embedded in the typographic system, not as a UI component.** The registry shows zero designs with a Roman-numeral folio strip as primary navigation. Minimal-navigation at 3% is underused, and this design takes it to its logical extreme: the navigation is the page margin, the page margin is typographic, and typography is the only UI. There are no buttons, no hamburgers, no nav bars — only the indexed left rail of a scholarly codex. 3. **Scale-hover as the sole animation on an otherwise completely static page.** Scale-hover sits at 2% in the registry — the lowest interaction pattern. ppuzzl.in uses it as the *only* pattern, paired with a deliberate no-motion commitment everywhere else. The contrast between the completely still background grid, the completely still body text, and the single hover-scale on SVG specimens creates a perceptual effect of specimens being lifted from a cabinet — without any scroll-triggered animations, parallax, or kinetic backgrounds (which appear in 40%+ of other designs). 4. **Avoided overused patterns**: full-bleed backgrounds (85%), gradient (91%), photography (high), cursor-follow (6%), scroll-reveal (34%), dark-mode (multiple), glassmorphism, card-shadow grids. ppuzzl.in uses none of these.