# Design Language for PPUZZL.party ## Aesthetics and Tone PPUZZL.party is a **dark-academia parlour soirée** — a candlelit puzzle-evening held in the long gallery of a country house in late autumn 1907, two hours after the lamps are lit and forty minutes before anyone has solved the central enigma. The domain's `.party` suffix is read in the *period* sense — a *gathering*, a *salon*, a *guest-list* — not the contemporary sense of confetti and noisemakers. The whole site behaves as a single hand-bound *programme of the evening*, printed on warm rag paper, foxed at the corners, and tipped with a thin tissue-guard between each "round." The mood is **nostalgic-retro** held at the temperature of a banked fire: not melancholic, not haunted, but quietly sumptuous — the precise warmth of a host pressing a glass of madeira into your palm and saying "we will not begin without you." The **crystalline** motif arrives as *quartz prisms on the salon mantelpiece*, catching amber lamplight and casting thin spectra across the rag-paper page. Every surface is warm-toned (no cool greys, no blues), but the crystal-cast spectra introduce three thin chromatic accents — a single rose-pink ray, a single dim-gold ray, a single pale-emerald ray — exactly where the page wants emphasis. The crystals are not decorative; they are the page's *light source*. Where a crystal sits on the page, that region is brighter, warmer, and faintly fractured into prismatic edges. Where no crystal sits, the page recedes into deep umber. This is a site that knows its own slowness and refuses to apologise for it. There is no hero video. There is no skeuomorphic envelope. There is no fake "RSVP" button. There is one programme, ten guests, four rounds, and a final puzzle that the visitor is invited to consider — never to "complete." The site reads like a Henry James paragraph: long, considered, and entirely unwilling to interrupt itself for a notification. ## Layout Motifs and Structure The composition is **full-bleed** in the most committed sense — the entire viewport is the page, edge to edge, with **zero chrome**: no header, no footer, no sidebar, no hamburger, no fixed navigation, no logo lockup in any corner. The page is the programme; the programme is the page. The reading experience is a single uninterrupted vertical scroll of approximately 480vh — long enough to feel like an *evening*, short enough to finish in one quiet sitting of roughly four minutes. The full-bleed surface is divided into **seven plates**, each plate exactly 100vh tall except the second-to-last (140vh, holding the central enigma) and the closing plate (40vh, a quiet farewell): 1. **Plate I — The Invitation (100vh):** Edge-to-edge warm rag-paper texture. The wordmark `PPUZZL.party` set very small (28px) and centred at 38% of viewport height, with a subtle crystalline sigil — a six-sided quartz prism rendered in SVG, no fill, hairline `#3A2418` stroke — floating above the wordmark. Below the wordmark, in italics: "*A puzzle-evening, by invitation.*" Below that: the date written longhand. The remaining 50% of the viewport is empty rag paper. **No call to action.** 2. **Plate II — The Hour (100vh):** A single full-bleed plate where a clock face — drawn in SVG as twelve crystalline shards arranged in a circle, no numerals, no hands — slowly rotates as the visitor scrolls (one full rotation per scroll-through-plate). The text "*The salon opens at half-past nine.*" is set as a single line of humanist italic, 32px, anchored bottom-left at 8vw/8vh from the corners. 3. **Plate III — The Guests (100vh):** Ten names, one per line, set flush-left, generous 1.8em line-height, in humanist roman. Each name is a guest at the soirée. As the visitor scrolls past each name, a single underline is **drawn from left to right** in warm sepia ink at scroll-velocity (the only animated decoration on the entire site — see *Patterns* below). The underline does not retract. By the end of plate III the ten names are all underlined, like a closing roll-call. There are no avatars. There are no titles. The names are: *Mr. Alaric Vesey, Lady Helen Marchmont, the Hon. Beatrice Quill, Dr. Selim Aydın, Madame Yvette Rouchard, Sir Iain MacAulay, Miss Constance Penrose, Prof. Wilhelm Brauer, Madame Anaïs Levert, the Reverend Thomas Brand.* 4. **Plate IV — The First Round (100vh):** A single warm-rendered photograph-replacement: an SVG drawing of a quartz crystal sitting on green baize, casting a thin rose-pink spectrum across the page. Caption underneath, set in 18px humanist italic: "*Round the First — A cipher, in two parts, concealed in the spectrum cast by the lamp.*" That is the entire round. The puzzle itself is implied, not displayed. The visitor must imagine it. 5. **Plate V — The Second Round (100vh):** Same composition as plate IV, with a second crystal casting a *gold* spectrum. Caption: "*Round the Second — A jigsaw of nineteen pieces, of which the eighteenth is missing on purpose.*" 6. **Plate VI — The Central Enigma (140vh, taller plate):** This plate is the only one that breaks the 100vh rhythm. Three crystals are arranged at 30/50/70% horizontal, casting three spectra (rose / gold / emerald) that *overlap* at the visual centre, producing a small white triangle of pure light. Inside the white triangle, a single sentence is set in humanist small caps at 14px: "*The enigma cannot be solved by the guests; it must be solved by their host.*" Below the triangle, a paragraph of approximately 90 words explains, in nostalgic-retro prose, that the host has, in fact, set the puzzle for themselves — and that the soirée's true purpose is to give the host an evening of company in which to think. 7. **Plate VII — The Farewell (40vh):** A short closing plate. Centred, in italics: "*The evening concludes when the last lamp gutters.*" Below that, set very small (12px), the wordmark `PPUZZL.party` repeats — and is, this time, struck-through with a single warm-sepia diagonal line, drawn last and slowly, as if the host has crossed the evening off their calendar. The page never centres anything except the wordmark. All body copy is **flush-left, ragged-right**, with a left margin of `clamp(8vw, 11vw, 180px)` and a right margin of `clamp(12vw, 22vw, 420px)` — a deliberately *book-like* asymmetric rectangle of type that respects the rag-paper background and refuses to fill the screen edge-to-edge with prose. The full-bleed commitment is to the *background*, not the text. This inversion — full-bleed paper, narrow column of type — is a deliberate departure from the dominant full-bleed pattern in the cohort, which usually means edge-to-edge content. ## Typography and Palette **Typefaces — Google Fonts only, three faces, used with restraint.** - **EB Garamond** (variable, weight 400–800, italic). The principal humanist face, carrying every paragraph of body copy and every guest's name. Used at 18px / 1.65 line-height for body, 22px italic for the soirée's stage-directions ("*The salon opens at half-past nine.*"), 14px small-caps for the central enigma's sentence-in-the-triangle. EB Garamond is chosen for its 16th-century humanist warmth — broad ink-traps, a generous x-height held below the ascender line, and italics that lean rather than slant. This is where the **humanist** seed lives: the letterforms feel *written* rather than designed. - **Cormorant Garamond** (weight 300, italic only). Reserved for plate-titles ("*Round the First*", "*The Hour*", "*The Farewell*") at 32–40px italic. Cormorant is a thinner, more affected cousin of Garamond — its italic terminals curl with a faint mannerism that suits the parlour-soirée register. Never used for body copy. - **Cormorant Unicase** (weight 500, regular). Used in exactly one place: the wordmark `PPUZZL.party` at 28px on plate I and 12px (struck-through) on plate VII. Unicase blends roman caps and lowercase forms — `P`, `Z`, `L` are uppercase letterforms; `pa`, `rty` are lowercase — producing a faint typographic *fracture* that echoes the crystalline motif. The letterforms themselves contain the crystal. No mono. No sans-serif. No display sans. The frequency analysis shows mono at 90% and sans-grotesk-adjacent faces dominant in the cohort — PPUZZL.party refuses both. The whole site is set in three Garamond cuts because dark-academia in 1907 did not have Helvetica. **Palette — warm, eight stops, no blues, no cool greys.** - `#F0E6D2` — *rag-paper cream*, the dominant background across all seven plates. This is the colour of unbleached letterpress stock held under a warm lamp. - `#E8D9BE` — *foxed paper*, used as a slow turbulence-noise overlay on the rag-paper background to give every surface a faint tan-spotted age. Never solid. - `#3A2418` — *iron-gall ink*, the primary text colour. Reads almost-black on screen but, at close inspection, is unmistakably warm umber. All body copy, all guest names, all plate titles. - `#5C3A1F` — *banked-coal umber*, used for the underlines drawn under guest names and for the strikethrough on the closing wordmark. A warmer, slightly redder hue than the ink. - `#8A4A1E` — *mantelpiece mahogany*, used for the SVG outlines of the quartz crystals on plates IV / V / VI. The crystals are drawn in this colour as hairline `0.75px` strokes. - `#D89A6E` — *amber-lamplight*, the warm radial glow that emanates from each crystal on plates IV–VI. Rendered as an SVG `feGaussianBlur` halo, never as a solid fill. - `#C2596B` — *rose-spectrum*, the first prismatic ray cast by the first crystal. Appears only on plate IV and, partially, plate VI. Used only in spectra, never in type. - `#B8924A` — *gold-spectrum*, the second prismatic ray cast by the second crystal. Plate V and plate VI. - `#7A8C5E` — *emerald-spectrum*, the third prismatic ray cast by the third crystal. Plate VI only. Of the three accent colours this is the most muted, almost a *moss* rather than a green — chosen so it does not introduce a cool-blue undertone into the warm palette. **No gradients except the three SVG-radial spectra around the crystals.** No mesh. No glassmorphism overlays. The frequency analysis shows gradient at 86% — PPUZZL.party uses gradient *only* as the physically-justified light cast by a glass prism, never as a decorative wash. ## Imagery and Motifs **No photography.** None. The frequency analysis shows photography at 93% — PPUZZL.party refuses entirely. Every visual element is either: 1. **SVG line drawing**, hairline 0.75px stroke in `#8A4A1E` mantelpiece-mahogany, no fill, of one of three subjects: a quartz crystal (six-sided prism, three visible faces, one terminating point), a clock face (twelve crystalline shards arranged radially), or a thin tissue-guard (a single horizontal sweeping curve representing the protective tissue between plates of an old book). 2. **Procedural SVG noise**, a single layered `feTurbulence` filter (baseFrequency 0.78 fine + 0.022 slow, numOctaves 3, then `feColorMatrix` clamping to `#E8D9BE` foxed-paper), applied as a 6% opacity overlay across all seven plates. This is the rag paper. 3. **SVG radial-gradient spectra** cast by the crystals on plates IV / V / VI, computed as cone-shaped gradients in `#C2596B` / `#B8924A` / `#7A8C5E`, each at 14% peak opacity, blurred with `stdDeviation=2`, masked to the cone shape with a soft falloff. This is the **minimal** imagery commitment. The frequency analysis shows minimal imagery at only 10% — PPUZZL.party joins that minority deliberately. The entire visual world is three SVG drawings, one paper texture, and three coloured spectra. Nothing else. **Crystalline as the load-bearing motif.** The crystal is not decoration. It is the **light source** of the site. Every plate that has emphasis (plates I, IV, V, VI) is illuminated by a crystal. Every plate that does not (plates II — except for the clock-of-shards which is *also* crystalline — and III and VII) recedes into the deep `#3A2418` umber of unlit rag paper. The crystals are mathematically consistent: each is a 60-degree-apex hexagonal prism with three visible faces, and each casts a spectrum that obeys Snell's law for crown glass (n = 1.52) — meaning the rose-pink ray refracts at the largest angle, the gold ray at a middling angle, and the emerald ray at the smallest. This is not a detail any visitor will calculate; it is a detail the *page* knows about itself. **The double-Z fracture.** The wordmark `PPUZZL.party` contains a deliberate visual fracture in the `ZZ` glyph-pair. In the Cormorant Unicase setting, the two `Z`s are drawn as if they were the cleavage planes of a fractured quartz crystal — the upper-left terminal of the first `Z` and the lower-right terminal of the second `Z` are extended by 1.5px and angled at 60 degrees, exactly the apex angle of the hexagonal-prism crystal motif. Visitors will read it as `PPUZZL.party`. Designers will read it as a crystal. This single motif anchors the entire site's iconographic logic. **No icons.** No social-media glyphs, no menu hamburger, no chevrons, no arrow-rights. Where the page would conventionally use an icon, it uses either typography (an em-dash, a thin-space, an italic letter) or it omits the element entirely. ## Prompts for Implementation Build PPUZZL.party as a **single-document, vertical-scroll, four-minute reading experience**. One HTML file, one CSS file, one small JS module. No SPA, no router, no framework, no build step beyond a single esbuild minification pass. The visitor lands, scrolls, finishes, and closes the tab. There is no second page. There are no links to other domains. **Storytelling cadence — seven plates, one continuous evening:** 1. Page-load fades the rag-paper background in over 1.4s, then the wordmark fades in over 0.8s with a faint letter-by-letter stagger, then the crystalline sigil draws itself above the wordmark with an `path-length` reveal over 1.2s. Total opening choreography: ~3.4s. Then the page goes still and waits for the visitor to scroll. 2. Scroll-driven progression. Each plate occupies its specified viewport-height; CSS `scroll-snap-align: start` is applied softly at the top of plates II–VII so the visitor's wheel naturally rests at each plate's threshold but is not forced to. (Snap is *suggested*, never *imposed*. A visitor who scrolls fast is not interrupted.) 3. **The underline-draw is the only animated UI on the entire site.** On plate III, each of the ten guest names has a single underline drawn beneath it as the visitor scrolls past. The underline is an SVG path with `stroke-dasharray` set to its full length and `stroke-dashoffset` driven by `IntersectionObserver` + scroll-position math. The stroke is `#5C3A1F` banked-coal umber, 1.25px, with a slight tremor introduced by SVG `feTurbulence` (baseFrequency 0.9, scale 0.4) to simulate ink-on-paper. Each underline takes 0.6s to draw at average scroll velocity and the draw is *velocity-coupled*: faster scroll, faster ink. The underline never retracts. Frequency analysis shows underline-draw at only 16% — PPUZZL.party makes this its signature gesture and refuses every other animation. 4. **No parallax.** Frequency analysis shows parallax at 90% — PPUZZL.party refuses categorically. Every element on the page scrolls at exactly 1:1 with the visitor's scroll. The rag paper does not drift. The crystals do not parallax. The clock on plate II rotates as a function of scroll-progress within plate II, but it does not translate. Stillness is the design. 5. **No spring physics, no magnetic cursors, no cursor-follow.** Frequency analysis shows spring at 56%, cursor-follow at 46%, magnetic at 26% — PPUZZL.party refuses all three. The cursor is the cursor. It does not have a custom shape. It does not attract any element. The visitor is a reader, not a player. 6. **One micro-interaction only — the closing strikethrough.** When the visitor reaches plate VII (the farewell), the closing wordmark `PPUZZL.party` is drawn unstruck, then waits 1.6s, then has a single warm-sepia diagonal line drawn through it from upper-right to lower-left over 0.9s. Once drawn, the line stays. There is nothing to click after this point. The page is complete. (If the visitor scrolls back up, the strikethrough remains drawn — the evening cannot be un-concluded.) 7. **Crystal lamplight ambience on plates IV / V / VI.** The amber halo around each crystal performs a *very slow* opacity oscillation (0.10 → 0.16 → 0.10 over 7s, ease-in-out, infinite). This is the only loop on the site. It evokes the gentle pulsing of a candle-flame inside the crystal, and it is just slow enough that visitors register it subconsciously rather than consciously. **Storytelling over conversion.** There is no email capture, no newsletter sign-up, no "RSVP" button (despite the `.party` domain), no pricing block, no statistics grid, no testimonials, no logos-as-social-proof, no CTA banner, no exit-intent modal, no cookie banner styled as a hero. This is a programme of an imagined evening, not a landing page. The visitor's only action is to scroll, read, and close the tab — the same action they would take with a printed pamphlet. **Fonts loaded with `font-display: swap` and a single `` to `fonts.gstatic.com`.** EB Garamond and Cormorant variants are loaded as variable fonts, total payload ~78KB. Cormorant Unicase is loaded as a single static cut, ~22KB. **Total page weight target: under 180KB.** No images (other than inline SVG). No video. No tracking pixels. No analytics. No third-party fonts beyond Google Fonts. No CDN dependencies beyond Google Fonts. The page should load on a 3G connection in under 1.5s and should remain perfectly readable in a text-only browser, because in a text-only browser it is — by design — exactly what it pretends to be: a programme of an imagined evening, set in three Garamond cuts. ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from the patterns documented in the frequency analysis and from every other PPUZZL site in the cohort: 1. **`.party` read as 1907 parlour-soirée, not festive.** Every other `.party` domain in the cohort that exists or will exist treats the suffix as confetti, balloons, neon, or dance music. PPUZZL.party reads `party` in the period sense — a *gathering, by invitation* — and commits to the candlelit-salon register absolutely. This is a `.party` domain that refuses to throw a party. 2. **Dark-academia at 3% — the third site in the cohort to commit.** Frequency analysis shows dark-academia at only 3%. PPUZZL.party joins this minority deliberately and treats dark-academia as a *spatial-temporal* aesthetic (a specific room at a specific hour in a specific year) rather than a moodboard of book-stacks. This differs from PPUZZL.in's dark-academia (which is a Lisbon observatory at sunset) by being explicitly *interior*, *autumnal*, and *event-bound* — not a permanent room but a single evening's gathering. 3. **Full-bleed inverted: edge-to-edge paper, narrow column of type.** Frequency analysis shows full-bleed at 83%. PPUZZL.party makes the full-bleed commitment to the *background* — the rag-paper texture genuinely edges the viewport — but holds the type column to a deliberately narrow, asymmetric, book-like rectangle of `clamp(8vw, 11vw, 180px)` left margin and `clamp(12vw, 22vw, 420px)` right margin. This inversion (full-bleed paper, narrow text) is structurally opposite to the cohort's typical full-bleed-content approach. 4. **Underline-draw as the only animation on the entire site.** Frequency analysis shows parallax at 90%, spring at 56%, stagger at 53%, cursor-follow at 46%, magnetic at 26%. PPUZZL.party refuses all five and commits to **underline-draw** (16% in the cohort) as the single animated gesture. The ten guest names on plate III are the entire interaction model. Underline as a metaphor for *roll-call*: each guest is "checked in" as the visitor reads past them. 5. **Crystalline as light source, not decoration.** The frequency analysis shows crystalline at 13% — present in the cohort but typically deployed as shard-shaped UI accents (jagged borders, faceted backgrounds). PPUZZL.party promotes the crystal to *the page's only light source*. Plates with crystals are bright; plates without are dim. The crystals refract three colours that obey Snell's law for crown glass. This is the only site in the cohort where the crystalline motif performs work, not just ornament. 6. **No photography, no icons, no gradients-as-decoration.** Frequency analysis shows photography at 93%, gradient at 86%. PPUZZL.party refuses both. The entire visual world is three SVG drawings (a crystal, a clock-of-shards, a tissue-guard), one procedural noise texture, and three radial spectra — and the radial spectra exist only because the crystals refract. No photo. No icon. No decorative gradient. 7. **Three Garamond cuts, no mono, no sans.** Frequency analysis shows mono at 90% across the cohort. PPUZZL.party uses zero mono, zero sans-serif, zero display sans. The entire site is set in EB Garamond + Cormorant Garamond + Cormorant Unicase — three cuts of the same 16th-century humanist face — because the chosen historical setting (1907 country-house parlour) had no access to Helvetica, no concept of monospace, and no inclination toward sans-serif. The typography is *period-correct* to the imagined setting, not period-neutral. **Chosen seed (from assignment):** *aesthetic: dark-academia, layout: full-bleed, typography: humanist, palette: warm, patterns: underline-draw, imagery: minimal, motifs: crystalline, tone: nostalgic-retro.* **Avoided patterns from frequency analysis:** hand-drawn (86%, refused), glassmorphism (56%, refused), photography (93%, refused), parallax (90%, refused), spring (56%, refused), cursor-follow (46%, refused), magnetic (26%, refused), card-grid (53%, refused), gradient-as-decoration (86%, allowed only as physically-justified prismatic refraction), mono typography (90%, refused), sans-grotesk (refused), centred-everything (70%, refused except for the wordmark). **Distinct from other PPUZZL sites in the cohort:** PPUZZL.com (grainy archival masonry of vintage photographs, mysterious-moody, Fraunces) emphasises *photographed objects* and a packed-bottom masonry; PPUZZL.in (dark-academia Lisbon observatory at sunset, watercolor, Limelight art-deco display) is a 360vh slow-scroll watercolor scroll-painting in art-deco display type. PPUZZL.party diverges from both by being **interior** rather than landscape (PPUZZL.in's window opens onto the city; PPUZZL.party never leaves the salon), **event-bound** rather than archival (PPUZZL.com is an archive; PPUZZL.party is one evening), and **typographically humanist** rather than display (PPUZZL.in uses Limelight art-deco; PPUZZL.party uses three Garamond cuts and refuses display type entirely). The three sites share only the wordmark `PPUZZL` and a refusal of generic puzzle-site iconography (no jigsaw-piece silhouettes, no crossword grids).