# Design Language for bada.cafe ## Aesthetics and Tone bada.cafe is not a cafe that happens to be near the sea. It is a cafe that **lives inside the sea** -- a submerged tearoom at the intersection of a tidepool, an aquarium vitrine, and a pressurized glass dome on the continental shelf, where the menu is read through refracted light and the ambient soundtrack is the low hum of plankton drifting past the windows. The Korean word 바다 (bada) means "sea," but this site interprets it as a verb more than a noun: the quiet act of receiving, of holding, of being the vessel that contains everything that arrives. The aesthetic is **seapunk meets blobitecture meets watercolor apothecary** -- rare and underused intersections in the codex. Think Hilma af Klint's early spiral paintings submerged in ten meters of saltwater; think the phosphorescent blue of a deep-sea jellyfish drifting through a translucent gelatin dessert; think the laminated menu card of a 1970s coastal ryokan where the ink has bloomed slightly from humidity. The tone is **dreamy-ethereal with undertones of zen-contemplative** -- the specific mood of being alone in a quiet aquarium at 10pm on a Tuesday, watching a ray glide past the same piece of coral for the fourth time. Nothing on this site is rushed. Nothing is transactional. There are no call-to-action buttons demanding conversion, no pricing tiers, no "book a table" pressure. The visitor is a pearl diver, and the site is the kelp forest -- they descend as long as they wish, and what they find is a function of how slowly they move. **Inspirations:** the dome ceilings of seafloor observation chambers in Japan; the mucus-silk-gossamer texture of moon jellies photographed in Monterey Bay; the sound of hot water being poured over matcha in a ceramic bowl; 1960s Soviet oceanographic technical manuals; the handwriting on the inside cover of a used copy of *The Log from the Sea of Cortez*. ## Layout Motifs and Structure The layout abandons the rectangle. Every content container on this site is a **fluid blob** -- an SVG-clipped organic shape whose edges breathe on a long, irregular animation loop (18-32 seconds per cycle, never matching between elements). The composition is built on **blobitecture + ma-negative-space** (two underused motifs from the frequency audit), arranged in a **masonry** layout that drifts -- content blobs appear to be suspended in a slow current rather than locked to a grid. **The Descent (primary structural principle):** The page is a vertical descent from surface to abyss. The background color transitions from pale foam white at the top through turquoise shallows, deep teal, midnight blue, and finally a near-black indigo at the footer, with each stratum announced by a subtle change in the ambient particle density and current speed. This is not a parallax gimmick -- it is the site's spine. **The Vessels (content structure):** Instead of sections, the site has **vessels** -- each vessel is a semi-translucent blob-shape (border-radius values like `62% 38% 54% 46% / 58% 70% 30% 42%` animated over time) that holds one piece of content: a poem, a menu entry, a photograph of a ceramic bowl, a recipe for sea-salt caramel, the bio of the cafe's imaginary owner. Vessels overlap at their edges, with the underlying vessel visible through 40-60% opacity glass. The visitor navigates by **horizontal drift** within strata and **vertical descent** between them -- a two-dimensional current. **The Hero Tidepool:** The first viewport is an interactive tidepool. A circular SVG region (with an undulating edge) contains procedurally generated caustic patterns and 6-9 drifting sea creatures (SVG line illustrations of moon jellies, a lone cuttlefish, a fleet of tiny shrimp). Moving the cursor across the tidepool creates **ripple displacement** that causes the caustic pattern and the creatures to drift away from the cursor briefly, then resume their paths. There is no headline over the tidepool. The word "바다" is written very small in the lower-left, in handwritten ink, as a signature. **The Coral Sidebar:** A vertical **branching coral SVG** lives as a fixed sidebar on the left edge. Its branches act as a table of contents -- each polyp is a section marker. As the visitor scrolls, the polyp corresponding to the current section glows a soft bioluminescent teal and emits a single slow pulse of light that travels up the coral trunk. **Footer as Deep Sea Floor:** The final vessel rests at the bottom of the descent on an implied ocean floor -- a subtle gradient sediment texture. A single line reads: "The sea keeps nothing. It only holds." ## Typography and Palette **Typography (all Google Fonts):** - **Display / Primary Vessel Titles:** *"Fraunces"* -- a variable serif with an optical size and SOFT axis. Used at large sizes (clamp(2.2rem, 5.5vw, 4.8rem)), weight 300, with the SOFT axis set to 100 (maximum softness), giving the serifs a water-rounded, eroded quality -- as if the letters themselves have been tumbled by the tide. Letter-spacing: -0.02em. Line-height: 1.05. The S, C, and O glyphs of Fraunces have a particular liquid grace that suits this site's tone. - **Body / Vessel Contents:** *"Caveat"* for handwritten marginalia (recipe notes, tidal times, the cafe owner's annotations) at 1.15rem with a slight rotation of -0.8deg for warmth. For longer reading passages: *"Gowun Batang"* -- a refined Korean-Latin serif from Google Fonts, 1rem, weight 400, line-height 1.85, color Deep Kelp (#173a3a) at 85% opacity. Gowun Batang is chosen specifically because it handles Korean (Hangul) text with the same quiet elegance as its Latin forms -- essential for a site whose name is Korean. - **Micro / Captions / Labels:** *"DM Sans"* at 0.72rem, weight 500, letter-spacing 0.18em, uppercase. Used sparingly -- for vessel numbering (vessel ONE, vessel TWO), coordinate markers (37.4°N, 131.8°E), and the handful of navigation hints. - **Numerals / Coordinates:** *"Fraunces"* in its oldstyle figures variant, for depth markers ("−12m", "−340m") scattered throughout the descent as we move down the page. **Palette (10 colors):** - **Foam White** `#f2eee4` — the surface, the top of the page, the backs of the content vessels - **Tidepool Pale** `#cfe4df` — hover states, soft shadows, the first stratum of descent - **Shallow Turquoise** `#6fb9b2` — mid-stratum background, the interior of the hero tidepool - **Deep Kelp** `#173a3a` — the primary reading text color, the trunks of the coral sidebar - **Abyss Indigo** `#0a1836` — the deep footer background, the dark current passages - **Moon Jelly** `#e3c6de` — the bioluminescent accent for polyp markers and ripples (a pale lavender-pink, unexpected against the teals) - **Caustic Gold** `#e9b866` — the refracted sunlight lines that dance across the upper strata; accent for active links - **Coral Rust** `#b34a2e` — reserved for a single warm accent; used on the cafe's signature and one or two menu items, nothing more - **Sea Salt** `#ffffff` — pure highlights on caustics and ripple crests - **Black Ink** `#0d1a1a` — the handwritten marginalia ink The palette intentionally avoids gradient-heavy skyboxes (97% of designs use gradient). Colors meet at soft blob-edges with semi-translucent overlap, not gradient bands. ## Imagery and Motifs **No stock photography.** No generic beach shots. No sunsets. Everything is drawn, rendered, or generated. **Core motifs:** - **Caustic Light Patterns:** Animated SVG filters using `feTurbulence` + `feDisplacementMap` to generate the rippling, mesh-like patterns of sunlight on a shallow sea floor. These drift slowly across the upper vessels, rendered in Caustic Gold at 30% opacity. The noise baseFrequency animates between 0.012 and 0.018 over 14 seconds. - **Hand-drawn Sea Creatures:** A bestiary of 14 line-illustrations in Deep Kelp ink, each one a specific species: *moon jelly, cuttlefish, hermit crab, sea angel, scalloped hammerhead (distant, in the abyss stratum), blue-ringed octopus (in one specific hidden vessel), yellow tang, stonefish, nautilus, mola mola, spotted eagle ray, giant spider crab, seahorse, and a colony of salpchain.* They drift across the page on independent path-animation timelines (SMIL or anime.js path motion), never in loops short enough to feel mechanical. - **Living Coral Sidebar:** A branching coral illustrated in sumi-e ink style, with nine polyp "chapters." Each polyp has a microscopic breathing animation (scale 1.0 → 1.08 → 1.0 over 4.2 seconds, with a -200ms stagger between adjacent polyps) so the whole colony pulses like a distant tidal lung. - **Tidal Ripples:** Interactive cursor ripples rendered as concentric SVG circles with `stroke-dasharray` animation, decaying over 1.4 seconds after the cursor pauses. - **Watercolor Bloom Textures:** Each vessel has an inner edge blur that looks like wet pigment bleeding onto rice paper -- achieved with a 40px blurred duplicate of the vessel fill, masked by the vessel shape. - **Handwritten Coordinates:** Latitude/longitude pairs appear throughout in Caveat, marking the "location" of each vessel (36.9854°N, 129.4018°E, etc. -- real coastal Korean coordinates). These are not decorative -- they tell the story of a slow journey along Korea's eastern coast. - **Bubble Columns:** Rising from certain corners of the page, small SVG circles scale from 0→1, drift upward 80-200px, and fade to 0 over 3-7 seconds, each on independent jitter paths. Density increases in the deeper strata. - **Salt Rings:** Where the cafe's imaginary coffee cups have rested, faint overlapping rings of dried salt (0.5px stroke, 30% opacity) sit behind the content blobs as a quiet material memory. ## Prompts for Implementation **Full-screen narrative descent.** The entire site is a single continuous vertical journey from surface foam to abyssal floor. Use `scroll-behavior: smooth` combined with Intersection Observer to trigger stratum transitions. The background color interpolates smoothly based on scroll position (listen to scroll and map `window.scrollY / document.body.scrollHeight` to a palette transition). There is no snap-scroll -- the descent must feel continuous and unhurried. The entire page is approximately 7-9 viewport heights deep. **Blob vessels, never rectangles.** Every content container is an SVG-clipped organic blob. Generate vessel shapes with this technique: create an SVG `` using 6-8 control points around a circle, each point's radius randomized within 0.82-1.08 of the base radius. Re-interpolate the points every 22 seconds for a gentle shape-shift (requestAnimationFrame, eased with sine). Use `clip-path: url(#vesselN)` on the vessel div. The shape-shift must be so slow the visitor only notices on a second look. **Wave-form motif, not scroll-triggered fades.** Instead of the 95%-common scroll-triggered fade reveal, vessels rise into view on a **wave**: as the visitor scrolls, a sine wave passes across the viewport (visualized as a faint Shallow Turquoise line, amplitude 18px, wavelength 320px), and vessels whose vertical center the wave crosses receive a gentle 1.2s elastic-ease scale from 0.94 → 1.0 combined with a Y-translation from +12px → 0. This is the site's signature reveal -- wave-carried arrival. **Cursor as pearl diver.** The cursor is replaced by a small pale circle (8px, Moon Jelly fill, Sea Salt 1px stroke) that trails a subtle wake -- a 240px SVG path drawn with `stroke-dasharray` animation, fading to transparent along its length. Over the coral sidebar polyps, the cursor morphs into a larger soft glow. Over interactive vessels, small bubble particles rise from the cursor's position. **The Tidepool Hero Interaction:** The top of the page is dominated by a full-viewport-height circular tidepool. Inside: an animated caustic SVG filter pattern, 7 hand-drawn creatures on independent path animations (use anime.js `animatePath` or SMIL), and cursor-reactive displacement. Moving the cursor creates a radial `feDisplacementMap` scale perturbation that propagates outward over 800ms. The creatures' path animations are briefly disturbed when the cursor passes within 80px -- they swim away at 1.5x speed for 1.2 seconds, then resume. **Sound (optional, with explicit user opt-in):** A very quiet ambient loop -- the actual sound of a Korean coastline recorded at dawn, looped at 12% volume, with a subtle low-pass filter that deepens as the visitor descends. A single toggle in the lower-right corner, styled as a jellyfish silhouette that glows when active. Mute is the default. **Korean-Latin typographic harmony.** Throughout the site, Korean text sits naturally beside Latin text without feeling segregated. Use Gowun Batang for Korean body text and Fraunces for Latin titles -- both have soft, warm terminals that share a visual family. Where both appear in one line, match x-heights visually (test with the character pairs "바 / B", "다 / d", "카 / C", "페 / f") and use a slight reduction in Korean font-size (0.94em) to optically balance. **No CTAs, no pricing, no conversion pressure.** This site does not sell. The "menu" is a poem. The "hours" are tidal times. The "contact" is a line that says "Send a letter, in an envelope, to the sea, and we will receive it eventually." There are no forms, no buttons that convert. **Animation philosophy: always breathing, never idle.** Every element has a low-frequency animation -- vessel shape-shift (22s), creature drift (40-90s), caustic turbulence (14s), coral polyp breathing (4.2s), bubble columns (3-7s), background color descent (tied to scroll). Nothing on the page is ever perfectly still. The page is alive. **Performance concession:** Use `prefers-reduced-motion` to reduce animation complexity -- drop caustic filters, slow shape-shifts to 60s, disable cursor wake. But never eliminate motion entirely; the site's identity IS motion. ## Uniqueness Notes **Differentiators from the other 40 designs in this codex:** 1. **Blob-vessel architecture with zero rectangles.** Of 40 designs, only 2% use blobitecture motifs. This site commits to it absolutely: every content container is an animated SVG-clipped organic shape whose silhouette slowly shifts. Card-grid (92% common) and centered (85% common) are actively refused. The layout is **blobitecture + masonry + ma-negative-space**, a combination that appears nowhere else in the audit. 2. **Vertical descent as the sole navigation metaphor.** While 25% of designs use immersive-scroll, none use it as a literal bathymetric descent with palette interpolation tied to scrollY. The site's background color, particle density, current speed, and audio tone all shift as the visitor descends from surface foam to abyss, making the **body of water itself the navigation UI**. 3. **Wave-form reveal instead of scroll-triggered fade.** 95% of designs use the standard scroll-triggered fade-reveal pattern. This site replaces it with a visible sine wave that sweeps across the viewport and carries each vessel into visibility -- a narratively coherent reveal that belongs to the sea, not to the web. 4. **No conversion intent whatsoever.** No CTAs, no pricing tiers, no stat-grids, no "book now." The cafe is a fiction, and the site is an ambient poem. This is an explicit rejection of the CTA-heavy patterns common in cafe/service sites. 5. **Handwritten Korean-Latin bilingual typography.** Gowun Batang (Korean) + Fraunces (Latin) + Caveat (handwritten) forms a tri-lingual family tuned for soft optical harmony. Under 2% of designs in the audit use handwritten type; none combine it with a variable SOFT-axis serif tuned to maximum softness. 6. **Seapunk aesthetic declared explicitly.** Seapunk is listed in the aesthetic vocabulary but appears in 0% of existing designs. This site claims the seapunk territory while twisting it toward the calm/contemplative (rather than the neon-iridescent) end of the style -- seapunk filtered through wabi-sabi. 7. **A bestiary of 14 hand-drawn creatures on independent path animations.** Not photography (92% common), not icon-heavy, not abstract-shapes -- but ink-drawn taxonomic illustrations that drift the page like koi in a pond. **Chosen seed/style:** `ocean deep calming spa` (from seeds.json), reinterpreted through the lens of blobitecture + seapunk + watercolor apothecary, with the Korean 바다 (bada = sea) concept as the organizing metaphor. The seed's core vocabulary -- oceanic, calming, spa-like -- is honored, but the execution pushes into territory absent from the current 40-design corpus. **Avoided patterns from frequency analysis:** - AVOIDED: corporate aesthetic (87% -> 0%), gradient palette (97% -> replaced with translucent blob overlap), card-grid (92% -> blob masonry), centered (85% -> drift-current layout), scroll-triggered fade (95% -> wave-form reveal), mono typography (87% -> soft serif + handwritten), photography (92% -> hand-drawn ink bestiary). - PREFERRED: blobitecture (2%), seapunk (0%), wave-forms (2%), water-bubbles (implicit via bubble columns), watercolor (7%), handwritten type (27% elevated toward intimacy), masonry (2%), ma-negative-space (17%), horizontal-scroll within strata (20%), border-animate via continuous shape-shift (2%).