# Design Language for ppuzzl.win

## Aesthetics and Tone

**ppuzzl.win is the digital haunt of a puzzle that doesn't want to be solved — a seapunk transmission from the deep, rendered in dopamine neon across a circuit-board ocean floor.**

The aesthetic is seapunk-meets-signal-interference: not the pastel aquarium cuteness of early 2010s seapunk, but its darker, more corrupted cousin — bioluminescent circuit traces running beneath deep-teal water, neon cyan and acid-violet pulses flickering through kelp-like trace lines. The imagery lives in the space where submarine hardware meets psychedelic marine biology. Think: a PCB board submerged in the Mariana Trench and left to grow its own ecosystem.

Tone is **mysterious-moody** — never explanatory. The site speaks in puzzles. Headlines are incomplete sentences. Micro-copy is a riddle. The visitor is meant to feel they arrived somewhere that already existed before they got there, a system humming independently of their presence.

Color energy is dopamine-neon but the saturation is wet, not dry. Neons are pushed through a deep-water scrim — cyan glows refracted, not broadcast. The palette includes one near-black deep-ocean base, teal-to-cyan for living circuit traces, acid-green for active/hover states, and violent magenta as the single accent spike. White is never pure — it's bioluminescent, slightly warm-cyan.

There is no "welcome" or "about" energy here. The visual premise: you are looking at a screen displaying a puzzle that runs itself.

## Layout Motifs and Structure

**Diagonal-sections architecture: the site slices at 7°.**

Every content section is separated not by horizontal lines but by diagonal cuts — the `.section-break` element is a full-width `transform: skewY(-7deg)` panel that bleeds past the viewport edges and reverses the skew on the content child. This creates a rhythmic, disorienting stagger — each section slides into the next at an angle, as if the content itself is sliding sideways through water.

**Section architecture (top to bottom):**

1. **Signal Header** — Full viewport, dark-ocean fill. The wordmark `PPUZZL.WIN` is set in Jura at 9vw, letter-spacing 0.35em, centered. Below it, a single line of micro-copy rendered in Fira Code at 11px: `// awaiting input.` The section background has an animated SVG circuit pattern — thin `0.5px` trace lines in deep-teal, animated via `stroke-dashoffset` to simulate current traveling through the board. A diagonal cut at the bottom (negative skewY) transitions into the next section.

2. **Puzzle Manifest** — The "what is this" section — but it never says. Three columns of cryptic headline fragments in Jura, each ending in `—`. The leftmost column has a blinking cursor `█` at random intervals via CSS animation. Background is one shade lighter than near-black. Diagonal-cut top and bottom.

3. **Circuit Trace Gallery** — A visual interlude: an oversized SVG circuit board fragment spanning full width at 40vw height, drawn in precise `<path>` elements using the teal palette, with hover micro-interactions. When the visitor hovers any trace segment, the segment brightens (filter: brightness(2)) and a tiny neon-green dot pulses at the hover coordinate. No text labels — the SVG is the content.

4. **Signal Fragment Grid** — A CSS grid of 12 "puzzle fragments" — rectangular cards at varying aspect ratios (2:1, 1:2, 1:1) arranged in a masonry-like fixed grid. Each card shows a code fragment in Fira Code on a teal-glazed background. On hover: the card's border transitions from teal to acid-green, scale(1.03), box-shadow spikes to a neon-green glow. Diagonal transition between sections.

5. **Transmission Footer** — Dark ocean floor. The domain `ppuzzl.win` repeated three times in descending size (9vw → 3vw → 1.2vw), each line 0.4em letter-spacing. Below: a single Fira Code line `// end of signal.` A horizontal scrolling ticker of hex codes at 9px Fira Code, running left to right on an infinite CSS animation loop.

**No navigation menu. No sidebar. No hamburger.** The header section contains no links — just the wordmark and cursor line. The footer contains no social links. Navigation is the act of scrolling.

**Diagonal rhythm spec:**
- Standard section diagonal: `transform: skewY(-7deg)` on the section break element, with content inside `transform: skewY(7deg)` to cancel.
- Alternating direction on every other break: `skewY(7deg)` on break, `skewY(-7deg)` on content.
- Diagonal color: the skewed panel uses the destination section's background color, creating a seamless fold.

## Typography and Palette

