# Design Language for bada.coffee ## Aesthetics and Tone bada.coffee is the cartography of a single, impossible beverage: **coffee brewed with the tide**. The site inhabits the moment just before dawn on a pebble-strewn northern coast, when a ceramic pot sits half-buried in wet sand and steam rises in coils that match the rhythm of distant waves. Not a cafe website. Not a tourism brochure. A **submerged almanac** -- a reference manual that reads like a quiet obsession, compiled by someone who has spent eleven years documenting the precise moment when hot brew meets cold salt air. The aesthetic draws from three specific sources, fused rather than blended: 1. **Korean seoye ink landscapes** of the Joseon period, specifically the "rain on water" studies by 정선 (Jeong Seon) where a single unbroken brushstroke becomes both cloud and sea. The site borrows this **ink economy**: long gestures of empty space punctuated by dense, almost illegible clusters of tonal detail. 2. **Oceanographic field notebooks** from the 1890s Challenger expedition -- rigorously gridded pages annotated with salinity readings, barometric curves, and marginal sketches of bioluminescent plankton. The interface exposes its own instrumentation: thin measurement lines, decimal coordinates, tidal charts that double as navigation. 3. **Dark-roast coffee chromatography** -- the wet chemistry that separates a cup of brew into its 800-plus volatile compounds as migrating bands of sepia, umber, and deep teal. Where other coffee sites show latte art, bada.coffee shows **diffusion patterns**: the moment a drop of water spreads through ground beans, visualized as animated ink bloom. The tone is **zen-contemplative** but not precious. The site never says "artisanal." It never says "crafted." It shows brewing time as sine-wave amplitude. It shows origin as bathymetric depth. Visitors are not customers; they are **readers of the sea's own coffee log**. ## Layout Motifs and Structure The primary layout is **horizontal-scroll tidal navigation** -- the entire site scrolls left-to-right along a single infinite coastline, with the scrollbar redrawn as a **tide chart**. Vertical scroll is disabled on desktop (mobile gets a vertical-stack fallback). This directly borrows from the underused horizontal-scroll pattern and marries it with a motif of geographic continuity. **Sectional Structure (left to right):** - **Low Tide (The Opening Beach)**: The viewport opens at #021621 with a single horizon line rendered in SVG at the golden ratio's lower third. The word "바다" appears hand-drawn in faint ink, then dissolves into a flock of navigation glyphs. No logo. No menu bar. The cursor reveals a small compass that measures degrees-from-north as the user moves. - **The Brewing Strait**: A long horizontal corridor where each coffee origin is a **buoy**, spaced according to its actual distance from a reference Korean port (Busan, 35.1796° N). Clicking a buoy plunges the user into a depth-section view that animates as if descending through water. Content panels emerge at specific bathymetric depths: 0m (surface notes), 40m (brewing method), 200m (origin story), 1000m (a single archival photograph). - **Chromatography Reef**: An asymmetric **hexagonal-honeycomb** grid (another underused pattern) where each cell displays a different brew rendered as a chromatographic band -- a vertical stripe of graduated color pulled from the actual liquid spectrum of that coffee. Cells stagger vertically by amounts derived from the golden tide (an obscure tidal prediction formula), creating a rippled surface that suggests waves without ever depicting them. - **The Log Book Channel**: A magazine-spread layout where pages turn horizontally with a paper-curl effect. Each "page" is a dated journal entry from the fictional archivist, cross-referenced with weather data, moon phase, and the name of the specific bean used. Marginalia appear in handwritten script, as if added later. - **Deep Current (The Archive)**: A full-bleed final section where the viewport fills with animated ink dispersal. Small labels drift like plankton. When hovered, they reveal purchase/subscribe mechanisms -- but these are presented as **correspondence prompts** ("request a sample packet by post"), not CTAs. Spatial relationships follow the **Korean ma (間)** principle: the pauses between sections matter more than the sections themselves. Between each region, the user scrolls through 40vw of pure empty space -- the "open sea" -- where only a single ink glyph drifts across the void. This enforces contemplative pacing. The horizontal rhythm mimics breathing: inhale (content), exhale (void), inhale (content). ## Typography and Palette **Typography (all Google Fonts):** - **Primary Display**: **"Gowun Batang"** -- a Korean serif with deliberate brushwork irregularities, designed to echo traditional woodblock printing. Used at massive sizes (clamp(3rem, 9vw, 8rem)) for section headers. Weight 400 with letter-spacing: -0.02em. When the word "바다" appears, it is set in this face with a custom text-shadow that bleeds rightward like wet ink on absorbent paper: `text-shadow: 0.04em 0 0 rgba(14, 50, 71, 0.4), 0.08em 0 0.2em rgba(14, 50, 71, 0.2)`. - **Editorial Serif**: **"Fraunces"** -- a variable serif with an optical-size axis. Used for longform entries in the Log Book Channel at sizes clamp(1.05rem, 1.3vw, 1.25rem), with `font-variation-settings: "opsz" 14, "SOFT" 30`. This creates a warm, slightly uneven texture on screen that mimics letterpress impression. Applied at weight 350. - **Technical Monospace**: **"JetBrains Mono"** -- used only for measurement data (coordinates, depths, salinity readings, brew times). Set in small caps at 0.78rem with letter-spacing: 0.08em, color #7a94a3. This is the instrumentation voice: the oceanographer's field notation. - **Handwritten Marginalia**: **"Caveat"** -- informal script used exclusively for marginalia in the Log Book Channel. Rendered at 0.95rem in rotated snippets (rotate: -1.5deg to 2deg, randomized per element) to feel like actual pencil annotations. Color #3d5a6b at opacity 0.85. **Palette (ocean-deep with honeyed-neutral accents -- both underused):** - **Abyssal Ink** `#021621` -- The primary background. This is the color of 800m depth under a moonless sky. Not black; too warm for black. The faint blue-green undertone keeps it alive. - **Harbor Steel** `#0e3247` -- Secondary surfaces, panel backgrounds. The color of a steel hull seen through shallow saltwater. - **Tidal Slate** `#3d5a6b` -- Body text on dark grounds. The color of wet stone at low tide. - **Sea Mist** `#a8bfc8` -- Supporting text, subtle UI elements. The color of fog over morning water. - **Foam Paper** `#eef2f2` -- Cards in the Log Book, primary text on dark. Not white. A paper that has absorbed sea air. - **Coffee Amber** `#9a6b3e` -- The single warm accent. Used sparingly for the chromatography bands, active-state indicators, and the ink-bleed glow on "바다". This is the color of a pour-over hitting light. - **Bioluminescent Teal** `#2ea89a` -- Used only for cursor-reactive elements and the rare plankton glyphs. A color borrowed from deep-sea dinoflagellates. Maximum 2% of screen surface at any time. - **Salt Crystal** `#d9c9a3` -- Marginalia highlights, date stamps on the log entries. The color of dried sea salt on driftwood. The palette is **deliberately cool-dominant** (90% cold hues) with warm accents that feel like lanterns on a harbor at dusk. This directly inverts the corporate-warm-gradient pattern that dominates the collection. ## Imagery and Motifs **No photography**. This is a decisive constraint. Coffee sites are saturated with overhead latte shots and sunlit cafe interiors. bada.coffee rejects this entirely. **Primary visual motifs:** - **Ink Diffusion Bloom**: The signature element. A procedural SVG generator (using a randomized Perlin-noise-warped radial gradient, not a static asset) creates animated ink blooms that spread slowly into water. Used on section entry, on hover states, and as the ambient background of the Brewing Strait. Each bloom has a unique seed derived from the current UTC minute, so no two visitors see the same pattern. Duration: 8-12 seconds per full bloom, then reset. - **Bathymetric Contour Lines**: Thin white lines at 0.5px stroke, spaced exponentially, overlaid on dark backgrounds. They follow the curves of imaginary sea floors. Generated as SVG `` elements with dash-animation on scroll position. The lines never fully resolve -- they suggest topography the user will never fully see. - **Chromatography Bands**: Vertical stripes of color pulled from actual coffee chromatography samples (I will document the exact HSL gradients: `linear-gradient(180deg, #5c3a1e 0%, #8b5a2b 22%, #c4925a 48%, #e3b982 71%, #f5dfb3 100%)` for a Kenyan washed, etc.). Each coffee gets its own chromatographic signature. These bands serve as both decorative elements AND informational -- the user learns to read flavor by color. - **Tidal Glyphs**: A custom set of 12 ink marks derived from the traditional Korean tide flag system crossed with coffee cupping notation. Each glyph represents a moment in the brewing cycle (dry ground, bloom, first pour, full immersion, etc.) and also a tidal state. These appear as navigation markers, section dividers, and cursor trails. - **Handwritten Coordinates**: Every element of content is geo-stamped. An image-caption slot (never an actual image) might be labeled "35.1042° N, 129.0346° E / 06:14 KST / new moon +2". The coordinates are rendered in JetBrains Mono and drift slightly on the page, as if the paper curled. - **The Plankton Layer**: Dozens of tiny `` elements, each 3-8px wide, with slow random-walk animations using sine-wave trigonometry. They are the color of Bioluminescent Teal at 40% opacity. They exist only as texture -- they do nothing when hovered, confirm nothing when clicked. Their sole purpose is to make the empty sea feel alive. - **Wet Paper Texture**: A noise-displacement shader (SVG filter `` with low opacity) layered across all content cards. This gives the impression of slight paper warping, as if the pages have been near water for a long time. **Explicitly avoided:** coffee bean illustrations, cup silhouettes, steam gradients, geometric hexagon leaves, latte art photography, barista hand shots, wood textures, burlap sack backgrounds. Every coffee-cafe visual cliche is banned from this design. ## Prompts for Implementation **Narrative arc**: The site is a single horizontal journey from shore to abyss and back. There is no "home page" vs "product page" structure. There is only the tide, moving through its cycle. The user experiences bada.coffee as a 6-to-9-minute durational piece. Scroll is the verb. Patience is the grammar. **Opening sequence (first 4 seconds)**: Black viewport (#021621). At 200ms, a single ink drop falls from the top-center and blooms outward -- a CSS animation combining `scale(0) -> scale(1)` with SVG filter feMorphology for organic edge. At 1.4s, the word "바다" fades in at the drop's center using Gowun Batang at 8vw, with the text-shadow bleed animating from 0 to full over 2s. At 3s, the ink fades and the horizon line is drawn (SVG stroke-dashoffset animation from length to 0). At 4s, the scroll hint appears as a small tidal glyph pulsing gently at the bottom of the viewport with `animation: breath 5s ease-in-out infinite`. **Horizontal scroll mechanics**: Use `scroll-snap-type: x mandatory` on the main axis with snap points at each major section. Inertia is high -- the scroll feels weighted, like pushing a heavy door against water. Implement with JS throttle on wheel events mapped to horizontal translateX, plus native scroll for touch devices. Scroll velocity directly controls the ink bloom speed: fast scroll = faster diffusion; slow scroll = glacial, contemplative bloom. This creates a subtle feedback loop between the user's impatience and the site's refusal to hurry. **The buoy interaction (Brewing Strait)**: Each buoy is an SVG circle with a procedural wobble (using a combination of CSS `@keyframes` and a small JS sine-oscillator that modifies `transform: translateY()`). On hover, the buoy emits concentric ripples (5 rings, staggered 200ms apart, each fading from opacity 0.6 to 0). On click, the viewport descends: the entire page shifts upward while a dark-blue gradient overlay lowers, simulating water pressure. Bubbles (tiny white circles with upward trajectories) rise at random x positions during the 1.2s descent. Content emerges as it comes into depth range. **Chromatography interaction**: Hovering a hexagonal cell in the Reef section triggers the chromatography band to "run" -- the color bands animate from a single dark point at the top of the hex to their full spread, over 2.4s using `cubic-bezier(0.23, 1, 0.32, 1)`. This literally simulates the chemical process. Adjacent hexes dim slightly (`filter: brightness(0.7)`) to focus attention. **Log Book page turns**: Use CSS 3D transforms with `perspective: 1800px` and `rotateY` on a container with `transform-origin: left center`. The page curl adds a box-shadow that sweeps across during the rotation. Each turn is 900ms, eased with `cubic-bezier(0.77, 0, 0.175, 1)`. The sound of turning paper is played (a 0.6s audio cue, extremely soft, -24dB, triggered on first user interaction to respect autoplay policies). **Ambient animation system**: A persistent JS loop (requestAnimationFrame) drives the plankton, the ink blooms, and a subtle vignette-pulse on the viewport edges that breathes at 5-second intervals (suggesting a tidal rhythm). The vignette is implemented as a radial-gradient overlay with animated opacity between 0.15 and 0.25. Users with `prefers-reduced-motion` get a static version with all of these effects held at rest state. **Typography animation**: Section headers in Gowun Batang arrive via a custom ink-wipe effect: a `clip-path: inset(0 100% 0 0)` that animates to `inset(0 0 0 0)` over 1.6s, revealing the text left-to-right as if brushed onto the page. The ink-bleed text-shadow follows 200ms behind the wipe, giving the sense that the ink is still wet. **Avoid at all costs**: hero video backgrounds, testimonial carousels, "shop now" CTAs, trust-badge rows, pricing tables, stat-grids (e.g. "12 years / 8 countries / 3000 brews"), Instagram feed embeds, team-member bios with headshots, newsletter signup modals. The site has exactly one conversion path: the correspondence prompt at the Deep Current, which asks for a postal address, not an email. The friction is the point. **Cursor treatment**: Replace the default cursor with a custom SVG -- a tiny ink circle (6px diameter, #a8bfc8 at 80% opacity) with a 3-frame trail that fades and shrinks. When near an interactive element, the cursor blooms into a 14px ring. This is the only UI element that uses Bioluminescent Teal consistently. **Desktop-first, mobile as rescue**: The horizontal-scroll experience is core. On mobile (<768px), the site gracefully reconfigures to vertical scroll, but retains the chromatography, ink bloom, and plankton motifs. Mobile is a "retold" version -- a shorter, more condensed reading, like a pocket log vs the ship's logbook. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **Horizontal-scroll tidal navigation as primary paradigm**: Only 20% of designs use horizontal-scroll at all, and none combine it with a tidal-chart scrollbar metaphor. The left-to-right journey from shore to abyss and back is the sole navigation mechanism -- no menu, no breadcrumbs, no "back to top" button. The tide IS the map. 2. **Chromatography-as-information-design**: No other design uses chemistry-derived color bands as both decoration and data. The chromatographic stripes function as flavor labels that the user learns to read -- a literacy the site teaches through repetition. This merges underused `data-viz` imagery with the coffee subject in a way that is both analytical and poetic. 3. **Photography-free coffee site**: Coffee sites in the broader internet are 99% photography-driven (overhead shots, barista hands, pour closeups). bada.coffee uses zero photographs. All visual content is SVG, procedural, or typographic. This is a radical constraint within the coffee genre. 4. **Cold-dominant palette (90% cool hues)**: Against the collection's 95% warm palette trend, bada.coffee commits to abyssal blues and steel greys, with Coffee Amber appearing only as a minority accent (under 8% surface area). This inverts both coffee-site norms AND the collection's warm-palette dominance. 5. **Korean-oceanographic fusion**: The design fuses seoye ink landscapes (Joseon-period Korean brush painting) with 1890s Challenger expedition oceanographic notation. This specific historical-cultural pairing does not appear in any other design in the collection. The typography pairing (Gowun Batang + Fraunces + JetBrains Mono + Caveat) creates a multi-lingual, multi-disciplinary voice. 6. **Procedural ink-diffusion system**: Rather than static gradients or pre-rendered video, every bloom is generated live with a seed derived from UTC time, ensuring no two visits produce identical visuals. This makes each viewing of the site an unrepeatable event. None of the other designs implement this kind of time-seeded procedural generation. 7. **Plankton layer with zero interaction payoff**: The tiny drifting particles serve no functional purpose -- they don't reveal content, don't reward hovering. They exist as pure atmospheric presence. This is a direct rejection of the design trope that every visual element must "do something." In the sea, most things do not do anything for you. They just are. **Chosen seed/style**: `ocean deep calming spa` -- reinterpreted away from "spa" comfort-marketing into a scholarly-contemplative oceanographic almanac crossed with Korean ink landscape tradition. The seed is present in the ocean-deep palette and the zen-contemplative tone, but the aesthetic is stripped of any wellness-industry softness. This is the sea as observed by a patient archivist, not the sea as sold to a weekend visitor. **Referenced avoided patterns (from frequency analysis):** - **Corporate (87% -- avoided)**: no trust signals, no conversion funnel, no value propositions. - **Card-grid (92% -- avoided)**: replaced with hexagonal-honeycomb at 5% prior use. - **Centered (85% -- avoided)**: layout is horizontal and asymmetric; golden-ratio horizon lines instead of dead-center compositions. - **Gradient (97% -- minimized)**: used only for chromatography bands (which earn their gradient) and ink blooms. No decorative gradient backgrounds. - **Warm palette (95% -- inverted)**: committed to cool-dominant, with warm amber as a deliberate minority. - **Photography (92% -- eliminated)**: zero photographs. - **Mono typography (87% -- demoted)**: mono used only for instrumentation data, never for headings or body text. - **Scroll-triggered (95% -- reimagined)**: horizontal scroll, not vertical; scroll velocity drives ambient animation rather than discrete reveal triggers. **Embraced underused patterns:** - `horizontal-scroll` (20%), `hexagonal-honeycomb` (5%), `magazine-spread` (2%), `ocean-deep` palette (underused), `blur-focus` (20%), `path-draw-svg` (30%), `elegant-serif` (2%), `nature-elements` within a non-warm palette.