# Design Language for prototype.bar ## Aesthetics and Tone prototype.bar is a **deep-sea laboratory at the edge of legibility** — the kind of place where something almost-complete floats in suspension, visible through reinforced porthole glass, waiting to become real. The word "prototype" carries the specific weight of unfinished potential: form without final function, structure without final name. "bar" has double meaning — a drinking establishment where ideas are tested in conversation, and a horizontal rule, a divider between what was and what could be. The aesthetic is **retro-industrial beneath navy depths**: the visual grammar of 1960s–1980s technical manuals and engineering blueprints, warped and softened by passage through ocean water. Crisp Helvetica-adjacent lettering drifts slightly. Specification callouts emerge from fog. The metallic sheen of machined aluminum surfaces catches refracted light from above. Everything feels like it has been submerged, preserved, and recently surfaced — still structurally sound, slightly corroded at the edges, legible but not quite dry. **Tone: professional-curious.** Not the cold professionalism of a SaaS landing page, but the concentrated professionalism of an engineer who has spent three years on a single problem and can finally show you what they found. The visitor is not being sold to — they are being invited to inspect something. Reverence for craft, distrust of gloss, comfort with incomplete things shown in their natural state. **Mood keywords:** submerged, pressurized, almost-finished, deliberate, corroded-but-sturdy, technically beautiful, tidal. ## Layout Motifs and Structure The page is a **broken-grid of drifting specification panels** set against a pressurized navy void. There is no consistent column rhythm. Each panel occupies its own coordinate in a space that feels like the inside of a submarine's operations room viewed through slightly distorted glass. **Grid philosophy:** seven to nine content panels arranged on a 24-column invisible grid, but none aligning to the same column pairs. Some panels are 11 columns wide; others are 5. Some begin on column 2; others on column 14. The visual result is a scatter diagram of specification frames — each one a discrete instrument reading, each with its own internal logic, none belonging to a unified page layout. **Broken-grid mechanics:** - Primary hero panel: full-bleed, 100svh, centered but deliberately offset 3.2% left from true center - Floating spec cards: `position: absolute` elements with `transform: rotate(-1.8deg)` to `rotate(2.4deg)`, staggered - Depth layers: panels at three z-axis depths — foreground (0px), mid (−40px blur filter), background (−100px, 12% opacity overlay) - Connective tissue: thin `.5px` ruling lines at 25% white, drawn between panels like drafting callout lines - No consistent gutter. The implicit margin is the void itself — navy darkness functions as a universal border **Vertical scroll behavior:** the page rewards slow scrolling. Each panel fades in not from opacity 0 but from a `blur(8px) opacity(0.2)` state — they crystallize from fog as they enter the viewport, as if pressure-stabilizing on surfacing. Panels that have been passed do not fade back — they remain crisp, like objects that have fully decompressed. **Navigation:** no sticky header. A single fixed element — a pressure gauge indicator in the bottom-right corner (20px × 60px vertical bar, chrome-metallic, with a hairline needle) that tracks scroll position and acts as a subtle depth indicator. ## Typography and Palette **Typography: humanist-industrial — warm legibility over geometric coldness.** The seed specifies `humanist` typography. In this context, humanist sans means letters with visible calligraphic construction — the slight pen-angle in the 'o', the differentiated strokes — as opposed to the cold uniformity of a Futura or Helvetica. This humanity is what allows the type to survive submersion in the navy palette without feeling mechanical. - **Display / Hero Numerals:** [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed) — weight 700, uppercase, letter-spacing 0.12em. Used for the main prototype identifier (e.g., `PROTO-0047`), revision numbers, and large specification callouts. Barlow is a humanist condensed face with visible pen influence at its joints — it reads as technical but never robotic. - **Body / Panel Labels:** [Source Sans 3](https://fonts.google.com/specimen/Source+Sans+3) — weight 300 and 400. The page's workhorse. Small specification text, description paragraphs, field labels. Source Sans is openly humanist — designed by Paul Hunt with calligraphic roots. At 14px/1.6 on dark backgrounds it reads with precision. - **Accent / Monospace data:** [Martian Mono](https://fonts.google.com/specimen/Martian+Mono) — weight 300, used for hex values, coordinate strings, version hashes, technical data fields. Gives a CRT-readout quality to data elements without full retro pastiche. **Palette — navy-metallic:** - `#0B1526` — Abyss Navy. The primary background. Almost black but with strong blue undertone. The pressure-void color. - `#112040` — Deep Field. Secondary dark background, used for panel surfaces — distinguishable from abyss but close. - `#1E3A5F` — Submersed Cobalt. Panel borders, major dividers, mid-tone surfaces. - `#C4D0E0` — Titanium Haze. Primary text color. Not pure white — has a subtle blue-grey cast, like light filtered through 200m of ocean. - `#8FA8C8` — Pressure Blue. Secondary text, field labels, subdued callout lines. - `#D4DDE8` — Polished Alloy. Metallic highlight — used on the chrome gauge element, on panel corner treatments, on the hairline accent lines. - `#3A6FA8` — Blueprint Cerulean. Active / focused state color. Used for hover states, the pressure gauge needle, and selected spec panel borders. - `#B8C8D8` — Salt-weathered Chrome. Used for the metallic texture overlays on panel surfaces — the alloy sheen that has been exposed to salt air. **Metallic treatment:** panels use a `background: linear-gradient(135deg, #1E3A5F 0%, #112040 40%, #1A3558 60%, #0F2040 100%)` with a subtle `noise` SVG filter at 3% opacity to simulate brushed aluminum. The effect is not glossy or Y2K — it is matte industrial, like a machined titanium instrument panel that has been in service for fifteen years. ## Imagery and Motifs **Primary imagery: water-bubbles — rendered as pressure-released micro-spheres, not decorative orbs.** The water-bubble motif is specific and constrained. These are not the friendly round bubbles of children's soap-play — they are **pressure-release bubbles from deep-water equipment**: small (4px–28px), variable opacity (15%–65%), clustered asymmetrically around panel edges and in the void spaces between content. Their movement is upward but not uniformly: they drift at different velocities (CSS `animation-duration: 8s` to `24s`), some stalling at mid-viewport as if caught in a thermocline layer. **Bubble rendering technique:** - SVG circles with `fill: none`, `stroke: rgba(196, 208, 224, 0.4)`, `stroke-width: 0.5` - Radial gradient fill: center transparent, edge `rgba(196, 208, 224, 0.15)` - Micro-lens effect: `filter: blur(0.3px)` on the smallest bubbles, none on larger ones - Between 40–80 bubbles present in the viewport at any time, animating continuously **Motif: flowing-curves — structural, not decorative.** Flowing curves appear as **structural connective lines between panels**: smooth cubic bezier paths drawn in SVG, `stroke: rgba(138, 168, 200, 0.3)`, tracing the conceptual relationships between specification panels. They are not arrows — they are smooth open curves, like the hydrodynamic lines of a hull section, connecting the callout lines of adjacent panels. They flow from the bottom edge of one panel to the top corner of another, following a path that feels aerodynamic rather than mechanical. **Secondary motifs:** - **Corner treatments on panels:** four-line drafting brackets at each corner — `+` shaped but only two arms each, suggesting technical drawing registration marks - **Revision stamps:** circular ink-stamp impressions at 20° rotation, 12% opacity — rendered in CSS with `border-radius: 50%`, `border: 1.5px solid rgba(196, 208, 224, 0.2)`, containing revision text - **Depth indicator:** the bottom-right pressure gauge — a 2px-wide vertical track with a chrome needle that moves as the user scrolls, labeled `0m` at top and a depth-reading number at bottom that counts upward as the user descends the page ## Prompts for Implementation Build prototype.bar as a **single pressurized scroll journey** through a deep-water prototype laboratory. The page has no hero CTA, no pricing, no testimonials, no feature grids. It is a slow, deliberate tour of one thing that is almost finished. **Macro structure (top to bottom):** 1. **Pressure Lock (`100svh`).** Full-bleed abyss navy. The page title `prototype.bar` in Barlow Condensed 700, 18vw, titanium haze, positioned upper-left with 7.2% left padding. Below it: `REVISION 0047 — CLASSIFICATION: OPEN` in Martian Mono 300 at 12px. Bubbles begin immediately — rising from the bottom edge. No entry animation except a 1.2-second fade from black (as if the porthole shutter is opening). The flowing-curve SVG sits here: a single broad S-curve from upper-right to lower-left, `stroke: rgba(138, 168, 200, 0.12)`, `stroke-width: 1.5`. 2. **Specification Grid (3× viewport height).** The broken-grid panel area. Nine panels total, arranged as described. Each panel contains: a panel identifier (`SP-01` through `SP-09`), a category label in Source Sans 3 at 11px/uppercase/letter-spacing 0.2em, a heading in Barlow Condensed at 28px, and body text in Source Sans 3 at 15px/1.65. Panels crystallize from fog (blur→sharp) as they enter viewport. Drafting bracket corner marks in titanium haze at 15% opacity. Connective bezier curves between panels rendered as a static SVG layer. 3. **Submersion Point (`100svh`).** A single large specification figure: the prototype's key metric or identity detail (e.g., `DEPTH: 2,847m` or similar) in Barlow Condensed at 22vw, centered, Blueprint Cerulean. Bubbles at maximum density here. The pressure gauge hits its deepest reading. A revision stamp overlaid at 35° rotation, 18% opacity. 4. **Decompression Zone (2× viewport height).** A slower, more spaced section. Three large text paragraphs in Source Sans 3 at 19px/1.8, titanium haze, with generous white space. No panels — just floating text in the void, with connective curves linking paragraphs. The tone is contemplative: descriptions of what the prototype does, written as engineering log entries. 5. **Surface Return (`100svh`).** The final frame. Bubbles slowing to near-stillness. A single centered element: `END OF SPECIFICATION` in Martian Mono at 14px, Blueprint Cerulean. Below it, in Source Sans 3 at 12px: revision date and hash. The pressure gauge returns to `0m`. The viewport fades slightly brighter — from `#0B1526` to `#0F1E38` — as if surfacing. **Animation rules:** - Bubble animation: `@keyframes rise` — `transform: translateY(-100vh) translateX(var(--drift))` where `--drift` is randomized between `-30px` and `+30px`, creating slight lateral drift - Panel crystallization: `filter: blur(8px) opacity(0.2)` → `blur(0px) opacity(1)` over `0.7s ease-out` triggered by `IntersectionObserver` - Flowing curves: static SVG, no animation — their calmness is the point - Pressure gauge: `transform: translateY()` driven by `window.scrollY` percentage — updates in `requestAnimationFrame` - No parallax — the abyss is still; only the content moves through it **Avoid:** hero buttons, signup forms, pricing tables, social proof, navigation menus, sticky headers, animated logos, gradient mesh backgrounds, glassmorphism card styles, neon glow effects, anything that reads as contemporary SaaS product marketing. ## Uniqueness Notes 1. **Water-bubbles as pressure-physics, not decoration.** The frequency report shows `water-bubbles` at 4% — it exists in the registry but has never been treated as deep-water pressure-release physics. Most uses are decorative surface bubbles. prototype.bar uses bubbles as a scientific motif: their size, opacity, and velocity encode depth information. This is a category-novel treatment of a low-frequency imagery tag. 2. **Broken-grid as a drifting submarine operations room, not brutalism.** `broken-grid` appears at 7% in the registry. Almost all broken-grid implementations use it as a brutalist editorial device — jarring misalignment for visual tension. prototype.bar's broken grid is calm, deliberate, and nautical: panels are specification instruments, not typographic weapons. The misalignment is the natural settling of objects under water pressure, not aggressive asymmetry. 3. **Humanist typography combined with industrial-technical content.** `humanist` typography appears at 32% — high frequency. However, virtually all humanist uses in the registry pair it with warm, approachable tones (editorial, botanical, minimalist). prototype.bar uses humanist type in an explicitly industrial-technical context — Barlow Condensed's visible calligraphic joints reading as the hand of a technical illustrator, not a magazine designer. The warmth of the letterforms is in productive tension with the cold, pressurized subject matter. 4. **Fade-reveal as pressure-crystallization, not scroll-triggered opacity.** `fade-reveal` appears at 5%. The standard implementation is `opacity: 0 → 1`. prototype.bar's fade-reveal begins at `blur(8px) opacity(0.2)` and moves to `blur(0px) opacity(1)` — simulating the way objects become defined as they decompress from depth. This is a physically-motivated reveal, not a conventional scroll animation. 5. **Planned seed:** `aesthetic: retro, layout: broken-grid, typography: humanist, palette: navy-metallic, patterns: fade-reveal, imagery: water-bubbles, motifs: flowing-curves, tone: professional`. Avoided overused patterns from frequency analysis: `hand-drawn` (58%), `editorial` (53%), `mono` typography (75%). Chosen motifs `flowing-curves` (2%) and `navy-metallic` (3%) are low-frequency — rare in the registry. The combination of all eight seed dimensions together has no precedent in the analyzed 406 designs.