# Design Language for JJUGGL.com ## Aesthetics and Tone JJUGGL.com is a **grainy-textured aquatic salon** — picture a 1970s Italian magazine spread about a private aquarium, then run that spread through a fine-grit risograph press until the inks bloom into one another. The mood is **elegant-sophisticated**, slightly hushed, never cute: think Vignelli laying out a coffee-table book on coral reefs, with Dieter Rams quietly approving the page weights from across the room. The doubled `J` in the wordmark is read as two parallel reeds in a tide pool — vertical, glassy, slightly displaced — and every layout decision derives from that pairing. The site does **not** sell, persuade, or pitch. It performs. JJUGGL is treated as a verb the visitor performs by scrolling: gently agitating a column of water until bubbles release upward in synchronized files. Where most "aquatic" sites lean cyberpunk-blue or watercolor-pastel, JJUGGL lives in a **warm-cool analogous band** — chartreuse → seafoam → cerulean — and dirties every pixel with a deliberate **0.6%–1.4% grain layer** so the experience feels printed, not rendered. There is no gradient mesh, no glassmorphism frost, no neon — only paper, ink, water, and the patient sound of bubbles. Tone-of-voice cues for any copy: **measured**, **observational**, **second-person occasional**, never exclamatory. Sentences end with periods, not punchlines. The site reads like the wall text of a small private museum about juggling fish — formal but quietly humorous about its own subject. ## Layout Motifs and Structure Layout is **modular-blocks** at its strictest: a 12-column rigid grid with 24px gutters, but each cell is occupied by a self-contained "tile" that behaves as an autonomous object with its own internal padding, internal type scale, and internal grain. The page is a vitrine of specimens. Tiles never overlap, never blur, never bleed — they sit in their compartments like fish in stacked tanks. - **Specimen Tiles (320×320 base, scaling 1×1 / 2×1 / 1×2 / 2×2 / 3×2 footprints)** — the primary unit. Each tile holds one creature, one phrase, one bubble column, or one numeral. Tiles are stacked in a CSS Grid with `grid-auto-flow: dense` so smaller tiles backfill around larger ones, producing a rhythmic but never random masonry. - **The Reed Column (left, 8% viewport width)** — a fixed vertical strip running floor-to-ceiling, holding the doubled-J logo at top and a slow-rising column of bubble glyphs at bottom. The column is the only element that violates the modular grid; it exists *outside* the vitrine, like the brass post a museum case is mounted on. - **The Tide Mark (top, 56px)** — a thin horizontal bar that holds breadcrumb labels in tracked-out frutiger sans. Below it is 96px of breathing room before the first tile row begins. - **The Footer Lagoon (bottom, 64vh)** — the only section where the modular grid relaxes. Tiles dissolve into a single full-width pond illustration; copy here is set in italic and floats freely as if leaves on a still surface. Section transitions are handled by **tile-rotation choreography**: as the user scrolls, individual tiles rotate ±2° on a 600ms ease-in-out, then settle. The grid never breaks — it *breathes*. No parallax. No sticky scroll. No horizontal hijack. Vertical scrolling, modular blocks, micro-rotations only. Ratios are enforced: every tile's internal padding is 24px, every tile's corner radius is 6px, every tile's inner grain layer is rotated 23° relative to its parent. Repetition is the discipline. ## Typography and Palette **Fonts (Google Fonts only, three faces, no exceptions):** - **Display & Tile Numerals** — *Inter Tight* (700, optical-size 28). Used at 64px → 168px for tile numerals (specimens are catalogued: 001 / 002 / 003), letter-spacing -0.01em, color `#0E2A2D`. Inter Tight is chosen over Inter for its slightly condensed counters — it reads frutiger-clean, not corporate-bland. Always tabular figures. - **Body & Tile Captions** — *DM Sans* (400, 500). Used at 15px/1.55 inside tiles, 17px/1.6 in lagoon italics. DM Sans is the workhorse — humanist enough to feel curated, geometric enough to hold the modular grid. Caption labels are uppercase, tracked +0.18em, weight 500. - **Italic Marginalia** — *Fraunces* (300 italic, optical 9). The single serif, used **sparingly** — only in the Footer Lagoon and in tile attributions ("after Vignelli, 1972"). Fraunces italic carries the elegance the rest of the type stack deliberately resists. No third weight, no third sans, no display-script flourish. The discipline is part of the design. **Palette — analogous warm-cool aquatic band, 7 colors:** - `#0E2A2D` — *Reed Ink*. Deepest value. Used for type, hairlines, and the inside of the doubled-J counters. Never used as a fill. - `#1E5F6B` — *Tidal Teal*. Primary accent. Tile borders (1.5px), bubble outlines, the Tide Mark. - `#3FA3A8` — *Lagoon*. The site's emotional center. Used for hovered tile fills and the Reed Column background. - `#7DC9B8` — *Seafoam Wash*. Tile fill at rest (15% opacity over paper). - `#C7E0A6` — *Chartreuse Algae*. The single warm-cool pivot color — used only in Specimen 007 (the tropical fish tile) and in cursor reactions. Less than 4% of pixels. - `#F4ECD8` — *Aged Paper*. Page background. The grain layer is multiplied over this. - `#F9F4E5` — *Bubble Highlight*. Tile interior fills, bubble specular dots. The lightest value, ~98% luminance but unmistakably warm. **Grain rules:** every fill receives a 600×600 PNG noise tile (blue noise, not white noise) at 14% opacity, multiply blend mode, rotated 23° per tile. The page's base paper noise sits at 6% opacity over `#F4ECD8`. No gradient. No mesh. Grain is the only texture. ## Imagery and Motifs **Water-bubbles and tropical-fish are the entire visual world.** No photography, no 3D renders, no stock illustration, no gradient mesh. Every visual is hand-traced SVG with a 1.25pt outer line and 0.5pt detail line, both colored `#0E2A2D`, both subtly grained. **Bubbles — the recurring micro-motif:** - 11 distinct bubble glyphs, hand-drawn, stored as a sprite sheet. Each bubble has a single off-center specular dot in `#F9F4E5` and a 1.25pt outline in `#1E5F6B`. - Bubbles rise from the bottom of the Reed Column at irregular intervals (700ms–2400ms gaps) along a slight sinusoidal path (amplitude 6px, period 320px). - Bubbles **also** rise inside individual specimen tiles — tile 002 contains a single column of three bubbles cycling on a 9s loop; tile 005 contains a triplet that rises and pops on hover. - Bubble-pop is the site's core micro-interaction: on cursor click anywhere, a 24px bubble materializes at cursor position and rises 80px before popping into a 4-frame stipple. **Tropical fish — the named cast (each lives in one specific tile):** 1. *Folio Tang* — pale chartreuse, oval, drifts left-to-right across tile 007 on a 18s loop. 2. *Vignelli Wrasse* — long-bodied, dark teal, lives in tile 011, rotates 8° on hover. 3. *Risograph Clown* — three horizontal bands of `#0E2A2D` over `#7DC9B8`, schools of three in tile 014. 4. *Paper Pufferfish* — round, slightly inflated on hover, in tile 020. Always faces the cursor. 5. *Reed Eel* — sinuous, only ever partially visible, slithers between tiles 022 and 023 every 14 seconds. 6. *Italic Sardine* — small, set in negative space, swims as a flock of seven across the Footer Lagoon. Fish are **never** cartoonish. They are drafted in the line-quality of a 1972 marine biology textbook plate, captioned in tracked frutiger sans, dated and numbered. **Other motifs:** - **Hairline waterlines** — single-pixel `#1E5F6B` rules at 1/3 and 2/3 height of every tile, suggesting submerged measurement marks. - **The doubled-J reed** — wherever the wordmark appears, the two J's are drawn as glassy reeds with a single bubble caught between them. - **Specimen catalogue numerals** — every tile is tagged with a three-digit number, top-left, in 14px tabular Inter Tight. The numbering is non-sequential (007, 011, 014, 020, 022) because real catalogues have gaps. ## Prompts for Implementation Build this as a **single-route, vertically scrolling vitrine** — one HTML file, one CSS file, one JS module. Treat the site as a 90-second walk through a small private aquarium gallery, not a marketing surface. There is no hero CTA, no pricing block, no stat grid, no testimonial row, no form. There are only specimen tiles and the air between them. **Animation directives — micro-interactions are the soul of the build:** - **Bubble release on cursor idle.** When the cursor is still for more than 1.4 seconds, three bubbles release from the Reed Column floor and rise. Each bubble's path is a sine wave of amplitude 4–8px (randomized) over 6–9 seconds. On reaching the top, each bubble fades over 240ms. - **Tile lift on hover.** Tiles do not scale, do not glow, do not shadow-bloom. They rotate -1.5°, translate Y by -2px, and the Lagoon fill (`#3FA3A8` at 18%) crossfades in over 320ms. Cursor leaves: same animation reversed at 240ms. - **Tile breath on scroll.** Tiles entering the viewport rotate from 2° to 0° over 600ms with `cubic-bezier(0.22, 1, 0.36, 1)`. Once settled, they micro-breathe at ±0.4° on a 12s loop, staggered 200ms across the grid. The breathing is the site's heartbeat. - **Bubble-pop on click.** Anywhere on the page (except over text), a click spawns a bubble that rises 80px then pops into a 4-frame stipple sprite. No sound. No score. No particles beyond the four stipple frames. - **Fish reaction.** The Paper Pufferfish (tile 020) rotates to face the cursor at all times, with a 240ms eased rotation and a 1.04× scale-up when cursor is within 200px of the tile center. - **Reed Eel passage.** Every 14 seconds, the Reed Eel slithers from the bottom edge of tile 022 to the top edge of tile 023 over 1.8 seconds, then disappears for 14 seconds. The user may catch it twice in a session, or never. - **Bubble specular drift.** Inside every painted bubble, the specular dot drifts on a tiny orbit (radius 1px, period 4s). This is invisible at first glance and only emerges with sustained looking. **Storytelling structure (top → bottom):** 1. **Tide Mark + Reed Column establish.** The page loads on warm paper. The Reed Column draws itself from bottom to top in 1.4s using SVG `path` morph. The doubled-J wordmark materializes last, with a single bubble catching between the two reeds. 2. **The Vitrine opens.** The first row of tiles fades up in a stagger (40ms per tile, left-to-right), each rotating into place from 2°. No banner, no headline, no copy yet — just numbered specimens. 3. **The Specimens.** Eleven tiles, each cataloguing one creature, one phrase, one numeral, or one bubble column. Copy is observational: "Specimen 014. Three Risograph Clowns. Habit: parallel synchronicity." Each tile is a complete thought. 4. **The Eel Interlude.** Halfway down, the grid widens to allow a 3×2 tile that contains nothing but a quietly drifting Reed Eel. Around it, tiles continue their breathing. 5. **The Footer Lagoon.** The grid dissolves. Italic Sardines flock across the bottom. A single Fraunces-italic line — "the doubled J is a pair of reeds; the bubbles are time" — sits unattributed. **Mandatory technical choices:** - SVG sprite sheet for all bubbles and fish. No `` tags except for the noise PNG. - CSS Grid for the vitrine, no flexbox hacks. - Custom `prefers-reduced-motion` path: tiles still breathe at ±0.1°, bubbles do not rise. - Cursor is a custom 12px ring in `#1E5F6B`, with a single pixel of `#F9F4E5` at center. Standard pointer is hidden. - No hero video, no carousel, no modal, no toast, no pricing tier, no comparison table, no testimonial. AVOID these absolutely. The build's success is measured by whether a quiet visitor wants to stay in the page after they have read everything. ## Uniqueness Notes This design's eight differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Modular-blocks layout in a sea of full-bleed.** Frequency analysis shows full-bleed at 70% and modular-blocks at 10%. JJUGGL commits hard to a strict 12-column tile grid with no full-bleed sections, no immersive scroll, no parallax. The tiles are the discipline. 2. **Frutiger-clean typography against the prevailing mono-monoculture.** 70% of designs in this batch lean on monospace as their primary face. JJUGGL refuses mono entirely — Inter Tight + DM Sans + Fraunces italic — chosen for warm humanist counters that feel more 1972 Italian magazine than 2026 dev portfolio. 3. **Analogous palette where the batch defaults to gradients.** 90% of designs in the corpus use gradient as a palette strategy. JJUGGL bans gradient outright. Instead, seven flat colors in a tight chartreuse → cerulean analogous band, mediated by grain. 4. **Grainy-textured paper as substrate, not photography.** 90% of designs use photography. JJUGGL uses zero photography — every visual is grained SVG. The blue-noise grain layer at 14% opacity, rotated 23° per tile, is the only texture in the system. 5. **Water-bubbles as a recurring functional element, not decorative one.** Bubbles are the site's heartbeat: idle release from Reed Column, click-spawn at cursor, internal columns inside tiles, specular-dot orbits. Bubbles encode time, attention, and interaction — not ornament. 6. **Tropical-fish appears in only one other design (GGOGGL.com) but JJUGGL handles it differently** — GGOGGL's fish swim through a split-screen goggle viewport in vector-honey-Y2K. JJUGGL's fish are catalogued specimens in a vitrine, named and dated like museum plates, drawn in 1972 textbook line-quality. Same motif, opposite execution. 7. **Micro-interactions chosen as the primary pattern, where the corpus prefers parallax (80%) and cursor-follow (40%).** JJUGGL has no parallax and no cursor-follow trail. Instead, twelve discrete micro-interactions — bubble release, tile breath, fish rotation, eel passage, specular orbit, click-pop, hover-lift, scroll-settle, idle-release, pufferfish-track, sardine-flock, lagoon-drift. Each is small. Together they create a living vitrine. 8. **Elegant-sophisticated tone, no exclamation, no CTA, no pitch.** The corpus skews toward bold, playful, dopamine, or opulent. JJUGGL is hushed. The wall text of a small museum, not the storefront of a startup. There is no signup form, no pricing, no testimonial, no comparison, no stat-grid — the entire build avoids the patterns the SDESIGN.md prompt explicitly tells us to avoid. **Chosen seed:** *aesthetic: grainy-textured, layout: modular-blocks, typography: frutiger-clean, palette: analogous, patterns: micro-interactions, imagery: water-bubbles, motifs: tropical-fish, tone: elegant-sophisticated* **Avoided patterns from frequency analysis:** hand-drawn aesthetic (70%), photography imagery (90%), gradient palette (90%), full-bleed layout (70%), mono typography (70%), parallax patterns (80%), cursor-follow (40%), warm/muted palette dominance (70% each). JJUGGL takes the underused branches of every category.