# Design Language for bada.coffee ## Aesthetics and Tone bada.coffee exists inside a phantom Roman bathhouse reimagined as a modern specialty coffee salon -- a place where veined Calacatta marble floors meet soft pistachio upholstery, where espresso drips from vessels that look like they were carved by Bernini, and where every surface has the dreamy, slightly overexposed quality of a Polaroid left in afternoon sun. The aesthetic is **isometric reverie**: an impossible architectural space rendered in clean axonometric projection, where coffee cups, saucers, latte art, and marble countertops float in precise 30-degree angles against creamy backdrops, creating a world that feels like a diorama viewed through frosted glass. The tone is **dreamy-ethereal** -- not sleepy, but suspended. Every element hovers at the edge of wakefulness, bathed in the golden half-light of a Roman afternoon that never ends. There is no urgency here. The site breathes slowly, invites lingering, rewards the wandering eye. Think: Sofia Coppola directing a coffee commercial inside the Pantheon, shot on expired Portra 400 film. The isometric perspective is the backbone of this entire visual identity. Rather than conventional flat web layouts, every hero composition, every section divider, every decorative moment is built on a consistent isometric grid (30-degree angles, 2:1 pixel ratio). This creates an immediately recognizable visual signature that distinguishes bada.coffee from every flat, scroll-triggered landing page in the portfolio. ## Layout Motifs and Structure The layout follows a **sidebar** architecture: a persistent left-side panel (approximately 280px wide on desktop) acts as a marble-textured navigation column that remains fixed while the main content area scrolls. This sidebar is not a utilitarian nav drawer -- it is a decorative architectural element, styled as a fluted marble pilaster with subtle veining rendered in CSS gradients and hairline borders. Navigation items within the sidebar are set in small-caps geometric sans-serif, spaced generously, with a thin gold underline that draws itself on hover using a 300ms ease-out transition. **Main Content Architecture:** - **Panel 1 (Atrium):** Full-viewport hero panel. The main content area opens to an isometric scene: a 3D-rendered coffee bar viewed from above at a 30-degree angle, with marble countertops, brass fixtures, and soft pastel shadows. The scene is rendered as a single large SVG or WebGL composition that responds to cursor position (cursor-follow parallax on individual elements). The domain name "bada.coffee" appears letterpressed into a marble slab at the center of the isometric scene, using CSS text-shadow stacking to simulate depth -- six layers of shadow, each offset by 1px, graduating from #C9B8A3 to #8A7A6A. - **Panel 2 (Galleria):** A horizontal isometric conveyor belt of coffee preparation stages -- green beans, roasting drum, ground coffee, espresso extraction, latte art -- each rendered as an isometric 3D object floating on its own marble pedestal. These objects are arranged in a horizontal scroll container within the main panel, with snap-scrolling enabled. Each object casts a soft drop shadow (20px blur, #C9B8A3 at 30% opacity) onto a cream-colored ground plane. Accompanying text appears below each pedestal in short poetic fragments. - **Panel 3 (Tablinum):** A broken isometric grid of three staggered cards, each tilted at the standard 30-degree isometric angle using CSS `transform: rotateX(55deg) rotateZ(-45deg)`. Each card has a marble-textured background, a small 3D-rendered coffee icon, and a block of body text. Cards are staggered vertically with 60px offsets, creating a cascading depth effect. On hover, cards lift (translateY -8px, box-shadow expansion) with a spring-eased transition. - **Panel 4 (Peristylium):** An open courtyard scene -- the main content area becomes a single large isometric illustration of a Roman peristyle garden with coffee plants growing between marble columns. Text content is overlaid on translucent cream panels (rgba(252, 247, 240, 0.88)) positioned at specific coordinates within the garden scene. The cursor-follow effect makes foreground columns shift subtly relative to background elements, creating a lazy parallax depth. - **Panel 5 (Exedra):** A curved closing section. Rather than a flat footer, the final section presents a semicircular exedra (a curved marble bench) rendered isometrically, with the site's closing message inscribed on the curved surface. Contact information and links are arranged along the arc. The marble sidebar here transitions from its fixed position to become part of the scene, merging with the exedra's architecture. **Sidebar Behavior:** On mobile (below 768px), the sidebar collapses into a top bar with a marble-textured background strip. The navigation items become a horizontal row of small marble "tokens" -- circular elements with single letters, arranged like coins on a marble ledge. ## Typography and Palette **Typography:** - **Headlines / Display:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with elegant, almost architectural proportions. Its clean, open counters and even stroke weight echo the precision of isometric drafting while maintaining warmth through its slightly rounded terminals. Used at 3rem-6rem for panel titles and hero text. Weight: 300 (Light) for large display sizes, creating an airy, weightless feeling. All headlines are set with `letter-spacing: 0.08em` and `text-transform: uppercase` to reinforce the classical inscription quality -- like text carved into a marble entablature. Line-height: 1.15. - **Body / Reading:** "Libre Baskerville" (Google Fonts) -- a refined transitional serif with generous x-height and warm, readable letterforms. Weight: 400 for body text at 1rem-1.125rem. The contrast between geometric sans headlines and classical serif body text mirrors the site's core tension: modern isometric precision meeting classical marble warmth. Line-height: 1.75 for comfortable reading. Color: #6B5E52. - **Sidebar Navigation / Labels:** "Josefin Sans" at weight 400, set at 0.75rem in `letter-spacing: 0.2em; text-transform: uppercase;`. This extreme tracking transforms the geometric sans into something resembling lapidary inscription -- letters spaced as if chiseled into stone. - **Accent / Monospace:** "DM Mono" (Google Fonts) at weight 300 for technical details, timestamps, or small metadata. Set at 0.8rem with `letter-spacing: 0.05em`. Color: #A89888. **Palette:** The palette is **creamy-pastel** -- a world of warm off-whites, blushing pinks, muted sage, and soft caramel, grounded by marble grays and accented with antique gold. | Role | Color | Hex | |------|-------|-----| | Background (Cream) | Warm ivory base | #FCF7F0 | | Surface (Marble White) | Slightly cooler white for cards and panels | #F4EDE4 | | Marble Vein | Warm gray for veining details and borders | #C9B8A3 | | Text Primary | Deep warm brown | #3D3229 | | Text Secondary | Muted taupe | #6B5E52 | | Accent Gold | Antique brass gold for highlights and hovers | #C4A265 | | Pastel Rose | Soft blush pink for decorative accents | #E8C4C4 | | Pastel Sage | Muted pistachio green for secondary accents | #B8CBAD | | Marble Dark | Deep veining and shadow color | #8A7A6A | | Pastel Lavender | Light purple mist for rare highlights | #D4C4D8 | **Gradient Usage:** - Marble veining is simulated using CSS `repeating-linear-gradient` with 3-4 thin stripes of #C9B8A3 and #F4EDE4 at slightly irregular angles (typically 25deg, 67deg layered). - Soft radial gradients from #FCF7F0 to #F4EDE4 are used behind panels to create the feeling of diffused afternoon light. - The sidebar's marble texture uses a layered combination: `linear-gradient(135deg, #F4EDE4 0%, #FCF7F0 40%, #E8E0D4 60%, #F4EDE4 100%)` overlaid with thin veining stripes. ## Imagery and Motifs **3D Renders:** The primary imagery mode is **3D-render** in isometric projection. Every visual element is conceived as a small isometric object sitting on an invisible ground plane. Specific objects include: 1. **Coffee Vessels:** Espresso cups, pour-over cones, French presses, moka pots -- all rendered as clean isometric forms with marble-textured surfaces. These are created as SVG illustrations with CSS-applied gradients for shading, or as static WebGL renders exported as optimized PNGs with transparency. Each vessel casts a consistent shadow at the same angle (bottom-right, matching the isometric light source from top-left). 2. **Marble Pedestals:** Every key visual sits on a small marble pedestal -- a rectangular prism rendered isometrically with three visible faces. The top face is lighter (#F4EDE4), the right face is mid-tone (#E8E0D4), and the left face is in shadow (#C9B8A3). This pedestal motif repeats throughout the site like display cases in a museum. 3. **Architectural Fragments:** Sections are separated by isometric architectural fragments -- a broken marble column, a fragment of a fluted pilaster, a piece of entablature with a carved egg-and-dart molding. These are decorative SVGs positioned at section boundaries, partially overlapping the content above and below to create continuity. 4. **Coffee Plants:** Stylized isometric coffee plant illustrations (geometric leaves, small red cherries) appear in the garden scene and as repeating motifs in the sidebar. Rendered in the pastel sage (#B8CBAD) and a slightly deeper green (#7A9A6B). **Marble-Classical Motifs:** - **Veining Patterns:** Thin, branching lines of #C9B8A3 on #F4EDE4 backgrounds, created with layered CSS gradients and occasional SVG path overlays for more organic branching. - **Egg-and-Dart Border:** A repeating SVG pattern used as a section divider -- alternating ovoid and pointed shapes in #C9B8A3, drawn with clean geometric precision befitting the isometric style. - **Fluted Columns:** The sidebar's left edge features a subtle CSS-rendered fluting effect: a repeating pattern of thin vertical shadows (`box-shadow: inset 1px 0 0 #C9B8A3, inset 3px 0 0 #F4EDE4, inset 4px 0 0 #C9B8A3...`) that creates the illusion of parallel grooves running down the marble surface. - **Gold Leaf Accents:** Thin gold (#C4A265) lines and dots used sparingly -- a single gold rule below the site name, gold bullet points in navigation, a faint gold border on hovered cards. - **Rosette Medallions:** Small circular SVG ornaments (stylized rosettes based on classical Roman patterns) placed at intersection points of the isometric grid, rendered in #C9B8A3 with #C4A265 centers. **Cursor-Follow Effects:** The cursor drives a persistent but gentle parallax effect across all isometric scenes. The implementation uses `requestAnimationFrame` with damped lerp (linear interpolation at factor 0.08) to smoothly track cursor position: - Foreground isometric objects shift by `(cursorX - centerX) * 0.02` and `(cursorY - centerY) * 0.02` - Mid-ground elements shift by half that amount - Background elements remain fixed - This creates a subtle "peering into a diorama" effect -- the viewer feels like they're tilting a physical model ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must feel like slowly walking through a classical coffee house that exists somewhere between a Roman bath and a modern specialty roastery. Each panel (Atrium, Galleria, Tablinum, Peristylium, Exedra) is a distinct room in this imaginary architecture, and the scroll is the act of walking from room to room. The sidebar is the colonnade that runs alongside the rooms, always visible, always grounding the visitor in the building's structure. **Isometric Rendering Pipeline:** All isometric elements share a consistent transform: `transform: rotateX(55deg) rotateZ(-45deg)` applied to flat elements to project them into isometric space. For SVG illustrations, the isometric projection is baked into the artwork. For CSS-driven isometric cards and blocks, the transform is applied directly. Shadows must be consistent: all cast toward bottom-right at approximately 20px offset and 30px blur in #C9B8A3 at 25% opacity. **Cursor-Follow Implementation:** Use a single global `mousemove` listener that stores normalized cursor coordinates (0-1 range). In each panel, isometric elements are assigned a `data-depth` attribute (1, 2, or 3). A single `requestAnimationFrame` loop reads the stored cursor position and applies transforms using damped interpolation: ``` currentX += (targetX - currentX) * 0.08; element.style.transform = `translate(${currentX * depth * 15}px, ${currentY * depth * 10}px)`; ``` On touch devices, the cursor-follow effect is replaced by a gentle gyroscope-driven parallax using the `deviceorientation` event, or disabled entirely if neither input is available. **Marble Texture Generation:** Rather than image-based marble textures, generate all marble surfaces with layered CSS gradients: ```css background: repeating-linear-gradient(67deg, transparent, transparent 40px, rgba(201,184,163,0.1) 40px, rgba(201,184,163,0.1) 41px), repeating-linear-gradient(25deg, transparent, transparent 80px, rgba(201,184,163,0.08) 80px, rgba(201,184,163,0.08) 81px), linear-gradient(135deg, #F4EDE4, #FCF7F0, #E8E0D4, #F4EDE4); ``` This three-layer approach creates convincing marble veining without any image assets, keeping the site lightweight and infinitely scalable. **Animation Choreography:** - Panel entry: Elements fade in with a 400ms ease-out and translate up from 30px below. Staggered by 80ms per element (stagger pattern). - Isometric objects: Additional subtle rotation on entry -- `rotateZ(-45deg)` starts at `-48deg` and settles to `-45deg`, creating a tiny "settling into place" wobble. - Gold accents: Opacity animated from 0 to 1 over 600ms with a 200ms delay after the parent element appears, creating a "gold catching the light" reveal. - Sidebar: Always visible, never animated on entry. Its marble texture has a subtle `background-position` animation tied to scroll position, creating a slow parallax drift in the veining. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids -- this is a narrative space, not a conversion funnel - Scroll-triggered animations that feel like a standard startup landing page - Centered single-column layouts -- the sidebar is architecturally essential - Generic hero sections with large background images -- every hero is an isometric composition - Flat, unshaded illustrations -- everything must have consistent isometric lighting (top-left source) - Any dark mode or high-contrast palette -- this site lives entirely in the warm, creamy pastel spectrum ## Uniqueness Notes **Differentiators from other designs:** 1. **Isometric Architecture as Layout Principle:** No other design in the portfolio uses isometric projection as the fundamental spatial logic. While isometric appears at only 2% frequency in the aesthetic category, bada.coffee makes it the organizing principle for every visual composition -- not a decorative accent, but the way space itself is constructed. Each section is an isometric "room" in an architectural sequence, creating a navigational experience closer to an architectural walkthrough than a web page. 2. **CSS-Generated Marble Textures:** Rather than relying on image-based textures or flat color fills, every marble surface is generated entirely through layered CSS gradients and repeating patterns. This creates infinitely scalable, resolution-independent marble that weighs zero bytes in image payload. The marble-classical motif (2% frequency) is deployed not as decoration but as the site's material identity -- every surface, from the sidebar to the card backgrounds to the section dividers, is marble. 3. **Cursor-Follow Diorama Effect:** While cursor-follow appears at 6% frequency, no other design uses it to create a "looking into a physical diorama" effect with isometric 3D-rendered objects. The combination of isometric projection + cursor-driven parallax on layered elements creates a unique illusion of physicality -- the user feels like they're peering into a miniature architectural model and tilting it with their mouse. 4. **Sidebar as Architectural Element:** The sidebar layout (29% frequency) is typically used as a utilitarian navigation container. Here, it is transformed into a marble pilaster -- an architectural column that is both functional (navigation) and decorative (fluted marble texture, classical proportions). It merges with the final scene's exedra, breaking the boundary between UI element and illustration. 5. **Dreamy-Ethereal Tone in a Coffee Context:** Coffee websites overwhelmingly default to either rustic-artisan (dark wood, burlap textures) or sleek-modern (black-and-white, minimalist). bada.coffee rejects both in favor of a dreamy, almost somnambulant atmosphere -- as if the caffeine has worn off and you're drifting through a Roman coffee house in a half-remembered dream. This tone (dreamy-ethereal, not seen in frequency data) is entirely unique in the collection. **Chosen Seed:** aesthetic: isometric, layout: sidebar, typography: geometric-sans, palette: creamy-pastel, patterns: cursor-follow, imagery: 3d-render, motifs: marble-classical, tone: dreamy-ethereal **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with isometric (2%) - centered layout (97%) -- replaced with sidebar (29%) - mono typography (97%) -- replaced with geometric-sans (2%) via Josefin Sans - warm palette as generic catch-all (100%) -- specified as creamy-pastel (0%) with exact hex values - scroll-triggered as primary animation (97%) -- replaced with cursor-follow (6%) as the signature interaction - friendly tone (95%) -- replaced with dreamy-ethereal (0%) - minimal imagery (95%) -- replaced with 3d-render (0%)