# Design Language for ppuzzle.works ## Aesthetics and Tone ppuzzle.works is a **goblincore puzzle den** — imagine a cozy underground chamber where a goblin alchemist obsessively arranges puzzle pieces on a mossy stone table, lit by bioluminescent jars and neon-tinged fungi clusters. The aesthetic is **earthy chaos meeting electric precision**: raw, overgrown, slightly damp, but with a humming neon backbone that reveals the obsessive logic underneath the clutter. The mood is **warm and inviting in the way a candlelit cave is warm** — not hygge-clean, but dense with texture, glowing with hidden light, and alive with small discoveries. Every element rewards close inspection. The site treats puzzles as ritualistic: the visitor is not a "user completing a task" but an initiate entering a puzzle sanctum. Solving is sacred. Exploration is the point. Inspiration: the visual language of goblincore zines on Tumblr, neon-lit aquarium tanks at 2 AM, terminal debugger output printed on moss-paper, the glow of a Game Boy screen held under a blanket. The tone is **warm-inviting but never saccharine** — it welcomes you with the smell of damp earth and electric ozone, not polished marble. Imperfection is intentional: slightly misaligned borders, hand-nudged glows, asymmetric sidebar content that breathes unevenly. ## Layout Motifs and Structure The primary layout is a **fixed sidebar + main content well**, but executed as a goblin's workshop bench rather than a clean dashboard. The sidebar (260px fixed on desktop, collapsible on mobile) is the **alchemist's shelf**: a narrow vertical strip lined with puzzle-category glyphs, progress totals rendered in monospaced counters, and ambient animated fungi that pulse at irregular intervals. It never feels like navigation — it feels like the side of a workbench. The main content well is a **layered-depth composition**: content panels are not flat cards but stacked slabs at different z-levels, casting soft neon-tinted drop shadows onto layers beneath. The deepest layer is the stone-floor background (near-black with visible texture); mid-layer panels float 4px above; active/hovered panels rise to 8px apparent depth with a brightened neon border. **Spatial logic:** - Sidebar: 260px fixed, full-height, dark (#0a0d0a) with moss-green micro-texture overlay - Main well: fluid, min 640px, max 1100px, offset left (not centered) to honor the sidebar weight - Vertical rhythm based on 8px grid, but deliberately broken at two points per screen to suggest organic growth rather than rigid scaffolding - Section transitions use **bubble-float reveals**: content panels rise from below the fold as if surfacing from water, with a `translateY(24px) → translateY(0)` + `opacity` transition at 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) **No hero section.** The sidebar and first content panel appear simultaneously. There is no landing splash, no full-screen takeover. You arrive inside the den, already seated at the bench. ## Typography and Palette **Primary typeface — monospaced terminal voice:** [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — used for all puzzle labels, counter displays, sidebar navigation glyphs, and any "system output" text. The letterforms have a slightly worn, screen-printed quality that reinforces the goblincore lo-fi aesthetic. Used at weights as-available (400 only), sizes 11px–28px. **Secondary typeface — humanist warmth:** [`Nunito`](https://fonts.google.com/specimen/Nunito) variable, weights 300–800 — used for descriptive prose, puzzle instructions, and any "voice of the den" copy. Its rounded terminals soften the terminal coldness of Share Tech Mono and add the warmth that makes the space feel inhabited rather than abandoned. **Accent / display — rare, high-impact:** [`Silkscreen`](https://fonts.google.com/specimen/Silkscreen) — used only for the wordmark "ppuzzle" and for numerical puzzle-difficulty badges. Its pixel-grid construction references both classic gaming and early terminal screens. **Palette — dark neon with earthy substrate:** | Role | Hex | Name | |------|-----|------| | Background / floor | `#080b08` | Void moss | | Sidebar surface | `#0d120d` | Deep den | | Panel surface (mid-layer) | `#111a11` | Stone slab | | Panel surface (raised) | `#162016` | Bench top | | Neon primary — cyan-electric | `#00ffe0` | Biolumen teal | | Neon secondary — acid lime | `#b4ff3c` | Fungi glow | | Neon accent — pink-violet | `#e040fb` | Spore bloom | | Text primary | `#d4f0c8` | Pale frond | | Text secondary | `#7a9e72` | Shadowed leaf | | Border / rule | `#1e2e1e` | Root line | | Neon glow diffuse | `#00ffe015` | Aqua mist | All neons are applied sparingly as border-glows (`box-shadow: 0 0 8px #00ffe040, 0 0 24px #00ffe015`), never as large fills. The background is always the void-moss near-black. Neon is the punctuation, not the sentence. ## Imagery and Motifs **Water-bubble motifs as structural decorators, not hero imagery.** Bubbles appear in three forms: 1. **Ambient SVG bubbles (background layer):** Slow-rising translucent circles (8–32px diameter, `stroke: #00ffe020`, `fill: none`, `stroke-width: 1px`) animated with randomized `translateY(-200px)` keyframes over 8–20s, staggered by `animation-delay`. These populate the sidebar background and the lower third of the main content well. They never overlap interactive elements — they are the den's breath. 2. **Puzzle-completion burst:** When a puzzle piece is correctly placed or a level completes, 12–18 SVG bubbles erupt from the interaction point, arc outward using cubic-bezier spring physics, expand to 40–60px, and pop with a CSS `scale(1.4)` + `opacity: 0` transition at 0.3s. This is the site's signature micro-interaction. 3. **Sidebar section dividers:** Instead of horizontal rules, sections are separated by a single large semi-transparent bubble glyph (48px SVG circle, `stroke: #00ffe030`, `fill: #00ffe005`) with a `::before` pseudo-element forming a thin vertical stem — like a bubble clinging to underwater glass. **Fungi clusters (CSS-generated):** The sidebar footer and main content margins host 3–5 CSS-drawn mushroom silhouettes using `border-radius` compound shapes in `#1e2e1e` to `#2a3e2a` gradient fills. These are purely decorative, never interactive, and have a subtle `animation: sway 6s ease-in-out infinite alternate` that shifts them ±2deg — visible only at high attention, like peripheral motion in a dark room. **Moss texture overlay:** A single `background-image: url('noise.svg')` SVG noise pattern at 4% opacity covers all dark surfaces. This creates the damp-stone tactility without heavy image loading. The SVG uses `feTurbulence` with `baseFrequency="0.65"` and `numOctaves="3"`. **Puzzle piece geometry:** Recurring tab-and-blank silhouettes appear as decorative cut-outs in section borders — `clip-path: polygon(...)` shapes that suggest interlocking pieces without being literal. Used at the bottom of the sidebar and as the separator between the header area and the content well. ## Prompts for Implementation Build ppuzzle.works as a **single-page goblin puzzle sanctum** with a persistent sidebar and a scrolling main content well. There is no routing, no page transitions between "pages" — the sidebar reveals/hides category content in the main well via animated panel swaps. **Section architecture (sidebar-driven, no URL changes):** 1. **Den Entrance (default state):** The wordmark "ppuzzle" in Silkscreen at 32px, glowing `#00ffe0` drop-shadow, sits at the top of the sidebar. Below it: a small animated SVG of a single puzzle piece rotating slowly (4s, ease-in-out). The main well shows the "current puzzle" — a partially assembled puzzle grid rendered in CSS grid with piece slots as dark divs and placed pieces as slightly lighter panels with neon border highlights. 2. **Category Shelf (sidebar scroll):** Below the wordmark, 6–8 puzzle categories appear as monospaced labels in Share Tech Mono: `LOGIC_`, `WORD_`, `SPATIAL_`, `PATTERN_`, `CIPHER_`, `FLOW_`. Each has a right-aligned counter like `[14]` showing available puzzles. Hovering triggers a `border-left: 2px solid #00ffe0` reveal with `width: 0 → 2px` at 0.15s. 3. **Progress Sanctum (sidebar footer):** A compact 80×80px CSS hexagonal shape (using `clip-path: polygon(...)`) filled with the `#0d120d` panel color, bordered with `#00ffe040`. Inside: the visitor's completion percentage in Silkscreen numerals. Below the hex: 3 fungi silhouettes swaying. 4. **Puzzle Den (main well — active state):** When a category is selected, the main well transitions: existing panels `translateY(-16px) opacity: 0` over 0.25s, then new panels `translateY(24px) → translateY(0) opacity: 1` over 0.4s staggered by 60ms per panel. Panels are 8px-radius `div`s in `#111a11`, with a top-edge neon glow on hover. Each puzzle card shows: title in Nunito 600, difficulty badge in Silkscreen, a preview thumbnail as a `canvas`-drawn thumbnail, and a "Begin Ritual" affordance (never a CTA button — a text link with `cursor: pointer` and a `→` glyph that draws itself via SVG stroke animation on hover). 5. **Bubble Cascade (scroll behavior):** As the visitor scrolls the main well, the ambient SVG bubbles in the background layer accelerate slightly (CSS custom property `--bubble-speed` driven by a scroll listener at 60fps throttle, shifting from `8s` to `5s` animation-duration). This creates the sensation of diving deeper into the den as you scroll. The bubbles never overlay text. 6. **Micro-interactions throughout:** - Sidebar category items: left-border draw (0.15s) + counter shimmer (text-shadow pulse) - Puzzle card hover: `translateY(-3px)` + intensified neon border glow (0.2s) - "Begin Ritual" hover: the `→` arrow SVG path draws from left to right using `stroke-dashoffset` animation (0.3s) - Puzzle completion: bubble burst (described in Imagery section) + a brief `box-shadow` bloom on the completed panel that fades over 1.2s - Sidebar collapse (mobile): panels slide left with `translateX(-260px)` at 0.3s, an overlay of `rgba(8,11,8,0.7)` fades in behind **Implementation emphases:** - Use CSS custom properties extensively: `--neon-primary`, `--den-bg`, `--panel-surface`, `--bubble-speed`, `--glow-radius` — this makes the entire neon intensity tunable via one root update - The sidebar must feel **inhabited**, not navigational. Add a `setInterval`-driven random flicker (±5% opacity, 200ms) to one fungi silhouette every 30–120 seconds — just enough to suggest life without demanding attention - Never use `color: white`. All text is `--text-primary` (#d4f0c8) or `--text-secondary` (#7a9e72). The palette is always green-tinted, never neutral - Bubble animations use `will-change: transform, opacity` and run entirely via CSS keyframes — no JS for the ambient bubbles - The noise SVG texture is inlined as a `` in the CSS `content` property to avoid an extra HTTP request - Puzzle grid cells use `aspect-ratio: 1` and CSS grid with `gap: 2px` at `#1e2e1e` — the gaps are the "grout" between stone slabs ## Uniqueness Notes 1. **Goblincore puzzle den aesthetic is first in the corpus.** The frequency report shows goblincore at 2% — and none of those designs combine it with a dark-neon palette (5%) and tech-mono typography (6%). This design occupies a precise niche: organic earthy chaos + electric precision, which no existing design in the registry has paired. The warmth comes from soil and bioluminescence, not pastels or wood textures. 2. **Water-bubbles as primary micro-interaction — not just decoration.** The corpus uses water-bubbles at 4%, but only as ambient imagery. ppuzzle.works makes bubbles the completion-event signature: the burst on puzzle completion is the site's primary moment of delight. This inverts the usual role of bubble imagery from background texture to foreground feedback. 3. **Sidebar treated as inhabitable environment, not navigation chrome.** Sidebar appears in 29% of designs but always as a clean navigation rail or dashboard panel. Here the sidebar is a living shelf with fungi silhouettes, a hexagonal progress totem, swaying decorations, and a random-flicker life simulation. It is a place to be in, not a menu to use. 4. **Layered-depth z-stacking as the primary spatial metaphor.** The layered-depth pattern (8% in corpus) is used here not just as visual interest but as literal storytelling: you are descending into a den, and deeper content sits at lower z-levels in the visual stack. Panel depth communicates content hierarchy rather than color alone. 5. **No photography, no illustration, no stock assets.** All visual richness comes from CSS-generated forms (fungi, puzzle clips), inline SVG (bubbles, puzzle piece geometry), and typographic composition. This is the second fully CSS-generative design in a seed combining earthy and neon vocabularies. Seed: aesthetic: goblincore, layout: sidebar, typography: tech-mono, palette: dark-neon, patterns: micro-interactions, imagery: water-bubbles, motifs: layered-depth, tone: warm-inviting Avoided patterns (overused in corpus): centered layout (84%), warm palette (88%), gradient palette (77%), photography imagery (87%), hand-drawn aesthetic (58%), editorial aesthetic (53%), hero-dominant layout structure.