**Primary Display — [Jura](https://fonts.google.com/specimen/Jura)**, weights 300 and 600. The load-bearing display typeface. Jura has a technical, slightly alien geometry — its terminals are clipped, its proportions suggest industrial specification sheets translated into letterforms. Used for the wordmark, section headline fragments, and all large-scale text. Uppercase and wide letter-spacing (0.2em–0.4em) throughout.

**Monospace/Code — [Fira Code](https://fonts.google.com/specimen/Fira+Code)**, weight 400 only. Used for all micro-copy, ticker text, code fragments in the Signal Fragment Grid, and the `// comment` lines. No ligatures in this design — disable `font-variant-ligatures: none` to preserve character-by-character legibility.

**No serif. No handwritten. No rounded.** This is a two-face typographic system: the geometric-technical display and the monospace-technical code face.

**Type scale:**
- Wordmark: `clamp(4.5rem, 9vw, 11rem)`, Jura 600, letter-spacing 0.35em
- Section headers (fragment style): `clamp(1.8rem, 4vw, 4rem)`, Jura 300, letter-spacing 0.2em
- Code/micro-copy: `11px–13px`, Fira Code 400, letter-spacing 0.05em
- Ticker: `9px`, Fira Code 400, letter-spacing 0.08em

**Palette — dopamine-neon through a deep-water scrim:**

| Role | Hex | Name |
|---|---|---|
| Base (deep ocean) | `#030d12` | abyss |
| Surface | `#071a24` | trench |
| Elevated surface | `#0d2535` | deep-hull |
| Primary trace | `#00c8cc` | bioluminescent-teal |
| Active trace | `#00ffb3` | acid-current |
| Accent spike | `#c800ff` | violet-surge |
| Text primary | `#d8f5f7` | cold-light |
| Text secondary | `#5a9ea8` | submerged |

**All backgrounds use `#030d12` as the root.** Surface elevations are additive — the deeper the scroll, the slightly lighter the panel (paradox-depth UX).

**CSS custom properties at `:root`:**
```css
--abyss: #030d12;
--trench: #071a24;
--deep-hull: #0d2535;
--bioluminescent-teal: #00c8cc;
--acid-current: #00ffb3;
--violet-surge: #c800ff;
--cold-light: #d8f5f7;
--submerged: #5a9ea8;
```

**Google Fonts import:**
```
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;600&family=Fira+Code:wght@400&display=swap');
```

## Imagery and Motifs

**Motif: Circuit — executed as underwater circuit ecology.**

Circuit traces are not the aggressive neon-on-black PCB look of typical cyberpunk. Here they are organic-circuit hybrids: trace paths follow the curves of submarine biology (spiraling like nautilus shells, branching like sea-fan coral) while maintaining the geometric precision of PCB layout. Via holes appear as glowing dots. Pads are hexagonal, not circular.

**All circuit imagery is inline SVG — no external image files.**

The Circuit Trace Gallery section SVG is the centrepiece: a 100vw × 40vw `<svg viewBox>` containing:
- 30–40 trace paths drawn with `stroke="#00c8cc"`, `stroke-width="0.5"`, `fill="none"`, `stroke-linecap="square"`
- Animated via `stroke-dasharray` / `stroke-dashoffset` with varying durations (8s, 12s, 17s) on `@keyframes trace-travel`
- Via holes: `<circle r="3">` with `fill="#00ffb3"` and a CSS `box-shadow`-equivalent SVG `<filter>` for glow
- On hover of any `<path>` element: CSS class `.trace-active` applied via JavaScript, boosting `stroke: #00ffb3` and `filter: brightness(2)`

**Section background circuit pattern (header):**
A tiling CSS `background-image: url("data:image/svg+xml,...")` of simple L-shaped trace segments and via-dot clusters, animating via `background-position` shift over 20s.

**Micro-interactions:**
- **Cursor hover on trace segment:** segment brightens to acid-current, small pulsing dot appears at mouse position (JavaScript mousemove listener, CSS-animated `<div>` with `border-radius: 50%`, `background: var(--acid-current)`, scale 0–1 animation)
- **Card hover in fragment grid:** `transform: scale(1.03)`, `border-color` transitions from `--bioluminescent-teal` to `--acid-current`, `box-shadow: 0 0 20px var(--acid-current)` — all at `transition: 0.18s ease-out`
- **Blinking cursor `█`:** CSS `@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }` at 1.1s infinite — applied to a `::after` pseudo-element on designated headline fragments
- **Scrolling ticker:** CSS `@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }` at 30s linear infinite — the ticker content is duplicated so the seam is invisible
- **Section entrance:** `IntersectionObserver` triggers `opacity: 0 → 1` and `transform: translateY(20px) → translateY(0)` at `transition: 0.5s ease` — no library, pure CSS + minimal JS

**No photography. No external imagery. No stock assets.** Every visual element is SVG or CSS.

## Prompts for Implementation

Build ppuzzl.win as a **single-page vertical scroll in five diagonal sections**, all HTML/CSS with JavaScript only for micro-interactions and IntersectionObserver reveals.

**Technical implementation path:**

1. **HTML structure:** `<body>` contains five `<section>` elements. Each `<section>` has a sibling `<div class="section-break">` immediately after it (or use `::after` pseudo-elements on sections). No wrapper `<div>` around sections — let sections sit directly in body flow.

2. **Diagonal breaks:** Apply `clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%)` to sections (bottom diagonal) and `clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 100%)` to compensate for the next section's top. Use negative margin-top to collapse the overlap. Alternatively use `transform: skewY(-7deg)` on a `.break` wrapper.

3. **Circuit background (header section):** Inline an `<svg>` as the section background — `position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;` with `overflow: hidden` on the section. Content sits above via `position: relative; z-index: 1`.

4. **Circuit Trace Gallery SVG:** Hardcode the SVG `<path>` data directly in HTML — do not fetch or load externally. The viewBox should be `"0 0 1440 576"`. Apply the trace-travel animation in `<style>` within the SVG element (or in the main stylesheet with `nth-child` selectors).

5. **Fragment Grid:** CSS Grid with `grid-template-columns: repeat(4, 1fr)` at desktop, `repeat(2, 1fr)` at tablet. Each card: `background: var(--deep-hull)`, `border: 1px solid var(--bioluminescent-teal)`, `padding: clamp(1rem, 2vw, 2rem)`. Card content: a 4–6 line code fragment in `<code>` tags styled with Fira Code.

6. **Ticker:** A `<div class="ticker-wrap">` with `overflow: hidden` containing `<div class="ticker">` with its content duplicated. CSS animation drives the scroll.

7. **JavaScript budget:** IntersectionObserver for section reveals (~15 lines), circuit trace hover activation (~20 lines), cursor-dot micro-interaction (~12 lines). Total JS: under 60 lines. No libraries.

8. **Responsive:** At viewport < 768px: wordmark drops to `clamp(2.5rem, 12vw, 4.5rem)`, diagonal breaks reduce to `skewY(-4deg)`, fragment grid collapses to 1 column, ticker speed reduces to 20s. Circuit Trace Gallery SVG hides on mobile (display: none) — replaced by a static CSS border pattern.

**The implementation should make the visitor feel they've intercepted a signal, not visited a website.**

## Uniqueness Notes

**Planned seed:** aesthetic: seapunk, layout: diagonal-sections, typography: frutiger-clean, palette: dopamine-neon, patterns: micro-interactions, imagery: mixed-media, motifs: circuit, tone: mysterious-moody

**Differentiators relative to the corpus:**

1. **Seapunk at 1% corpus frequency** — the most underused aesthetic in the entire design library. No other design uses seapunk as its primary aesthetic. The treatment here is not the pastel-cute seapunk of its mainstream moment but a darker, corrupted marine-hardware variant that has no precedent in the corpus.

2. **Circuit motif at 13% — but executed underwater.** Most circuit designs in the corpus use circuit as a cyberpunk/tech metaphor on dark or black backgrounds. This design submerges the circuit in a marine biology context — trace paths following nautilus/coral growth patterns, via holes as bioluminescent dots — giving the overused motif a completely novel visual register.

3. **Diagonal-sections at 2%** — underused layout. The specific implementation here (alternating diagonal direction + clip-path approach + color-bleed folds) is distinct from any typical diagonal-hero-only treatment.

4. **Typography: Jura** — not a common Google Fonts choice in the corpus, which skews toward Space Grotesk, Inter, Bebas Neue. Jura's industrial-alien geometry is a fresh choice for a puzzle site.

5. **Monospace-as-primary-secondary pairing** (Jura + Fira Code): both faces are geometric-technical. No humanist or serif face anywhere in the system — enforces the machine-transmission reading.

6. **Micro-interactions scoped to SVG traces** — unusual in the corpus, which tends to apply micro-interactions to buttons and cards. Here the interactive surface is the circuit illustration itself.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T13:00:42
  seed: unspecified
  aesthetic: ppuzzl.win is the digital haunt of a puzzle that doesn't want to be solved — a s...
  content_hash: 79550dbfa4ad
-->