# Design Language for BBOTTL.com ## Aesthetics and Tone BBOTTL.com channels a dopamine-rush visual energy filtered through the lens of cultural storytelling and ethereal calm. Think of a late-night street market in Taipei or Bangkok — neon signage reflected in rain-puddles, the warm glow of paper lanterns mixing with electric blue LED strips, handwritten menus on chalkboards next to flickering screens showing glitched-out animations. The aesthetic is joyful, approachable, and slightly surreal: a friendly guide leading you through a sensory-rich digital bazaar. The tone is conversational and warm without being saccharine. Every piece of text feels like it was written by a knowledgeable friend who gets genuinely excited about what they are sharing. The visual rhythm alternates between moments of calm blue serenity and bursts of dopamine-bright energy — typewriter text slowly revealing itself against glitch-distorted backdrops, cultural motifs peeking through translucent panels. The overarching mood: a bottle collecting stories from around the world, each uncorked to release a small explosion of color, pattern, and narrative. ## Layout Motifs and Structure The layout follows a dashboard-inspired structure, but reimagined as a cultural bulletin board rather than a corporate analytics panel. The page is organized into distinct rectangular modules of varying sizes arranged in a loose 12-column grid, but with intentional misalignment — some panels sit 4px off-grid, others overlap their neighbors by a sliver, creating a sense of handmade curation. **Primary Grid:** A 12-column CSS Grid with `grid-template-columns: repeat(12, 1fr)` and `gap: clamp(8px, 1.5vw, 20px)`. Module sizes range from 3-col compact tiles to full 12-col panoramic strips. **Structural Zones:** - **Header Zone:** A narrow top bar (60px) with the BBOTTL wordmark typed out via typewriter effect on load, sitting on a translucent frosted-glass bar over a slow-panning glitch-art background. - **Hero Module:** A 12-col, 70vh block serving as an immersive intro — a full-bleed glitch-art composition with layered cultural pattern overlays (Japanese wave motifs, Moroccan zellige tessellations, Adinkra symbols) that shift and distort on scroll. - **Dashboard Grid:** Below the hero, a 3-row dashboard zone with modules of 3, 4, 5, and 6-column widths. Each module acts as a "bottle" — a self-contained story capsule with its own internal layout (some text-dominant, some image-dominant, some with animated counters or typewriter reveals). - **Interstitial Strips:** Between dashboard rows, full-width 12-col strips featuring cultural proverbs revealed via typewriter animation against a slowly glitching gradient background. - **Footer Zone:** A deep, 40vh footer designed as a "collection shelf" — a horizontal arrangement of small bottle-shaped SVG icons representing different cultural regions, each with a subtle hover-glow effect. **Scroll Behavior:** Modules fade and slide into view as the user scrolls, with a staggered reveal (50ms offset per module). The dashboard panels have a subtle parallax depth — foreground modules move slightly faster than background decorative elements. ## Typography and Palette **Primary Heading Font:** "Recursive" (Google Fonts) — a variable font used at its MONO=0, CASL=0.5 (semi-casual) axis for headings. Weight ranges from 700 to 900. The variable-fluid approach means font-size scales continuously: `font-size: clamp(2rem, 5vw + 1rem, 5.5rem)` for hero text, `clamp(1.2rem, 2.5vw + 0.5rem, 2.5rem)` for section headings. **Body Font:** "DM Sans" (Google Fonts) — clean, geometric, and highly readable at small sizes. Used at 400 weight for body copy, 500 for emphasized text. Size: `clamp(0.95rem, 1vw + 0.5rem, 1.15rem)` with line-height 1.65. **Accent/Typewriter Font:** "JetBrains Mono" (Google Fonts) — used for all typewriter-effect text, labels, tags, and metadata. Weight 400, size slightly smaller than body (0.85rem to 1rem). The ethereal-blue palette is the calm foundation, punctuated by dopamine-bright accents that emerge from the blue mist like neon through fog. | Role | Color | Hex | |------|-------|-----| | Deep Background | Midnight Ink | #0B1120 | | Panel Background | Twilight Slate | #131B2E | | Card Surface | Ethereal Blue-Gray | #1C2A42 | | Primary Text | Pale Mist | #D6E4F0 | | Secondary Text | Blue Haze | #7E9ABF | | Accent Primary | Electric Cyan | #00D4FF | | Accent Secondary | Dopamine Pink | #FF3CAC | | Accent Tertiary | Warm Amber | #FFB347 | | Typewriter Cursor | Neon Green | #39FF85 | | Glitch Highlight | Magenta Burst | #E91E8C | | Border / Divider | Glass Edge | #2A3A55 | | Hover Glow | Cyan Glow (20% opacity) | #00D4FF33 | **Gradient Definitions:** - **Hero Gradient:** `linear-gradient(135deg, #0B1120 0%, #131B2E 40%, #1C2A42 70%, #0B1120 100%)` with an animated glitch-distortion layer on top. - **Interstitial Strip:** `linear-gradient(90deg, #0B1120, #131B2E, #1C2A42, #131B2E, #0B1120)` — a subtle horizontal shimmer. - **Accent Gradient (buttons/highlights):** `linear-gradient(135deg, #00D4FF, #FF3CAC)` — used sparingly on interactive elements. ## Imagery and Motifs All imagery uses a CSS-based glitch-art treatment: RGB channel splitting via offset `box-shadow` layers, periodic `clip-path` slicing that reveals displaced color channels, and a subtle scanline overlay (repeating-linear-gradient with 2px transparent / 1px rgba(0,0,0,0.15) stripes). Images appear to "settle" after a brief 0.8s glitch animation on scroll-reveal, then hold steady with a very faint residual jitter (1px translate oscillation at 0.3Hz). **Glitch Implementation:** - Three layered `
`s with the same background-image, each with a different `mix-blend-mode` (screen, multiply, normal) and offset `transform: translate(2px, 0)` / `translate(-2px, 0)`. - A CSS animation (`@keyframes glitch-shift`) that randomly clips sections via `clip-path: inset()` with alternating values. - Scanline overlay via `::after` pseudo-element. **Cultural Motifs:** Decorative SVG patterns drawn from world cultures serve as background textures and border treatments: - **Japanese Seigaiha (wave arcs):** Used as a repeating SVG pattern behind hero text, rendered in #1C2A42 on #131B2E — subtle, tonal. - **Moroccan Zellige (interlocking stars):** Used as border patterns on dashboard modules, rendered as thin #2A3A55 strokes. - **West African Adinkra (Sankofa symbol):** Used as a standalone decorative element in the footer and as a loading indicator. - **Celtic Knotwork:** Used as a line-art divider between interstitial strips, animated with an SVG path-draw effect. - **Mesoamerican Step-fret (Grecas):** Used as a repeating horizontal border at the top of the dashboard zone. All cultural patterns are implemented as inline SVGs for performance and to allow CSS color theming. They appear at low opacity (0.08 to 0.15) to remain atmospheric rather than dominant. **Decorative Elements:** - **Bottle Silhouettes:** A series of 8 distinct bottle-shape SVGs (amphora, sake bottle, mason jar, perfume flacon, wine bottle, potion vial, message-in-a-bottle, ceramic jug) used as module accent shapes — positioned as subtle watermark-style backgrounds within dashboard panels. - **Floating Particles:** A lightweight CSS-only particle system (30 small circles, 2 to 5px, scattered via `animation: float`) drifting upward like bubbles in a bottle, using the Accent Primary (#00D4FF) at 15% opacity. ## Prompts for Implementation The site should feel like uncorking a bottle and watching its contents spill across the screen. On load, the viewport is filled with the deep midnight background (#0B1120). The BBOTTL wordmark types itself into existence in "JetBrains Mono" with a blinking neon-green cursor (#39FF85). After the wordmark completes (1.5s), the hero section glitch-fades in — three color-channel layers rapidly converging into alignment over 0.8s. As the user scrolls, the dashboard modules slide up from below in staggered groups. Each module has a micro-story: a cultural pattern slowly reveals behind the content, a counter ticks up, a typewriter quote prints itself. The page is not a collection of sections — it is a single continuous narrative about discovery, culture, and the joy of the unexpected. **Animation Specifications:** - **Typewriter Effect:** Characters appear one-by-one at 60ms intervals. The cursor blinks at 530ms intervals (on 530ms, off 530ms). After the text finishes, the cursor blinks 3 more times then fades out. Implemented with a JS function that accepts a target element and text string, using `requestAnimationFrame` for smooth timing. - **Glitch Entrance:** Elements enter with a 0.8s animation: 0 to 200ms aggressive glitch (5px RGB split, rapid clip-path changes), 200 to 500ms settling (2px split reducing to 0), 500 to 800ms final alignment with a single subtle flicker at 650ms. - **Dashboard Module Reveal:** IntersectionObserver triggers at 15% visibility. Modules translate from `translateY(40px)` and `opacity: 0` to final position over 600ms with `cubic-bezier(0.25, 0.46, 0.45, 0.94)` easing. Stagger: 80ms between adjacent modules. - **Cultural Pattern Fade:** Background SVG patterns animate from `opacity: 0` to `opacity: 0.12` over 1.2s, with a slight `scale(1.02)` to `scale(1)` shrink that adds depth. - **Floating Bubbles:** 30 CSS-animated circles with randomized `animation-duration` (8s to 20s), `animation-delay` (0s to 10s), and horizontal drift (`translateX` range: -30px to +30px). Rise from bottom to top, fade out at 80% of viewport height. **Storytelling Structure for Each Dashboard Module:** 1. A cultural motif icon (SVG, top-left corner, 24x24px, #7E9ABF) 2. A short typewriter-revealed tagline (JetBrains Mono, #00D4FF) 3. Body content (DM Sans, #D6E4F0) 4. A glitch-art background image or gradient (filling the module, low opacity) 5. A subtle bottle-silhouette watermark (positioned bottom-right, #1C2A42 at 0.06 opacity) **Technical Notes:** - Use CSS custom properties extensively for the palette — all colors defined as `--color-*` variables on `:root`. - The variable-fluid typography should use `clamp()` exclusively — no media-query-based size stepping. - Glitch effects must be pure CSS where possible; JS only for the typewriter timing and IntersectionObserver triggers. - Dashboard grid uses `grid-auto-flow: dense` to fill gaps naturally. - All cultural SVG patterns stored as inline SVGs within a visually hidden `` sprite block, referenced via `` elements. - Ensure the page works as a single HTML file with embedded CSS and JS — no external dependencies beyond Google Fonts. - Bias toward full-screen narrative experiences over sectioned page layouts. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, newsletter signup modals, generic stock imagery, corporate jargon. ## Uniqueness Notes 1. **Cultural Mosaic Dashboard:** Unlike typical dashboard designs that display analytics or metrics, this dashboard displays cultural artifacts — each module is a "story bottle" containing motifs, proverbs, and visual patterns from diverse world cultures, making the dashboard structure serve narrative rather than data. 2. **Glitch-as-Atmosphere, Not Shock:** The glitch-art treatment is used at low intensity as a transitional and atmospheric effect rather than an aggressive visual assault. Glitches are brief (sub-second), settle into clarity, and suggest the feeling of digital signals traveling across cultures — information arriving through beautiful interference rather than destruction. 3. **Typewriter-as-Storyteller:** The typewriter effect is not relegated to a single hero line — it appears throughout the page in interstitial proverbs, module taglines, and the wordmark. Each instance uses culturally-sourced text (proverbs, poetry fragments, philosophical phrases), turning a common UI pattern into a narrative device that rewards patient observation. 4. **Bottle Metaphor as Structural Conceit:** The entire site is organized around the metaphor of a bottle — containing, preserving, and releasing stories. This manifests literally in the bottle-silhouette watermarks, the "uncorking" load animation, the floating bubble particles, and the footer's collection shelf. No other design uses a single object as both visual motif and organizational principle. 5. **Variable Font as Mood Instrument:** Using Recursive's casual axis (CASL) to shift between formal and casual rendering within the same typeface creates micro-variations in personality across the page — headings feel slightly more hand-drawn while maintaining technical precision, something static font weights cannot achieve. **Chosen Seed/Style:** ``` aesthetic: dopamine layout: dashboard typography: variable-fluid palette: ethereal-blue patterns: typewriter-effect imagery: glitch-art motifs: cultural tone: friendly ``` **Pattern Frequency Notes:** No existing designs in the system at time of creation — all patterns are fresh. The combination of dopamine aesthetic with ethereal-blue palette is deliberately paradoxical (high-energy aesthetic meets calming color scheme), creating an unusual tension that gives BBOTTL.com a distinctive character: energizing yet meditative, joyful yet serene.