# Design Language for ppuzzl.works ## Aesthetics and Tone The name **ppuzzl.works** reads like something you mutter to yourself at the kitchen table on a Sunday morning, two cups of coffee deep, pen in hand, refusing to look up the answer. The double-p is a typographic stutter, the kind of thing a woodblock printer leaves when the type shifts in the chase — an accident that became the brand. The `.works` TLD is a declaration of stubbornness, not a job title. The aesthetic is **brutalist portfolio-grid** — but this is not the cold concrete brutalism of architecture manifestos. It is the brutalism of a working artist's studio wall: raw plywood shelves, things pinned without apology, unfinished edges treated as proof of process rather than carelessness. The mood is a ceramicist who also codes, or a crossword constructor who moonlights as a typographer: **approachable-casual but quietly rigorous**. Every element has a reason; no element performs its reason. The primary material metaphor is **marble** — not the cold Carrara marble of luxury branding, but the warm veined marble of an old estate kitchen counter, worn down by bread dough and decades. Marble appears as texture and as conceptual reference: something that looks random but follows deep internal structure, exactly like a good puzzle. The organic leaf motifs soften the rawness — pressed botanical specimens scattered between grid cells like bookmarks left by a previous solver. Tone: **conversational, direct, a little dry.** The page does not say "Elevate your puzzle experience." It says "Here are the puzzles. Some of them will defeat you." Skeleton-loading states are not hidden — they are celebrated as part of the puzzle metaphor: empty cells waiting to be filled. ## Layout Motifs and Structure The primary structure is a **portfolio-grid** — but a grid with editorial intention rather than algorithmic uniformity. Think of a magazine spread from the 1970s where the art director was allowed to break the baseline grid once per page, deliberately. The grid uses a **4-column base on desktop**, collapsing to **2-column on tablet** and **1-column on mobile**, but within that base, individual cells may span 2 columns to feature a standout puzzle or piece. The brutalist structural language means **borders are raw, edges are exposed.** Grid cells have thick `2px solid` borders in a near-black, no radius, no box-shadow, no card float. The grid does not breathe through padding — it breathes through precise, deliberate whitespace between cells, a `24px` gutter that never varies. The page does not scroll infinitely; it has **sections with hard horizontal rules** — thick `4px` rules that cut across the full viewport like a compositor's slug line. **Skeleton loading** is a first-class layout element, not a loading artifact. On first paint, 3–4 grid cells show marble-texture skeleton states: a subtle animated shimmer moving left-to-right across a marbled background, like sunlight crossing an old counter. When content loads in, cells snap from skeleton to content without a fade — a hard cut, like filling in a puzzle square with ink rather than pencil. This "loading as puzzle-solving" narrative runs through the entire interaction model. **Above the fold:** A single-row header — wordmark left, minimal nav right — and then immediately the grid begins. No hero image, no splash. The grid is the hero. A single **oversized digit** (current puzzle count, set at `clamp(8rem, 18vw, 18rem)`) floats in the first oversized 2-column cell, acting as both number and decorative element. **Section dividers** use the horizontal slug rule (`4px solid #1C1008`) plus a single-line label set in uppercase tracking: `PUZZLES` / `PROCESS` / `ABOUT`. Labels align left, flush to the grid. No decorative flourishes near dividers — the rule is enough. The page footer is unusually sparse: two lines of text, a tiny leaf glyph (inline SVG, no icon font), and the domain. Nothing else. No social icons, no newsletter form. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark / Puzzle Titles:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weight 700 and 400 italic. Playfair Display brings the editorial gravitas of a broadsheet puzzle page — its contrast between thick and thin strokes echoes the veining in marble. The wordmark `ppuzzl` is set in Playfair Display 700, the double-p rendered at slightly wider tracking to acknowledge the stutter as a feature. Puzzle titles use 400 italic, sized at `clamp(1.5rem, 3.5vw, 2.5rem)`. - **Body / Navigation / Labels:** [Inter](https://fonts.google.com/specimen/Inter), weight 400 and 600. Inter is the working journalist's typeface: no personality that gets in the way, maximum legibility at small sizes, correctly spaced digits for counters and clue numbers. Body text set at `1rem / 1.6` line-height in Ink on Cream. - **Monospace / Clue Text / Skeleton Labels:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), weight 400. Used for puzzle grid cell letters, clue lists, and the skeleton-state placeholder text ("loading puzzle..."). The monospace enforces the crossword's rigid cellular logic. **Palette:** - `#C85A2A` — Burnt Sienna (primary accent: borders, hover states, the oversized digit, active nav) - `#1C1008` — Charred Wood (near-black: all body text, grid borders, slug rules, wordmark) - `#F5EDE0` — Old Cream (page background: warm, slightly yellowed, like old newsprint) - `#D4B896` — Warm Sand (grid cell backgrounds, secondary surfaces) - `#8B3A1A` — Deep Rust (hover state on Burnt Sienna elements, active puzzle border) - `#E8DDD0` — Pale Linen (skeleton shimmer base color, alternating row tints) - `#3B2A1A` — Dark Walnut (footer text, muted labels, fine print) **Color application:** - Background: Old Cream `#F5EDE0` — the entire page breathes this warmth - Primary accent: Burnt Sienna `#C85A2A` — touches that demand attention - Grid cell fill: Warm Sand `#D4B896` — cushions the content without disappearing - Text: Charred Wood `#1C1008` — maximum contrast without cold black - Borders: Charred Wood `#1C1008` at `2px` everywhere, `4px` on slug rules - Skeleton shimmer: animates from `#E8DDD0` (Pale Linen) to `#D4B896` (Warm Sand) and back ## Imagery and Motifs **Marble texture** is the foundational surface treatment. The marble is not photography of real marble (no stock photos). Instead, it is a procedurally generated SVG `` filter applied to surface backgrounds — warm veining in tones of `#C85A2A` and `#8B3A1A` on a `#F5EDE0` ground. The turbulence parameters are set to produce long, diagonal veins rather than tight noise — the macro geology of the counter, not the micro grain of gravel. This marble texture appears in: - Skeleton loading cells (shimmer moves over the marble) - The page header band (faint, low-opacity: 15%) - One featured 2-column cell as full background **Leaf-organic motifs** appear as hand-drawn inline SVG elements — not icons, not photographs, not stock vectors. The visual vocabulary is three botanical specimens, each drawn as a single continuous ink line stroke (no fills, `1.5px` stroke in `#1C1008`): 1. **Monstera leaf** (partial, one lobe visible): used between grid sections as a soft divider accent, placed left-aligned, rotated `−12deg`, 80px tall 2. **Sprig of three oval leaves** (unidentified but clearly domestic): appears in the footer flanking the domain name, 40px, rotated `+6deg` 3. **A single ginkgo fan leaf**: used as a decorative stop at the end of the horizontal slug rules — set right-aligned, 32px The leaf SVGs are never colored. They are always Charred Wood `#1C1008` ink — raw, pressed-botanical, as if the puzzle maker pressed a leaf from the garden into their notebook. **The puzzle grid cell** as a design motif recurs throughout — even off the actual puzzle page. Small `4×4` grids of empty cells (no letters, just borders and fill) appear as decorative texture in backgrounds, scaled to 12px cell size, the cells alternating between `#F5EDE0` and `#D4B896`. These micro-grids are built in SVG, tiled as background-image, and add a quiet structural rhythm without shouting puzzle. **No photography.** No gradients (except the skeleton shimmer). No rounded corners anywhere. No box shadows. Every border is a straight line; every corner is 90 degrees. ## Prompts for Implementation The implementation story: a crossword constructor opens their portfolio on a Sunday afternoon. The visitor arrives at a page that looks like the inside of the constructor's sketchbook — gridded, warm, slightly worn. The page loads with skeleton cells shimmering like sunlight crossing the old marble counter. When puzzles appear, they snap in — ink into squares. The visitor scrolls through featured puzzles, each a 2-column cell with title in Playfair italic, clue count in Inter, and a thumbnail crossword grid (4×4 scaled preview). **Skeleton states as narrative:** On first load, three cells render as marble-textured skeletons with the shimmer animation. These are not hidden with opacity 0. They are shown, labeled "loading puzzle..." in JetBrains Mono at 0.75rem, Charred Wood at 40% opacity. They animate for 0.8s then snap to content. **Scroll behavior:** No parallax, no scroll-triggered animations except a single effect: the oversized puzzle-count digit in the hero cell shifts from `#E8DDD0` (invisible against Pale Linen) to `#C85A2A` (Burnt Sienna, fully visible) as it enters the viewport. The transition is `opacity` only, 0.4s linear — no transform. **Hover states on grid cells:** The `2px solid #1C1008` border becomes `2px solid #C85A2A`. No lift, no shadow, no scale. Just the color swap. It is unmistakable and immediate. **No hero section, no splash screen, no loading animation beyond skeleton cells.** The grid begins at 80px from the top of the viewport. The header is `64px` tall. **Typography rhythm:** Playfair Display at each puzzle title, Inter for the metadata row (clue count, difficulty, date), JetBrains Mono for any grid-adjacent text. This three-register typographic stack reinforces the editorial/utilitarian/systematic layers of puzzle-making. **Mobile:** On 1-column mobile, the slug rules run full-width, the oversized digit is hidden, the skeleton cells stack vertically. The leaf SVGs scale down 60% but are not hidden. **Accessibility note (for implementation only, not design focus):** The marble SVG filter has a static fallback of `background-color: #F5EDE0` for prefers-reduced-motion. ## Uniqueness Notes 1. **Skeleton-loading as puzzle narrative, not UX courtesy.** Skeleton loading appears in 3% of designs in the registry, always as a functional loading indicator to be hidden quickly. Here it is an intentional metaphor — the empty crossword cell waiting for an answer — and is kept visible as a design element. The shimmer moves over a marble texture rather than a flat gray. No other design in the registry uses skeleton states as conceptual storytelling. 2. **Brutalist grid with warm organic materials.** Brutalism in the registry (7%) is invariably cold: concrete, steel, black-and-white high-contrast, sharp and aggressive. This design applies brutalist structural vocabulary (raw borders, exposed grid, no decorative softening of layout) to a warm material palette (Old Cream, Burnt Sienna, Warm Sand) with botanical leaf motifs. The result is a brutalism that reads as a craftsperson's workshop rather than a manifesto. No other entry in the registry pairs brutalist structure with terracotta-warm palette and organic botanical motifs. 3. **The `ppuzzl` typographic stutter as brand feature.** The double-p is treated as a woodblock printer's registration artifact — the kind of letterpress error that becomes a signature. The wordmark set in Playfair Display 700 with widened tracking on the `pp` pair acknowledges the domain name's oddity as intentional character. No registry entry uses its domain's quirk as a structural typographic argument. 4. **Procedural SVG marble via `` instead of photography or CSS gradients.** Marble-texture appears in 3% of designs, always as a stock photograph. This design generates marble as a filter primitive — scalable, colorable, always matching the palette — with warm veining in Burnt Sienna and Deep Rust on Old Cream ground. It is a technique not present in any other registry entry. 5. **Planned Seed:** aesthetic: brutalist, layout: portfolio-grid, typography: playfair-elegant, palette: burnt-orange, patterns: skeleton-loading, imagery: marble-texture, motifs: leaf-organic, tone: approachable-casual 6. **Avoided overused patterns from frequency analysis:** centered-single-column (85%), CTA-heavy layouts, feature card grids with rounded corners, photography-first hero sections, glassmorphism, neon-glow, dark-mode defaults, hero-with-stat-grid.