# Design Language for JJUGGL.ai ## Aesthetics and Tone JJUGGL.ai is a **silent aquarium of pop-art fish** — a long, calm, vertical descent through layered tropical reefs rendered as if Roy Lichtenstein had spent a year sketching the Great Barrier Reef in a Tokyo planetarium. The site is loud in its colors and quiet in its voice. Every screen is dense with halftone dot fields, bold black contours, and chromatic vector fish drifting through retro-futuristic gradients of teal, magenta, and atomic tangerine. Yet nothing shouts. The fish glide. The captions whisper. The reader breathes out, not in. The signature paradox: **pop-art saturation worn with calm-serene composure**. Imagine a 1962 Warhol screenprint cooled to 16°C, slowed to half speed, and submerged. We borrow the *visual grammar* of mid-century pop-art — Ben-Day dot fills, hard outlines, primary-color blocks, comic-book speech tails — but strip out the irony and the punch, replacing them with the patience of a Tatsuo Horiuchi landscape. Pop-art forms; aquarium pacing. Inspirations that should bleed through every choice: Roy Lichtenstein's "Drowning Girl" rendered as a koi pond, the laminated kelp-forest dioramas at Monterey Bay Aquarium, the cyan/magenta bias of 1970s Star Trek production cels, Eduardo Paolozzi's screenprinted collages, the slow vertical scrolls of Zen koi-feeding apps, and the chromatic intent of Hilma af Klint's later Atom series. The site is a **terrarium for a single thought** — that intelligence, like a school of fish, can be coordinated and weightless at the same time. The brand voice is unhurried, almost monastic. Copy never exclaims. Sentences end with periods, not exclamation marks. The longest line on the page is twelve words. The fish are doing the talking. ## Layout Motifs and Structure The structure is **immersive-scroll** as a vertical water column. Eleven layered "depths" stack from surface (sunlight, shimmer) down through reef (form, color), midwater (negative space), and finally abyss (single pinprick of light). The reader does not scroll *through pages*; they descend through *layers of water*. The viewport is the diving mask. This is **not** parallax. We deliberately reject parallax (80% of the cohort already uses it). Instead, we use **lateral drift**: as the reader scrolls vertically, every fish, bubble, and kelp blade drifts *horizontally* across its own axis at its own slow rate, the way real fish move when the camera pans down. Vertical scroll → horizontal life. The water is the page; the fish are the residents. The eleven depths in order: 1. **Surface Tension** — the JJUGGL wordmark set in variable-fluid type, weight breathing with viewport width. Background is a single block of pale cyan. One small magenta clownfish drifts left-to-right across the title every 14 seconds. 2. **First Light** — a halftone-dot gradient field; rays of light vector down from the top edge as alternating hard-edged geometric shafts in the pop-art tradition. A school of seven yellow vector tangs swims in a slow figure-eight. 3. **The Coral Index** — an asymmetric arrangement of large flat-color coral silhouettes labelled with small DM Mono captions. This is the closest thing the site has to a "table of contents." It is not labelled as one. 4. **Anemone Margin** — a single full-bleed vector anemone, its tendrils drawn as concentric Ben-Day-dot rings, drifts in a slow respiratory rhythm. Body text floats inside its negative space. 5. **The Juggle** — the central conceptual panel. Three vector pufferfish are tossed in a slow arc, like a mime juggling underwater. Their silhouettes describe the brand name JJUGGL (the doubled "J" is two fish nose-to-nose; the "U" is a pufferfish caught mid-arc). This panel reads as the site's logo lockup at full scale. 6. **Quiet Reef** — six discrete reef vignettes laid out in a 2×3 broken grid; each vignette is a fish + a single typeset thought, separated by underline-draw seams. 7. **Brine Margin** — a long, narrow horizontal slab of pure retro-futuristic gradient (teal → magenta → tangerine), with a single bold serif sentence centered. The sentence is the only piece of "marketing copy" on the entire site, and it is a haiku. 8. **The Drift** — vertical strip of small vector fish at varying scales swimming up the page (this is the only place where motion runs *opposite* to scroll direction). Reads like watching air bubbles rise while you sink. 9. **Field Notes from the Tank** — five small dated entries, each a single observation, separated by hand-drawn underline-draw flourishes. 10. **The Abyss** — a near-black panel with a single magenta pinprick. No text except a date. 11. **Colophon** — a quiet end-paper with the makers, the reef, and a tiny vector fish stamp. There is no top navigation. No sticky chrome. No menu. A vertical depth gauge runs along the right margin — a thin column of stacked underline-draws marking 0m, 10m, 25m, 60m, 200m, 1000m — that fills as the reader descends. ## Typography and Palette **Typefaces — Google Fonts only, variable axes used aggressively:** - **Big Shoulders Display** (variable: weight 100–900, width) — display only. Used for the JJUGGL wordmark on the Surface Tension panel and for the four full-bleed depth markers. Set the wordmark at clamp(80px, 14vw, 280px) with weight tied to scroll position: at the surface the wordmark is weight 200 and width 100; as the reader descends, weight increases to 900 and width compresses, as if the type itself is being pressure-crushed by the depth. This is the site's typographic signature. - **Fraunces** (variable: weight, optical size, soft) — the Brine Margin haiku and the section headings. Set the haiku at optical size 144, weight 500, soft 80, italic. Fraunces gives us a warm-bodied serif that reads pop-art-classical when set large and contemplative when set small. - **DM Mono** — captions, depth gauge labels, dated field notes, and any UI metadata. Tracked +60 to read like submersible instrument panel text. This is the only monospace on the site, and we use it sparingly to avoid the cohort's 70% mono saturation. - **Inter** — body copy, weight 400, optical size 16, leading 1.65, measure 58ch. Inter is the workhorse; it disappears, which is what we want when fish are doing the talking. The **variable-fluid** behavior is deliberately tied to *vertical scroll position*, not viewport width. As the reader scrolls down, every variable axis on the page shifts: weights thicken, widths compress, optical sizes increase, italic angles steepen by 2°. The whole typographic system *gets denser as the water gets deeper*. This is the typographic signature and is reserved for this site within the cohort. **Palette — retro-futuristic (1968 sci-fi paperback meets 1965 Lichtenstein print):** - `#FF2E88` — *Magenta Reef* (primary accent — fish bodies, hard outlines, the abyss pinprick) - `#06D7E5` — *Atomic Cyan* (secondary accent — water gradient stops, depth gauge fills) - `#FFB72E` — *Tangerine Sun* (tertiary — the surface light shafts, sun-side fins) - `#0A0F2C` — *Deep Trench* (text on light, abyss field) - `#F2EAD8` — *Sand Cream* (page background, paper warmth — keeps it from being a screen) - `#1F2D7A` — *Cobalt Pressure* (mid-water blocks, large flat fills) - `#9B6EFF` — *Plasma Lavender* (rare fourth accent — used only on the central pufferfish in The Juggle and on the Plasma Lavender thought-balloon tails throughout) This is a **seven-color flat palette**. No tonal ranges. No shadows. No gradient meshes. Color is applied as solid fills or as halftone-dot transitions between two flats. The only continuous gradient in the entire site is the Brine Margin (Atomic Cyan → Magenta Reef → Tangerine Sun) — and it appears exactly once. ## Imagery and Motifs **Vector art is the law.** Every visual element on this site is authored as flat SVG with hard outlines (2.5px Deep Trench), Ben-Day-dot fills (8px dot grid, multiplied), and zero raster textures. No photography. No 3D renders. No watercolor. No noise overlays beyond a single 4% paper grain on the Sand Cream background. The visual language is 100% screenprint-vector. **The fish — the central motif.** A library of twenty named tropical-fish species rendered as pop-art vector silhouettes: - **Halftone Clownfish** — magenta body, three Sand Cream stripes, Ben-Day dot fade on the tail. - **Cobalt Tang** — solid Cobalt Pressure body, single Tangerine Sun fin highlight, dot-grid eye. - **Plasma Pufferfish** — Plasma Lavender body in mid-inflation, spines as 12 evenly-spaced rays. The hero of The Juggle panel. - **Atomic Angelfish** — vertical Atomic Cyan body bisected by a Magenta Reef diagonal in the Lichtenstein "split-color" tradition. - **Tangerine Triggerfish, Trench Eel, Sun Damselfish, Reef Wrasse, Halftone Hammerhead** (small, distant), and twelve others. Each fish exists at three rendered scales (S/M/L) with three pose variations (forward / side / quarter-turn). The site uses them like a typeface — a vocabulary of swimmable glyphs. **Underline-draw motifs ribbon between depths.** Wherever a section seam, an annotation, or a hyperlink occurs, the line is **drawn live** by a 600ms `stroke-dashoffset` animation rather than drawn via CSS `text-decoration`. The underline curls slightly at one end like a calligraphic kelp blade. There are no straight underlines on this site. Every line bends. **Halftone Ben-Day dots** are the texture system. Used as fill transitions (large dots near the edge of a fill, fading to small dots toward the center, simulating the Lichtenstein stipple) and as light-shaft patterns. Authored as SVG `` elements, never as raster textures. Dot size scales with depth — 12px dots at the surface, 4px dots in the abyss. **Speech-tail thought balloons** appear three times in the entire site, each containing a single observation in Fraunces italic. These are the only pop-art "comic" elements; the rest of the page resists the comic-book idiom in favor of poster idiom. Imagery rules: - No photography. Every visual is illustrated. - No drop shadows. Depth is implied by overlap and palette layering. - The 4% paper grain on the Sand Cream background is the only raster texture, and it is not animated. - Fish never animate to attract attention. They drift on a slow lateral sine wave (period 18s, amplitude 40px) and pulse their fins on a separate 2.4s loop. ## Prompts for Implementation Build this as a single long HTML document. The whole site is one continuous descent. The hero is *the act of sinking*. **Core experience prompts:** - The reader lands on Surface Tension. The JJUGGL wordmark sits in Big Shoulders Display, weight axis at 200, width axis at 100, color Deep Trench on Sand Cream. A single Halftone Clownfish drifts left-to-right across the wordmark on a 14-second loop, briefly occluding letters as it passes — the type does not respond, but the fish does. - On scroll, the variable axes of every typographic element on the page shift in lockstep with scroll progress (`scrollY / documentHeight`). At 0% the page is set in light, expanded type; at 100% the type is heavy, condensed, and italicized 2°. This is the signature. Use a single CSS custom property `--depth: 0..1` driven by scroll, and every variable-font declaration should reference it via `font-variation-settings`. - Every fish, bubble, and kelp blade is a positioned SVG with two looped animations: (1) a slow horizontal sine drift on its own period (12–22 seconds, randomized per fish), and (2) a fin-pulse keyframe on a 1.8–2.8s period. **No fish reacts to the cursor.** They are not yours; you are visiting them. - Between depths, the lateral drift of fish *near* the seam slows to 30% for 800ms, then accelerates back. This produces a soft "settling" pause as the reader crosses into a new layer. There is no zoom, no fade, no slide — the seam is purely a rhythmic deceleration. - The depth gauge on the right is a column of stacked underline-draw marks. As the reader descends past each depth (0m, 10m, 25m, 60m, 200m, 1000m), that mark draws itself left-to-right over 400ms in Atomic Cyan. The marks never undraw on scroll-up — once you have been to 60m, the page remembers. - The Juggle panel is the conceptual center. Three Plasma Pufferfish are arranged in a slow parabolic toss: pufferfish A rises from bottom-left to top-center over 2.0s, pufferfish B mirrors right-to-center, pufferfish C rises from below the page into the center, then all three rotate around their shared centroid for 4.0s before scattering back. The motion never stops. It is hypnotic, not energetic. - The Brine Margin haiku is the ONE marketing-adjacent moment. It is a three-line haiku in Fraunces italic, set against the only true gradient on the site. The three lines describe what JJUGGL.ai *is* without naming a feature, a tier, or a benefit. Example tone: "Small minds, schooling. / Coordinates without command. / The reef remembers." Do not copy these words; write fresh. Never frame the site as a product. **Storytelling structure:** The page tells the story of a single descent. The reader begins at the surface, where light is broken into hard pop-art shafts. They sink past coral, anemone, and the central juggling pufferfish. They pass through reef, gradient brine, drifting bubbles, and field notes. They end in the abyss, alone with one magenta point of light and a date. The descent takes about six minutes of slow scrolling. There is no destination, no conversion, no funnel. The reader simply spends six minutes underwater with a school of pop-art fish. Copy register: monastic, observational, calm-serene. First-person plural is allowed but rare. Never use the words "experience," "journey," "solution," "platform," "AI," or "intelligent." The site never explains what JJUGGL.ai is. The fish are the explanation. **AVOID:** - No CTA buttons. No "Get Started," no "Learn More," no email capture, no demo request. - No pricing blocks. No tiers. No comparison tables. - No stat grids or counter-animations. No "10,000 happy customers." - No testimonial cards. - No top navigation. No sticky header. No mega-menu. No hamburger. - No carousels with arrows. - No dark mode toggle. The Sand Cream → Deep Trench descent IS the dark mode. - No parallax. (The cohort is at 80%. We refuse.) - No hand-drawn aesthetic. (The cohort is at 70%. We are vector-strict.) - No photography. No gradient meshes. No glassmorphism. **Interaction details:** - Cursor: replaced with a small Magenta Reef dot (6px) trailed by a soft Atomic Cyan halo (20px, 35% opacity) with 80ms easing lag — like a tiny fish following a current. On hover over any fish in the scene, the cursor halo briefly expands to 44px and the fish's fin-pulse period halves for 1.2s. The fish does not chase the cursor; it merely notices. - Scroll: smoothed via Lenis or equivalent with damping 0.06 (slower than typical — we want the descent slow). Keyboard ArrowDown advances the page exactly 0.5 viewport heights; PageDown advances exactly 1.0 viewport heights. ArrowUp/PageUp rises through the water column with the same rhythm. - Underline-draw is **the** link affordance. Every link in the colophon and every dated entry in Field Notes uses an animated SVG underline drawn on viewport-enter and re-drawn on hover. CSS `text-decoration` is forbidden site-wide. - Bubbles: small Atomic Cyan circles rise vertically through the entire page at randomized speeds (10–18s top-to-bottom). They are decorative only, do not parallax with scroll, and pop with a soft Ben-Day-dot burst at the surface plane. **Technical:** - Render everything as inline SVG where possible. The fish library should be authored as a single SVG `` block with `` definitions, instanced via `` throughout the page. A typical depth panel will instance 8–14 fish. - Use CSS `@property --depth` to enable smooth interpolation of the scroll-driven custom property. - Halftone fills are SVG `` elements with concentric circles. Two sizes per palette color, swapped at panel boundaries. - The page should weigh under 400KB total. Vector everything. No web fonts above the four declared. ## Uniqueness Notes Three-plus differentiators this design commits to and other CMassC sites should not duplicate: 1. **Variable-fluid typography driven by SCROLL DEPTH, not viewport width.** As the reader sinks, every variable axis of every font on the page (weight, width, optical size, italic angle) shifts toward heavier, denser, slanted type. Other sites in the cohort have used cursor-driven axis interpolation (20241204) — we reserve scroll-depth-driven axis interpolation for JJUGGL.ai. The page literally gets typographically heavier with depth. 2. **Pop-art aesthetic worn at calm-serene tempo.** The cohort has zero pop-art entries. We claim it. But we also claim the unusual pairing of pop-art's loud visual grammar (Ben-Day dots, hard outlines, primary blocks) with calm-serene voice (12-word lines, monastic register, no exclamation marks, 18-second drift loops). Future pop-art sites in the cohort should be louder, faster, more graphic-novel — leaving this slow aquarium register exclusive to JJUGGL.ai. 3. **Lateral drift instead of parallax.** The cohort uses parallax in 80% of designs. We reject it outright. Vertical scroll on this site causes *horizontal* fish movement at varying rates, creating depth through orthogonal motion rather than depth-axis displacement. This is JJUGGL.ai's signature scroll mechanic. 4. **Tropical-fish motif done in pop-art vector, not watercolor or photography.** The cohort already has 20% tropical-fish usage, but those treatments lean watercolor / botanical / nature. This site treats tropical fish as Lichtenstein-grade screenprint glyphs — hard outlines, Ben-Day dot fills, flat color, comic-book contour weight. The fish are typographic, not zoological. 5. **Underline-draw as the ONLY link affordance, animated via SVG `stroke-dashoffset`.** No CSS `text-decoration` anywhere in the codebase. Every line that underlines anything is hand-drawn-curved and live-animated. The cohort has used underline-draw at 10%; we make it foundational and exclusive. 6. **Single haiku in lieu of marketing copy.** The Brine Margin holds a three-line Fraunces-italic haiku that is the one and only piece of "what is this site about" copy. There is no tagline elsewhere, no value prop, no description. The site refuses to market itself. 7. **Eleven-depth descent with rhythmic deceleration seams.** Unlike the seven-panel zoom-focus structure of 20241204.com, JJUGGL.ai uses eleven shorter depths joined by deceleration rather than transition. There is no animated handoff between depths — the seam is felt as a rhythmic pause in lateral drift. **Chosen seed:** aesthetic: pop-art, layout: immersive-scroll, typography: variable-fluid, palette: retro-futuristic, patterns: underline-draw, imagery: vector-art, motifs: tropical-fish, tone: calm-serene. **Frequency analysis reference:** Cohort is heavily weighted toward hand-drawn aesthetic (70%), photography imagery (90%), gradient palettes (90%), mono typography (70%), parallax patterns (80%), and full-bleed layouts (70%). This design actively avoids every one of those defaults: imagery is vector-art (10% in cohort), aesthetic is pop-art (0% — first claim), palette is retro-futuristic (0% — first claim), pattern is underline-draw (10%), typography is variable-fluid (10%), and layout uses lateral-drift rather than parallax. The tropical-fish motif (20% in cohort) is reclaimed in a deliberately different visual register (pop-art vector, not watercolor/nature). Calm-serene tone (10%) is rare and is doubled-down on here as the deliberate counterweight to pop-art's expected loudness.