# Design Language for ppuzzl.dev ## Aesthetics and Tone ppuzzl.dev is a **Frutiger Aero aquarium** — an underwater world rendered in the visual language of 2006 operating system screensavers, where the tropical aquarium glass has been left on a sunny windowsill and every fish is a puzzle piece drifting through crystalline depth. The site channels the specific optimism of early broadband internet: transparent interface chrome, liquid glass panels, soft bloom highlights, nature photography filtered through a lens that makes everything look like it's inside a screensaver that shipped with Windows Vista. The tone is **zen-contemplative**: unhurried, wordless for long stretches, allowing the eye to follow fish across the screen and simply breathe. No urgency. No countdown timers. No hero calls-to-action. The page exists the way a decorative aquarium exists — you look at it and something in your body slows down. The primary palette is a **duotone**: deep aquatic teal `#0D4F5C` paired with luminous celadon `#B8E6D4`, with the tropical fish as polychrome punctuation against an otherwise restrained field. The duotone is not a filter applied to photographs — it is the structural color logic of the entire interface: backgrounds live in teal-space, foreground chrome lives in celadon-space, and the fish exist as the only full-spectrum elements. Frutiger Aero specifics that must be honored: **glossy surfaces with specular highlights**, subtle inner glows on rounded containers, **water-bubble ornaments** floating upward as ambient particle movement, lens-flare halos on light sources (simulated as SVG radial gradients), and a pervasive sense that the interface is slightly wet — every panel looks like it has condensation on the back. ## Layout Motifs and Structure The composition is a strict **split-screen** — the viewport is divided vertically into two equal halves that behave asymmetrically. The left half is the **aquarium pane**: dark, immersive, teal-black `#061A1F`, where tropical fish drift on cursor-reactive paths. The right half is the **interface pane**: lighter celadon glass `#D4F0E8`, where the site's sparse content lives in floating glass cards. The split is not a hard edge. The divider is a **liquid membrane** — a softly animated SVG wave (sinusoidal, ~12px amplitude, 4-second period) that shimmers between the two panes, blurring the boundary the way aquarium glass blurs the inside/outside boundary. Within the interface pane, content is arranged in a **minimal-navigation, single-column** stack — three or four glass cards at most, each with rounded corners (24px), a 1px border in `rgba(184, 230, 212, 0.4)`, and a background of `rgba(13, 79, 92, 0.18)` frosted glass (backdrop-filter: blur). Cards float independently; they do not form a grid. Their vertical positions stagger slightly off-center to avoid mechanical alignment. The aquarium pane has **no text**, no navigation, no interactive UI — only fish, bubbles, and cursor. It is negative space made of moving light. On mobile (< 768px), the split collapses to a **single column**: the aquarium pane compresses to a 220px strip at the top, fish continue to drift within it, and the interface pane fills the remaining height below. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Wordmark**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 300, tracking `0.08em`. Nunito's rounded terminals are native Frutiger Aero DNA — the same softness that defined Vista UI chrome. Wordmark `ppuzzl` set at `clamp(3.2rem, 7vw, 7.5rem)`, lowercase, color `#B8E6D4`, with a soft text-shadow glow: `0 0 24px rgba(184, 230, 212, 0.6)`. - **Body / UI Labels**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 400, `clamp(0.95rem, 1.3vw, 1.1rem)`, color `#E8F8F2`. All body text is sparse — glass cards contain at most 2–3 short sentences each. Weight 600 for any label, never bold. - **Accent / Status**: [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 300, used only for a single tagline or domain stamp, `0.8rem`, color `rgba(184, 230, 212, 0.7)`, letter-spacing `0.18em`. **Palette (hex values):** | Role | Name | Hex | |---|---|---| | Aquarium depth | Abyss | `#061A1F` | | Primary accent | Teal Dark | `#0D4F5C` | | Glass surface | Celadon | `#B8E6D4` | | Interface pane bg | Pale Sea | `#D4F0E8` | | Text primary | Sea Mist | `#E8F8F2` | | Glass border | Aqua Ghost | `rgba(184,230,212,0.4)` | | Fish accent 1 | Mandarin | `#F4823A` | | Fish accent 2 | Electric Indigo | `#5C4EE8` | | Fish accent 3 | Coral Sunrise | `#F2C45A` | | Bubble | Frost White | `rgba(255,255,255,0.22)` | The duotone logic: everything not a fish is rendered in teal-celadon space. The three fish accent colors (Mandarin, Electric Indigo, Coral Sunrise) appear nowhere else in the UI — they exist only on the fish themselves, making the fish visually pop against the restrained interface. ## Imagery and Motifs **All imagery is original SVG — no photography, no stock assets.** The visual world has two families: **1. Tropical Fish (SVG, handcrafted per species)** Four fish species inhabit the aquarium pane. Each is a `` element built from overlapping filled paths and thin-stroke details: - **Mandarin Dragonet** — small, compact, jewel-patterned. Body fill `#F4823A`, labyrinthine surface markings as `#2A1A60` thin paths (`stroke-width: 0.8`), bright cyan eye dot `#5CEEF4`. Fins are translucent `rgba(244, 130, 58, 0.5)`. - **Moorish Idol** — tall, disc-shaped, high-contrast. Black-and-white banding `#1A1A1A` / `#F5F0E8`, snout extension in `#F2C45A`, long dorsal trailing fin in `rgba(240,220,120,0.6)`. - **Blue Tang** — oval body in `#5C4EE8`, bright yellow tail fin `#F2C45A`, thin black border line at scale edges, white highlight streak across the dorsal. - **Clownfish** — compact orange-white banding `#F2692A` / `#FAFAFA`, three white stripes with `#1A1A1A` border outlines, black eye ring. Each fish has an ambient **idle animation** (`animation: fishFloat 8s ease-in-out infinite`) — a gentle 6px vertical sine oscillation. On cursor proximity (< 120px), fish exhibit **cursor-follow** behavior: they rotate to face the cursor and drift 20–40px toward it over 1.2 seconds, then resume their drift path. Fish drift paths are slow Bézier traversals of the aquarium pane — each fish follows a unique randomized cubic-bezier path repeated every 14–22 seconds, entering from one edge and exiting the opposite. **2. Water Bubbles (SVG, ambient)** Spherical SVG circles, 6px–22px diameter, with: - Fill: `rgba(255,255,255,0.12)` (near-transparent) - Stroke: `rgba(255,255,255,0.35)`, `stroke-width: 1px` - Inner specular: a small `rgba(255,255,255,0.8)` ellipse offset 30% from top-left, simulating the Frutiger Aero glass highlight Bubbles float upward from the aquarium floor continuously — 8–12 active at any time, staggered start times, 6–10 second rise durations. They fade to opacity 0 at the waterline (top of aquarium pane). **3. Glass Card Surface Treatment** Each interface card has a layered specular built from CSS alone: - `background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(184,230,212,0.08) 100%)` - `backdrop-filter: blur(12px) saturate(1.4)` - A top-edge inner highlight: `box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 32px rgba(13,79,92,0.25)` - No drop shadows on the outer edge — cards feel lit from above, not floating. **4. Liquid Membrane Divider** The split between panes is a full-height SVG `` rendered as a soft animated wave, `stroke: rgba(184,230,212,0.6)`, `stroke-width: 2`, `fill: none`. Behind it, a 24px-wide feathered gradient bleeds teal into celadon to soften the boundary. ## Prompts for Implementation **The scene to build.** The user arrives to a page that feels like pressing their face against the glass of a very clean aquarium in a softly lit room. The left half of the screen is the tank — dark, deep, inhabited. The right half is the room — lighter, cooler, where sparse words float in glass frames. No introduction is needed. The fish are already drifting when the page loads. **Aquarium pane (left, 50vw):** - Background: `radial-gradient(ellipse at 60% 40%, #0D4F5C 0%, #061A1F 100%)` - Fish rendered as inline SVG `` groups with `` or CSS keyframes for drift paths - Bubbles: absolute-positioned SVG circles, CSS animation `@keyframes bubbleRise` (translate Y from bottom to -100%, opacity 0→0.7→0) - Cursor tracking: JS `mousemove` listener on aquarium pane; for each fish, compute distance from cursor, if < 120px rotate fish SVG to face cursor (CSS `transform: rotate(Xdeg)`) and tween toward cursor - Lens flare: one subtle `radial-gradient` in the upper-right of the aquarium, `rgba(184,230,212,0.04)` to transparent, 220px radius — evokes a light source above the water **Interface pane (right, 50vw):** - Background: `linear-gradient(180deg, #C8EDE0 0%, #D4F0E8 60%, #B8E6D4 100%)` - Glass cards: 3 cards maximum, each `width: min(420px, 88%)`, centered in pane, 32px gap between - Card 1: Wordmark `ppuzzl` (Nunito 300) + one-line tagline in DM Mono - Card 2: A 2–3 sentence description of what ppuzzl is — sparse, unhurried prose in the zen-contemplative register. Example: "Puzzles that don't rush you. A space where pieces find each other slowly, like fish finding their corners." - Card 3: The only interactive element — a single, understated link or action (Nunito 600, `#0D4F5C` text, no button outline, just underline-draw animation on hover) - No navigation bar. No footer. No scroll indicator. The page is one viewport tall. **Liquid membrane:** - SVG element, `position: absolute`, centered on the split line, `height: 100vh`, `width: 48px` centered on the split - Two `` elements on the wave path: one slow (4s) and one fast (1.2s) layered for organic feel - The membrane casts a 6px feathered teal glow leftward and celadon glow rightward **Interaction micro-behaviors:** - Fish that the cursor has recently approached leave a faint `rgba(184,230,212,0.08)` trail for 0.6s (CSS `::after` pseudo-element at fish's previous position, fading) - Cards: on hover, `backdrop-filter: blur(16px)` increases slightly, inner highlight brightens by 10% opacity — the card "fogs" slightly when the hand is near the glass - The wordmark has a very slow idle animation: a 0.3px vertical float on a 6s sine, mimicking the fish's own oscillation — the logo breathes with the tank **What NOT to build:** - No stats, no pricing, no feature lists, no testimonials - No animated gradient backgrounds in the interface pane (that belongs to the aquarium only) - No dark-mode toggle, no cookie banners, no sign-up forms - No skeleton loaders - No navigation hamburger menu ## Uniqueness Notes **Differentiators from the registry:** 1. **First site to fuse Frutiger Aero with a live aquarium as structural layout.** The corpus has frutiger-aero at 2% (rare) and split-screen at 2% (also rare). No other site treats the left half of the viewport as a fully inhabited animal habitat where SVG creatures respond to the cursor. The glass-pane metaphor (aquarium glass = UI glass) makes Frutiger Aero's signature transparency not a stylistic choice but a literal narrative necessity. 2. **Cursor-follow applied to non-abstract entities.** The corpus uses cursor-follow at 8% but always for abstract trails, magnetic text, or particle fields. Here, cursor-follow governs the behavioral logic of named, distinct animal characters — each species has a different follow radius and personality (the Mandarin Dragonet is timid, retreating 10px before approaching; the Clownfish swims aggressively toward the cursor). The interaction is a behavior simulation, not an effect. 3. **Duotone as structural color logic, not photographic filter.** The corpus uses duotone at 11%, almost always as a CSS filter applied to photography. Here, duotone is the foundational color system — the entire site is designed in only two hues (teal/celadon), with the tropical fish as the deliberate, rule-breaking exception. The fish are the only full-spectrum elements in the design. This makes them visually non-negotiable — the user's eye always lands on a fish first. 4. **Zen-contemplative tone at 2% (rare in registry) achieved through spatial silence, not restraint alone.** Most zen-coded designs avoid motion. This site is in constant motion — fish drift, bubbles rise, the membrane shimmers — but the motion is unhurried, non-urgent, and non-directional. The zen quality comes from the motion having no destination. Bubbles rise and vanish. Fish drift and exit. The membrane shimmers and returns. Nothing escalates. **Seed used:** `aesthetic: frutiger-aero, layout: split-screen, typography: geometric-sans, palette: duotone, patterns: cursor-follow, imagery: watercolor, motifs: tropical-fish, tone: zen-contemplative` **Patterns avoided from frequency analysis:** - photography (87% — abstained entirely) - stagger (51% — no staggered entry animations on UI elements) - single-column (21% — rejected in favor of split-screen) - vintage (37% motif — entirely absent) - tech / circuit motifs (24%/13% — no tech vocabulary in a zen aquarium)