# Design Language for ppuzzl.bid ## Aesthetics and Tone `ppuzzl.bid` is a **grainy-textured puzzle arena** — the visual language of a sun-bleached auction house flyer photographed through a film camera with expired ISO-800 stock. The grain is not decorative noise-overlay applied as an afterthought; it is baked into every surface at the composition level. Backgrounds carry a fine, irregular film grain with a sigma of 0.7–1.2px that shifts subtly on scroll — not animation, but parallax displacement of the grain layer relative to content. The mood is **burnt optimism**: confident enough to use high-contrast orange against deep charcoal, playful enough to let type bounce on arrival, grounded enough that the photography never feels stock. Think of a scrappy startup that bid on a warehouse and turned it into a puzzle gallery — industrial bones, warm tungsten light catching dust motes, exposed rivets painted over with a single coat of matte burnt-orange. The tone is explicitly **optimistic-bright** without crossing into corporate sugar. Energy is kinetic. Puzzle pieces are a metaphorical through-line — incomplete until assembled, implying that the visitor is the missing piece. Every layout decision reinforces assembling: cards slot together, gaps have meaning, negative space is a grid-ghost of the missing tile. Color temperature runs warm (3200–4000K tungsten, not daylight). Grain adds analog soul. Photography grounds the abstraction. The result is a site that feels like it was designed by someone who actually plays the games it sells. ## Layout Motifs and Structure The primary structure is a **card-grid** — but not a Pinterest masonry grid, and not a CSS-Grid Lorem-Ipsum placeholder. Cards are deliberately imperfect: they sit on a 6-column base grid at desktop (1280px max-width, 24px gutter), but column-span varies by card importance. Featured puzzles span 3 columns; standard entries span 2; micro-teasers span 1. The net result reads as a grid that has been **partially solved** — some tiles in, some still floating. Cards are not rectangles. Their corners use a staggered border-radius: `border-radius: 4px 16px 4px 16px` on featured cards, `2px 8px 2px 8px` on standard — asymmetric, suggesting a puzzle-piece nub that didn't quite snap flush. This is intentional and subtle; it reads as "crafted" not "broken." The hero section is **not centered**. The headline anchors to the left rail (column 1 of 6) with a photograph bleeding off the right edge — an asymmetric split at 40/60. The photograph is always a person mid-solve: fingers on a piece, eyes narrowed in concentration. This anchors the site in human behavior rather than product showcase. Spatial hierarchy: hero (vh 90) → filter bar (sticky, 56px, burnt-orange rule beneath) → card-grid → inline editorial pull-quotes (3-column span, type-only) → footer (2-row, minimal). No sidebar. No dashboard panels. No stat-grids. The filtering happens in a single horizontal scrollable pill-row that sits above the grid — categories as bidding chips, tactile and dismissible. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display headlines — `Bebas Neue`**: All-caps, wide-tracked, set at 96px on desktop hero and 48px on card titles. Letter-spacing: +0.04em. This font is the auction-yard shout — it announces. Used sparingly: hero H1, section dividers, and the bid-counter overlay on featured cards. Never in body copy. - **Subheadings and UI labels — `DM Sans`**: Weight 500–700 at 14–18px. Functional, warm, slightly rounded. Pairs with Bebas Neue as the conversational counterweight — if Bebas shouts, DM Sans explains. - **Body / longform — `Lora`**: Weight 400–500 at 16–17px, line-height 1.65. A serif with slight warmth and ink-trap character. Used for puzzle descriptions, editorial pull-quotes, and any text block exceeding two lines. The grain aesthetic benefits from a typeface that carries optical weight. **Palette — burnt-orange system:** | Role | Hex | Name | |------|-----|------| | Primary accent | `#C8531A` | Kiln orange | | Dark accent | `#8A3410` | Deep ember | | Background deep | `#1C1714` | Charred oak | | Background mid | `#2E2420` | Smoked cedar | | Card surface | `#F0EAE2` | Raw linen | | Card surface hover | `#F8F4EE` | Bleached linen | | Body text on dark | `#E8DDD4` | Aged ivory | | Body text on light | `#2E2420` | Smoked cedar | | Muted annotation | `#9C8C80` | Worn terracotta | | Grain highlight | `#D4692A` | Ember flare | The dark background (`#1C1714`) occupies the page chrome — header, footer, filter bar — while the card surfaces are the cream linen that makes photography pop. This contrast between the dark industrial frame and the warm card interiors echoes the warehouse-gallery concept. ## Imagery and Motifs **Photography** is the primary imagery type — but it is not stock photography. Every photo treatment is: 1. **Contrast-pushed +15, saturation -8**: photos read as analog/film, not digital-bright. Warm highlights, crushed shadows, no pure black. 2. **Grain-composited**: the SVG grain filter (`feTurbulence` + `feDisplacementMap`) is applied at the CSS level over every image via `mix-blend-mode: luminosity` on a pseudo-element — making grain feel intrinsic to the photo, not overlaid. 3. **Edge-vignette**: a radial gradient overlay (transparent center → `rgba(28,23,20,0.35)` edge) on all hero imagery. **Abstract-tech motifs** appear as secondary decoration: - **Puzzle-grid ghost**: in the card-grid negative space, a faint SVG pattern of interlocking puzzle-nub outlines at 8% opacity (`#C8531A` stroke, 0.5px) forms the grid background. This is the "ghost tile" of the missing puzzle piece — it makes empty grid cells feel intentional rather than absent. - **Bid-counter chip**: featured cards carry a small pill-shaped overlay (bottom-right corner, 48×24px) styled like an auction bid chip: `#C8531A` fill, `Bebas Neue` 14px white text, displaying either a puzzle piece count or a difficulty rating. These chips have a 2px `#8A3410` border and a 1px inner shadow — analog button press feel. - **Circuit-trace filter strip**: the sticky filter bar has a single decorative horizontal line beneath the pill-row — not a border, but an SVG path that traces a slight step pattern (like a PCB trace) in `#C8531A` at 40% opacity, 1px stroke. This reinforces the abstract-tech motif without screaming "tech company." - **Grain layer**: a fixed-position SVG grain overlay (`feTurbulence baseFrequency="0.65" numOctaves="4"`) covers the entire viewport at `pointer-events: none`, `opacity: 0.035`. On dark backgrounds, this reads as film grain. On cream cards, it recedes to near-invisible. ## Prompts for Implementation Build this as a **kinetic auction floor** — the page breathes and hums like a live bidding event, but it never demands your attention with popups or timers. The experience is exploration, not pressure. **The grain is structural, not decorative.** The SVG grain filter must be defined in a `` block in the HTML `` and applied via CSS `filter: url(#grain)` to the ``. Do not use a PNG texture. The grain must be a `feTurbulence` + `feColorMatrix` + `feBlend` pipeline: turbulence at `baseFrequency="0.68 0.71"` (slightly anisotropic for film-roll feel), numOctaves 4, seed 42. The grain layer sits at z-index 9999, `pointer-events: none`, `position: fixed`, and uses `mix-blend-mode: overlay` at 3.5% opacity. **Cards assemble on scroll.** Each card enters via an elastic arrival animation triggered by IntersectionObserver (threshold 0.15). Cards start at `transform: translateY(28px) scale(0.96)`, `opacity: 0`. They arrive in staggered groups of 3 (delay: `cardIndex % 3 * 80ms`). The spring easing is `cubic-bezier(0.34, 1.56, 0.64, 1)` — slight overshoot on scale, settling to 1.0. Duration: 420ms. This is the **elastic** pattern seed. **Bebas headlines breathe on hover.** On desktop, H1 hero text uses CSS `letter-spacing` animation on hover: from `0.04em` to `0.10em` over 300ms `ease-out`. This is subtle — a slow exhale, not a jump. It reinforces the "bidding tension" of the site without JavaScript. **Photography hover: grain intensifies.** On card hover, the grain pseudo-element's opacity transitions from near-zero to `0.07` over 200ms, while the photo contrast filter increases by +5. The card simultaneously lifts: `transform: translateY(-4px)`, `box-shadow: 0 12px 32px rgba(28,23,20,0.45)`. Combined effect: the photo becomes more itself on focus — more textured, more present. **Filter pills are tactile.** Each filter pill has a pressed state: `transform: scale(0.96)` + `box-shadow: inset 0 2px 4px rgba(28,23,20,0.3)` on `:active`. The active/selected state fills with `#C8531A` and flips text to `#F0EAE2`. Pills slide horizontally via `scroll-behavior: smooth` overflow container — no JavaScript carousel. **No CTAs, no pricing blocks, no stat grids.** The site does not say "Join 50,000 puzzlers!" or list a price matrix. The card-grid IS the experience — browsing is the story. The editorial pull-quotes (spanning 3 columns between card-grid rows) tell the puzzle narrative: fragments of solver stories, wordless images of half-completed puzzles, textures of cardboard backing. **Sticky filter bar behavior:** On scroll past the hero, the filter bar sticks at top: 0. It carries a `backdrop-filter: blur(8px)` with a `background: rgba(28,23,20,0.85)` — the dark oak shows through, blurred. The orange rule beneath it is the circuit-trace SVG path, 100% width, that morphs from a straight line to its stepped-trace form over 800ms on mount (path animation via `stroke-dasharray` + `stroke-dashoffset`). ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **grainy-textured**, layout = **card-grid**, typography = **bebas-bold**, palette = **burnt-orange**, patterns = **elastic**, imagery = **photography**, motifs = **abstract-tech**, tone = **optimistic-bright**. **Differentiators from every other design in the registry:** 1. **Asymmetric puzzle-nub border-radius.** No other design uses `border-radius: 4px 16px 4px 16px` as a semantic motif tied to the site's product concept. The corner geometry IS the content strategy — every card implicitly looks like it could slot into an adjacent card. 2. **Grain as SVG filter, not PNG overlay.** The registry shows several grainy-textured designs, but frequency analysis confirms grain-overlay is only at 3%. More importantly, most use a semitransparent PNG texture. This design uses `feTurbulence` + `feDisplacementMap` — grain that responds to the underlying image content via luminosity blend mode, making it indistinguishable from film grain. This is a technical differentiator, not just a stylistic one. 3. **The auction-house vocabulary applied to puzzle commerce.** The bid-chip overlays, the stepped PCB-trace filter rule, and the "missing tile" ghost-grid are all semantic extensions of the domain name (`ppuzzl.bid`) into the visual language. No other design in the registry directly encodes its TLD into its decoration system. 4. **Elastic card assembly as narrative pacing.** Rather than fade-in (common) or slide-in (overused), the spring overshoot `cubic-bezier(0.34, 1.56, 0.64, 1)` makes cards feel like puzzle pieces snapping into place — the animation matches the product. This is the elastic pattern seed deployed with intent. 5. **Dark industrial frame / warm linen card duality.** The site's background is almost-black charred oak while card surfaces are raw linen cream. This bi-temperature system (tungsten warmth inside, darkness outside) is drawn from the warehouse-gallery concept and is absent from the registry's dominant warm-gradient or dark-neon patterns. **Avoided patterns from frequency analysis:** - centered layout (84% — this design anchors LEFT, not center) - full-bleed sections (66% — card-grid with explicit gutter geometry instead) - gradient palette (77% — flat burnt-orange fills, no gradients except vignette) - hand-drawn aesthetic (58% — industrial/film-textured instead) - editorial layout (52% — card-grid primary, editorial only as accent) - magnetic/path-draw-svg patterns (15%/11% — elastic spring used instead)