# Design Language for PPUZZL.in ## Aesthetics and Tone PPUZZL.in is a **dark-academia reading room at the magic hour** — a long, narrow library on the top floor of a forgotten observatory in Lisbon, where the last hour of sunset pours through tall mullioned windows and lands on a single oak table covered in unsolved puzzle fragments. The whole site reads as one held breath at 6:47 p.m. — the moment when the librarian has just lit the green-shaded lamp but the windows still glow amber. Picture the visual world of *The Secret History* photographed by Gregory Crewdson, then re-painted from memory by a watercolorist working only with rosehip, persimmon, and burnt sienna pans, then printed in a slim limited edition with hand-cut crystalline endpapers. The tone is **zen-contemplative** — not hushed, not solemn, but *patient*. The puzzle is not waiting to be solved; it is simply being itself. The visitor is not a user trying to complete a task; the visitor is a graduate student who has wandered into the wrong wing of the library and decided to stay. Nothing on the page hurries. Nothing flashes. The interaction model is closer to "settling into a chair" than "navigating an interface." Every element carries the soft melancholy of academia at dusk — leather-bound silence, the smell of dust on warm wood, the faint *tick* of a brass pendulum two rooms over. This site is deliberately the opposite of a CTA-driven landing page. It rejects urgency. It is a meditation on the **double-Z fracture** in the wordmark — a single crystalline crack running through `PPUZZL` like a fault line across a stained-glass window. The Z's are not letters; they are shards of cooled magma frozen mid-shatter, lit from behind by the dying sun. ## Layout Motifs and Structure The composition is **hero-dominant** in the most committed sense: a single, immense hero occupies the first 100vh, then *also* the second 100vh, then *also* the third. There is no card grid. There is no card. There is no grid. The page is one slow vertical scroll through a single continuous illustrated tableau — like unfurling a Japanese emakimono scroll painting that happens to be oriented top-to-bottom rather than left-to-right. - **Act I — The Window (0–100vh):** A single watercolor of an arched library window fills the viewport. Outside the window: sunset over slate rooftops. Inside the window frame: the wordmark `PPUZZL.in` painted in art-deco-display, the double-Z rendered as an actual fissure in the glass with sun bleeding through. No nav bar at the top. No hamburger. Only the painting and a thin handwritten line in the lower-left margin: *"a puzzle for the long evening."* - **Act II — The Table (100vh–200vh):** As you scroll, the camera does not pan — the painting continues *down*. The window recedes, and the oak table appears below it, scattered with crystalline puzzle fragments rendered as faceted watercolor gemstones. Twelve fragments. Each one, on hover, gently lifts on a soft spring (no bounce, no overshoot) and casts a warm translucent shadow on the wood grain. A fragment, when clicked, slides into a small inset frame and reveals a single sentence of context: a riddle, an etymology, a quiet observation about the puzzle. - **Act III — The Lamp (200vh–300vh):** The lamp turns on. The amber palette warms by 8%. The watercolor shifts from cool-shadow to lamp-warm. A second pass through the same scene becomes possible — fragments previously dim now glow. This is where the deepest content lives: longer prose passages set in a soft serif, two columns wide, like the inside of a journal. - **Act IV — The Door (300vh–360vh):** The painting tilts up to a paneled door at the far end of the room. The door is the only interactive element resembling a CTA, and it is rendered as an aquarelle sketch with a single hand-painted brass handle. Pressing it triggers a slow page transition (1.4s) — a fade through warm amber into the next view. The grid is intentionally absent in the visible layout, but invisibly the page locks to a 9-line baseline grid at 8px units, so all type and motif placements hit musical intervals (3-line, 5-line, 8-line stanzas — a Fibonacci breathing rhythm). The eye never sees the grid; the eye only feels that the page is "right." There is **no header navigation**, **no footer**, **no pricing**, **no testimonials**, **no stat block**, **no logo cloud**, **no CTA stack**. Navigation, when it exists at all, lives as four hand-painted Roman numerals in the right margin (I, II, III, IV) corresponding to the four acts. ## Typography and Palette **Fonts (Google Fonts only, four faces, used with restraint):** - **Display & Wordmark — *Limelight*** at 96px → 168px for the hero `PPUZZL.in` and act-titles. Limelight is a true 1930s art-deco display face with high-waisted geometry and crystalline angles — perfect for the double-Z fracture motif. Letter-spacing tightened to -0.012em for the wordmark, opened to +0.04em for act-titles. Color drawn from `#3A1F0E` ink with a 2% grain overlay so the letters look rubber-stamped onto rag paper, not screen-rendered. - **Editorial Display Secondary — *Cinzel Decorative*** (700) at 28px–40px for chapter ornaments and the four Roman numeral act markers. Cinzel pairs cleanly with Limelight, sharing the geometric upright stress and stone-cut serifs without competing. - **Body & Long-form Prose — *Cormorant Garamond*** (400, italic 400, 600) at 19px/1.7. Used for the riddle texts, etymological notes, and Act III journal passages. Tracked at +0.005em. Optical sizes engaged. Drop-caps in Limelight, three lines tall, on the opening of each prose stanza. - **Margin Annotations — *Caveat*** (400) at 16px. The handwritten librarian's notes in the page margins. *Only* used for marginalia — never for headings, never for body. Slight rotation (-1.4°) so each note feels truly handwritten in the moment. **Palette — sunset-warm, but with academia's deep shadows:** - `#F4E3C4` — *vellum cream*, the base paper color (not pure white, not cream — the color of an unbleached page held to lamplight) - `#E89A5C` — *persimmon*, the dominant warm sunset glow on the upper third of the page - `#C4582B` — *burnt rosehip*, the deeper sunset tone, used in shadows on the watercolor and as accent rule lines - `#6E2A1C` — *oxblood claret*, the deepest warm shadow, used for the wordmark fissure and crystalline shard outlines - `#3A1F0E` — *espresso ink*, the body text color (never pure black — black is too cold for this room) - `#2B3A4A` — *slate-twilight*, the cool counterpoint used only in Act I window-glass and as the cool side of crystalline shards - `#8FA68E` — *librarian's lamp jade*, a single muted green, used only on the lampshade in Act III and on the four Roman numerals to mark navigation - `#D4A574` — *brass tarnish*, the door handle, the page-edge gilding, the rule lines under chapter titles The palette is deliberately analogous-warm with two precise cool accents (slate-twilight and lamp jade). The cool tones are scarcity-deployed — together they occupy less than 8% of pixel area — which is what gives the warm sunset its physical weight. ## Imagery and Motifs **No photography. No stock illustration. No gradient mesh. No 3D renders.** Every visual is painted in **watercolor** and rendered as crisp PNG sprites with subtle paper-grain texture baked in, layered over an SVG line-work skeleton. The watercolor must look *painted*, not filtered — visible pigment pooling at edges, dry-brush texture on highlights, a tiny coffee-ring stain in the lower-right margin of one (only one) act. **Crystalline shards — the recurring motif:** The wordmark's double-Z is rendered as a **crystalline fracture** that recurs across the site as a structural element. There are 7 distinct shard shapes — irregular tetrahedra, drawn in SVG and watercolor-filled. They appear as: - The 12 puzzle fragments on the oak table (each shard is a different puzzle "piece") - The fault line splitting the wordmark - The crystalline endpaper pattern in the page margins (a faint repeated tessellation at 6% opacity) - The chapter dividers — a single shard rotated 23° between sections - The cursor on hover — a tiny hovering shard with a 60ms spring-trail Shards always have: - A 1.0pt outer outline in `#6E2A1C` oxblood - Internal facet lines at 0.5pt in `#C4582B` burnt rosehip - A watercolor wash gradient (warm-to-cool diagonally), with at least one visible pigment-pooling edge - A cast shadow rendered as a soft watercolor wash, never a CSS box-shadow **Watercolor scenery objects (painted once, placed deliberately):** - The arched library window with mullion divisions - The oak table grain, one continuous wash - A green-shaded brass desk lamp (off in Act I, on in Act III) - A leather-bound book stack, three volumes, spine titles in faux-Cinzel - An hourglass with sand mid-fall (the only motion-implied object) - A brass pendulum on a chain - A single dried rose pressed between two of the puzzle fragments **Crystalline tessellation pattern** in the margins is generated procedurally but rendered with watercolor texture — a Voronoi diagram seeded by `PPUZZL.in`'s own letter-positions, then washed with a sunset gradient at 6% opacity. The pattern is the visual rhyme between "puzzle" and "crystal," reminding the eye that every puzzle is, geometrically, a tessellation that has been disturbed. ## Prompts for Implementation Build PPUZZL.in as **a single-route, slow-vertical-scroll painting** — one HTML file, one CSS file, one small JS module. The visitor should feel they are unrolling a hand-painted scroll, not "scrolling a website." Total content height: ~360vh. No horizontal scroll. No internal scroll containers. No modals. **Storytelling cadence — four acts, each an unhurried minute:** 1. **Act I — The Window.** The visitor lands on the watercolor window. The wordmark fades in glyph-by-glyph over 2.4s using a soft watercolor-bleed mask (each letter resolves as if pigment is wicking outward into wet paper). After the wordmark settles, a single line of marginalia handwrites itself in Caveat — "*a puzzle for the long evening*" — at 90 chars/min, the speed of a contemplative writer, not a typewriter. 2. **Act II — The Table.** As the visitor scrolls, the camera does not parallax independently — the entire painting moves as one continuous tableau. The 12 crystalline puzzle fragments reveal themselves with a **stagger-spring** entry: each fragment scales from 0.94 → 1.00 over 480ms with a critically-damped spring (no overshoot), staggered by 80ms. Hover lifts a fragment by 6px on a 240ms spring, casts a warm `#C4582B` 24px-blur shadow, and reveals its index number (I/XII, II/XII, etc.) in Cinzel Decorative. Click expands the fragment into an inset frame with a single riddle, paneled out beside the table. 3. **Act III — The Lamp.** The lamp's brass key turns at the 200vh threshold. The page's CSS custom property `--warmth` lerps from 0.0 to 1.0 over 1.6s, brightening every warm tone by 8% and darkening every cool tone by 12%. The lampshade jade `#8FA68E` becomes the only spot of cool brightness. Long-form prose unfolds in Cormorant Garamond, two slim columns, drop-capped. 4. **Act IV — The Door.** A single brass-handled aquarelle door. Hover dims the rest of the page to 70% luminance and warms the door's halo. Click triggers a 1.4s amber crossfade page transition. **Animation directives — spring, watercolor, patience:** - All motion uses **spring physics** with critical damping (mass=1, stiffness=180, damping=26 — the "settled" preset). No easing curves. No bounces. The rejection of bounce is a design statement. - Watercolor pigment-bleed is implemented as an SVG `` chain: `feTurbulence` (low frequency, baseFrequency 0.012) → `feDisplacementMap` (scale 4) → `feGaussianBlur` (stdDeviation 0.6) → `feComposite`. Applied to text reveals and shard appearances. The result must look like ink spreading on damp paper, not a generic blur. - Cursor: tiny crystalline shard sprite (12px), trails the cursor with an 80ms spring delay. On hover over fragments, the shard brightens; on idle (>4s), the shard slowly rotates one full turn over 8s, like a held jewel being turned in lamplight. - Scroll speed is **rate-clamped**. If the visitor scrolls aggressively, the painting moves at most 1.4× its natural rate — the page resists hurry. This is implemented via `requestAnimationFrame` lerp on a `currentScroll` value chasing `targetScroll` at 0.08/frame. - The hourglass in Act II animates a single grain of sand falling every 1.2s. No more. The motion is *meaning*, not decoration. - A faint, randomized 3-second-per-cycle warm-flicker on the lamp jade in Act III, ±2% luminance, simulating gas-lamp breathing. **Sound (optional, default off, button-toggled):** Single ambient loop — a distant brass pendulum tick at 60bpm, a faint paper rustle every 14s, the room tone of a stone library at dusk. **Storytelling, not selling:** There is no "Sign Up." There is no "Get Started." There is no "Pricing." There is no "Testimonials." There is no "Trusted by." The site does not explain what PPUZZL.in *is*. The visitor leaves having *experienced* it, not having *understood* it. If a CTA must exist anywhere, it is the painted door in Act IV, and clicking it leads only to a single-line page that says, in Caveat: "*the room is closed for the evening. come back tomorrow at six.*" **Avoid absolutely:** - Card grids, bento boxes, modular blocks - Parallax-decoupled layers (the painting is one tableau, not parallax depth) - Hand-drawn aesthetic in the doodle/sketch sense (this is *fine watercolor*, not napkin scribble) - Mono fonts of any kind - Glassmorphism, frosted blur, neon glow - Photography of any kind - Gradients used as backgrounds (gradients live only inside watercolor washes) ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Dark-academia in a sea of glassmorphism and hand-drawn.** Frequency analysis shows hand-drawn at 80%, glassmorphism at 55%, dark-academia at 0%. PPUZZL.in commits to dark-academia as a *spatial* aesthetic — the site is a room at dusk, not a moodboard of book stacks. It refuses both the hand-drawn doodle vocabulary and the frosted-glass UI vocabulary that dominate the cohort. 2. **Hero-dominant taken literally for the entire page.** Hero-dominant appears at only 5% in the analysis, and where it does, the hero is the first viewport. PPUZZL.in's hero *is* the entire page — 360vh of single continuous tableau, no card grid below, no feature blocks, no footer. The whole site is one painting unrolling. 3. **Art-deco-display typography (Limelight + Cinzel Decorative) against the prevailing mono and humanist sans.** Mono dominates at 85%, humanist at 15%, art-deco-display at 0%. The 1930s geometric display face is used not for retro pastiche but as a structural rhyme with the crystalline shard motif — Limelight's high-waisted Z's *are* the fault line. 4. **Sunset-warm palette without the gradient crutch.** Gradient appears in 85% of designs, warm in 80%. PPUZZL.in is warm but uses *zero* CSS gradients — every warm transition lives inside a hand-painted watercolor wash, baked into the asset. Gradients-as-backgrounds are explicitly forbidden. 5. **Watercolor imagery, but not as a filter — as the medium.** Watercolor appears at 20% in the analysis, often as a CSS effect or Photoshop overlay. PPUZZL.in's watercolors are *painted* (or simulated as if painted) with pigment-pooling at every edge, dry-brush highlights, and a single visible coffee-ring stain. The medium is the site's first material. 6. **Crystalline motif as both wordmark and content unit.** Crystalline appears at 10% as motif. PPUZZL.in elevates it to architecture: the double-Z fracture in the wordmark is the same SVG geometry as the 12 puzzle fragments on the table is the same geometry as the chapter dividers is the same geometry as the cursor. One motif, six scales, total recursive coherence. 7. **Zen-contemplative tone with rate-clamped scroll.** Zen-contemplative appears at 5% in the tone analysis. PPUZZL.in operationalizes the tone by *clamping* the scroll rate so the painting cannot be skimmed. The site refuses to be hurried — a technical commitment to the thematic stance. **Chosen seed:** *aesthetic: dark-academia, layout: hero-dominant, typography: art-deco-display, palette: sunset-warm, patterns: spring, imagery: watercolor, motifs: crystalline, tone: zen-contemplative* **Avoided patterns from frequency analysis:** photography (95% — replaced entirely with watercolor), parallax (85% — replaced with single-tableau scroll), full-bleed (80% — replaced with margin-respecting illustration), mono typography (85% — replaced with art-deco-display), gradient palettes (85% — replaced with painted washes), hand-drawn aesthetic (80% — replaced with fine watercolor), card-grid layout (45% — explicitly absent), CTA-heavy layouts and stat-grids (avoided per project directive).