# Design Language for bvb.tools ## Aesthetics and Tone bvb.tools is staged as **a sealed vitrine inside a vacuum-jeweler's atelier**, where each tool in the catalogue arrives as an inflated-3d specimen — a chrome bubble that has been hand-blown, flash-frozen, and suspended in an electric ozone. The conceit is precise: this is not a SaaS product page, not a developer portfolio, not a marketplace. It is a **glasswork showroom for instruments-that-do-not-yet-exist**, where every surface has been pillowed with internal pressure, every edge softened into a tense balloon-curve, and every label glows with the faint hum of a captive neon tube. The mood is **luxurious-clinical**, not tech-bro — the way a Patek Philippe service centre meets a synchrotron beamline. The page conducts itself with the quiet authority of a maître horloger: hexagonal display cells, breathy white-on-electric typography, no exclamation marks, no "10x your workflow" prose. Tools are referred to as *instruments*, releases as *editions*, the catalogue as *the vitrine*. There is a deliberate refusal of the marketing register; instead, every paragraph reads like the engraved card next to a museum specimen — terse, factual, slightly reverent. Inflated-3d here is not the playful Y2K-blob register that's been spreading in 2024–2025. It's the **luxe-pneumatic** branch: think Maximilian Mauracher's chrome typography, Six N. Five's vacuum-formed product stills, and the inflated-foil balloon-letters that haute jewelers use for window displays. Every primary form on the page has the soft tension of a wind-filled membrane; nothing is flat; nothing has a 1px stroke. Even the divider rules are pinched bladders. The neon-electric palette refuses gradient. It is held in **strict tri-spectral discipline** — one cyan-electric, one magenta-electric, one deep ozone-violet — with the rest of the canvas composed in pearl and graphite. The result is a tone the registry has not yet held: **luxurious + electric + pneumatic** — opulent without being warm, futuristic without being plastic, energetic without ever raising its voice. ## Layout Motifs and Structure The structural conceit is **hexagonal-honeycomb**, executed not as a decorative pattern overlay but as the **literal load-bearing grid of the entire document**. The viewport is divided into a live, irregular honeycomb of 7-cell columns running corner-to-corner, each cell a 168px-flat-to-flat regular hexagon at 1440px width, scaling fluidly with `clamp()`. Cells are not all equal: the grid runs at three depths — a ground-plane lattice (cells at scale 1.0, opacity 0.32), a mid-plane working surface (scale 1.18, opacity 1.0, where the inflated specimens live), and a foreground caption layer (scale 0.62, opacity 0.94, holding the engraved labels). There is **no header bar**, **no nav strip**, **no sticky CTA**. The brand mark — the lowercase wordmark `bvb·tools` — is set inside the topmost central hexagon at flat-of-cell, rotated 0°, and acts as the only persistent UI. A scroll-progress reads as a thin neon thread that traces the *perimeter of the currently active hexagon*, hopping cell-to-cell as the visitor descends. The page is a **single vertical scroll of seven chambers**, each chamber occupying 100vh and composed as a different honeycomb arrangement: 1. **Vitrine** — the title cell, surrounded by 18 dark unfilled hexagons, each one slowly inflating-and-deflating on a 6.4-second pulse-attention cycle (this is the only place pulse-attention runs at full amplitude). 2. **Pressure Index** — six instruments listed in six adjoining filled hexagons, each containing one inflated-3d glyph specimen and a 3-line caption. 3. **The Bench** — a single oversized 4-hexagon merged cell holding the featured instrument-of-the-edition, occupying ~62vh, with three companion cells holding manufacturing notes. 4. **Manifold** — a longer chamber where the honeycomb tilts to a shallow isometric (8° z-rotation), reading like an open ledger of cells, each holding a discipline (Build, Ship, Inspect, Trace, Model, Sign). 5. **Edition Notes** — a narrow column of 5 hexagons stacked vertically, each a quotation from an internal "house style" document, set in italic. 6. **Atelier** — a half-empty honeycomb where most cells are unfilled, holding only the colophon, a single contact line, and one floating particle-effect cell. 7. **Cellar** — the foot of the document, a tessellated dark honeycomb fading downward into deep ozone, with the document's edition number engraved into the central cell. The honeycomb is **CSS Grid + clip-path**, not SVG. Every cell is a real DOM element with `clip-path: polygon(...)` cut to a regular hexagon, sized via CSS custom properties tied to a single `--cell-flat` measure. The lattice rebuilds on resize; cells reflow but the honeycomb topology is preserved (the registry has only one other site — and it does not commit to honeycomb-as-load-bearing-grid). Scroll behavior is **chamber-locked**, not free. The page snaps to chamber boundaries with a long, decelerating ease (cubic-bezier(0.16, 1, 0.3, 1), 1100ms), so each chamber arrives like a window opening. Within a chamber, internal motion is opt-in via cursor proximity — the cells nearest the cursor inflate slightly (max +6% scale, +12% chrome-highlight intensity) on a magnetic ease, while distant cells remain at rest. ## Typography and Palette **Type stack — Google Fonts only, three families, strict assignment.** - **Futura PT** is unavailable on Google Fonts, so the **futura-geometric** voice is carried by **Jost** (variable, weight 100–900, italic available) — Owen Earl's open, faithful Futura revival. This is the **load-bearing geometric voice**: the wordmark, all hexagon-cell labels, all instrument names, the chamber numerals. The wordmark `bvb·tools` is set at clamp(48px, 6.4vw, 112px), weight 300, letter-spacing -0.02em, with the interpunct (·) raised 0.18em and rendered in cyan-electric. Chamber-headers are Jost 200 at clamp(80px, 11vw, 196px), set across two adjacent honeycomb cells with the letterforms hand-tracked so each glyph centers in its hexagon. Body labels are Jost 400 at 13px, all-caps, letter-spacing 0.18em — the engraved-museum-card register. - **Cormorant Garamond** (weight 300, italic) carries the **edition-notes voice** — the long-form quotations in chamber 5, the colophon in chamber 6. This is the only serif in the document, and it appears for fewer than 240 words total. Set at clamp(20px, 1.8vw, 28px), line-height 1.62, italic, with optical kerning. The contrast against Jost's geometric pneumatics is the entire typographic argument of the page. - **JetBrains Mono** (weight 400, 500) is used **only** for instrument identifiers and edition numbers — never for paragraph copy. Identifiers read like hallmarks (`BVB-04 / ED.07 / 22-PT-A`), set at 11px, tracking 0.04em, in graphite. **Palette — five-color tri-spectral discipline, no gradients.** - `#FAF8F4` — **Pearl White**. Page background, default text on dark cells, the default fill of unfilled hexagons. A warm-cool neutral with just enough cream to read as *vitrine glass* rather than printer-paper. - `#0B0B14` — **Deep Ozone**. Chamber 7's tessellated floor, the chrome shadows of inflated specimens, the engraved label backings. Almost black, but with a violet undertow that activates the neon-electric channel. - `#00E5FF` — **Cyan-Electric**. Used as a *single accent line* per chamber — never as a fill. The interpunct of the wordmark, the scroll-thread that traces the active hexagon, the highlight band along the top-right curve of each inflated specimen. - `#FF2DAA` — **Magenta-Electric**. Used as a *single accent line* per chamber, positioned diagonally opposite the cyan. Anchored to interaction states: hover-glow on cells, the magnetic-pull indicator, the underline-draw on links. - `#5B3FE5` — **Ozone-Violet**. The mid-tone neon, holding chamber-5 italic accents and the chamber-numeral glyphs. The bridge color that prevents the cyan and magenta from screaming at each other. A sixth swatch — `#C4C4CE` **Pearl-Graphite** — is used only for the JetBrains Mono identifiers and the thin edge-rule between honeycomb depth-planes. No gradients are used anywhere; the inflated-3d shading is achieved by *layered chrome highlights* using these five colors at controlled alpha, not by linear-gradient interpolation. ## Imagery and Motifs **Three motif families, strictly disciplined.** **1. Inflated-3d specimens (the load-bearing imagery system).** Each instrument in the vitrine is rendered as a hand-authored CSS-and-SVG inflated form — never a photograph, never a 3D render imported from Blender. The technique: each specimen is a glyph (often the first letter of the instrument name) constructed from 8–14 layered SVG paths, where each path is assigned a chrome-stop along a custom 5-color radial-stop ramp (pearl → cyan-edge → ozone-shadow → magenta-rim → ozone-violet-base). The result reads as a balloon letter that has been chrome-plated in vapor: high specular along the upper-left, deep ozone occlusion in the lower-right interior, and a thin magenta rim-light along the silhouette. The specimens **breathe** — a sub-second-amplitude scale animation (1.0 → 1.013 → 1.0 over 4.2 seconds, ease-in-out-sine) that reads as captive air pressure rather than UI animation. **No specimen is photographic.** **No specimen is identical to another** — each is hand-tuned in the SVG editor. **2. Particle-effects (atmospheric, never decorative).** Four particle systems run on the page, each tied to a specific chamber and each implemented as an offscreen-canvas with a population cap of ≤ 60 particles. (a) *Cellar dust* — chamber 7, slow-falling pearl-white motes at 0.4–0.8px, descending at 6–14px/s, opacity 0.18–0.32. (b) *Bench sparks* — chamber 3, magenta-electric points that emit on cursor-proximity to the featured specimen, life 480ms, fade through cyan. (c) *Manifold trace* — chamber 4, a chain of cyan-electric points that traverse the honeycomb edges along a Hamilton path, one full traverse per 14 seconds. (d) *Vitrine breath* — chamber 1, a soft ozone-violet diffusion that pulses with the chamber-1 inflate-deflate cycle, capped at opacity 0.22, blur 18px. Particles are never randomly scattered across the entire viewport — each system is contained to its chamber's hexagonal envelope via `clip-path`. **3. Minimal-imagery (the negative-space motif).** This is the third motif family, paired against the inflated specimens as their tonal opposite. Five chambers contain at least one **deliberately empty hexagon** — a cell that holds nothing, no border, no fill, just the pearl-white substrate showing through. The empty cells are *positioned*, not random: they sit on the golden-mean diagonal of the honeycomb, and the eye reads them as breath-points. The chamber-2 grid of six instruments is bordered on three sides by empty cells; the chamber-6 atelier is 70% empty cells. The minimal-imagery motif is the design's argument that *what bvb.tools is not* matters as much as what it is. A fourth, smaller decorative system runs across all chambers: **engraved-rule cartouches**, 12-character monospace edition-marks that sit at the base-flat of the hexagons holding featured content. They read like assay-marks (`▽ BVB · ED.07 · 22-PT-A ▽`), set 9px in JetBrains Mono pearl-graphite, and they are the only place the JetBrains Mono register appears outside identifiers. ## Prompts for Implementation Build bvb.tools as **one HTML document, one CSS file, one ES module, one offscreen-canvas particle controller, no framework, no router, no SPA, no build step beyond a single PostCSS pass for `clamp()` fallbacks**. The page is a single-document vitrine catalogue. **The CSS architecture is honeycomb-first.** Define the lattice as `--cell-flat: clamp(118px, 11.6vw, 168px)` and a derived `--cell-point: calc(var(--cell-flat) * 1.1547)`, then position cells with CSS Grid `grid-template-columns: repeat(auto-fill, var(--cell-flat))` and a custom `.row-odd { transform: translateX(calc(var(--cell-flat) * 0.5)); }` offset for hexagonal interlock. Each cell is `aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`. The three depth-planes are real stacked grids at `transform: translateZ(...)` with `transform-style: preserve-3d` on the chamber container and `perspective: 2400px` on the chamber. **Inflated-3d specimens are hand-authored SVG, inlined.** Do not use a 3D library. Each specimen is a single `` with 8–14 `` elements layered, each path filled with a `` (yes — a radialGradient, the exception to the no-gradient rule, used *inside* the specimen only for chrome-shading; gradients never appear in layout backgrounds). The breathing animation is a single `@keyframes breathe` applied with staggered `animation-delay` per specimen so the chamber pulses as a living organism. **Storytelling is the organizing principle, not navigation.** Visitors land on chamber 1 (Vitrine), scroll-snap through six successor chambers, and arrive at chamber 7 (Cellar). There is no menu, no jump-list, no search, no filter. The catalogue presents itself in a fixed order, like a vitrine that cannot be rearranged. **AVOID:** pricing tiers, CTA grids, testimonial carousels, stat-counters, "trusted by" logo strips, comparison tables, hero buttons, sticky purchase bars, lead-capture popovers, exit-intent modals. **Pulse-attention is reserved.** It runs at full amplitude (scale 1.0 → 1.024 → 1.0, opacity 0.92 → 1.0 → 0.92, 6.4s cycle) on chamber 1 only. Elsewhere, pulse-attention is dialed down to a 1% amplitude breathe — present but subliminal. The registry shows pulse-attention at ~1% adoption; we use it but refuse to abuse it. Pulse-attention never runs on text the visitor needs to read. **Magnetic cell behavior on cursor.** Cells within a 220px radius of the cursor receive a transform that scales them up to +6% and shifts their inflated-3d radial-gradient origin toward the cursor (the chrome highlight follows the pointer, as if the specimens are wet glass catching a moving light source). This is implemented with a single `requestAnimationFrame` loop reading `pointermove` into CSS custom properties on the chamber container, not per-cell event listeners. **Chamber-snap scrolling, not free scroll.** Use `scroll-snap-type: y mandatory; scroll-snap-stop: always;` on the body. Each chamber is `min-height: 100vh; scroll-snap-align: start;`. Override the wheel ease with a custom `scroll-behavior` that runs `cubic-bezier(0.16, 1, 0.3, 1)` over 1100ms — this is the pace of someone walking past a vitrine, not a feed. **Type animation on chamber arrival.** When a chamber enters the viewport, the chamber-header glyphs animate in via a 4-stage stagger: first the magenta rim-light strokes (0–280ms), then the chrome highlights fill in (180–520ms), then the ozone interior shadows resolve (380–760ms), then the cyan accent line draws across the chamber's bottom hex-row (640–960ms). The visitor experiences each chamber-arrival as a *plate developing* — a deliberate, slow exposure rather than a fade-in. **The cursor itself is custom.** A 14px pearl-white circle ringed in cyan-electric, with a 28px magenta-electric soft halo at hover. On click, the cursor briefly inflates (scale 1.4) and emits a single ozone-violet ripple. This is the only place we permit a ripple-pattern; it is muscle-memory for the visitor that the page is a *physical* surface they are touching glass. **JS is small, declarative, and lives in one file.** A single ES module of < 480 lines: chamber observer, particle controllers, magnetic-cursor reader, cell-inflate writer, custom-cursor renderer. No bundler, served as `