# Design Language for ppuzzl.party ## Aesthetics and Tone ppuzzl.party is a **flat-design sci-fi puzzle terminal** — imagine a mission-control room where puzzle pieces are classified grid assets, and every party invitation is a tactical briefing. The aesthetic is **Mission Patch Flat**: NASA's 1960s–70s mission emblem style collides with a modern HUD operator interface. Everything is rendered at zero depth — no shadows, no blur, no gradients — using only solid fills, crisp geometric borders, and precision-cut flat shapes. The site feels like an interactive declassified puzzle dossier: approachable, slightly absurd, welcoming to first-timers, but running on a very serious-looking system. Tone is **approachable-casual with a wink**: the HUD language is serious and precise, but the content underneath ("you're invited to puzzle night") is warm and fun. The contrast between the austere visual system and the playful party subject matter is the site's central joke. Visitors should feel immediately invited — like being handed a laminated ID badge at a puzzle party where the dress code is "casual but mission-ready." Inspiration: NASA Apollo mission patches, early Space Shuttle flight computer terminals, 1960s isometric technical manuals, and the flat icon language of a puzzle box lid illustrated for mass-market family board games. No dark mode, no fog, no gradient washes — strictly flat, strictly lit. ## Layout Motifs and Structure The primary layout is an **asymmetric card-grid** — not the symmetric 3-up or 4-up grids common in the corpus, but a deliberate **mission-map tiling**: cards of mixed proportions (1×1, 2×1, 1×2) arranged in a CSS Grid layout that mirrors a strategic briefing board. The grid uses `8px` as its base unit, with gaps of `16px` between cards and `32px` between sections. No card is identical in size to its neighbors. **Structural zones (top to bottom):** 1. **Uplink Header** — A full-width flat bar at exactly `72px` tall. Contains the wordmark `ppuzzl.party` in geometric-sans, flush left, plus a status row of flat icon glyphs flush right (puzzle count, party mode indicator, signal strength — all decorative). Background: `#0d0f1a`. The header does not scroll away; it stays fixed. 2. **Hero Tile** — A `2×1` wide card spanning columns 1–6 of a 12-column grid. Contains a single flat-illustrated puzzle grid SVG (6×6 tile map, each tile a different accent color, three tiles flipped "HUD-active"). A large sans headline sits below the illustration. No photography in the hero. 3. **Card Mission Grid** — The main body. A 12-column grid where content cards slot in as `1×1`, `2×1`, or `1×2` units. Cards have `2px` flat solid borders in `#00ffe0`, solid `#0d0f1a` backgrounds, and `0px` border-radius (hard corners only — this is HUD geometry, not rounded UI). Each card has a HUD status strip at top: a 6px bar in one of the five accent colors, a 2-letter section code in mono, and a timestamp-style label in `10px` mono. 4. **Parallax Depth Layer** — The `parallax` seed element is here, but subverted: instead of photographic parallax, the background consists of **flat geometric layer tiles** — large `80px × 80px` puzzle-piece SVG shapes scrolling at 0.3× speed behind the card grid. No texture, no blur, no depth-of-field. The parallax reads as a flat animation plane, not a 3D illusion. This is intentional — it preserves the flat-design constraint while fulfilling the parallax brief. 5. **Photography Integration** — Photography is used but strictly **pixel-dithered and reprocessed**: any real photo is converted to a 4-color flat dither (using `#0d0f1a`, `#e8ff00`, `#ff4060`, and `#00ffe0`) and rendered inside a card with a HUD-frame overlay. Photos become "scan data," not decoration. This subverts the 87% corpus overuse of unprocessed photography. 6. **Footer Terminal** — A single flat bar, `56px`, with a `_` cursor blink, transmission count, and the domain rendered in smallest possible type. Pure `#0d0f1a` with `#00ffe0` text. No sidebars. No center-aligned hero text blocks. No full-bleed photography sections. Grid gaps are always visible. ## Typography and Palette **Typography (Google Fonts only):** - **Wordmark and Section Headings:** [`Exo 2`](https://fonts.google.com/specimen/Exo+2), weight 700, tracking `+0.08em`, uppercase. Exo 2 is a geometric-sans with subtle techno-wedge terminals — it reads as precision-engineered without being cold. Used at `clamp(28px, 5vw, 72px)` for the wordmark, `clamp(18px, 2.5vw, 36px)` for card headings. - **Body and Card Content:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans), weight 400 and 500. DM Sans is a low-contrast geometric humanist — readable and unassuming, making the HUD chrome feel like it's framing real, casual human content. Used at `16px / 1.6` for body. - **HUD Labels, Status Codes, Timestamps:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono), weight 400, size `10px–12px`. Strictly for HUD metadata rows, card headers, and footer terminal text. Not used for body. - **No serif fonts.** This is a flat-design geometric world. Every letterform is built from geometric primitives. **Palette (high-contrast, strictly flat — no gradients anywhere):** - `#0d0f1a` — Deep Space Black. Primary background for all cards, header, and footer. Also used for all body text on light surfaces. - `#e8ff00` — Electric Chartreuse. Primary accent. Used for active states, the wordmark hover, and the hero headline. High contrast on dark background (contrast ratio ~18:1). - `#00ffe0` — Cyan Uplink. Secondary accent. Card borders, HUD strip for completed sections, footer text, and cursor blink. - `#ff4060` — Alert Red. Used for "locked" puzzle tiles, error/warning HUD strips, and interactive hover on "locked" cards. - `#f4f0e8` — Off-White Paper. Light surface backgrounds for alternating card types, making the grid feel like a physical pinboard of documents. - `#1e2238` — Navy Slate. Card interior background (slightly lighter than Space Black) for secondary cards, creating flat visual hierarchy without gradients. - `#b0b8d0` — Cool Steel. Secondary text on dark surfaces, HUD metadata labels, and decorative status lines. ## Imagery and Motifs **Flat puzzle-piece SVG tiles** are the primary visual motif. A canonical `ppuzzl.party` puzzle piece is drawn as an orthographic flat shape with `2px` straight connector tabs (no curves — tabs are rectangular, lego-style). Pieces appear in three states: `locked` (`#1e2238` fill, `#ff4060` border), `active` (`#0d0f1a` fill, `#00ffe0` border), and `solved` (`#e8ff00` fill, `#0d0f1a` border). A 6×6 grid of these pieces renders in the hero tile, with 3–4 in `solved` state forming a partial constellation shape. **HUD Frame Overlays** — each major card gets an SVG overlay drawn in `#00ffe0` at `40%` opacity: bracket corners (L-shaped, `12px × 12px`, `2px` stroke), a targeting reticle at top-center, and a dashed scan-line animation (horizontal `1px` dashed line moving top to bottom at `4s` loop, `opacity: 0.25`). The HUD frames are CSS animations, not images. **Mission Patch Badges** — circular flat badges, `80px` diameter, for each puzzle "mission" or difficulty tier. Flat fill, no shadows, `2px` border in `#00ffe0`. Badge interior: a flat geometric icon (magnifying glass, maze, grid, lightning bolt) in `#e8ff00` on `#0d0f1a`. Typography inside badge uses Exo 2 in `9px`, uppercase arc-text rendered as SVG ``. **Pixel-dithered photography** — when real puzzle-session photos appear (people gathered around a table), they are CSS/SVG-filtered to a 4-color flat dither using `color-matrix` filter chains. The photos live inside cards labeled `SCAN DATA` with a fake timestamp. This treatment makes photography feel like evidence in a mission briefing, not lifestyle imagery. **Decorative grid lines** — a `16px` dot-grid at `opacity: 0.04` covers the entire viewport as a fixed background layer. The dots are `1px × 1px` squares in `#00ffe0`. This creates the impression of graph paper under the HUD without adding visual noise. ## Prompts for Implementation Build ppuzzl.party as a **flat-design mission briefing board** — a party invitation system that looks like it was designed for a puzzle operations center. The visitor arrives, receives their mission assignment (puzzle night details), browses the mission grid (events, difficulty tiers, past solved puzzles), and confirms their attendance. **Story arc (single scrolling viewport, fixed uplink header):** 1. **Uplink Header** — CSS `position: fixed`, `height: 72px`, `background: #0d0f1a`, `border-bottom: 2px solid #00ffe0`. Wordmark `ppuzzl.party` in Exo 2 700, flush left, `#e8ff00`. Right side: three flat status icons (SVG inline, `24px × 24px`) — a puzzle piece (solved count), a party badge (attendees), a signal bar (connection status). Icons glow `#00ffe0` on hover, no transition, instant flat swap. 2. **Hero Tile** — `padding-top: 72px` to clear fixed header. A `2-column` asymmetric CSS Grid row: left cell `65%` width holds the 6×6 flat puzzle SVG grid, right cell `35%` holds the mission headline in Exo 2 (`"MISSION: PUZZLE NIGHT"`, `#e8ff00`) and mission text in DM Sans (`#f4f0e8`). No photography in the hero. The 6×6 SVG grid animates one tile per 1.8s from `locked` to `solved` state (color swap, no transition — instant flat change). 3. **Parallax Background Layer** — `position: fixed`, `z-index: 0`, `pointer-events: none`. Large flat puzzle-piece SVGs (4 shapes, each `120px`) positioned at screen corners, translating at `translateY(scrollY * 0.3)` via `requestAnimationFrame`. No blur, no gradient, no depth-of-field. These are flat shapes moving at reduced scroll speed behind the card grid. 4. **Mission Card Grid** — CSS Grid, 12 columns, `gap: 16px`, `padding: 32px`. Cards use `border: 2px solid #00ffe0`, `background: #1e2238`, `border-radius: 0`. Each card has a `6px` top strip (`background: [accent]`), a HUD label row (`10px` JetBrains Mono, `#b0b8d0`, uppercase), and content area. Cards arranged as: `2×1` event feature card, four `1×1` difficulty cards, one `1×2` photo-scan card, two `1×1` stat cards. 5. **HUD frame animations** — Pure CSS. Each card has `::before` and `::after` pseudo-elements rendering L-bracket corners in `#00ffe0`. A `@keyframes scan` loop moves a `1px` dashed horizontal line top-to-bottom inside each card over `4s`, `opacity: 0.15`. No JavaScript for this. 6. **Photo-scan cards** — For any photography: apply SVG `` + `` filters inline on `` elements to achieve 4-color dither effect. The card header label reads `SCAN DATA` in JetBrains Mono. Timestamp beneath photo in `10px` mono. 7. **Footer Terminal** — `height: 56px`, `background: #0d0f1a`, `border-top: 2px solid #00ffe0`. A single line of text: `ppuzzl.party > TRANSMISSION COMPLETE _` where `_` blinks at `1s` interval via CSS `@keyframes blink`. Text in JetBrains Mono `12px`, `#00ffe0`. **Implementation constraints:** - Zero `border-radius` on all interactive elements (except mission patch SVG circles). - Zero gradients (`background: linear-gradient(...)` is banned). All color transitions are instant flat swaps. - Zero `box-shadow`. Depth is created only through the 2-color flat palette and `border` contrast. - Use CSS custom properties: `--space-black: #0d0f1a`, `--cyan-uplink: #00ffe0`, `--electric-chartreuse: #e8ff00`, `--alert-red: #ff4060`, `--off-white: #f4f0e8`, `--navy-slate: #1e2238`, `--cool-steel: #b0b8d0`. - All fonts loaded from Google Fonts CDN: Exo+2:wght@400;700, DM+Sans:wght@400;500, JetBrains+Mono:wght@400. - AVOID: CTA-heavy layouts, pricing blocks, stat-grids with large numbers, hero gradients, parallax photography, dark glassmorphism cards. ## Uniqueness Notes 1. **Zero-gradient flat-design HUD with puzzle-piece as the structural atomic unit.** No other design in the corpus uses flat-design (at ~1% vs. hand-drawn at 58%) as the primary aesthetic for a social/party domain. The puzzle piece is reinvented as a lego-tab orthographic tile rather than the classic curved connector — this geometric-tab form is specific to `ppuzzl.party` and unambiguous as a brand mark. 2. **Parallax subverted as flat animation plane, not photographic depth illusion.** Parallax in the corpus (76%) is almost always used to create 3D depth with layered photography or gradient backgrounds. This design keeps the parallax scroll mechanic but applies it only to flat SVG geometric shapes — the effect reads as a sliding blueprint overlay, not a dimensional scene. This is the first "flat parallax" approach in the registry. 3. **Photography as pixel-scan evidence, not lifestyle imagery.** The corpus uses photography at 87% as raw aesthetic material. Here, all photographs are mandatory CSS/SVG filtered to a 4-color flat dither and labeled `SCAN DATA` — they become part of the HUD narrative rather than decorative backgrounds. Photography is functionally demoted from surface to data. 4. **Mission-patch badges as difficulty/tier navigation.** The circular flat badge motif (borrowed from NASA mission patch tradition) used as primary navigational icons for puzzle difficulty tiers is unique in the corpus. Other designs use badge-style elements decoratively; here the badge is the primary navigation affordance with arc-text SVG labels. 5. **Approachable-casual tone delivered through contrast with an austere visual system.** The corpus's approachable-casual tone (4%) is usually expressed through rounded corners, pastel colors, and friendly illustration. Here it is expressed through the deliberate absurdity of party content inside a mission-control HUD — the warmth comes from the gap between the system's seriousness and its actual purpose. Seed: aesthetic: flat-design, layout: card-grid, typography: geometric-sans, palette: high-contrast, patterns: parallax, imagery: photography, motifs: sci-fi-hud, tone: approachable-casual Avoided from frequency analysis: centered layout (84% overused), full-bleed photography (66%/87% overused), parallax-as-depth (76% overused — subverted to flat), gradient palette (77% overused), mono typography (75% overused — used only for HUD labels, not primary), hand-drawn aesthetic (58% overused), editorial aesthetic (53% overused), warm palette (88% overused).