# Design Language for ppuzzl.in ## Aesthetics and Tone ppuzzl.in channels the spirit of neubrutalism -- thick black borders, raw shadows, and unapologetically chunky UI elements -- but rendered through the amber filter of a sepia-nostalgic palette, as if a brutalist concrete building were photographed on expired Kodak film in 1974. The visual reference is a crossword puzzle grid printed on yellowed newspaper: precise, modular, and satisfyingly geometric, but softened by the patina of age and the warmth of oxidized ink. The name "ppuzzl" evokes puzzles, pattern-matching, and the satisfying click of pieces locking together. The design leans into this by treating every UI element as a discrete puzzle tile -- thick-bordered, castable with hard shadows, and arranged in a bento-box grid where each cell is a self-contained visual unit. Nothing bleeds into anything else. Every element has a hard edge and a definitive boundary, but the sepia warmth and casual tone prevent this from feeling hostile or industrial. The mood is approachable-casual: like a Sunday afternoon spent with a puzzle book and a cup of coffee in a mid-century kitchen. The site should feel tactile, like the user could pick up each bento cell and rearrange it. There is a handmade quality to the precision -- everything is grid-aligned but feels placed by a human, not generated by a machine. ## Layout Motifs and Structure The layout is a strict **bento-box grid** -- a CSS Grid layout where content is distributed across rectangular cells of varying sizes, all sharing a common gutter and border language. Unlike a masonry or free-form grid, the bento-box maintains rigid alignment on both axes: every cell edge aligns with at least one neighbor, creating the visual of a compartmentalized lunch box or a typesetter's case. **Grid Architecture:** The primary grid on desktop is an **8-column, 6-row** structure with 16px gutters. Each cell spans either 1x1, 2x1, 1x2, 2x2, 3x2, or 4x1 units. The cells are arranged to create visual variety while maintaining perfect axis alignment. No cell floats free -- every border touches a neighbor. On tablet (768px-1024px), the grid collapses to **4 columns**, and cells redistribute to maintain proportional relationships. On mobile (<768px), the grid becomes **2 columns** with cells stacking in a natural reading order, preserving the bento aesthetic even at small sizes. **Cell Anatomy:** Every bento cell shares a common anatomy: - **Border:** 4px solid `#2E2018` (Dark Roast) -- the signature neubrutalist thick border - **Shadow:** 6px 6px 0px `#2E2018` -- a hard, offset drop shadow with no blur, creating the impression of each cell being a physical tile raised above the surface - **Background:** Variable per cell -- alternating between `#F5E6C8` (Aged Parchment), `#EDDCC0` (Warm Vellum), and `#FFF8ED` (Cream Wash) - **Border-radius:** 2px -- barely rounded, maintaining the raw neubrutalist edge - **Padding:** 24px internal, creating breathing room within each cell **Hero Area:** The hero occupies the top 3x3 cells (on desktop), with the largest cell (2x2) containing the ppuzzl.in wordmark and tagline. The remaining cells in the hero row contain: a geometric-abstract SVG illustration (1x1), a rotating puzzle-piece animation (1x1), and a horizontal ticker displaying keywords (3x1 spanning the bottom of the hero). **Navigation:** Navigation is a horizontal bar of bento cells at the very top -- each nav item is its own bordered cell with the same shadow treatment, creating a row of clickable tiles. On hover, cells translate by -3px -3px and the shadow grows to 9px 9px 0px, as if the tile is being lifted off the surface. ## Typography and Palette **Typography:** - **Headlines / Display:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with geometric DNA and a slightly quirky character (note the distinctive single-story 'a' and the notched 'G'). Used at weights 500 and 700. Variable font features: `font-variation-settings: 'wght'` animated between 400-700 on hover for interactive elements. Sizes: 4rem-6rem for hero display, 2rem-3rem for section headers, 1.5rem for cell titles. Letter-spacing: -0.03em at display sizes for a punchy, compressed feel. - **Body Text:** "Literata" (Google Fonts) -- an elegant, high-readability serif designed specifically for long-form reading on screens. Its variable font axis allows smooth weight transitions from 200-900. Used at weight 400 for body copy, 600 for emphasis. Size: 1rem-1.125rem, line-height 1.65. The serif body against the sans-serif headlines creates a warm editorial contrast that reinforces the newspaper-puzzle-book feel. - **Monospace Accents:** "JetBrains Mono" (Google Fonts) -- used sparingly for labels, counters, timestamps, and puzzle-grid coordinates. Weight 400, size 0.8rem, letter-spacing 0.05em. Applied to cell category tags and numerical data to evoke crossword-grid numbering. - **Variable Fluid Sizing:** All type uses CSS `clamp()` for fluid scaling: `clamp(1rem, 0.8rem + 1vw, 1.125rem)` for body, `clamp(2rem, 1.5rem + 3vw, 6rem)` for display. The variable font weight of Space Grotesk and Literata is leveraged for scroll-responsive weight changes -- as the user scrolls past the hero, headline weights subtly decrease from 700 to 500, creating a typographic "exhale" that signals transition from display to reading mode. **Palette:** The palette is sepia-nostalgic, drawing from oxidized papers, aged wood, dark coffee, and faded ink: | Swatch | Name | Hex | Usage | |--------|------|-----|-------| | Primary Background | Cream Wash | `#FFF8ED` | Page background, default cell fill | | Secondary Background | Aged Parchment | `#F5E6C8` | Alternating cell backgrounds | | Tertiary Background | Warm Vellum | `#EDDCC0` | Accent cells, hover states | | Primary Text | Dark Roast | `#2E2018` | All text, borders, shadows | | Accent 1 | Burnt Sienna | `#C2703E` | Interactive elements, links, hover borders | | Accent 2 | Faded Ink Blue | `#5B7A8A` | Secondary interactive, code blocks, tags | | Accent 3 | Mustard Patina | `#C9A84C` | Highlights, active states, decorative elements | | Muted | Dusty Sage | `#8A9A7E` | Disabled states, subtle dividers | All colors maintain WCAG-adjacent contrast ratios within their usage context. The `#2E2018` on `#FFF8ED` achieves approximately 12:1 contrast. Accent colors are used only on large text or decorative elements where contrast requirements are relaxed. ## Imagery and Motifs **Geometric-Abstract Illustrations:** All visual imagery consists of geometric-abstract compositions: arrangements of circles, rectangles, triangles, and irregular polygons rendered in flat fills using the palette colors with 4px `#2E2018` outlines. These are SVG compositions that reference Bauhaus poster design and tangram puzzles -- each illustration is built from exactly 7 geometric pieces (a nod to the tangram tradition) arranged to suggest abstract objects: a house, a bird, a tree, a face. The outlines match the cell border weight (4px), creating visual continuity between illustration and architecture. **Grid-Lines Motif:** A subtle grid-line pattern underlays the entire page. This is rendered as a CSS background pattern on the ``: a repeating grid of 1px lines in `rgba(46, 32, 24, 0.06)` at 48px intervals, evoking graph paper or a crossword grid skeleton. The grid lines are perfectly aligned with the bento-box gutters, so the structural grid of the layout literally maps onto the decorative grid of the background, creating a sense of architectural precision. Within individual cells, the grid-line motif intensifies: hover states reveal denser grid lines (24px intervals, `rgba(46, 32, 24, 0.12)`) that fade in with a 300ms transition, as if the cell's underlying structure is being revealed. **Puzzle-Piece Connectors:** At the junction of certain bento cells, small SVG puzzle-piece connector shapes (the classic knob-and-socket silhouette) are positioned as decorative elements, rendered in `#C2703E` (Burnt Sienna). These are purely ornamental, placed at CSS `position: absolute` on cell corners, and they create the visual suggestion that the bento cells are interlocking puzzle pieces rather than independent tiles. **Crossword Numbering:** Each bento cell has a small number in its top-left corner, rendered in JetBrains Mono at 0.7rem in `rgba(46, 32, 24, 0.3)`. The numbers count sequentially (01, 02, 03...) down the page, evoking crossword-grid numbering. This is a purely decorative motif that reinforces the puzzle theme and adds a layer of information-design texture. **Stamp and Postmark Textures:** Decorative circular "postmark" stamps appear in 2-3 cells, rendered as SVG circles with dashed borders and rotated text along the path (reading things like "ppuzzl.in" and "EST. 2026" and "ORIGINAL"). These are rendered in `#C9A84C` (Mustard Patina) at low opacity (0.2-0.4), creating the feeling of aged postal ephemera stamped onto the parchment cells. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with the bento grid fully collapsed -- all cells are stacked in a single column at 0 opacity and translated 20px downward. On load, cells ripple into view with staggered timing: the first cell appears at 0ms, each subsequent cell at +80ms, creating a cascade that flows from top-left to bottom-right (calculated by each cell's grid position). The entrance animation uses `cubic-bezier(0.34, 1.56, 0.64, 1)` for a slight overshoot bounce that makes each tile feel like it is being physically placed onto the surface. **Ripple Interaction Pattern:** The signature interaction is the ripple. When the user clicks or taps anywhere on the grid, a ripple propagates outward from the click point: each bento cell briefly scales to 0.97, shifts its shadow from 6px to 2px (pressing down), then bounces back to 1.0 with shadow restoring to 6px. The ripple timing is calculated by each cell's distance from the click point -- closer cells react first, farther cells react later (8ms per 100px of distance). The effect creates the impression of a physical surface responding to touch, like pressing on a rubber mat with tiles floating on it. **Hover Microinteractions:** On cell hover: 1. The cell translates `-3px, -3px` (lifting up-left) 2. The hard shadow grows from `6px 6px 0px` to `9px 9px 0px` 3. The background color shifts one step warmer (Cream Wash to Aged Parchment, Aged Parchment to Warm Vellum) 4. The grid-line background pattern intensifies (denser grid fades in) 5. The crossword number in the corner shifts from 30% to 60% opacity All transitions are 200ms with `ease-out`. On cell active (mousedown): 1. The cell translates `2px, 2px` (pressing into surface) 2. The shadow shrinks to `2px 2px 0px` 3. A brief ripple ring (CSS `@keyframes`) expands from the cursor point within the cell Transition: 100ms with `ease-in`. **Scroll Behavior:** As the user scrolls, cells that enter the viewport animate in using the same ripple-cascade entrance as the initial load, but triggered by Intersection Observer at a 0.15 threshold. Cells that have already appeared do not re-animate. The background grid-line pattern has a very subtle parallax offset (`background-position` shifts at 0.3x scroll speed), creating the illusion that the grid is painted on a surface behind the bento tiles. **Variable Font Animation:** The hero headline uses Space Grotesk's variable weight axis. On page load, the weight animates from 300 to 700 over 800ms with a staggered per-character delay (40ms per character), creating a bold-wave that sweeps across the wordmark. On scroll past the hero, the weight smoothly transitions from 700 to 500 using a scroll-linked CSS custom property (`--scroll-weight: calc(700 - (var(--scroll-progress) * 200))`), creating a typographic breathing effect. **Storytelling Structure:** The page is divided into narrative "zones" mapped onto the bento grid: 1. **Zone 1 (Hero):** The top 3 rows -- introduce ppuzzl.in with the animated wordmark, a geometric tangram illustration, and a one-sentence manifesto 2. **Zone 2 (Concept):** Rows 4-6 -- three or four cells explaining the concept, each with a tangram illustration and short copy 3. **Zone 3 (Showcase):** Rows 7-10 -- a denser grid of smaller cells showcasing examples, features, or portfolio pieces, each cell acting as a puzzle tile that can be explored 4. **Zone 4 (Footer):** Final 2 rows -- contact information, social links, and a closing postmark stamp, all within the bento cell language **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, generic hero-with-background-image patterns. Every element must feel like part of the puzzle grid -- no floating buttons, no full-width banners that break the bento structure. **Technical Notes:** - Use CSS Grid with `grid-template-columns: repeat(8, 1fr)` and explicit `grid-template-areas` for the bento layout - All shadows are hard (`blur: 0`) -- this is non-negotiable for the neubrutalist aesthetic - Variable fonts loaded via Google Fonts API: `Space+Grotesk:wght@300..700`, `Literata:wght@200..900`, `JetBrains+Mono:wght@400` - Ripple calculations use `Element.getBoundingClientRect()` for distance computation - Grid background uses `repeating-linear-gradient` for the crossword-grid pattern - All animations respect `prefers-reduced-motion` -- reduced motion users see instant state changes with no cascade or ripple ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Neubrutalist Bento-Box as Puzzle Metaphor:** No other design in the portfolio combines the bento-box grid structure with neubrutalist thick borders and hard shadows. While other designs use card grids (RRIDDL's puzzle tiles, PPEBBL's masonry), ppuzzl.in's bento-box is rigid on both axes -- every cell aligns perfectly with its neighbors, creating a tighter, more architectural grid that reads as a compartmentalized puzzle or typesetter's case rather than a freeform arrangement. 2. **Physical Ripple Interaction as Primary Pattern:** The ripple propagation effect -- where clicking anywhere causes a wave of press-and-release across all bento cells, timed by distance -- is unique in the portfolio. Other designs use scroll-triggered animations or hover effects, but ppuzzl.in's ripple creates a genuinely physical, tactile sensation that treats the entire grid as a unified responsive surface. This is not a CSS ripple on a single button -- it is a grid-wide physics simulation. 3. **Sepia-Nostalgic Palette with Neubrutalist Structure:** The portfolio contains no other design that pairs the warm, aged, paper-like sepia palette with the hard geometric confidence of neubrutalism. This creates a novel aesthetic tension: the soft, worn warmth of old paper against the sharp, uncompromising borders and shadows of brutalist UI. The result feels like a vintage puzzle book that has been precisely laser-cut. 4. **Tangram Illustration System:** The use of exactly-7-piece geometric tangram compositions as the sole illustrative language is unique. Other designs use line illustrations (RRIDDL), marble textures (PPEBBL), or photography, but ppuzzl.in's tangram system creates a self-consistent visual vocabulary where every illustration is literally a puzzle -- decomposable into the same 7 primitive shapes. 5. **Crossword-Grid Background Alignment:** The decorative grid-line background is mathematically aligned with the actual CSS Grid gutters, creating a rare case where the decorative pattern and the structural layout are the same grid. This dual-purpose grid creates a satisfying sense of intentionality that other designs do not achieve. **Chosen Seed:** - aesthetic: neubrutalism - layout: bento-box - typography: variable-fluid - palette: sepia-nostalgic - patterns: ripple - imagery: geometric-abstract - motifs: grid-lines - tone: approachable-casual **Avoided Overused Patterns (from frequency analysis):** - playful aesthetic (95%) -- replaced with neubrutalism (2%) - centered layout (99%) -- replaced with bento-box (3%) - mono typography (99%) -- replaced with variable-fluid (3%), mono used only as accent - warm palette (100%) -- replaced with sepia-nostalgic (6%), a more specific warm variant - scroll-triggered patterns (96%) -- replaced with ripple (6%) as primary pattern - minimal imagery (94%) -- replaced with geometric-abstract (2%) - vintage motifs (87%) -- replaced with grid-lines (6%) - friendly tone (98%) -- replaced with approachable-casual (3%)