# Design Language for GGOGGL.com ## Aesthetics and Tone GGOGGL.com is a **Y2K-futurism aquarium portal** — imagine staring through a pair of foggy 1999 swim goggles into a translucent CD-ROM tropical reef. The double-G in the wordmark reads as two lens cups; everything in the site is engineered around the metaphor of *looking through warm plastic into water*. The mood is **playful, lukewarm, and slightly silly**: the tonal opposite of "sleek." We embrace the honey-colored haze of old polypropylene goggles left in a sunny window — beige plastics that yellowed with UV, rubber straps gone tacky, and the strange optimism of late-1999 web design that believed water and chrome could coexist on a desktop. Inspirations are specific: the 2000 Apple iBook clamshell in "Tangerine," the chrome-on-cream packaging of TaG Heuer Series 1500, late-Lisa-Frank tropical fish stickers, the pre-Aqua iSwim ad campaigns, the warm-bias of Frutiger Aero's earlier honey-tinted ancestor, screensavers from Microsoft Plus! 95, and the way light bends when it enters a goggle lens at the wrong angle. Nothing is cold. Nothing is "tech-blue." Everything is the color of butter melting on a chrome bumper. The narrative voice is a **smitten lifeguard with a Geocities account** — earnest, soft, mildly delusional about how futuristic plastic is. Captions whisper. Headlines bounce. Nothing shouts. ## Layout Motifs and Structure The page is a strict **split-screen diptych** — two panels divided by a vertical seam that mimics the bridge of a swim mask. The seam is not a 1px rule; it is a **soft 24px gradient of refraction** that subtly distorts text crossing it (using `backdrop-filter: hue-rotate` clipped to a vertical band). The seam shifts left/right by ±40px as the cursor moves horizontally — the whole goggle "tilts" with the user's gaze. - **Left lens (40vw)**: the *dry side*. Honey-cream background. Bebas Neue in towering vertical stacks. Holds the wordmark, navigation, and primary copy. Text is anchored to a left-aligned baseline grid of 8 units. - **Right lens (60vw)**: the *wet side*. Aqueous tinted overlay (cream + 8% cyan tint). Hosts the tropical-fish vector reef, the cursor reactions, and supporting prose set in smaller serif. Content here floats on a 12-column flexible grid that drifts ±12px on a 14-second sine cycle, like buoyancy. - **Above both lenses**: a thin chrome "strap" header, 56px tall, full-bleed, with knurled rivet-like vector buttons at each end. - **Below both lenses**: an "anti-fog" footer band — semi-opaque honey wash with hand-traced condensation droplets that pop at random intervals. There is **no mid-page CTA stripe, no pricing block, no stat counter, no testimonial carousel**. The page reads as one breath: enter the goggle, watch the fish, exit the goggle. Story over. Scrolling moves the *reef* (right lens) faster than the *strap copy* (left lens) — a 1.4x parallax that makes the wet side feel deeper. The seam stays fixed. The user feels like they are leaning into water. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Headlines** — *Bebas Neue* (700). Used at sizes 96px → 240px, set in vertical stacks, letter-spacing -0.02em, color `#3A2A14`. Always uppercase, always anchored to the dry side. - **Body / Long Reads** — *Fraunces* (300, 400 italic, optical size 144). The honeyed serif on the wet side, used at 17px/1.55 with subtle italic flourishes for whispered captions. The "soft" optical size keeps it warm against the chrome. - **Micro / UI Labels** — *Space Grotesk* (500). Used only for tiny chrome-strap elements: "BRIDGE / LENS / STRAP / SEAL," nav crumbs, timestamps. Tracking 0.18em, size 11px, all caps. **Palette (honeyed-neutral, with chromed punctuation):** - `#F4E4C1` — *Sunbleached Polypropylene* (primary background, dry lens) - `#E8C988` — *Goggle Honey* (secondary fill, the warm haze) - `#CDA15B` — *Aged Strap Tan* (mid-depth shadows, navigation underlines) - `#3A2A14` — *Wet Cocoa* (primary text, the burnt sienna of old rubber) - `#FFF7E6` — *Condensation Cream* (highlights, chrome reflections) - `#7FB6C9` — *Aquarium Teal* (the only cool color — used sparingly for fish, water tint, and the seam refraction) - `#D8593E` — *Coral Pop* (single accent — links on hover, one fish, one rivet) The cool teal and coral together never exceed **6% of total ink** on any viewport. This is a warm site with two cold winks. ## Imagery and Motifs **Vector art only — no photography, no 3D renders, no stock illustration.** Every visual element is hand-drawn SVG with a deliberately *thick-then-thin* line weight (1.5pt outer, 0.5pt detail) reminiscent of Adobe Illustrator 9.0 brush presets. - **The Reef (right lens, persistent)** — a slow-moving ecosystem of 7 named tropical fish vectors: 1. *Mango Tang* — yellow ovoid, follows the cursor at 0.3 lag 2. *Honey Wrasse* — long body, swims left-to-right on a 22s loop 3. *Cream Clownfish* — small, schools in groups of 3, hovers near anemones 4. *Toast Angelfish* — large, drifts diagonally, casts a soft drop-shadow 5. *Coral Damsel* — the only `#D8593E` fish, appears once per session 6. *Bubble Goby* — emits SVG bubble paths every 4s 7. *Ghost Filefish* — translucent, only visible when cursor is still for 3s - **Anemones and kelp** — flowing-curve vector silhouettes, swaying on a noise-driven y-rotation (-3deg ↔ +3deg over 6s). - **Bubbles** — `path-draw-svg` outlines that rise from the bottom seam, randomized intervals, pop with a CSS scale-in at the top. - **Chrome rivets** — knurled vector circles flanking the strap header, with radial-gradient fills mimicking mid-2000 webOS chrome. - **Goggle suction marks** — four faint elliptical rings at the corners of the viewport, suggesting the page itself is being viewed *through* a mask pressed to the user's face. - **Condensation droplets** — tiny rounded vector blobs that fade in randomly along the bottom edge, then trail downward. No mascots. No brand illustrations of "happy people using a product." The site has no people in it. Only fish, plastic, and honey. ## Prompts for Implementation Build this as a **single-route, full-viewport narrative** — one HTML file, one CSS, one JS. Treat it as a 90-second aquarium visit, not a marketing page. **Animation directives:** - The **cursor-follow** pattern is the spine of the experience. The goggle seam tilts ±40px with cursor X. The Mango Tang fish drifts toward the cursor with 0.3 easing and a 200ms lag. When the cursor is idle for 3 seconds, the Ghost Filefish fades in at 8% opacity for 4s, then disappears. When the cursor crosses the seam from dry-side to wet-side, the cursor itself transforms (via `cursor: url(...)`) from a chrome arrow into a tiny wet bubble. - All fish use **CSS `@keyframes` with `animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)`** to mimic finned swimming — never linear, never ease. - The **seam refraction** is achieved via a fixed-position SVG `` with `feTurbulence baseFrequency="0.012" numOctaves="2"` + `feDisplacementMap scale="6"`, applied to a 24px-wide vertical band overlaying the seam. Animate `feTurbulence`'s `seed` attribute over 18s for shimmer. - Bebas-bold headlines arrive with a **fade-reveal** that staggers letters from left, 40ms apart, with a tiny vertical lift (8px → 0). - On scroll, the right lens parallaxes at 1.4x; the left lens stays at 1.0x; the strap header pins; the seam stays fixed. The footer condensation droplets only animate when the scroll reaches 80%. **Storytelling directives:** - Open with a **silent 1.2-second beat**: the site loads, the goggles "settle" onto the viewport (a 200ms inward push of the corner suction marks), then the reef begins to move. - Use long-form prose on the wet side. Set in Fraunces italic. The text should read like a journal entry: "The first time I put these on, I thought I was looking at the future. I was looking at a fish." Two to three paragraphs maximum per visible region. - Captions are whispered: 11px Space Grotesk, all caps, `#CDA15B`, anchored under each fish with a 1px hairline rule. - Replace any "Get Started" or "Sign Up" instinct with **a single soft invitation**: "PUT THEM ON" — bottom-right of the dry lens, Bebas Neue 32px, underlines on hover with a hand-drawn squiggle SVG. **Forbidden patterns:** - No CTA-heavy hero. No pricing tiers. No 3-up feature grid. No stat counters ("10,000 happy fish"). No testimonial carousel. No FAQ accordion. No newsletter signup modal. No cookie banner styled as a feature. - No dark mode toggle — the site has one mood, and the mood is *afternoon sun on yellowed plastic*. - No bouncy emoji. No Lottie character mascot. No gradient-mesh blobs (the site is flat-vector by rule). ## Uniqueness Notes **Differentiators (8 specific choices that exist nowhere else in this batch):** 1. **Goggle-as-viewport metaphor** — the entire interface is rendered as if viewed through swim goggles, with corner suction marks, a vertical bridge seam, and refraction at the seam. This is a structural metaphor, not a decorative one — every layout decision derives from it. 2. **Honeyed-neutral palette with a 6% cool ink budget** — most "warm palette" sites lean orange/terracotta. This one leans *yellowed-plastic-from-1999* — a specific honey-cream that reads as nostalgic polypropylene, not autumnal. Cool teal and coral are rationed to under 6% of pixels by hard rule. 3. **Named fish ecosystem with behavior** — seven individually named tropical-fish vectors, each with its own movement loop, lag value, and reveal condition. The Ghost Filefish only appears during cursor stillness; the Coral Damsel appears once per session. This treats the page as a tiny game world, not a static layout. 4. **Cursor-follow as primary spine** — most sites use cursor-follow as a flourish; here it controls the seam tilt, fish proximity, cursor icon morphing across the seam, and reveal timing. Removing cursor-follow would dismantle the design. 5. **Bebas Neue paired with Fraunces** — bold uppercase display against a soft optical-size serif italic — an asymmetric pairing tied to the dry/wet split. The dry side shouts in chrome, the wet side whispers in cursive. 6. **Seam refraction via SVG `feDisplacementMap`** — a true filter-based optical distortion at the divider, not a CSS gradient or blur. Text crossing the seam genuinely warps. 7. **No people, no products, no marketing copy** — the site is content-free in the conventional sense. It is a 90-second aquarium experience that happens to live at a domain. This is anti-conversion design as a feature. 8. **Single soft invitation in place of all CTAs** — only one interactive prompt exists ("PUT THEM ON"), and even it is whispered, not stamped. **Chosen seed:** `aesthetic: y2k-futurism, layout: split-screen, typography: bebas-bold, palette: honeyed-neutral, patterns: cursor-follow, imagery: vector-art, motifs: tropical-fish, tone: playful` **Frequency analysis:** No prior DESIGN.md files exist in this batch (frequency.sh returned `no_designs_found`), so no patterns are yet overused. This site establishes a baseline that future siblings should *avoid* duplicating: split-screen layout, honeyed-neutral palette, tropical-fish motif, and the goggle-as-viewport metaphor are now claimed by GGOGGL.com-v1 and should not recur in this exact combination elsewhere.