# Design Language for PPUZZL.win ## Aesthetics and Tone PPUZZL.win is **a quiet victory at 4:11 a.m. on the deck of an empty ferry crossing the Inland Sea** — not the victory of fireworks and confetti, but the kind that arrives after the boat has slipped past the breakwater and the wake has begun to phosphoresce. The `.win` TLD is read against its grain: not "you won" in the casino sense, but *win* as in **the long, slow tide finally turning** — the moment a stubborn puzzle finally yields, exhaled rather than shouted. The whole site is an **ethereal**, **zen-contemplative** dispatch from that exact pre-dawn instant when the dark-burgundy horizon begins to breathe and the puzzle's last piece settles into place without anyone watching. The mood is **low-tidal** — slow swells, long halftones, oxblood vapor. Picture the visual register of Hiroshi Sugimoto's seascapes restained in deep wine, layered behind hand-cut frosted-glass panes that drift like derelict ice floes. There is no crowd, no scoreboard, no checkered flag. There is only the visitor, the sound of the engine three decks down, and a few translucent cards floating across the dark water carrying fragments of solved puzzles. The tone never sells, never congratulates, never explains itself — it simply waits, patient as the meridian, for the visitor to read the wave. Inspirations to internalize, not imitate: the deep red lacquer interiors of Tadao Andō's *Awaji Yumebutai* at four a.m.; Olafur Eliasson's *Your Rainbow Panorama* drained of its rainbow and steeped in port wine; Mark Rothko's burgundy-on-black Seagram murals reframed as ferry windows; the album sleeve of Brian Eno's *On Land* if it were re-photographed across the Bungo Channel; the way koi reflect lantern-light in deep water without ever quite showing the lantern. The tone is **earned, exhaled, and slightly grieved** — a win that knows what it cost. ## Layout Motifs and Structure The layout is **uncompromisingly asymmetric**, but the asymmetry is *tidal* rather than journalistic. There is no central column, no balanced grid, no z-pattern. Instead the page is governed by a single invisible **meridian** — a vertical axis shifted to roughly 38% from the left edge (the asymmetric golden ratio's lesser interval) — across which content slides in *from the unexpected side*. Even-numbered acts enter from the right; odd-numbered acts enter from the left; *but* every third act inverts that rule, so the eye never settles into rhythm. Spatial scaffolding (eight scenes, each ~110vh, total page ~880vh): - **Scene 1 — The Far Wake (0–110vh):** A near-black burgundy field. Far below the fold, a single horizontal swell — a wave-form rendered as a 1px sinusoidal SVG — rises and falls across the bottom 18vh of the viewport. The wordmark `PPUZZL.win` sits at 38% horizontal, 62% vertical, set in a tightly condensed display face. No CTAs. No nav. Only the wordmark and the wave. - **Scene 2 — First Pane Drifts In (110–220vh):** A frosted-glass card slides in from the right at scene-progress 0.18, decelerating along a gentle ease-out-quint. The card is large (520×320px on desktop), translucent (backdrop-filter: blur(28px) saturate(140%)), with a hairline burgundy border at 14% alpha. Inside it, a single short verse fragment. - **Scene 3 — The Second Pane (220–330vh):** A second card slides in from the left, *behind* the first; the first card's blur deepens to 44px and its opacity drops to 0.42. The cards never align. They overlap by a deliberately awkward 17%. - **Scene 4 — Wave Crests (330–440vh):** The horizontal sinusoidal wave-form, which has been a 1px line for three scenes, suddenly thickens — its amplitude grows from 12px to 96px peak-to-peak, its line weight from 1px to 2.5px. A new wave is born above it (counter-phase, at 0.6× amplitude). A third joins at 0.36× amplitude. The composition is now three nested standing waves. - **Scene 5 — Card Cluster (440–550vh):** Five glassmorphic cards drift in from alternating sides, each carrying a single solved puzzle fragment (a tangram silhouette, a nine-letter anagram, a knight's-tour board, a 7-segment cryptogram, a haiku). They cluster *off-meridian*, weighted to the lower-right quadrant, leaving the upper-left in deliberate negative space. - **Scene 6 — Wave Inversion (550–660vh):** The waves invert — the dominant wave flips below the secondary, and the burgundy palette deepens by ~8% lightness. The cards from Scene 5 are still partially visible at the upper edge, blurred to 60px, like ice floes left behind by the ferry. - **Scene 7 — The Last Pane (660–770vh):** A single card slides in from directly below (the only vertical-axis slide-reveal in the entire page), translucent enough that the wave-forms remain visible *through* it. Inside, the most plainly stated line of the entire page — a single eight-word sentence — set in italic condensed serif. - **Scene 8 — Open Sea (770–880vh):** All cards have drifted off the meridian and gone. Only the three nested waves remain, slowly dampening their amplitude over 40 seconds toward a flat horizon. The wordmark fades back in at 38% horizontal, 18% vertical (high on the screen now, as if the ferry has moved past). Below it, in 11px condensed mono, three words: `wake. settled. won.` Spatial rules to enforce: - Nothing crosses the meridian *axis* without slowing down at the crossing (cards passing through 38% horizontal must reduce their slide velocity by 65% across that 4vw band — the meridian acts like a tide pool). - No card ever exceeds 62% of viewport width (asymmetry preservation). - Negative space is treated as a *protagonist*: at any given scroll position, ≥ 48% of the viewport must be unoccupied burgundy field. - No horizontal scroll. No internal scroll containers. No modals. No popovers. ## Typography and Palette **Fonts (Google Fonts only, four faces, used with conviction):** - **Display & Wordmark — *Oswald*** at weight 600, set 116px → 184px (clamp), letter-spacing -0.018em. Oswald is a true compressed/condensed sans-serif with vertical proportions that mirror the ferry's tall, narrow windows. The wordmark `PPUZZL.win` is set in Oswald with the `.win` rendered at 0.46× the size of `PPUZZL` and dropped to baseline-aligned with the lowercase x-height — the suffix becomes a quiet appendage rather than a TLD shout. - **Secondary Display — *Bodoni Moda*** italic at 24–36px, used *only* for the eight-word verse fragments inside the cards. Bodoni's high-contrast strokes catch the dark-burgundy field like wine on starched linen. Italic only, never roman, in this role. - **Body — *Cormorant Infant*** at 17px, line-height 1.78, letter-spacing 0.012em. Cormorant Infant is softer than Cormorant Garamond proper — the infant variant has rounded terminals that read as *exhaled* rather than *engraved*. Used for the rare paragraph (no scene contains more than 60 words of body copy). - **Tag/Mono — *DM Mono*** at 11–12.5px, weight 400, letter-spacing 0.06em, all lowercase. Used for scene markers (`scene 04 — wave crests`), timestamp annotations, and the closing three-word coda. Only this single mono face — restrained, since 90% of frequency-analyzed designs already lean on mono. **Color palette (deep-burgundy, eight values):** - `#1A0508` — *Abyss Burgundy* — the page background; deeper than near-black, with a hint of oxblood vapor. RGB(26, 5, 8) — 89% blackness, 5% red residue. - `#2E0A14` — *Wake Wine* — the secondary field; used for the lower 28% of the page where the waves crest. - `#4A1224` — *Lacquer* — used for fine border strokes on cards (at 14–22% alpha) and for the wordmark itself. - `#7A1F3A` — *Murex* — the rarest color; used only for the single italic verse-fragment inside the seventh card. Reserved like a sacrament. - `#B89E8C` — *Driftwood Linen* — body copy color; warm bone, never pure white. Reads on Abyss Burgundy at AA+ contrast (visual impression only — accessibility ignored per instructions, but this happens to land there). - `#E8DFD6` — *Sea Foam Pearl* — the lightest tone; used only for the wave-form strokes themselves and for the wordmark glyphs at 64% alpha. - `#3D5A6C` — *Channel Slate* — a single cool accent, used for the secondary wave-form and the mono coda. It is the only non-burgundy color in the palette and it earns its place by being deeply muted. - `#0E0205` — *Far Horizon* — the absolute darkest stop, used as a 240px-tall vertical gradient at the top edge of every scene to suggest the curvature of the sea. The palette enforces a 92/8 rule: 92% of every viewport must fall within the burgundy/black/linen tonal cluster; the remaining 8% is reserved for Murex, Sea Foam Pearl, and Channel Slate accents. No other hues are introduced — no greens, no yellows, no neutrals beyond Driftwood Linen. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No gradient mesh.** The visual world is built from two and only two ingredients: **glassmorphic cards** and **wave-forms**. Every other visual element on the page must be expressible as one of those two primitives, or it does not exist. **Glassmorphic Cards (the floes):** The cards are the page's only "objects." They are constructed in CSS — no images, no SVG fills — using: - `backdrop-filter: blur(28px) saturate(140%) contrast(105%)` - `background: linear-gradient(135deg, rgba(74, 18, 36, 0.18) 0%, rgba(122, 31, 58, 0.06) 70%, rgba(26, 5, 8, 0.22) 100%)` - A 1px hairline border in `#4A1224` at 22% alpha, *only* on the top and left edges (asymmetric framing — the bottom-right edge is borderless, dissolving into the field). - A 0.5px inner highlight in `#E8DFD6` at 6% alpha, also only on top and left. - Box-shadow: a single soft drop at `0 24px 64px -12px rgba(10, 2, 5, 0.62)` and a tight halo at `0 0 0 1px rgba(232, 223, 214, 0.04)`. - Corner radii: 18px top-left, 22px top-right, 4px bottom-right, 14px bottom-left. **The corners are deliberately mismatched** — each card has its own tetrad of radii, drawn from a fixed sequence. No two cards share the same corner profile. - The cards are physically *thin* — 320px tall is the maximum, never larger than 62% viewport width — and they always carry a single fragment: one verse, one silhouette, one cryptogram. Never a header + body + CTA stack. Never. **Wave-forms (the meridian's voice):** The waves are SVG `` elements with `stroke-dasharray` animated to draw and redraw across an 18-second loop. There are exactly three waves on the page at any time after Scene 4, and they obey strict ratios: - **Primary wave** — amplitude 96px, wavelength 720px, weight 2.5px, color `#E8DFD6` at 78% alpha. - **Secondary wave** — amplitude 58px (0.6×), wavelength 432px (0.6×), weight 1.5px, color `#3D5A6C` at 56% alpha. Counter-phase to primary. - **Tertiary wave** — amplitude 35px (0.36×), wavelength 260px (0.36×), weight 0.75px, color `#7A1F3A` at 38% alpha. Co-phase with primary but offset 90° in time. The waves are drawn using cubic Bézier approximations of sine, not pure mathematical sines — the slight irregularity reads as *handmade water*. They never repeat exactly — a Perlin-noise modulation at 0.04 amplitude is applied to each control point so the waves shimmer rather than tick. **No icons. No buttons. No nav menu. No logo lockup beyond the wordmark.** If something needs to communicate, it does so as a card carrying a verse, or as a wave changing amplitude. There is nothing else. **Decorative micro-elements — used sparingly:** - A single thin horizontal hairline at exactly 38% horizontal in every scene, drawn in `#4A1224` at 8% alpha, 0.5px weight — the visible meridian. Visitors will not consciously notice it; it will register as compositional rightness. - Tiny condensed mono timestamps in the lower-right of cards: `04:11`, `04:14`, `04:18` — actual ferry-deck times, climbing through the page. - A single 0.5px circle (32px diameter) drawn in `#E8DFD6` at 22% alpha in Scene 8's upper-right — the moon pricked into the burgundy. ## Prompts for Implementation Build PPUZZL.win as **a single-route, slow-vertical-scroll tidal poem** — one HTML file, one CSS file, one small JS module. The visitor should feel they are crossing the Inland Sea at four in the morning, not "scrolling a website." Total scroll length is intentionally long (~880vh) and reading pace is intentionally slow (a deliberate visitor takes 4–5 minutes; a hurried one will get nothing and that is acceptable). **Storytelling cadence — eight scenes, sequenced as a tide:** 1. **Scene 1 — Far Wake.** Visitor lands on the near-black burgundy field. The wordmark fades in glyph-by-glyph over 2.8s using a `clip-path: inset()` left-to-right reveal. The single 1px wave-form draws itself across the bottom of the viewport over 4.2s. No other movement. No call to action. The visitor must scroll on their own; nothing scrolls for them. 2. **Scene 2 — First Pane Drifts In.** A glassmorphic card slides in from the right edge, decelerating along `cubic-bezier(0.16, 1, 0.3, 1)` (ease-out-quint). The card carries one Bodoni-italic verse: *"The puzzle exhales when no one is watching."* The card never settles flush — it stops at a small angle to the meridian (3.4° rotation), as if floating. 3. **Scene 3 — The Second Pane.** A second card slides from the left, behind the first. The first card's blur deepens; its opacity drops to 0.42. The two cards overlap by exactly 17% — never aligned, never centered. 4. **Scene 4 — Wave Crests.** The single 1px wave thickens and is joined by two more. The three waves animate in a 12s loop using `stroke-dashoffset` orchestration. No card on screen during this scene — only the three waves and the burgundy field. 5. **Scene 5 — Card Cluster.** Five cards drift in from alternating sides over an 8-second window, each carrying one solved-puzzle fragment. The cluster forms in the lower-right quadrant. Cards are not interactive — clicking them does nothing. Hovering them increases their backdrop-filter blur by 12px (a tactile "looking closer" response) and nothing else. 6. **Scene 6 — Wave Inversion.** The waves swap dominance. The palette deepens by ~8% lightness via a subtle CSS variable transition. The cards from Scene 5 are still partially visible at the upper edge, ghosted to 16% opacity. 7. **Scene 7 — The Last Pane.** One final card slides in from directly below (the only vertical-axis slide-reveal). Inside, in `#7A1F3A` Murex italic Bodoni, the eight-word sentence: *"You did not need to win this one."* 8. **Scene 8 — Open Sea.** All cards drift off-meridian and disappear. The three waves dampen their amplitude over 40 seconds toward a near-flat horizon. The wordmark re-appears at 38% horizontal, 18% vertical. The mono coda fades in: `wake. settled. won.` The page ends without a footer, without links, without anything else. **Animation contract (slide-reveal as the page's heartbeat):** - Every card enters via a `transform: translateX()` (or for Scene 7, `translateY()`) slide combined with `opacity: 0 → 1` and `filter: blur(8px) → blur(0)`. The slide distance is always 38vw or 38vh — the meridian distance. - Easing is *always* `cubic-bezier(0.16, 1, 0.3, 1)` for entries and `cubic-bezier(0.7, 0, 0.84, 0)` for exits. Do not vary. - Scroll-driven progress is computed via IntersectionObserver + a `--scene-progress` CSS custom property (0 → 1) per scene. All animations are bound to that custom property, not to wall-clock time. The user controls the tempo. - Wave-forms animate independently on a wall-clock loop because tides do not wait for scrolling. - No `prefers-reduced-motion` branching is needed for the brief (per instructions); however, the slow base tempo means the design is naturally calmer than most. - Cursor-follow is **forbidden**. Magnetic hover is **forbidden**. Tilt-3d is **forbidden**. The page does not chase the cursor; the cursor is a guest, not a magnet. **Composition rules in code:** - `body { background: #1A0508; min-height: 880vh; overflow-x: hidden; }` - A single `
` containing eight `
` elements. - Cards are `
` elements positioned absolutely within their scene with bespoke `--enter-from`, `--rotate`, `--corner-tl/tr/br/bl` custom properties. - Wave-forms are a single fixed-position SVG layer at z-index -1, with three `` children animated via `requestAnimationFrame` updating `stroke-dashoffset` and a Perlin-modulated `d` attribute. - The meridian hairline is a fixed 0.5px `
` at `left: 38%`, `top: 0`, `bottom: 0`, with `background: #4A1224; opacity: 0.08`. **Forbidden by this design — do not include any of the following:** - No CTA buttons. No "Get Started." No "Learn More." No "Sign Up." No "Download." No buttons of any kind anywhere on the page. - No pricing blocks, no plans, no tiers. - No stat-grids, no counter-animate "1,247 puzzles solved" tickers. - No testimonials, no logos-of-companies-using-us bar. - No FAQ accordions. - No cookie banner styled into the design (regulatory boilerplate, if necessary, lives outside the aesthetic envelope). - No social-share buttons. - No newsletter signup. No email capture. No forms of any kind. - No hero CTA. No secondary CTA. No tertiary CTA. - No card hover-lift, no scale-on-hover, no shadow-bloom-on-hover. Cards respond only with deepened blur, by 12px. - No emoji. No flag icons. No checkmarks. No star ratings. **Voice for any text content:** verses, fragments, or single sentences. Maximum sentence length: 14 words. No paragraphs longer than 60 words anywhere on the page. The site never markets, never explains, never welcomes. It simply *exists*, like a ferry deck at four a.m. ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Deep-burgundy as a near-monochrome field, in a cohort dominated by warm/gradient palettes.** Frequency analysis shows warm at 86% and gradient at 86%; deep-burgundy registers at 0%. PPUZZL.win commits to a 92/8 burgundy-dominant palette where eight values do the work most sites assign to thirty. The site is *one color*, deeply explored — not a palette swatch wall. 2. **Slide-reveal as the only entrance gesture, in a cohort dominated by parallax (90%) and spring (56%).** Frequency analysis shows slide-reveal at 0%. Every card on the page enters by sliding 38vw or 38vh from a single edge — never by parallax, never by springing into place. The slide is not faster than 1.4s and not slower than 2.6s. It is the page's only choreography. 3. **Glassmorphic cards as imagery (not as UI chrome), in a cohort dominated by photography (93%).** Frequency analysis shows glassmorphism at 56% as an *aesthetic* but glassmorphic-cards as imagery at 0%. Here, the cards *are* the imagery — there is no other visual content on the page. The cards carry verses; they do not carry UI. 4. **Wave-forms as the only motif, in a cohort cluttered with nature (26%), vintage (20%), tropical-fish (20%), marble-classical (13%).** Wave-forms register at 0% in the analysis. Three nested SVG sinusoids — primary, secondary, tertiary — provide the page's entire decorative vocabulary. No other ornament exists. The waves are mathematical, not painted; ratioed, not flourished. 5. **Asymmetric layout governed by a 38% meridian, not by a broken grid.** Asymmetric registers at 56% in the cohort, but most uses are journalistic broken-grids; here the asymmetry is *tidal* — content slides toward and across a single golden-ratio-lesser axis. Negative space is enforced as ≥48% of every viewport. The layout is *spatial*, not *editorial*. 6. **Condensed typography as the dominant face, in a cohort where mono dominates at 90%.** Frequency analysis shows condensed at 13%; this design promotes Oswald-condensed to wordmark and act-title status, demoting mono (DM Mono) to a single 11px coda role. The result reads as tall, narrow ferry windows rather than terminal dashboards. 7. **A `.win` TLD treated as elegy, not as triumph.** Most `.win` domains lean into casino energy, fanfare, hype. PPUZZL.win refuses all three. The "win" here is the pre-dawn exhalation, the long tide turning, the puzzle solved alone. The wordmark renders `.win` at 0.46× the size of `PPUZZL` and aligned to x-height — a quiet appendage. There is not a single exclamation point, confetti animation, or victory chime on the entire page. The win is *witnessed*, not *announced*. **Chosen seed:** *aesthetic: ethereal, layout: asymmetric, typography: condensed, palette: deep-burgundy, patterns: slide-reveal, imagery: glassmorphic-cards, motifs: wave-forms, tone: zen-contemplative*. **Avoided patterns (per frequency analysis):** - Avoided **hand-drawn** (86% saturated) — the design uses zero hand-drawn elements; everything is CSS-rendered glass and SVG-rendered waves. - Avoided **photography** (93% saturated) — zero photographs on the page. - Avoided **parallax** (90% saturated) — slide-reveal is the only entrance gesture; parallax is forbidden. - Avoided **spring** (56%) and **stagger** (53%) — entries use ease-out-quint cubic-béziers, not springs; cards are sequenced individually, not staggered as groups. - Avoided **cursor-follow** (46%) and **magnetic** (26%) — both explicitly forbidden in the implementation contract. - Avoided **mono typography** as primary face (90% saturated) — DM Mono is demoted to a single 11px coda role; Oswald-condensed dominates. - Avoided **warm** and **gradient** palettes (both 86%) — the 92/8 deep-burgundy rule excludes both. - Avoided **CTA-heavy layouts**, **pricing blocks**, **stat-grids**, **testimonials**, and all marketing chrome (per SDESIGN.md guidance).