# Design Language for bada.casa ## Aesthetics and Tone bada.casa -- 바다 is the Korean word for "sea" -- is conceived as a **vertical descent into the ocean column**. The site is not a page; it is a submersible. Where other maritime designs linger at the sunlit surface (sparkling waves, beach horizons, sailboats), bada.casa dives straight down through the five oceanographic zones: the **Epipelagic** (sunlight), the **Mesopelagic** (twilight), the **Bathypelagic** (midnight), the **Abyssopelagic** (abyss), and the **Hadalpelagic** (the trench). Each zone has its own pressure, its own light, its own silence. The aesthetic is **ethereal** crossed with **cinematic** and **surreal** -- the feeling of watching a NHK documentary filmed with a deep-sea submersible, where the only light is what the vessel carries with it and what the creatures produce themselves (bioluminescence). There is no sun here, no sky, no horizon line. Color arrives from below, from within, from living things that chose to glow. The tone is **dreamy-ethereal** with undercurrents of **mysterious-moody**. It is hushed, slow, reverent. Movement is buoyant and suspended -- as if gravity has been replaced by something closer to meditation. The site breathes like a diver on a regulator: in, pause, out, pause. Information surfaces and then sinks again. Nothing is hurried because nothing hurries in the deep. A single thought -- "바다" -- descends through the whole site like a pebble falling through kilometers of dark water. ## Layout Motifs and Structure The structural metaphor is the **water column** -- a single continuous vertical descent, measured not in pixels or sections but in meters of depth. A fixed thin left-rail **depth gauge** (1px hairline with tick marks) tracks the visitor's descent in real time: `-0 m` at the top, `-200 m`, `-1,000 m`, `-4,000 m`, `-10,911 m` (Challenger Deep) at the bottom. The reader is not scrolling; the reader is sinking. The layout is an **immersive-scroll** arranged as **layered-depth** with a **single-column** spine flanked by asynchronous drifting elements -- deliberately avoiding card-grid, centered, and bento-box compositions (all overused). Content blocks float at different rates (parallax at varying z-depths), so that as the user descends, foreground plankton drift slowly upward, middle-depth elements hold steady, and background silt sinks gently downward. The resulting motion parallax feels exactly like watching the outside of a dive-capsule window. **Zone structure (five full-viewport acts, connected by transitional gradients):** 1. **−0 m to −200 m -- Epipelagic (Sunlit Zone)**: Viewport opens at the surface. Caustic light networks dapple across the top edge, and the word 바다 appears large in white, refracted slightly as if seen through moving water. Content here is the site's introduction, set in a rectangular portal of bright aqua with Hangul characters drifting upward like air bubbles that have escaped a regulator. 2. **−200 m to −1,000 m -- Mesopelagic (Twilight Zone)**: Blue deepens to the color of compressed sapphire. Content arrives in loosely anchored blocks that sway left-and-right on a sine curve as the user scrolls. Silhouettes of schooling hatchetfish pass the viewport edge. Caustics are gone; the only light is a weak, cold ambient glow. 3. **−1,000 m to −4,000 m -- Bathypelagic (Midnight Zone)**: The viewport goes nearly black (#03070d). All content text becomes self-luminous -- cyan or teal glow against void. A single anglerfish-lure light (a pulsing dot on a thin curved line) tracks the cursor from screen-edge, illuminating text only when within 300px of it. Reading here is by bioluminescence only. 4. **−4,000 m to −6,000 m -- Abyssopelagic (Abyss)**: Pure blackness. Content appears as **whispered** text -- 60% opacity, very thin weight -- only when explicitly hovered or focused. The user feels the pressure of the void. A distant low-frequency hum plays at -36 dB (optional, toggleable). 5. **−6,000 m to −10,911 m -- Hadalpelagic (Trench)**: Pitch black with a single band of bioluminescent text at the center of the viewport. The final line of content sits at the bottom of the Mariana Trench. Below it, the depth gauge reads `-10,911 m -- 바닥 (the bottom)`. The page ends with the sound of the submersible's hull creaking (decorative SVG, not audio). The spine of the column is **off-center by 8% to the left** -- not centered, not full-bleed, not symmetrical. Text blocks use an asymmetric measure of 34-42 characters per line, narrower than standard. Negative space dominates: in the deepest zones, a single viewport contains no more than 18 words. ## Typography and Palette **Typography:** - **Display / Headlines**: "Fraunces" (Google Fonts) -- a variable serif with optical sizing and a SOFT axis that can be dialed for a rippled, wave-like quality. Set at `opsz: 144, wght: 300, SOFT: 100, WONK: 1` so the letterforms carry quiet curvature, like seaweed ribbons caught in a slow current. Used at `clamp(3rem, 9vw, 8rem)` for the word 바다 and for zone titles. - **Korean Hangul display**: "Gowun Batang" (Google Fonts) -- a Korean serif with brushed, slightly organic terminals that evoke ink on rice paper and translate the maritime theme to its Korean-language root. Used for 바다, 깊이 (depth), 고요 (stillness), 바닥 (the bottom). Hangul and Latin coexist in the same line, never treated as a translation layer but as two equal voices. - **Body text**: "Newsreader" (Google Fonts) -- a humanist serif designed for long-form reading on glowing screens. Set at `1.0625rem` with `line-height: 1.9` and a generous `letter-spacing: 0.01em` for underwater breathing room. Color shifts by zone (see palette). - **Depth-gauge / technical labels**: "JetBrains Mono" (Google Fonts) at `0.75rem` uppercase with `letter-spacing: 0.18em` -- reads like instrument telemetry on the inside of a submersible's porthole. This is the ONLY place mono type is used; it is a narrative choice, not decoration. **Palette (a vertical gradient dictated by depth, not by designer preference):** - `#7fd4e3` -- **Surface cyan**: the color of sunlight refracted through the first two meters. Only appears in the Epipelagic zone. - `#2a7ba8` -- **Photic blue**: middle water, 100 m depth. Still warm to a human eye. - `#0f3a5f` -- **Twilight sapphire**: ocean at 500 m -- color of a very deep pool at dusk. - `#061a2e` -- **Midnight bathyal**: the color of water at 2,000 m, effectively blue-black to the naked eye. - `#03070d` -- **Abyssal void**: near-pure black. Dominates the lower half of the site. - `#00070a` -- **Hadal pitch**: the color at the bottom. Darker than black; has a hint of deep-cold blue. - `#8ff0d0` -- **Bioluminescent mint**: the primary accent for glowing text in the dark zones. Used sparingly -- this is the color of living light. - `#d2a8ff` -- **Siphonophore violet**: secondary bioluminescent accent, reserved for hover-glow and for the depth gauge's current-position indicator. - `#fff4b8` -- **Anglerfish lure**: a warm, almost-cream gold used only for the cursor-following light source in the Bathypelagic zone. The palette is strictly **analogous** (cold blues plus a sliver of bioluminescent cool-warm accent). There is no gradient in the conventional sense -- the whole page IS one vertical gradient, the water column itself. No warm dominant palette, no corporate gradient, no duotone photography. ## Imagery and Motifs **Core motif: the water column.** The entire site is one vertical strip of water viewed in cross-section. Nothing about the design lets the viewer forget that they are descending. **Specific motifs:** - **Caustic light networks**: CSS-generated procedural caustics (layered SVG turbulence filters combined with radial masks and `mix-blend-mode: screen`) appear only in the Epipelagic zone at the top. They move with a 12-second sinusoidal loop, never exactly repeating. When the user scrolls past -200 m, caustics fade to black over 800 ms and never return. - **Drifting particulates (marine snow)**: Fine white-grey speck elements drift slowly downward across every zone below -200 m. Density varies: dense near the thermocline, sparse in the abyss, almost none in the trench. Each speck is a single 1-2 px element with randomized fall rate between 45-120 seconds per viewport. Generated once in JS and reused. - **Bioluminescent wake**: A thin curved line that follows cursor movement with 400 ms easing, emitting `#8ff0d0` and `#d2a8ff` particles that fade over 2 seconds. The wake is only visible below -1,000 m. - **Schooling silhouettes**: Twice during the descent (at approximately -600 m and -2,800 m), a school of silhouetted fish (SVG paths, 5-11 fish per school) drifts across the viewport in 14-22 seconds, parallax depth distinct from content. They are always shown as silhouettes from below, their bellies catching no light. - **The anglerfish lure**: In the Bathypelagic zone, the cursor grows a curved SVG arc with a pulsing `#fff4b8` orb at its tip. The orb illuminates a 300 px radius of text, pushing the rest of the zone into darkness. This is the sole reading instrument in the midnight zone. - **Pressure rings**: At every -1,000 m threshold, a thin circular ripple crosses the viewport from edge to edge (takes 1.2 s), with a subtle low-pulse shift in the depth-gauge font-weight. The user *feels* the pressure increment. - **Hadal text**: The very final content line is set in `#fff4b8` at 1.125rem, glowing faintly against `#00070a`. It is the only warm light in the final viewport. It reads like a discovered specimen. - **Hangul as anchor**: 바다 appears at the opening and at the close. 깊이, 고요, 바닥 appear once each at zone transitions, small, parenthetical. They are the site's heartbeat. Photography is NOT used. Illustrations are NOT used. All visuals are CSS, SVG filters, and generated particle systems. The design avoids the overused `photography` imagery category entirely. ## Prompts for Implementation **Narrative structure**: The site is a single scroll-triggered descent. The visitor presses nothing, clicks nothing meaningful -- they simply fall, and the ocean performs. Every pixel of height on the page is mapped to a depth in meters. A scroll of 100 px descends roughly 48 m in the upper zones and 280 m in the lower zones (the trench is vast but sparse). This non-linear mapping is scientifically faithful and narratively necessary: the surface zones hold more detail because more happens there. **Opening sequence (−0 m)**: The viewport loads pure `#7fd4e3` surface cyan. After 300 ms, a radial caustic network fades in over 1,800 ms, cast from a light source at 12 o'clock. At 1,400 ms, the word 바다 surfaces from below -- translated vertically from +40 px to 0 px over 2,200 ms with easing `cubic-bezier(0.22, 1, 0.36, 1)`. It is set in Gowun Batang, at 9vw, in `#f8fbfd` with a subtle `filter: url(#refraction)` applied using a low-amplitude SVG turbulence. Below the title, in small Newsreader italic: "Descend." **Scroll choreography**: - Background color is a `linear-gradient` attached to scroll position, interpolating between the six palette colors at defined depth anchors. Use CSS `scroll-timeline` where available, JS `IntersectionObserver` as fallback. - The depth gauge (fixed left, 1px hairline) reads the current `window.scrollY` against a depth map and updates a `position: absolute` triangular indicator in `#d2a8ff` with 60 fps requestAnimationFrame easing. - Every block of content uses `position: sticky` with staggered release offsets, so that one concept hangs in view while the next approaches, then releases. The reader literally pauses with each thought before sinking onward. - Marine snow particles are generated once on page-mount as 140 absolutely-positioned divs, each with a randomized CSS animation duration between 45 s and 120 s, animating `translateY(-10vh) to translateY(110vh)` on infinite loop with staggered `animation-delay`. **Bioluminescence rules** (strictly observed below -1,000 m): - Body text uses `color: #8ff0d0` with `text-shadow: 0 0 1px #8ff0d0, 0 0 12px rgba(143, 240, 208, 0.35)`. - Background is pure `#03070d` with no texture, no gradient, no blur. - No element may use `background-color` other than the void itself; information must glow, never occupy. - Links underline on hover as a `#d2a8ff` path-draw SVG (200 ms, left-to-right), with a trailing violet particle. **Anglerfish lure (Bathypelagic only)**: - Attach a full-viewport SVG overlay. In it, an arc path starts from the cursor position and curves 80 px down-and-out to a circle filled `#fff4b8` with `filter: drop-shadow(0 0 24px #fff4b8)`. - Surround this orb with a radial mask that brightens text within 300 px of the cursor by lifting its opacity from 0.2 to 1.0. Outside that radius, text is almost invisible. - The lure gently pulses (scale 1.0 → 1.15 → 1.0 over 2.4 s infinite). **Transitions between zones**: There are no hard section breaks. Zone titles (`ZONE II -- MESOPELAGIC`, etc.) appear as small uppercase JetBrains Mono labels on the right edge of the viewport, pinned for 400 px of scroll then released. The dominant feedback is the continuous color shift of the background and the ticking depth gauge. The user is never told "you are entering a new section" -- they simply notice that the water is darker now, and the silence is heavier. **Closing sequence (−10,911 m)**: The viewport is `#00070a`. Marine snow stops. The depth gauge reads `-10,911 m -- 바닥`. A single sentence of Newsreader italic at `1.125rem` in `#fff4b8` appears, centered, with a 1600 ms fade and a very subtle 24 px downward drift on entry. Below the line, a thin horizontal rule in `#1a3a52` marks the seafloor. Hull creak SVG (two diagonal hairline fractures drawn with a 3-second `path-draw` animation) appears after 4 seconds of rest, then the page sits still. **Storytelling bias**: This design is emphatically not a landing page. There are no CTAs, no pricing tables, no stat grids, no feature cards, no logos-of-companies-that-use-us. The entire site is a contemplative experience of descent. Information, when it appears, is embedded into the narrative as incidental observations from the submersible's log. If a visitor wants to engage further, they scroll past the trench -- where a single small Gowun Batang line reads `올라가기` (ascend) -- which scrolls them smoothly back to the surface over 6 seconds. ## Uniqueness Notes **Differentiators from other designs in the collection:** 1. **Depth-as-scroll dimensional mapping**: Other designs in the collection use vertical scroll as a sequence of sections or as a narrative journey along a horizontal metaphor (a river in PPEBBL, an expanding ripple in RRIPPL). bada.casa treats the scroll axis as a literal *physical depth measurement*. The y-coordinate of every element corresponds to a meter of ocean depth, and the depth gauge displays this to the user in real time. No other design I reviewed uses scroll position as a quantified physical unit. 2. **Non-linear scroll-to-depth mapping**: The relationship between pixels-scrolled and meters-descended is deliberately non-uniform. The surface zones (0-200 m) unfold over 30% of the scroll, while the abyssal and hadal zones (4,000-11,000 m) unfold over 20%. This is scientifically honest (the surface is where life concentrates) and narratively sophisticated (dwell where interesting, accelerate through vastness). Other designs use linear scrolling or section-snap. 3. **Bioluminescence-only reading mode**: Below -1,000 m, text does not simply change color -- it self-luminates against true black. Below -4,000 m, text is readable only within a cursor-following light radius. This inverts the assumption that a website must be universally legible and makes legibility itself a narrative element -- the reader must *hunt* for the text, as a predator hunts for light in the deep. 4. **Hangul as structural anchor**: The word 바다 is not a logo or a translation; it is the site's refrain. Korean characters appear at zone transitions (깊이, 고요, 바닥, 올라가기) with equal typographic weight to Latin text. This rejects the convention where non-Latin scripts are demoted to decoration or flag-swapping locale switchers. 5. **Zero photography, zero illustration**: No stock imagery, no illustrations, no photos of oceans, no images of fish. All visuals are generated in-browser through CSS gradients, SVG turbulence filters, and particle systems. The 92% of collection designs that rely on photography are bypassed entirely. 6. **Palette derived from oceanography, not design theory**: The six background colors correspond to actual measured light attenuation at specific depths, not to a designer's preferred color wheel. This is a design constraint chosen for authenticity, not aesthetics. **Chosen seed/style:** `ocean deep calming spa` -- reinterpreted away from "spa" (wellness branding, bright teal, lifestyle photography) toward its honest extreme: the *deepest* ocean, where calm is not a choice but an inescapable condition. **Avoided patterns (per frequency analysis):** - Avoided **corporate** aesthetic (87% of designs) -- this is unapologetically narrative and non-commercial. - Avoided **photography** imagery (92% of designs) -- zero photos used. - Avoided **card-grid** (92%) and **centered** (85%) layouts -- single asymmetric off-center column with layered-depth parallax instead. - Avoided **warm palette** (95%) and **gradient** (97% as decorative) -- strictly cold analogous palette; the gradient is the page itself, not a stylistic layer. - Avoided **mono typography** (87%) as a dominant choice -- mono appears only in the depth gauge, functioning as instrument telemetry rather than decoration. - Leaned into **underused patterns**: ethereal tone, layered-depth motion, wave-forms motif, analogous palette, and the rarely-used surreal/cinematic/dreamy intersection.