# Design Language for prototype.report ## Aesthetics and Tone **prototype.report** is a **Frutiger Aero fever-dream field journal** — the intersection of early-2000s aqua-glass optimism and the hushed, candlelit romanticism of a shepherd writing observations in a leather notebook at dusk. The site feels like a software concept demo that fell asleep in a meadow and woke up covered in dew. There is glass, there is water, there is light through leaves, and underneath everything, the warm amber glow of a candle that has been burning for a long time. The aesthetic is **frutiger-aero** executed with pastoral restraint: no loud lens flares, no hard chrome. Instead, the glass is soft — fogged like a morning window, with droplets tracing slow paths downward. The color story is cool grays and pearl whites with precisely one warming note: the candle's amber (#d4a843), which appears only in accents, never in backgrounds. The overall mood is **pastoral-romantic** — unhurried, atmospheric, intimate. This is a site that feels like a report from the edge of a nature reserve, written by someone who also understands gradients. The tone avoids the corporate and the playful (both heavily overused in the registry at 23% and 76%). It is neither a dashboard nor a toy. It is a **document of observation** — precise in detail, generous in atmosphere. Visual inspirations: early Apple Aqua UI (2001–2007), the droplet photography of Harold Edgerton, 16th-century naturalist field journals, condensation on a cold glass at golden hour. ## Layout Motifs and Structure **Minimal navigation** is the structural law: a single, nearly invisible top bar containing only the wordmark on the left and a three-element nav on the right. The nav links are rendered in small caps, weight 300, with the scale-hover interaction as the only affordance (no underlines, no backgrounds). On scroll, the nav bar acquires a frosted-glass backdrop with `backdrop-filter: blur(18px)` and a barely-there `rgba(255,255,255,0.12)` fill — a pearl veil, not a heavy bar. Below the nav, the page is a single **centered vertical column** (max-width: 720px on desktop) with generous breathing room on both sides. The margins are not empty: they contain faint water-droplet motifs (SVG, 4–6% opacity) positioned at asymmetric offsets — they exist at the threshold of perception, visible only when the eye drifts away from the text. **Section rhythm**: sections are separated by whitespace alone (80px minimum). No dividers, no horizontal rules, no section labels. Each section is a prose block that earns its place by existing, not by announcing itself. **The glass panel** appears once on the page: a 480px-wide frosted rectangle behind the main headline cluster. It has `border-radius: 28px`, `background: rgba(240,248,255,0.18)`, `box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 48px rgba(120,150,190,0.18)`, and a barely visible `border: 1px solid rgba(255,255,255,0.28)`. This glass panel does not repeat — its rarity makes it precious. **The candle motif** appears as a subtle amber radial gradient at the footer: `radial-gradient(ellipse at 50% 100%, rgba(212,168,67,0.09) 0%, transparent 70%)` — a warmth rising from below, as if a candle sits just off-screen beneath the page. ## Typography and Palette **Typography (Google Fonts only, verified):** - **Display / Wordmark**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic for the wordmark `prototype.report`, weight 500 upright for section headers. At clamp(4rem, 9vw, 8rem) for the hero title. Cormorant Garamond carries the weight of a 16th-century naturalist's handpress — delicate strokes, high contrast, unhurried. Set in `#2c3440` on light backgrounds. - **Body / Reading text**: [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond), weight 400 regular, size clamp(1.05rem, 1.5vw, 1.2rem), line-height 1.78. EB Garamond is Claude Garamont's roman digitized from the Berner specimen — marginally warmer than Cormorant, optimal for long-form reading. Body color: `#3a4455`. - **Navigation / UI labels**: [`Raleway`](https://fonts.google.com/specimen/Raleway), weight 300, letter-spacing 0.18em, all small-caps (`font-variant: small-caps`). Size 0.78rem. Color: `#6b7a8f`. Raleway is the Frutiger-era successor — geometric, clean, airy — and at weight 300 in small-caps it becomes almost invisible, which is the goal. - **Captions / Field notes**: [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond), weight 400 italic, size 0.88rem, color `#8a96a8`. Used for figure captions, timestamps, marginal annotations. **Palette:** | Role | Hex | Description | |------|-----|-------------| | Background | `#f0f4f8` | Pale overcast sky — the page ground | | Surface | `#f7fafc` | Near-white, the paper under the glass | | Glass fill | `rgba(235,242,250,0.18)` | The frosted pane | | Primary text | `#2c3440` | Deep ink, readable without harshness | | Secondary text | `#6b7a8f` | Slate — nav, captions, marginal text | | Cool mid | `#b8c8d8` | Muted periwinkle — borders, faint lines | | Candle amber | `#d4a843` | The only warm accent; used sparingly | | Droplet highlight | `rgba(255,255,255,0.72)` | The rim light on every bubble | | Deep shadow | `#8a9bb0` | Soft shadow on glass panels | No black (#000000). No pure white (#ffffff). No colors not listed here. The palette is disciplined to the point of austerity, and the candle amber earns its presence by appearing nowhere else. ## Imagery and Motifs **Water bubbles** are the primary imagery vocabulary. All bubbles are custom inline SVG — no photography, no stock. Each bubble is a circle with: - A radial gradient fill from `rgba(255,255,255,0.7)` at 15% to `rgba(200,220,240,0.08)` at 100% - A rim arc (white, 1px stroke, opacity 0.6) at approximately the 10–2 o'clock position — the specular highlight - An inner shadow ellipse (dark blue-gray, 0.5px stroke, 4% opacity) at the 5–7 o'clock position - Size range: 12px–180px diameter; distributed in loose clusters of 3–7 bubbles Bubble placement: - Hero section: 4 large bubbles (80–180px) positioned asymmetrically, drifting upward at 0.04rem/s with `@keyframes float` (amplitude 8px, duration 12–18s, each bubble on its own timer offset) - Left margin at mid-page: 2 medium bubbles (40–70px), very low opacity (0.25) - Footer area: small bubble cluster (12–28px), stationary **Candle atmospheric motif**: A single SVG candle illustration lives in the footer, approximately 48px tall. It consists of: a rectangular body (#f0f4f8 fill, #b8c8d8 stroke), a teardrop flame shape (gradient from `#d4a843` at base to `rgba(255,245,210,0.0)` at tip), and an amber glow halo (`radial-gradient` circle, 80px diameter, `rgba(212,168,67,0.12)`). The candle never animates — it simply glows, static, patient. **Scale-hover pattern**: Every interactive element (nav links, any card or linked block) uses the scale-hover pattern. Transition: `transform: scale(1.028)`, `transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1)`. The slight spring overshoot (1.56 in the cubic-bezier) makes it feel alive without being distracting. No color changes, no underlines — scale is the only response. **No photography.** Photography appears in 94% of registry designs — this site abstracts every visual element into SVG geometry and typographic composition. ## Prompts for Implementation **The story to tell.** A researcher named Margot has been documenting something slow: a phenomenon too gradual for a news cycle but too important to ignore. prototype.report is where she publishes her field observations — not as headlines, but as careful prose. The site opens with her name and the current observation number in Cormorant Garamond, italic, pale as morning mist. The glass panel behind the header is fogged from the inside, as if she breathed on it while writing. **Page structure (single long-scroll, no multi-page routing):** 1. **HERO** — Full-width frosted glass panel centered on the viewport. Inside: the wordmark `prototype.report` in Cormorant Garamond 300 italic at 6rem, below it a single line subtitle in EB Garamond italic ("Field observations, ongoing.") at 1.1rem. Four large water bubbles float slowly in the background behind the glass. The glass panel appears to condense — a CSS animation adds 1–2 tiny droplet paths that travel down the glass face over 8 seconds, loop, with 4s delay between instances. 2. **NAVIGATION (sticky)** — Three links: `Archive`, `Method`, `Contact` in Raleway small-caps. On scroll > 60px, the bar gains its frosted-glass backdrop. Scale-hover on each link. 3. **LATEST OBSERVATION** — A prose block, 720px wide, centered. A field-note number (`#0047` in EB Garamond italic, `#b8c8d8`, 0.88rem) floats above the section. The observation text is set in EB Garamond, two paragraphs, ~200 words total, intimate register. 4. **INTERLUDE** — A single centered water bubble SVG, 140px, with its float animation. Below it, a Cormorant Garamond 300 italic pullquote, 1.6rem, `#6b7a8f`. This is the only element on this row. 5. **ARCHIVE INDEX** — A plain list of 6–8 observation titles in EB Garamond, each with a date in Raleway small-caps. Scale-hover on each row. No cards, no borders — just well-spaced text rows. 6. **FOOTER** — The SVG candle (48px), centered. Below it: `prototype.report` in Raleway small-caps, 0.7rem, `#b8c8d8`. The amber radial glow rises from below the candle. No other footer content. **Animation budget (minimal, intentional):** - Bubble float: `@keyframes float` — `translateY(0)` to `translateY(-8px)` to `translateY(0)`, 14s ease-in-out, infinite. Each bubble offset by ±0–6s delay. - Droplet path: SVG `stroke-dasharray` / `stroke-dashoffset` animation — a 2px-wide droplet path animates from 0 to full length over 3s, then resets. Opacity fades in at start, fades out at end. - Nav frost: CSS transition on `backdrop-filter` and `background-color`, 200ms ease. - Scale hover: 280ms cubic-bezier spring on all interactive elements. - No parallax. No scroll-triggered reveals. No JavaScript animation libraries. Pure CSS. **Avoid:** CTA buttons with strong fills, pricing blocks, testimonial grids, icon packs, gradient text, dark mode toggle. The page has no modes — it is always pale, cool, and candlelit at the foot. ## Uniqueness Notes 1. **Frutiger Aero + pastoral-romantic is an unmapped aesthetic territory.** Frutiger Aero appears in only 1% of the registry, and it has never been combined with pastoral-romantic tone (2%). The standard Frutiger Aero treatment is tech/consumer-optimism; using it for a naturalist field journal subverts the aesthetic without abandoning its formal grammar (glass, water, soft gradients). No other registry entry works in this quadrant. 2. **Water-bubble SVG as the exclusive imagery system (registry near-first).** Photography dominates at 94%. Water-bubbles as an imagery category appears in only 1% of designs. This site uses bubbles not as decoration but as the *primary visual language* — each bubble is a precisely constructed optical object with specular highlight, rim arc, and shadow, rendered as inline SVG. The bubbles are the illustrations. 3. **Single candle as the only warm element in a cool-gray palette.** Cool-grays (3%) combined with a single warm accent (candle amber `#d4a843`) at 9% opacity in the footer only. The palette discipline — no warm color anywhere on the page except the candle glow — makes the amber feel earned and atmospheric rather than decorative. This is a restraint not found in designs using warm accents (sunset-warm, honeyed-neutral, burnt-orange). 4. **Scale-hover as the sole interaction pattern, executed with spring physics.** Scale-hover (4%) is applied to every interactive element uniformly with a `cubic-bezier(0.34, 1.56, 0.64, 1)` spring — the 1.56 overshoot is distinctive. No hover color changes, no underline-draw, no glow. Interaction vocabulary reduced to one pure physical response. 5. **Cormorant Garamond + EB Garamond dual-Garamond typography system.** Garamond-classic typography (6%) has been used before, but always as a single typeface with a sans pair. Using two Garamond revivals — Cormorant for display (high-contrast, expressive) and EB Garamond for body (warm, legible) — with Raleway only for UI chrome creates a typographic system that is monolingual in its serifs. The visual coherence is unusual; the tonal range between Cormorant's drama and EB's warmth is wide enough to structure an entire hierarchy. Seed: aesthetic: frutiger-aero, layout: minimal-navigation, typography: garamond-classic, palette: cool-grays, patterns: scale-hover, imagery: water-bubbles, motifs: candle-atmospheric, tone: pastoral-romantic