# Design Language for prototype.bar ## Aesthetics and Tone prototype.bar is **a wet-lab tap-room where unfinished ideas are served chilled** — picture a 2003-era pharmaceutical clean-room that someone has quietly converted into a tasting bar. Behind a long acrylic counter, glass beakers of half-cooked concepts hang from chrome rails like bottles in a speakeasy; each one is a *prototype on draught*, condensation beading on its side, a paper coaster tucked underneath. The governing aesthetic is **frutiger-aero** — the glossy, optimistic, water-and-grass visual language of early-2000s operating systems and consumer-tech packaging — but **dragged sideways into a bar setting and sobered up just slightly**: less stock-photo dolphin, more *laboratory glassware catching aquarium light*. Everything is **wet**: surfaces look freshly wiped, droplets cling to the underside of UI panels, light refracts through liquid as if the whole page were submerged a few centimetres below the surface of a very clean tank. The tone is **optimistic-bright with a technician's deadpan** — the copy reads like tasting notes written by an engineer: *"PROTOTYPE 07 — citrus top-note, structural integrity 64%, do not deploy."* It is friendly, faintly absurd, never corporate. There are no slogans, no growth metrics, no "trusted by" logos. The mood is the specific euphoria of a Tuesday afternoon when a build finally compiles and the office aquarium light hits the monitor just right. Warmth comes not from earthiness but from **glow** — backlit acrylic, the soft bloom of an LED through frosted plastic, the gold-green of sunlight through a tank of distilled water. ## Layout Motifs and Structure The page is built on **layered-depth** (10% in the registry) crossed with a **horizontal-scroll** spine (7%) — explicitly *not* a card-grid, not a hero-dominant slab, not a bento box. The visitor moves **down a bar counter, left to right**, the way you'd walk past taps. The viewport is a fixed window onto a long submerged shelf; scrolling drags the shelf horizontally while individual prototype-beakers drift at slightly different parallax speeds depending on how "deep" in the tank they sit (foreground glass moves fast and blurry; background rails move slow and crisp). Structure, station by station: - **THE SURFACE** (entry) — full-bleed aqua field, a single chrome tap handle dead-centre, a droplet of water perpetually about to fall from it. One line of mono text: the bar's name etched as if frosted onto the inside of the glass. No nav bar. No menu button. - **THE COUNTER RUN** — the horizontal spine. 5–7 **prototype stations**, each a free-standing glassmorphic slab (frosted, beaded with condensation, a thin chrome lip) holding ONE prototype-beaker, ONE coaster of tasting notes, ONE small "tap meter" gauge. Stations are *not* the same size — some are tall pint glasses, some squat tumblers, deliberately uneven heights along the counter. - **THE BACK BAR** — a parallax layer always visible behind the counter: chrome rails, hanging beakers out of focus, a slow drift of bubbles rising. Purely atmospheric. Never clickable. - **THE COASTER** — when a station is centred, its tasting-note coaster slides forward and rotates flat toward the viewer (the only "detail view" on the site). It carries the longform description, set like a real coaster: circular text path around the rim, ingredients listed in the middle. - **THE DRAIN** (footer) — the counter ends; the last station's liquid trickles into a small chrome grate. Domain, a single contact line, the absurd legal disclaimer ("all prototypes consumed at your own latency"). Nothing else. Negative space is **filled with water and light**, not white — the empty parts of the page are the most worked surfaces, full of caustic ripples and faint bubble trails. ## Typography and Palette **Fonts (Google Fonts only):** - **`Chivo Mono`** — the primary voice. Used for every label, tasting note, gauge readout, station number, and the etched bar name. Chivo Mono is a clean, slightly humanist monospace with open counters — it reads like a lab-instrument display and a barcode at once, which is exactly the wet-lab/tap-room collision. All technical copy, all small print, all numerics. - **`Quicksand`** — a geometric rounded sans with circular bowls; used *only* for the few "human" moments — the one-line intro at THE SURFACE, the coaster's centre ingredient list, the footer sign-off. Its roundness is the soft frutiger-aero "consumer friendliness" bubble; kept rare so it stays special. - **`Antonio`** — a tall, narrow grotesque display face, used at huge sizes for the station numbers (`PROTOTYPE 03`) ghosted faintly behind each glass slab, like a bottle's volume marking. Condensed verticals echo the tall pint-glass shapes. **Palette (frutiger-aero, wet, glossy):** - `#EAF7FB` — *Clean Room* — the base field; a near-white that's faintly aqua, the colour of fluorescent light bouncing off wet white tile. - `#7FD4E8` — *Tank Aqua* — the signature; the glow of light through shallow distilled water, used for glass tints, gauge fills, link states. - `#1B7A8C` — *Deep Beaker* — the darker teal at the bottom of a tall glass; used for body text, chrome shadows, the deepest parallax layer. - `#C7E89B` — *Wheatgrass* — the obligatory frutiger-aero green, but desaturated toward celery; used sparingly for "structural integrity OK" gauge states and a thin grass-blade motif at the counter's base. - `#F4E7A1` — *Sun-Through-Glass* — a pale honeyed yellow; the caustic highlight where light bends through liquid; used for droplet specular dots and the warm bloom behind THE SURFACE tap. - `#E8EEF1` — *Brushed Acrylic* — cool grey-white for the chrome rails, slab lips, and tap handles. - `#0E2A30` — *Drain* — almost-black teal; the footer, the grate, the heaviest contrast anchor. Gradients are **mandatory and glossy**: every panel gets a top-down white-to-transparent sheen (the classic Aqua "glass pill" highlight), and the background is a slow vertical gradient `#EAF7FB → #7FD4E8 → #1B7A8C` like looking down into a tank. ## Imagery and Motifs **Imagery is custom SVG + CSS-rendered glass — no photography, no 3D renders, no stock.** Every visual is drawn or compositied in-browser to keep the "submerged" feel coherent: - **The prototype-beakers** — hand-built SVG glassware: Erlenmeyer flasks, graduated cylinders, round-bottom flasks, a single Florence flask. Each holds a different-coloured liquid (drawn from the palette) with a visible meniscus curve, a column of slow-rising SVG bubbles, and one fat specular droplet on the shoulder of the glass. These are the protagonists — each is the page's hero in turn as you scroll the counter. - **Condensation** — every glassmorphic slab is dusted with tiny semi-random water beads (CSS radial-gradient dots with a highlight), heavier near the bottom edge, occasionally one "runs" — animates a short downward streak and reforms. - **Caustics** — a looping, very slow SVG-filter `feTurbulence` ripple over the whole background, the dappled net-of-light pattern you see on the bottom of a pool. Tinted Tank Aqua, low opacity. - **Chrome rails & tap handles** — brushed-metal gradients (Brushed Acrylic with sharp white highlight lines), the only "hard" objects on a page full of soft wet things. - **Grass blades** — a thin row of SVG wheatgrass along the base of the counter (the frutiger-aero "nature" gesture), swaying ~2° on a slow sine, as if there's an air pump nearby. - **Bubble cursor** — the pointer trails 2–3 tiny rising bubbles that detach and float up off the top of the screen; on click, a small ripple ring expands from the point. - **Coaster** — circular cardboard texture (SVG noise on a warm Sun-Through-Glass disc), text set on a `path` around the rim, a faint wet ring stain offset to one side. ## Prompts for Implementation - Build it as **one horizontal narrative**: a fixed-height "tank window" through which a long `.counter` element scrolls left→right (translateX on wheel/scroll, with momentum/spring easing — never a jolting native scrollbar). Each prototype station enters from the right slightly **blurred and oversized**, sharpens and settles as it reaches centre, then drifts left, defocuses, shrinks. Treat scroll position as "where along the bar you're standing." - **Parallax in z, not just y**: at minimum four depth layers — caustic background (slowest), back-bar chrome rails (slow), counter slabs (1:1), foreground floating bubbles & condensation (fastest, slightly blurred). Each layer's translateX is scaled by its depth. - **Everything glossy**: implement the Aqua sheen as a reusable pseudo-element — a top-aligned `linear-gradient(rgba(255,255,255,.55), transparent 55%)` with `border-radius` larger at the top, plus a 1px inset white highlight and a soft outer aqua glow. Apply to slabs, the tap handle, gauges, the coaster. - **Liquid is alive**: meniscus curves wobble subtly; bubbles rise on staggered loops; gauge needles ease with spring physics when a station becomes active; when the coaster flips forward use a real 3D `rotateX` so you briefly see its edge thickness. - **The single interaction** is "centre a station to read its coaster." Clicking/keying a station eases the counter so that station is dead-centre, then the coaster `translateZ`'s forward and `rotateX(70deg→0)` flat to face the viewer; longform tasting notes fade up in Chivo Mono around the rim, ingredients in Quicksand in the middle. Dismiss by moving on. - **Sound-design the motion even silently**: motion curves should feel like *liquid sloshing and settling* — slightly overdamped, never bouncy-cartoonish; condensation runs should be irregular, not metronomic; bubbles should vary in size and speed. - Copy is **tasting notes, not marketing**: structural-integrity percentages, "top-note / mid-note / finish", batch numbers, deadpan warnings. No CTAs, no pricing, no stat-grids, no testimonial blocks, no "features" list. The footer's "drain" trickle is the only closure. - Respect `prefers-reduced-motion`: freeze the caustics and bubbles, drop the horizontal momentum to a clean snap-between-stations, keep the glossy stills. ## Uniqueness Notes Differentiators from other designs in the registry: 1. **Frutiger-aero recontextualised as a wet lab / tap room** — not the usual dolphins-and-grass nostalgia mood-board; the early-2000s glossy-aqua language is bent to laboratory glassware and bar service, a collision I haven't seen elsewhere. (frutiger-aero sits at ~2% in the registry — deliberately reaching for an underused aesthetic.) 2. **Horizontal counter-walk as the whole architecture** — the site is navigated by "walking down a bar", left→right, with true z-depth parallax through "water". Avoids the dominant **card-grid (91%)**, **full-bleed-hero (89%)**, **centered (83%)** layouts; builds on the rare **horizontal-scroll (7%)** + **layered-depth (10%)**. 3. **The page is literally submerged** — caustic light ripples, condensation that runs and reforms, a bubble cursor, liquid-sloshing motion physics. The "background"/negative space is the most worked surface, not empty white. 4. **One interaction only — the coaster flip** — no nav, no menu, no buttons, no modals; the sole detail-view is a cardboard coaster rotating flat toward you. Strongly avoids the registry-dominant **cursor-follow/magnetic/spring CTA patterns** as decoration-for-its-own-sake; here motion is diegetic (it's water). 5. **Copy as engineer's tasting notes** — structural-integrity %, top/mid/finish notes, deadpan "do not deploy" warnings — explicitly avoids the over-represented **CTA-heavy / pricing / stat-grid / testimonial** content patterns. Chosen seed/style: **frutiger aero glossy tech** (from `seeds.json`; recorded here per instructions). Avoided patterns per frequency analysis: hand-drawn aesthetic (96%), glassmorphism-as-default (used here but specifically as *wet glass*, not the generic frosted-saas card), photography imagery (98%), card-grid/full-bleed/centered layouts, warm-gradient palette default (this palette is cool aqua, not warm), pastoral-romantic / warm-inviting tone defaults.