# Design Language for BBOTTL.com ## Aesthetics and Tone BBOTTL.com is an immersive, liquid-themed narrative experience inspired by the poetry of glass bottles submerged in deep ocean water. The visual language draws from bioluminescent deep-sea environments, apothecary shelves lit by amber candlelight, and the quiet tension of a message sealed inside a bottle drifting through infinite dark water. The mood oscillates between mysterious-moody and calm-serene: there is a hush over the entire experience, as if the user has descended below the surface into a pressurized stillness where light behaves differently. Every interaction feels like uncorking something precious. Surfaces have the translucent, refractive quality of thick glass — light bends through elements rather than reflecting off them. The tone is contemplative and slightly intoxicating, like peering into an old apothecary jar filled with luminous liquid. ## Layout Motifs and Structure The site employs an immersive-scroll layout with layered-depth composition. The page is structured as a vertical descent — the user scrolls downward as if sinking deeper into water. Each section is a full-viewport "depth layer" separated by subtle caustic light animations that ripple across transition boundaries. **Primary structure:** A single-column vertical descent with floating-elements that drift laterally as the user scrolls, creating a gentle parallax of bottle silhouettes and bubbles rising in the opposite direction of scroll. **Grid philosophy:** Rather than rigid columns, content is positioned within organic circular and oval containment shapes — echoing the cross-sections and profiles of bottles. Text blocks are constrained inside rounded containers with thick glass-like borders (semi-transparent with subtle refraction). Navigation is minimal-navigation: a small cluster of glowing dot indicators along the right edge, resembling air bubbles trapped against glass, showing current depth/section. **Section transitions:** Between content sections, a liquid membrane effect — a wobbly, semi-transparent divider that deforms slightly as the user scrolls through it, as if passing through a surface tension boundary. **Key spatial relationships:** - Hero section: full-bleed dark water environment with a single illuminated bottle shape at center containing the site title - Content sections: centered oval containers floating in dark space, with content revealed progressively via scroll-triggered fade-reveal - Footer: the "ocean floor" — a sandy, granular texture where content settles like sediment ## Typography and Palette **Typography:** - **Headlines:** "Cormorant Garamond" (Google Fonts) — an elegant, high-contrast serif with a refined liquid quality to its strokes. Used at large display sizes (clamp(2.5rem, 5vw, 5rem)) in light weights (300) for an ethereal, barely-there presence. - **Body text:** "Nunito Sans" (Google Fonts) — a warm, rounded sans-serif that reads easily against dark backgrounds. Weight 400 for body, 600 for emphasis. Its soft terminals echo the rounded forms of glass bottles. - **Accent/Labels:** "Space Mono" (Google Fonts) — used sparingly for labels, timestamps, and small navigational elements. Provides a subtle technical counterpoint to the organic aesthetics, like specimen labels on apothecary bottles. **Color Palette:** | Role | Color | Hex | |------|-------|-----| | Deep Background | Abyssal Ink | #0a0e1a | | Mid Background | Midnight Drift | #111b2e | | Surface/Cards | Bottle Glass | rgba(26, 58, 82, 0.45) | | Primary Accent | Bioluminescent Teal | #00e5c7 | | Secondary Accent | Amber Glow | #e8a838 | | Warm Highlight | Apothecary Gold | #c9952a | | Text Primary | Pearl Foam | #e8edf2 | | Text Secondary | Mist Gray | #8fa3b8 | | Alert/Emphasis | Deep Coral | #e05555 | | Divider/Subtle | Glass Edge | rgba(0, 229, 199, 0.12) | The palette leans ocean-deep with bioluminescent accents. The teal (#00e5c7) and amber (#e8a838) create a striking complementary tension — cold water meets warm candlelight — that defines the entire visual identity. ## Imagery and Motifs **Core visual motifs:** - **Bottles as containers:** Every major content block is housed in a bottle-shaped or glass-jar silhouette. These are rendered with CSS clip-paths and SVG masks creating rounded, vessel-like shapes with visible "glass thickness" via layered borders and inner shadows. - **Caustic light patterns:** Animated SVG patterns that simulate the dancing light refraction you see at the bottom of a swimming pool. These play across section transitions and behind translucent content containers. - **Rising bubbles:** Small, luminous circles (rgba white with blur) that drift upward continuously in the background at varying speeds and sizes. They respond subtly to cursor position via cursor-follow behavior. - **Bioluminescent particles:** Tiny dots of teal (#00e5c7) that pulse gently in the dark background areas, creating the impression of deep-sea organisms. Implemented as a lightweight canvas particle system. - **Cork and seal details:** Interactive elements (buttons, toggles) are styled as cork stoppers or wax seals — warm amber/brown tones with a pressed, tactile appearance. Hover states "pop" the cork with a slight bounce-enter animation. - **Liquid fill indicators:** Progress and scroll indicators use a liquid-fill animation — a wavy surface that rises within a bottle-shaped container as the user progresses through the page. - **Glass refraction borders:** Content containers have borders that use backdrop-filter: blur and a subtle prismatic gradient edge, creating the illusion of looking through thick glass. - **Sediment texture:** The footer area uses a noise-texture overlay with warm sandy tones, as if the user has reached the ocean floor where fine particles have settled. **Decorative SVG elements:** - Kelp fronds as vertical decorative dividers - Jellyfish silhouettes drifting through background layers - Nautical rope knot ornaments for section headers ## Prompts for Implementation **Full-screen narrative experience:** The entire site should feel like a single, continuous descent into the deep ocean. There should be NO traditional page breaks. The scroll itself is the narrative mechanism — the user is sinking deeper, and the ambient light, color temperature, and density of particles should shift subtly as they descend. The top of the page is closer to the surface (slightly brighter blues, more visible light rays) and the bottom approaches the abyssal zone (near-black with only bioluminescent accents). **Animation priorities:** 1. **Scroll-triggered caustic ripples:** As the user enters each new section, a caustic light ripple propagates outward from the center of the viewport. Use CSS keyframe animations on an SVG overlay with mix-blend-mode: overlay. 2. **Bubble particle system:** A lightweight JavaScript canvas layer behind all content. Bubbles spawn at the bottom, rise with slight horizontal wobble (sine wave), and pop/fade near the top. Mouse proximity should gently push bubbles away (magnetic repulsion). 3. **Liquid surface transitions:** Between sections, a liquid membrane rendered with SVG feTurbulence and feDisplacementMap filters that animate their baseFrequency to create a wobbly, living surface. 4. **Cork pop interactions:** All clickable elements should have a two-phase animation: (a) slight press-in on mousedown (scale 0.95, darken), (b) spring bounce-out on release (scale 1.05 then settle to 1.0) with a subtle radial glow burst. 5. **Depth-responsive ambient lighting:** Use a radial gradient overlay that tracks the user's scroll position. Near the top, the gradient center is warm and visible. As the user scrolls deeper, the gradient shrinks and shifts to a dim bioluminescent teal, creating an increasingly enclosed, deep-water atmosphere. 6. **Text reveal as uncorking:** Headlines in each section animate in via a typewriter-effect combined with a vertical slide-up, as if the text is being pulled from inside a bottle. Letters appear with a slight blur that sharpens as they settle. 7. **Parallax bottle silhouettes:** 4-5 semi-transparent bottle outlines of varying sizes are positioned at different z-depths and drift at different scroll speeds, creating a floating-in-water parallax effect. **Storytelling structure:** The page tells a story through its sections: - Surface: Introduction/hero with light playing on water - Shallows: Brand overview with warm, sunlit tones filtering through - Twilight zone: Features/details as light diminishes and bioluminescence begins - Deep zone: Core narrative/purpose surrounded by darkness and glowing particles - Ocean floor: Contact/closing settled on the sandy bottom with amber lantern light **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie-cutter SaaS patterns, generic card-based layouts, horizontal tab navigation, hamburger menus, stock photo heroes, social proof carousels. **Technical notes:** - Use CSS custom properties for the entire color system to enable the depth-responsive color shifting - Prefer CSS animations over JavaScript where possible for performance - The canvas bubble system should use requestAnimationFrame and limit to ~60 particles max - SVG filter transitions should use will-change to prevent repaint lag - All text content should be within readable containers (max-width 42em) even within the organic bottle shapes ## Uniqueness Notes **Differentiators from other designs:** 1. **Vertical descent as narrative structure:** Unlike horizontal-scroll galleries or section-based landing pages, BBOTTL uses continuous vertical scroll as a literal journey from ocean surface to ocean floor, with ambient visual properties (light, color, particle density) shifting dynamically based on scroll position. The scroll IS the story. 2. **Bottle-shaped content containment:** Content blocks are housed inside vessel-shaped CSS clip-path containers with visible "glass thickness" — this is not a standard card, modal, or box layout. The containment metaphor (things inside bottles) is carried through every UI element, from text containers to progress indicators to the navigation dots. 3. **Bioluminescent interactive particle ecology:** Rather than static decorative elements, the background contains a living ecosystem of rising bubbles and pulsing bioluminescent particles that respond to cursor proximity with magnetic/repulsion physics. This creates a sense of being underwater where your presence disturbs the environment. 4. **Dual temperature palette with depth gradient:** The complementary tension between bioluminescent teal (#00e5c7) and apothecary amber (#e8a838) is not static — the balance shifts as the user scrolls. Upper sections lean warmer (sunlight filtering through water), while deeper sections lean cooler (bioluminescence in darkness). This dynamic palette shift is unique. 5. **Liquid membrane section transitions:** Instead of hard breaks, fade-ins, or slide animations, sections are separated by living liquid membranes using SVG turbulence filters. Scrolling through them feels like passing through a surface tension boundary — a tactile, physical sensation in a digital environment. **Chosen seed/style:** ocean deep calming spa — interpreted through the lens of apothecary bottles submerged in deep water, combining the meditative calm of the deep ocean with the warm, contained mystique of vintage glass vessels. **Avoided patterns:** Since no existing designs were found in the frequency analysis (all patterns equally available), this design deliberately avoids the most commonly templated web patterns: card-grid layouts, hero-dominant structures with CTA buttons, dashboard analytics styles, and corporate gradient approaches. Instead, it commits fully to an organic, immersive, narrative-driven experience that prioritizes atmosphere and discovery over conversion metrics.