# Design Language for BBOTTL.com ## Aesthetics and Tone BBOTTL channels the reverence of an old-world apothecary -- a dimly lit workshop where handblown glass bottles line shelved walls, each vessel holding something precious and unnamed. The visual direction draws from the tactile imperfection of wabi-sabi craft: uneven edges, deliberate asymmetry, and the beauty of materials that bear witness to their own making. Think amber glass catching lamplight, wax-sealed cork stoppers, hand-scrawled labels on parchment. The tone is mysterious-moody meeting grounded-earthy: this is not a sterile showroom but a living archive of bottled curiosities. Every scroll should feel like descending deeper into a candlelit cellar, where each bottle discovered tells a fragment of a larger, unfinished story. ## Layout Motifs and Structure The layout uses an **immersive-scroll** structure with **layered-depth** composition, treating the page as a vertical descent into a bottle cellar. No conventional header/nav bar -- instead, a floating amber-tinted sigil in the top-left corner serves as the sole navigation anchor, expanding on hover to reveal route options in a radial menu. **Structure descending:** 1. **The Cork** (Hero): A full-bleed opening scene. A single massive bottle silhouette fills the viewport, rendered in SVG with a paper-aged texture overlay. The bottle's interior is the viewport itself -- content appears to exist *inside* the glass. Subtle parallax gives depth: the bottle outline stays fixed while interior content scrolls behind it. 2. **The Descent** (Narrative sections): Stacked full-width sections using a **single-column** editorial flow, but each section is offset horizontally by 3-8% from center, creating a gentle swaying rhythm like bottles on a shelf during an earthquake. Each section is separated by a decorative SVG divider -- a thin line of dripping wax, a corked silhouette, or a ring-stain watermark. 3. **The Shelf** (Gallery/feature area): A **masonry** grid of irregularly sized cards, each representing a "bottle." Cards have rounded corners with uneven border-radius values (e.g., `border-radius: 42% 58% 45% 55% / 60% 40% 55% 45%`) to mimic the organic shapes of handblown glass. Cards tilt slightly at random angles (-2deg to +2deg via CSS custom properties). 4. **The Sediment** (Footer): Dark, dense, warm. Content settles here like particulate at the bottom of an aged bottle. Text is smaller, muted, and arranged in a tight two-column layout with generous vertical padding. Spatial philosophy: generous **ma-negative-space** between sections (minimum 12vh), letting each "bottle" breathe. No element should feel crowded. ## Typography and Palette **Typography:** - **Display / Headings:** "Cormorant Garamond" (Google Fonts) -- elegant serif with apothecary gravitas. Used at large sizes (clamp(2.5rem, 5vw, 6rem)) with letter-spacing: 0.04em. Italic variant for pull quotes and emphasis. - **Body:** "Crimson Pro" (Google Fonts) -- a readable serif that complements Cormorant without competing. Set at 1.125rem, line-height 1.7, for a literary, unhurried reading pace. - **Labels / UI / Metadata:** "IBM Plex Mono" (Google Fonts) -- monospaced for a cataloguing, archival feel. Used at small sizes for dates, tags, bottle numbers, and navigation items. Uppercase with wide letter-spacing (0.12em). **Color Palette:** | Role | Color | Hex | |------|-------|-----| | Deep Cellar (Primary BG) | Nearly black with warm brown undertone | `#1a1410` | | Amber Glass (Primary Accent) | Rich amber, like aged whiskey | `#c4842d` | | Wax Seal (Secondary Accent) | Deep burgundy-crimson | `#7a2332` | | Parchment (Text/Light BG) | Warm aged paper tone | `#e8dcc8` | | Cork (Tertiary) | Dusty tan-brown | `#a08968` | | Bottle Green (Highlight) | Muted forest glass green | `#3d5c44` | | Lamplight (Glow) | Soft warm gold for hover states and highlights | `#f0c674` | Gradients: Use radial gradients emanating from behind bottles/cards to simulate lamplight pooling: `radial-gradient(ellipse at center, rgba(240, 198, 116, 0.08), transparent 70%)`. ## Imagery and Motifs **Core Motifs:** - **The Bottle Silhouette:** Recurring SVG outline of various bottle shapes (apothecary, wine, flask, potion) used as section dividers, loading states, and decorative framing elements. Each bottle shape is unique -- no two identical on the page. - **Wax Drip Borders:** Section dividers rendered as SVG paths mimicking dripping sealing wax, colored in `#7a2332`. Slightly animated -- a slow, viscous drip animation (8s ease-in-out infinite) on initial scroll-into-view. - **Ring Stains:** Circular watermarks (CSS `box-shadow` with low opacity) placed semi-randomly behind text blocks, as if bottles once sat on the parchment. Use `#a08968` at 6-10% opacity. - **Cork Texture:** Noise/grain overlay applied to cards and interactive elements via CSS `background-image` using a subtle SVG noise filter. Gives every surface a tactile, physical quality. - **Candlelight Flicker:** A CSS animation on the Lamplight color (`#f0c674`) used for hover states -- a gentle brightness oscillation (`filter: brightness()` cycling between 0.95 and 1.05 over 3s) that suggests firelight. - **Sediment Particles:** Tiny floating specks (2-3px circles) in the background of darker sections, drifting slowly downward via CSS keyframe animation, like particles settling in an old bottle. **Decorative Elements:** - Hand-drawn style SVG illustrations of: a skeleton key, a quill pen, a compass rose, dried herbs -- used sparingly as section ornaments. - Thin horizontal rules styled as old label borders with small diamond ornaments at their centers. ## Prompts for Implementation **Storytelling Structure:** Build the page as a narrative journey. The user is not browsing a website -- they are uncorking a bottle and reading its contents. Each scroll event should feel like unrolling more parchment. Use scroll-triggered fade-reveals with stagger timing (each child element appearing 120ms after the previous) to create a sequential reading rhythm. **Animation Priorities:** - On page load: the hero bottle silhouette "draws" itself via SVG `stroke-dashoffset` animation (2.5s ease-out), then the interior content fades in. - Scroll-triggered: sections use `fade-reveal` with upward translation (translateY(40px) to 0) and opacity 0 to 1, with `stagger` on child elements. - Hover on shelf cards: `tilt-3d` perspective transform (subtle, max 4deg) combined with the Lamplight glow intensifying behind the card. - Wax drip dividers: `path-draw-svg` animation triggered when scrolled into view. - Navigation sigil: `morph` animation -- the amber circle transforms into a radial menu on interaction. **Full-Screen Narrative Experience:** The first viewport (The Cork) must be completely immersive. No visible text initially -- just the bottle drawing itself. After the SVG completes, a single line of text fades in inside the bottle: the site's tagline in Cormorant Garamond italic. Only then does the user realize they can scroll. A subtle downward-pulsing chevron (styled as a droplet) appears after 3 seconds. **CSS/Technical Notes:** - Use CSS `scroll-snap-type: y proximity` on the main container to give sections a gentle snap without being rigid. - All colors should use CSS custom properties for easy theming. - Apply `mix-blend-mode: multiply` on grain/noise overlays to integrate them naturally with background colors. - Use `backdrop-filter: blur(2px)` on the navigation sigil background for frosted-glass depth. - Prefer `clamp()` for all font sizes and spacing to ensure fluid scaling. - Cards in The Shelf should use CSS `shape-outside` or clip-path for organic silhouettes. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Stock photo banners, generic hero images - Bright white backgrounds or sterile corporate aesthetics - Cookie-cutter Bootstrap/Tailwind component patterns - Multiple competing call-to-action buttons ## Uniqueness Notes **Differentiators from other designs:** 1. **Bottle-as-viewport metaphor:** The hero section literally frames all content inside a bottle silhouette SVG, creating the illusion that the user is peering into a vessel. This is a structural conceit, not just a decorative theme -- the bottle outline persists as a parallax frame during the initial scroll. 2. **Organic asymmetry in layout:** Sections are deliberately offset from center by varying percentages, and cards use randomized organic border-radius values. Nothing on the page sits on a perfectly symmetrical grid. This is a conscious rejection of rigid column systems in favor of handcrafted imperfection. 3. **Wax-drip animated dividers:** Instead of horizontal rules or whitespace section breaks, the page uses animated SVG wax drips that "pour" into view on scroll. This is both decoratively unique and thematically cohesive. 4. **Sediment particle system:** Background particles drift downward in dark sections, a purely atmospheric detail that reinforces the bottle/cellar theme without serving any functional purpose. 5. **Candlelight micro-animation:** Hover states and accent colors use a slow brightness oscillation rather than static color changes, creating the sensation of firelight dancing across surfaces. **Chosen seed/style:** wabi-sabi imperfect ceramic (adapted to glass/bottle craft -- the wabi-sabi philosophy of embracing imperfection applied to handblown glass vessels, aged labels, and cellar patina rather than ceramic specifically) **Avoided patterns from frequency analysis:** No existing designs in the corpus to avoid against, but this design consciously sidesteps the most common web patterns: no hero-with-CTA, no pricing grids, no testimonial sliders, no stat counters, no generic card layouts with uniform border-radius. The masonry grid uses organic shapes specifically to differentiate from standard card-grid approaches.