# Design Language for bada.coffee ## Aesthetics and Tone bada.coffee is a fever dream of a botanical field journal discovered inside a vaporwave mixtape -- the kind of site that feels like opening a pressed-flower album in a fog-filled greenhouse at 3 AM while a slowed-down bossa nova track bleeds through the walls. The vaporwave here is not the neon-grid, bust-sculpture variety; it is the quieter, more unsettling end of the spectrum: desaturated skies behind overgrown coffee plantations, color-shifted photographs of cherries drying on raised beds, the uncanny stillness of tropical flora rendered in creamy pastels that feel one shade away from a memory dissolving. The mysterious-moody tone is central. This is not a site that explains coffee or sells it. It is a site that makes you feel like you stumbled upon a secret archive of someone's obsessive, decades-long photographic study of coffee plants in remote highlands -- Ethiopia's Yirgacheffe terraces, Yemen's ancient qat-and-coffee gardens, the cloud forests of Huehuetenango. Every image is presented as an artifact, slightly too beautiful to be documentary, slightly too strange to be commercial. The mood sits in the liminal space between reverence and unease: you are looking at something sacred through glass that distorts color and time. The vaporwave signature manifests in color treatment (photographs shifted toward lavender, rose, and celadon), in temporal dislocation (mixing what looks like 1970s film grain with contemporary compositions), and in the pervasive sense that these images are being transmitted from somewhere unreachable. Think of Chris Marker's "La Jetée" crossed with a Japanese coffee table book about Ethiopian terroir -- still frames narrating a journey that may or may not have happened. ## Layout Motifs and Structure The layout is centered along a single vertical axis -- a deliberate column of stillness that refuses the restless asymmetry dominant in the existing design collection. The centered composition evokes the spine of a botanical codex: content arranged with the precision of pressed specimens on a herbarium sheet, each element given deliberate breathing room above and below. **Single-Column Scroll Architecture:** The site is a single unbroken scroll, 100vw wide, with all content constrained to a centered column of max-width 680px on desktop (narrower than typical -- this is intentional, creating generous margins that feel like the cream-colored borders of a photographic print). On mobile, the column expands to 92vw. There are no sidebars, no multi-column sections, no grids. Every element stacks vertically within this narrow channel. **Section Cadence:** The scroll alternates between two section types in a strict rhythm: 1. **Image Plates** -- Full-column-width photographs (680px) with no border radius, presented as flat rectangular prints. Each plate has 120px of vertical margin above and below it. Below each plate, a single line of caption text in italic Baskerville, centered, describing the image as a field note ("Coffea arabica var. typica, altitude 1,890m, Sidamo region, morning fog"). 2. **Text Folios** -- Short prose passages (40-80 words each) set in roman Baskerville at 1.15rem, line-height 1.75, centered text-align. These are not explanatory paragraphs but poetic-observational fragments: sensory descriptions, half-remembered encounters, cryptic notes about soil acidity or rainfall patterns. Between folios, a small decorative element -- a thin horizontal rule of 80px width, rendered in dusty rose (#d4b0a8), centered. **Vertical Rhythm:** The entire page breathes through generous whitespace. The background is a single flat color (#f7f0e8 -- warm parchment cream) with no texture overlays, no gradients, no noise. The emptiness is the texture. Sections are separated by 160-200px of pure background, creating a meditative pacing that forces slow scrolling. **Terminal Void:** The page begins and ends in void. The opening is 100vh of parchment cream with only the site name centered at vertical midpoint. The closing is 80vh of the same cream, with a single italicized line ("the altitude where flavor begins") fading to 0 opacity as the user reaches the absolute bottom. ## Typography and Palette **Typography:** - **Display / Site Title:** "Libre Baskerville" (Google Fonts) -- weight 400 (regular), at 3.6rem on desktop, 2.4rem on mobile. Letter-spacing: 0.08em. Text-transform: lowercase always. The site name "bada.coffee" is rendered in all lowercase, giving Baskerville's stately serifs an intimate, diaristic quality -- as though this were a personal notebook rather than a public site. Color: deep moss (#4a5e3d). - **Body Text / Folios:** "Libre Baskerville" -- weight 400, 1.15rem, line-height 1.75. Color: warm charcoal (#3d3a36). The generous line-height and moderate size create the reading pace of a physical book -- unhurried, contemplative. No bold usage anywhere in body text. Emphasis is achieved exclusively through italic (weight 400 italic), which in Baskerville is a genuinely different design rather than a mechanical slant. - **Captions / Field Notes:** "Libre Baskerville" -- weight 400 italic, 0.85rem, line-height 1.5. Color: muted clay (#8a7e72). Letter-spacing: 0.03em. These sit beneath each photograph and read as handwritten annotations transcribed into type. - **Small Accent Text:** "DM Mono" (Google Fonts) -- weight 400, 0.72rem, uppercase, letter-spacing 0.18em. Color: dusty lavender (#a8959e). Used sparingly for metadata-like elements: coordinates, dates, elevation markers that appear as faint data annotations near images. This is the only non-Baskerville face on the site, and its monospace geometry creates a deliberate tension with the organic serifs -- like finding a GPS timestamp printed on a 19th-century botanical plate. **Palette:** The palette is a creamy-pastel system built from the natural tones of coffee botany, shifted through a vaporwave color filter that pushes every hue toward lavender and rose. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background | Parchment Cream | #f7f0e8 | Page background, dominant surface | | Primary Text | Warm Charcoal | #3d3a36 | Body text, prose folios | | Display Text | Deep Moss | #4a5e3d | Site title, section headers | | Accent 1 | Dusty Rose | #d4b0a8 | Horizontal rules, dividers, hover states | | Accent 2 | Faded Lavender | #b8a9c4 | Image plate borders on hover, metadata text | | Accent 3 | Celadon Mist | #a8c4b0 | Decorative leaf motifs, SVG stroke color | | Caption Text | Muted Clay | #8a7e72 | Photo captions, field note annotations | | Metadata | Dusty Lavender | #a8959e | Coordinates, dates, elevation markers | | Void Fade | Warm Ivory | #faf6f0 | Hero and footer gradient-to-nothing areas | Nine colors total. The palette avoids pure white and pure black entirely -- the darkest value is Warm Charcoal (#3d3a36), and the lightest is Warm Ivory (#faf6f0). This compressed tonal range gives the site a photographic quality, as though everything were printed on a single sheet of lightly tinted paper under diffused natural light. ## Imagery and Motifs **Photography as Primary Medium:** Every image on the site should look like a fine-art photograph of coffee agriculture: close-ups of coffee cherries in various stages of ripening (green to deep crimson), aerial perspectives of terraced hillsides disappearing into cloud cover, macro shots of soil and root systems, portraits of drying beds covered in parchment coffee with mountains behind them. The photographs should feel analog -- slight grain, imperfect focus in the backgrounds, color temperatures that lean warm in the shadows and cool in the highlights. No image should look digitally retouched or commercially polished. **Vaporwave Color Shift:** The photographic images are not presented in naturalistic color. Each image receives a CSS filter treatment that shifts it toward the pastel palette: `filter: saturate(0.7) sepia(0.15) hue-rotate(12deg) brightness(1.06)`. This produces photographs that feel like they were developed in a slightly wrong chemical bath -- greens become celadon, reds become dusty rose, skies become lavender. The effect should be subtle enough that viewers feel something is off without immediately identifying what. **Nature Motifs -- Coffea Leaf Silhouettes:** The primary decorative motif is the coffee plant leaf (Coffea arabica) rendered as simple SVG silhouettes. These are not realistic botanical illustrations but flattened, geometric reductions: an elongated oval with a pointed tip and a central vein line. They appear in three ways: 1. **Scattered Margins** -- Faint leaf silhouettes (opacity 0.06) float in the margins outside the content column, visible only on desktop at viewport widths above 1200px. They are positioned with CSS transforms at slight rotations (-8deg to 12deg) and vary in scale (40px to 120px). Color: Celadon Mist (#a8c4b0). They do not move or animate -- they are printed onto the background like watermarks. 2. **Section Transitions** -- Between the image-plate/text-folio sections, a single centered leaf silhouette (48px, opacity 0.12) serves as a section divider, alternating with the horizontal rule divider. Color: Dusty Rose (#d4b0a8). 3. **Hero Ornament** -- Below the site title in the hero void, three overlapping leaf silhouettes at different scales (60px, 80px, 100px) and slight rotations form a minimal botanical cluster. Color: Faded Lavender (#b8a9c4), opacity 0.15. This is the most complex decorative element on the entire site. **No Icons, No Illustrations, No UI Graphics:** The site uses zero icons, zero custom illustrations, zero decorative borders beyond the thin horizontal rules. The visual language is photographs + leaf silhouettes + typography + whitespace. Nothing else. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site is a vertical scroll through a botanical field study rendered as a vaporwave artifact. It should feel like a single, continuous document -- not a website with sections, but a scroll with stations. **Hero (100vh):** The opening viewport is 100vh of Parchment Cream (#f7f0e8). The site name "bada.coffee" appears centered both horizontally and vertically, set in Libre Baskerville 400 at 3.6rem, lowercase, letter-spacing 0.08em, color Deep Moss (#4a5e3d). Below the title (24px gap), the three-leaf ornament cluster at opacity 0.15. Below the ornament (40px gap), a single line in Libre Baskerville italic at 0.95rem, color Muted Clay (#8a7e72): a subtitle that reads like a field journal entry, not a tagline. On scroll, the title fades to opacity 0 over the first 30vh of scroll distance (CSS: use IntersectionObserver or scroll-based opacity calculation). The leaves remain stationary and fade at the same rate. The transition into the first content section is seamless -- just more cream background, then the first photograph appearing. **Scale-Hover Interaction Pattern:** The defining interaction is scale-hover on the photograph plates. On desktop, when the cursor enters a photograph plate, the image scales to 1.04 over 600ms with a cubic-bezier(0.23, 1, 0.32, 1) easing -- a slow, organic expansion that feels like leaning closer to examine a print. Simultaneously, the CSS filter adjusts: saturate increases from 0.7 to 0.85, restoring a hint of the photograph's original color as though proximity reveals truth. On cursor exit, the image returns to scale 1.0 and original filter over 800ms (slower return than approach -- reluctance to let go). The scale-hover must use `transform: scale()` for GPU acceleration, and the image container must have `overflow: hidden` so the scaling image does not break the layout. The container itself does not scale -- only the image within it expands, creating a subtle zoom-crop effect. **Scroll-Triggered Folio Reveals:** Text folios (the prose passages) enter the viewport with a gentle fade-and-rise: they begin at opacity 0 and translateY(20px), then animate to opacity 1 and translateY(0) over 700ms when they cross the 80% viewport threshold. Use IntersectionObserver with threshold: 0.2. The easing is ease-out. Only the text animates -- photographs are always visible with no entrance animation (they are artifacts fixed in place; only the viewer's attention moves). **Caption Typing Effect:** Photo captions (the field-note lines below each image) appear with a typewriter effect: characters render one at a time at 30ms intervals, using a JavaScript function that splits the text into spans. The cursor is not a blinking block but a thin vertical line (1px) in Dusty Rose (#d4b0a8) that disappears when typing completes. This effect triggers once when the caption enters the viewport and does not replay. **Horizontal Rules as Breath Marks:** The thin Dusty Rose rules between sections fade in from width 0 to 80px over 500ms, centered, when they enter the viewport. This is the simplest animation on the site but one of the most important -- it establishes the breathing rhythm. **Footer Void (80vh):** The closing section is 80vh of Parchment Cream with a single centered italic line at the vertical midpoint. As the user scrolls to the bottom, this line fades from opacity 0.6 to opacity 0 over the final 20vh of scroll distance -- a sentence dissolving into the page, unreachable. **Performance Notes:** - No external libraries. All animations via CSS transitions + IntersectionObserver. - Images loaded as `` with `loading="lazy"` and explicit `width`/`height` attributes. - The CSS filter on images is a paint operation -- avoid animating it on scroll. Only animate on hover (which is infrequent and user-initiated). - Total page weight target: under 2MB with compressed images. **AVOID:** CTA buttons, pricing grids, feature lists, testimonial carousels, stat counters, hamburger menus, footer link columns, cookie banners, newsletter signup forms. This site has no calls to action. It is an experience, not a funnel. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Photography as vaporwave medium, not decoration:** While 54% of existing designs use photography, none apply a systematic CSS color-shift to transform documentary photographs into vaporwave artifacts. The `filter: saturate(0.7) sepia(0.15) hue-rotate(12deg) brightness(1.06)` stack creates a signature look that is reproducible and consistent -- every image on the site lives in the same altered color universe. This is the opposite of bada.cafe (its sibling domain), which used procedural leather textures and zero photographs. 2. **Extreme narrow-column layout:** The 680px max-width content column is dramatically narrower than any other design in the collection. Most centered layouts use 900-1200px. This compression creates visual tension with the wide viewport -- the content feels precious, small, surrounded by silence. It also makes the scale-hover interaction on images more dramatic, as the 1.04x expansion pushes toward the column edges. 3. **Baskerville as the only text face (monotype discipline):** While baskerville-refined appears in only 4% of existing designs, bada.coffee takes it further by using a single typeface family (Libre Baskerville) for display, body, and captions -- differentiating roles only through size, weight (regular vs italic), and color. The sole secondary face (DM Mono) appears only in tiny metadata annotations. This monotype discipline is absent from every other design in the collection, which all use 2-3 distinct typeface families. 4. **Scale-hover as primary interaction (no parallax, no stagger):** The seed specifies scale-hover, which appears at 0% in the frequency analysis -- completely unused. By making this gentle zoom the site's only interactive pattern and explicitly avoiding parallax (97% overused) and stagger (95% overused), bada.coffee occupies a unique interaction space. The hover interaction is also philosophically aligned with the botanical-study concept: leaning in to examine a specimen more closely. 5. **Vaporwave without nostalgia objects:** bada.cafe used Greco-Roman busts, sunset grids, and neon text -- classic vaporwave signifiers. bada.coffee achieves vaporwave purely through color manipulation and temporal displacement, with zero retro-digital artifacts. The vaporwave is in the feeling (uncanny stillness, color drift, time dislocation) rather than in the iconography. This makes it one of the only "invisible vaporwave" treatments in web design. **Seed documentation:** - aesthetic: vaporwave (2% frequency -- rare, but differentiated from bada.cafe's approach) - layout: centered (86% frequency -- overused, but mitigated by the extreme narrow-column variation) - typography: baskerville-refined (4% frequency -- underused) - palette: creamy-pastel (2% / pastel frequency -- underused) - patterns: scale-hover (0% frequency -- completely novel in collection) - imagery: photography (54% frequency -- common, but uniquely treated via CSS filter shifting) - motifs: nature (20% frequency -- moderate, expressed as coffee-specific botanical silhouettes) - tone: mysterious-moody (6% frequency -- underused) **Avoided overused patterns:** parallax (97%), stagger (95%), mono typography (97%), corporate aesthetic (54%), tech motifs (97%), warm palette (100% -- replaced with creamy-pastel), gradient palette (95% -- no gradients used), asymmetric layout (93%), minimal imagery (93% -- replaced with photography-forward approach).