# Design Language for BBOTTL.com ## Aesthetics and Tone BBOTTL.com is conceived as a sunken cathedral of glass — a deep-sea observatory where antique apothecary bottles, half-buried amphorae, and recovered shipping bottles drift in a slow, opulent silence. The aesthetic is **wabi-sabi** read through the lens of a deep ocean trench: imperfection celebrated as patina, asymmetry honored as the hand of time, and emptiness treated as the principal luxury. The visual mood is *opulent-grand* but never gilded — the grandeur comes from scale, depth, and the quiet authority of pressure rather than from ornament. Imagine the Cisterna Basilica filled with seawater, lit by a single distant skylight; or a private collector's vault five hundred meters under the surface, where every bottle is a relic and every relic is a vessel. The tone is contemplative, slightly melancholic, and unembarrassed by its own grandeur. Copy reads like a museum wall label written by someone who has already accepted the impermanence of the collection. There is no urgency, no exclamation, no stat-grid of follower counts. The user is invited to *descend*, not to *convert*. Inspirations: - The aquarium photography of Hiroshi Sugimoto (long exposures of motionless water). - Japanese *kintsugi* ceramics — gold seams treated as pressure-fractures of light. - The deep-sea gallery interiors of Renzo Piano's late aquariums. - Jean Painlevé's underwater films — slow, scientific, and unaccountably regal. - Apothecary cabinets from 17th-century Venetian pharmacies, photographed at 4 a.m. ## Layout Motifs and Structure The site uses a **bento-box** grid as its skeleton — but a bento-box that has been dropped to the bottom of the ocean and re-tiled by current. Cells are unequal, deliberately mis-sized, with one cell always larger than the user expects and one always smaller than seems reasonable. The grid breathes; cells expand on focus by 1–3% as if pulled by water pressure. Skeleton: - **Outer frame:** 12-column on desktop, but only 7–9 columns are ever filled per viewport. Negative space is treated as *water* — the dominant material of the page. A minimum of 38% of every above-the-fold view is empty dark cyan. - **Bento cells:** 6 distinct cell archetypes, never repeated in the same row. 1. *Vitrine* — an oversized cell holding a single bottle silhouette at extreme scale. 2. *Ledger* — a tall narrow cell with mono typography and a numbered index. 3. *Tide-line* — a horizontal letterboxed cell with a slow horizontal drift animation. 4. *Sediment* — a small square cell containing only a grain-textured swatch and a year. 5. *Pressure-gauge* — a circular inset breaking the rectangular grid; uses thin SVG arcs. 6. *Salvage-note* — a cell with a hand-set serif fragment, intentionally cropped. - **Vertical rhythm:** sections are separated not by horizontal rules but by *thermoclines* — 1px gradient seams of #2A4D5E fading into #07131A, suggesting a change of water temperature. - **Navigation:** there is no fixed top bar. Navigation is a vertical *plimsoll line* on the right edge — six tick marks labeled in mono with depth values (0m, 40m, 110m, 240m, 480m, 1000m) that double as section anchors. The cursor is the only thing that descends. - **Hero:** a full-bleed dark cell containing a single off-center bottle in extreme close-up, its rim catching a 4-degree shaft of pale light. No headline overlays the bottle; the title sits in the *Ledger* cell to its left, set small and quiet. - **Footer:** the footer is the seabed — a horizontally oriented cell with a soft, grainy gradient floor and a tiny mono caption listing collection coordinates (latitude/longitude) in small caps. The grid is intentionally **elastic**: every cell can be grabbed by hover/focus and stretched 4–8% along its dominant axis, then released to settle back with a damped spring (not a bounce). The site should feel like it is *suspended in a viscous medium*. ## Typography and Palette Two type families plus one monospaced ledger face carry the entire site. Quantitative information is mono; qualitative information is serif. The two never share a sentence. Color is severely restricted: a single deep cool ground, three blue-green mid-tones, one bioluminescent off-white, and one oxidized accent gold that may appear at most once or twice per scroll-screen. **Fonts — all sourced from Google Fonts:** - **Display / Headlines:** *Cormorant Garamond* (weights 300 and 500, italic permitted) — a slender, slightly imperfect serif chosen for its glass-thin verticals. Used at extreme scale (clamp(72px, 12vw, 220px)) for one or two words at most. Letter-spacing tightened to -0.02em on display sizes. - **Body / Editorial:** *EB Garamond* (400 / 500 italic) — for any paragraph longer than two lines. Generous leading (1.65). Old-style figures only. - **Monospace / Ledger / Coordinates:** *JetBrains Mono* (300 and 400) — used for index numbers, depth gauges, latitudes, vintage years, and any *quantitative* element. Tabular figures, small-caps where the variant exists. This is the *typography seed* (`mono`) made authoritative. - **Micro caption / metadata:** *JetBrains Mono* at 10–11px, tracking +0.18em, uppercase. **Palette — `ocean-deep` made specific:** | Role | Hex | Notes | |---|---|---| | Abyssal void (primary background) | `#04101A` | Used for ~70% of all surfaces. | | Deep cyan ground | `#0B2A3A` | Secondary panel fill, bento cell base. | | Pressure blue | `#143E55` | Mid-tone for depth gradients. | | Thermocline teal | `#2A6470` | Accent edge between layers. | | Bioluminescent pale | `#E6F1F0` | Body text, ~94% white but always cooled. | | Glass rim highlight | `#A8D8DC` | Reserved for thin keyline strokes and active state outlines. | | Verdigris patina | `#3A6F5E` | Used sparingly on hover states; the only "warm-cool" note. | | Brass-gone-green relic gold | `#7A6A3F` | A muted, oxidized gold for one — and only one — accent per page (a date underline, a numbering glyph, a bottle's wax seal). Never used for buttons. | Contrast pairings: Bioluminescent pale on Abyssal void for body. Glass rim highlight on Pressure blue for inset captions. Relic gold appears at most twice per scroll-screen and never on interactive elements. **Type scale:** A perfect-fourth scale (×1.333), but the *display* tier is severed from the rest by a deliberate gap — the headline is huge, the subhead is small, and there is nothing in between. This silence is the wabi-sabi gesture. ## Imagery and Motifs - **Grain overlay** is the master texture of the site. Every bento cell carries a 4–6% opacity SVG/feTurbulence noise layer, fixed-position so it does not scroll, giving the entire page a uniform film-grain that reads as *suspended sediment*. - **Abstract-tech motifs** are present but submerged: thin SVG line-diagrams of bottle profiles, capacity curves, pressure isobars, and longitudinal cross-sections drawn in 1px Glass rim highlight strokes. They are rendered at 30–40% opacity and used as background ornament rather than illustration. Think of NASA blueprints rotted by saltwater. - **Bottle silhouettes:** each hero bottle is a single high-resolution monochrome photograph (or photoreal SVG) lit from one side at 4–8°. Bottles are never centered — always offset toward the long edge of their cell, with the open neck pointing slightly off-frame as if exhaling. - **Decorative glyphs:** small mono-set numerals (00.01 — 00.99) act as a navigational ledger, evoking apothecary inventory tags. A single roman numeral can appear once on the page, set in Cormorant italic, in relic gold, oversized. - **Bubbles:** strictly forbidden as a literal element. The only "bubble" gesture is a single, slow-rising 1px circle outline that appears once per minute on idle, drifts up 12vh, and dissolves. This is the page's pulse. - **Patina cracks:** a faint, hand-drawn SVG kintsugi seam runs diagonally across exactly one bento cell on each viewport — never the same cell on reload. The seam is `#7A6A3F` at 40% opacity, 0.75px stroke, with a slow 24-second `path-draw-svg` animation that completes once and stays. - **Photography treatment:** all imagery is duotone — Abyssal void shadows, Bioluminescent pale highlights — with a 10% grain overlay baked in. ## Prompts for Implementation Implementation should treat the page as a **single descending narrative**, not as a collection of marketing sections. The user's scroll is a dive. Each section transition is a depth change; the palette darkens by 4–6% per section as the user descends, and the grain overlay coarsens by ~1% per section. The final section (the seabed footer) is the darkest and grainiest. Concrete directives: 1. **Full-screen narrative scroll.** Use `scroll-snap-type: y proximity` so each major section settles into view, but do not lock — let the user drift. Each section is 100vh minimum, with the bento grid filling it. 2. **Elastic interactions everywhere.** Every interactive element uses a damped spring transition: `cubic-bezier(0.16, 1.04, 0.3, 1)` over 620ms for grow, 880ms for settle. Hover lifts a cell by translateY(-3px) and scales to 1.02; release returns with one tiny overshoot of 0.4%. No snappy 200ms transitions anywhere. 3. **Cursor as diving lamp.** A 320px radial-gradient mask follows the cursor (Bioluminescent pale at center, transparent at edge, multiply blend), revealing slightly more detail in cells under the cursor. On touch devices, the lamp is replaced by a soft vignette that follows the most-recent tap point and decays over 4 seconds. 4. **Grain overlay** implemented as a single fixed-position `` with `` masked through `feColorMatrix` to monochrome cool. 5% opacity. `pointer-events: none`. Animated by 0.5s shifting `seed` at 24fps to give a barely-perceptible static. 5. **Headline typewriter — but slowed and broken.** The hero headline appears character-by-character at 140ms per glyph with a *random ±60ms jitter* and a 4% chance of a stutter (one character drawn, erased, redrawn). Once complete, it does not loop. 6. **Plimsoll-line nav.** Right-edge fixed nav with six depth ticks. Active tick: relic gold fill, 2× length. Smooth-scroll on click using a custom easing that mimics deceleration through water (sub-quadratic). 7. **Idle bubble pulse.** A `setTimeout`-driven 1px ring rises every 60–80s from a random x-position, traversing 12vh over 9 seconds with 0.4 opacity peak. 8. **Bottle hero parallax.** The featured bottle in the Vitrine cell drifts on cursor by ±12px on x and ±6px on y, smoothed via `lerp(0.06)`. The light shaft (a CSS conic-gradient) drifts in opposition by half the magnitude — the bottle and its light are coupled but not locked. 9. **Section thermoclines.** Between sections render a 6vh-tall band whose background is `linear-gradient(to bottom, #2A4D5E00, #07131A)` with a 0.6px Glass rim highlight horizontal line at 33% from top — a barely-there ruled depth gauge. 10. **Sound (optional, off by default).** A single low-frequency drone (180Hz with slow 0.2Hz amplitude modulation) can be enabled by a small mono toggle in the footer: `[ AMBIENT OFF | ON ]`. When on, the drone is dead-quiet (-32dB) and modulates with scroll velocity. 11. **Storytelling structure.** The page tells one story: *the descent of a single bottle*. Section 1 (0m): the rim, full-bleed. Section 2 (40m): the neck, with the editorial intro. Section 3 (110m): the shoulder, where the collection begins. Section 4 (240m): the body, the bento gallery proper. Section 5 (480m): the base, with provenance/ledger entries. Section 6 (1000m): the seabed footer. Every cell on the page is an annotation of the bottle the user is descending alongside. 12. **AVOID** — explicitly forbidden patterns for this site: hero CTA buttons (no "Get Started", no "Sign Up Now"), pricing tables, three-up feature grids, social-proof stat blocks, testimonial carousels, sticky top navbars, "Trusted by" logo strips, parallax-on-stock-photo. Any of these would shatter the depth. 13. **Imperfection budget.** Three deliberate "flaws" must appear once each per page: (a) one bento cell with a 1px corner that does not align to grid, off by exactly 3px; (b) one paragraph with a single Cormorant italic word substituted into a Garamond run; (c) one pixel of relic gold set in the wrong cell. The user will not see them. They will feel them. ## Uniqueness Notes **Differentiators from other designs (this is the first design of the batch, so differentiation is set against generic web aesthetics rather than sibling designs):** 1. **The descent is the IA.** Information architecture is literal vertical depth, not topical taxonomy. Sections are named by their distance below the surface, not by their function. There is no "Features / Pricing / About" — there is *0m / 40m / 110m / 240m / 480m / 1000m*. 2. **No CTAs anywhere.** The site refuses the conversion-funnel grammar of the modern web. The only interactive ledger is the plimsoll-line nav and the optional ambient toggle. Nothing pushes the user; the medium itself (slow, viscous, dim) does the persuading. 3. **The grid is alive but the brand is dead.** The bento layout has elastic spring physics on every cell — yet the color palette and typography are funereal, museumlike, opulent in the way of a sealed crypt. This contradiction (kinetic structure / static mood) is the design's signature. 4. **One bottle, six chapters.** Where most product/collection sites use a gallery of N items, BBOTTL uses a single bottle observed across six depths, and treats the entire page as annotations of that one specimen. The catalog is not displayed; it is *implied* by the singular focus. 5. **Imperfection as commitment.** Three deliberate flaws per page are baked into the build pipeline as a non-negotiable constant. The wabi-sabi seed is honored by code, not just by mood-board language. 6. **Mono typography elevated to structural role.** JetBrains Mono is not used as "techy flavor" — it is the *measuring instrument* of the entire site. Every quantitative thing (depth, year, latitude, capacity, weight) is mono. Every qualitative thing is Cormorant or EB Garamond. The two type families never share a sentence. **Chosen seed (from assignment):** `aesthetic: wabi-sabi, layout: bento-box, typography: mono, palette: ocean-deep, patterns: elastic, imagery: grain-overlay, motifs: abstract-tech, tone: opulent-grand` **Frequency analysis reference:** No prior designs exist in this repo at the time of writing (frequency.sh returned `no_designs_found`). All vocabulary tokens used here are therefore freshly claimed for the batch and should be treated as *taken* by sibling designers — future BB-prefixed and 20241###-prefixed siblings should avoid duplicating the bento+ocean-deep+mono+wabi-sabi combination, and especially the **descent-as-IA** narrative conceit, which is reserved for BBOTTL.com-v1.