# Design Language for bada.city
## Aesthetics and Tone
bada.city is a submerged metropolis -- an imagined capital of the sea ("바다" means "sea" in Korean) rendered as if the visitor has descended, lungs full of borrowed breath, into a place where architecture is made of currents and citizens are made of light. The aesthetic is **seapunk** crossed with **wabi-sabi**: not the glossy blue-on-white of corporate travel brochures, not the cheerful cartoon fish of a children's book, but the slower, heavier beauty of an underwater city at the hour when sunlight can barely reach the rooftops. Think of the last moments of Atlantis captured not as catastrophe but as quiet inheritance. Think of Jacques Cousteau's grainy 16mm dive footage re-scored by Hiroshi Yoshimura. Think of a Hokusai wave that was never cresting, only always folding inward into itself.
The tone is **zen-contemplative** with an undercurrent of **mysterious-moody** -- the site breathes. It never rushes. Every interaction has the viscosity of water: motion is dampened, light is filtered, sound would be muffled if sound existed here. The visitor is not a customer being sold to; the visitor is a diver, descending by increments, and the interface is the pressure on their chest that reminds them they are somewhere sacred and not entirely safe. There is nothing to buy, nothing to sign up for, no testimonials from satisfied CEOs. There is only the city beneath the water, and the patience to notice it.
The guiding metaphor: **refraction**. Light that enters water does not travel straight -- it bends, splits, shimmers. Every design decision should behave as though it has passed through a column of seawater before reaching the eye. Edges soften. Colors shift toward cyan. Time slows. What was solid becomes suggestion.
## Layout Motifs and Structure
The structural spine is an **organic-flow** composition with **layered-depth** parallax -- explicitly rejecting the card-grid, centered-hero, and bento-box patterns that dominate the rest of the collection. There is no grid. There are no rectangular containers with equal margins. There are currents.
**The three-stratum depth model:**
- **The Abyssal Layer** (z = -300, background): A slow-drifting SVG mesh of dark kelp-silhouettes and distant coral towers, scrolling at 0.15x the user's scroll speed. This layer is nearly opaque ink-black where the user lands and gradually lightens as they scroll "upward" toward the surface. The user is descending in reverse -- reading downward on the page corresponds to ascending through the water column.
- **The Mesopelagic Layer** (z = 0, content): The actual readable content, set in loose typographic islands of varying width (never full-bleed, never a fixed column grid). Each island is shaped by its content: a haiku occupies a narrow vertical sliver, a longer meditation spreads into an asymmetric trapezoid, a single word floats in an enormous pool of negative space. Content blocks do not align to a shared baseline; they align to invisible currents -- subtle Bezier curves defined in CSS via `clip-path` and `offset-path`.
- **The Photic Layer** (z = +200, foreground): Slowly drifting particles of caustic light -- the wavering ripple patterns that sunlight casts on the seafloor. Rendered as a looping WebGL shader applied to a fixed-position overlay at `mix-blend-mode: soft-light` and opacity 0.35. This layer is never "above" the text in a legibility-destroying way; it's a filter the entire page passes through, a constant reminder that we are underwater.
**The vertical journey is structured as six depths**, each the height of 100vh + a 40vh transition zone where the previous depth bleeds into the next (no hard section breaks, no horizontal rule dividers, no "next section" buttons):
1. **Surface (0m)** — The splash: a single wave curling across the viewport, animated as an infinite SVG path that redraws itself every 8 seconds. The word "바다" sits inside the wave's negative space.
2. **Twilight (200m)** — The city name is introduced. Content begins to appear as floating islands.
3. **Bathyal (1000m)** — The deepest readable content: a manifesto-length meditation on the city.
4. **Abyssal (4000m)** — Bioluminescent data points emerge from darkness: abstract glyphs representing the city's "population," "depth," "pressure" -- but rendered as if the figures were only partially recovered from a log that water has stained.
5. **Hadal (6000m)** — A single line of text in the center of total darkness.
6. **The Floor (11000m)** — The footer-that-is-not-a-footer: a patient, nearly-silent signoff.
There is no navigation bar. Instead, a vertical "depth gauge" clings to the right edge of the viewport -- a thin cyan line with a small glyph marking the current depth, updating smoothly as the user scrolls. Clicking any labeled depth on the gauge triggers a slow, inertial scroll (800ms cubic-bezier(0.23, 1, 0.32, 1)).
## Typography and Palette
**Typography (Google Fonts only):**
- **Display / Depth Markers**: "Cormorant Garamond" (Google Fonts), weight 300, italic variant used for depth labels and the splash wordmark. Its high-contrast strokes and delicate serifs mimic the refractive shimmer of glass under water -- the thin strokes almost disappear, giving the text a ghostly, half-submerged quality. Set at clamp(4rem, 11vw, 9rem) for the hero wordmark "바다 · city" with `font-feature-settings: "liga" 1, "swsh" 1` to engage swash variants that swirl like eddies.
- **Body / Prose**: "Gowun Batang" (Google Fonts) -- a Korean serif with both Hangul and Latin support, designed by Young-joo Jang with restrained, quietly calligraphic curves that echo classical Korean brush strokes. Used for the meditative paragraph content at 18px, line-height 1.85, letter-spacing 0.01em. The generous line-height gives each line room to breathe, as though each sentence is suspended in its own pocket of water. Hangul glyphs at this size retain their architectural weight without becoming imposing.
- **Captions / Technical / Depth Readouts**: "Major Mono Display" (Google Fonts) -- an all-caps monospace with geometric, almost blueprint-like letterforms. Used sparingly at 11px with letter-spacing 0.2em for depth measurements ("-1040m"), coordinates, and figures. Renders in the cyan accent color, reading like a dive computer's display reflected off goggles.
**Palette (eight hex values, eschewing the dominant warm-gradient trend):**
- `#04121c` — Hadal Ink: the deepest background, the color of the ocean at 6000m where no photon ever arrives. This is the page's default background, and the starting point of the descent gradient.
- `#0a2a3a` — Bathyal Slate: a dense, blue-black tone used for mid-depth backgrounds and the kelp-silhouette SVG strokes in the Abyssal Layer.
- `#14536b` — Mesopelagic Teal: the primary container / panel color; used behind text islands where additional contrast against the Hadal Ink is needed. Applied at 0.4 opacity over the background so that the particle caustics bleed through.
- `#4a9da8` — Photic Cyan: the primary accent. Used for the depth gauge line, the wordmark highlight, and all active-state interactions. A slightly desaturated cyan that evokes shallow tropical water, not aquarium-tourism blue.
- `#7fc8d9` — Wave Crest: a lighter cyan used for hover states and active typography glow. This is the color that sunlight becomes when it has only passed through ten meters of seawater.
- `#e8f0e8` — Foam: near-white with a faint green cast, used for primary body text on dark backgrounds. Deliberately not pure white -- pure white does not exist underwater; everything has a tint.
- `#c9b18a` — Coral Sand: a muted, warm ochre used with extreme restraint as a single counterpoint color. Appears only in small details -- the glow of a single bioluminescent glyph, an underlined word in a quote. This is the one warm note in an otherwise entirely cool palette, and its rarity is load-bearing.
- `#8d2e3f` — Deep Coral: used once, and only once, on the entire site -- as the color of the final word of the closing meditation. A single dying-coral hue that tells the visitor: something was here, and has almost gone.
The palette gradient is **monochrome-cool with a single warm whisper** -- a deliberate rejection of the "gradient + warm + muted" trifecta present in nearly all other designs.
## Imagery and Motifs
**Core motif: the ripple as unit of meaning.** Every decorative element on the site is either a ripple, a thing that causes ripples, or a thing dissolving into them. Ripples appear as:
- **SVG wave lines**: Long, near-horizontal sine waves that traverse the full viewport width, drawn with `stroke-dasharray` and animated via `stroke-dashoffset` to appear as though being drawn forever. Each wave has a slightly different frequency and phase; layered, they create a moiré that suggests depth without illustrating it. These lines separate "sections" (no `` -- there are only waves).
- **Caustic light patterns**: Generated via a WebGL fragment shader using layered noise functions to produce the rippling light patterns that underwater photographers know as "caustics." The shader runs at 30fps (intentionally throttled below 60 to save battery and maintain a dreamy, film-like quality) and is applied as a full-page overlay.
- **Bioluminescent glyphs**: Small, Hangul-inspired marks (derived from the shapes of the letters in "바다") that pulse with the coral-sand accent color. They appear in the Abyssal and Hadal depths as the primary visual content of those sections -- tiny coordinates of life in total darkness.
- **Drifting jellyfish silhouettes**: Three SVG shapes at widely spaced intervals, drifting across the viewport on independent Bezier paths at extreme slowness (90-second transit). Rendered as semi-transparent cyan outlines -- more felt than seen.
- **Hokusai-echo wave**: At the Surface depth, a stylized wave curl inspired by Hokusai's "The Great Wave off Kanagawa" -- but abstracted to a single continuous SVG path, drawn in Foam color against Hadal Ink. It is the only figurative illustration on the site. Its claws of foam animate into existence on page load with a `stroke-dashoffset` animation spanning 2.6 seconds.
**What is absent (deliberately):**
- No stock photography of beaches.
- No smiling tourists.
- No surfboards, palm trees, or cocktail umbrellas.
- No star ratings, pricing tiers, "book now" buttons.
- No statistics about visitor counts or travel awards.
- No team-member bios in a three-column grid.
**Ambient texture:**
A single looping background texture file: a tiled grayscale map of light-on-water caustic reflections, applied at `mix-blend-mode: overlay` and 8% opacity. This is the "grain" of the site -- except instead of the film-grain noise that appears in many other designs, it is water-grain: the ever-shifting, never-repeating texture of refracted light. It unifies every surface on the page as subaqueous.
**The pointer becomes a fish.** The system cursor is replaced (on non-touch devices) with a tiny 16×12 SVG silhouette of a fish, pointing in the direction of pointer motion. The fish's velocity and rotation are lerped toward the true cursor position, so it "swims" after the pointer with a 120ms trailing delay. When the pointer is idle for more than 3 seconds, the fish makes small figure-eight patterns in place, as though browsing a reef.
## Prompts for Implementation
**Narrative arc:** The site is a descent. The user is a diver. The content is not product copy; it is an imagined poetics of a city beneath the sea. Every word, every animation, every color should reinforce that the visitor has left the air and entered the water. No CTA. No form. No conversion funnel.
**1. Load sequence (2.4 seconds, the descent through the surface):**
- The page loads at `#e8f0e8` (Foam) with a single thin horizontal line of Photic Cyan across the center -- the water's surface seen from below.
- Over 800ms, the background darkens from Foam through Wave Crest through Photic Cyan to Hadal Ink.
- At 1200ms, the Hokusai wave SVG begins drawing itself, right-to-left, at 2.6s duration (intentionally slightly longer than the caller expects).
- At 1400ms, the word "바다" materializes inside the wave's negative space -- not with a fade, but with a `filter: blur(24px) → blur(0)` transition as though surfacing from murk.
- At 2200ms, the depth gauge slides in from the right edge.
- At 2400ms, the user can scroll.
**2. Scroll as descent.** Scroll-triggered animations drive the entire experience, but NOT in the standard "fade-in as element enters viewport" way. Instead:
- The parallax stratum system (Abyssal / Mesopelagic / Photic) scrolls at different rates (0.15x, 1.0x, 1.25x), creating the sensation of passing through a water column.
- Typography does not fade in; it **refracts in** -- the `backdrop-filter` blur on each text island reduces from 12px to 0 as it enters the viewport, so text "focuses" the way a lens does through moving water.
- The depth gauge updates in real-time as the user scrolls, with the depth number using a smooth counter-animate interpolation.
**3. Cursor and interaction.**
- The fish-cursor described above. Implemented with a fixed-position `