# Design Language for bada.quest ## Aesthetics and Tone bada.quest is a tidal manuscript -- the Korean word 바다 (bada, "sea") unrolled across the viewport as a slow, breathing seascape rather than a website. The aesthetic is **seapunk-watercolor**, but not the meme-fossilized seapunk of 2012 dolphin GIFs on Geocities-blue. This is a quieter, more geological seapunk: the palette of Korean Joseon-era minhwa wave paintings, the hush of a 새벽 (dawn) ferry leaving Yeongjongdo, the grainy blue-green of a scanned Kim Hongdo brushwork diluted with seawater. It is half-research-journal, half-liturgy -- a site that behaves like a damp, salt-swollen field notebook carried along the coastline from Gangneung to Jeju. The tone is **dreamy-ethereal** with undertones of **zen-contemplative** -- the user should feel as if they have paused on a pier at the hour between night and morning, when the horizon is a single indecisive line and the water has not yet decided whether it is black or blue. There is no urgency, no calls-to-action clamoring for conversion. Instead: a long exhale, a slow horizontal drift, the faint sound (implied, never played) of hull-wood creaking against rope. The "quest" in the domain is deliberately de-heroicized. This is not a hero's journey with a treasure at the end. It is a **tidal quest** -- circular, returning, measured in the rhythm of moon and breath rather than in chapters. The site takes seriously the Korean linguistic coincidence that 바다 (sea) shares its sonic stem with 받다 (to receive): the sea as recipient, as a listening surface. Every visual decision should feel like *receiving* rather than presenting. ## Layout Motifs and Structure The site is a **horizontal-scroll tidal scroll** -- a single unbroken composition that unfurls left-to-right like a Joseon-dynasty painted handscroll (두루마리, durumari) unrolled across a low table. There is no vertical scroll on desktop; the page is one long seascape, roughly 600vw wide, traversed by horizontal wheel / trackpad / drag interaction. On mobile the scroll rotates to vertical but preserves the same pictorial continuity -- a vertical 족자 (jokja) hanging scroll. **Structural rhythm** -- the horizontal axis is divided not by equal columns but by *tidal phases*, each section organic-flowing into the next without hard edges: 1. **사리 (Sari)** -- spring tide / opening. Title plate dissolves out of fog. 2. **밀물 (Milmul)** -- flood tide. Incoming content blooms upward from below the waterline. 3. **만조 (Manjo)** -- high water. The dense middle, where text and image are most legible, floating. 4. **썰물 (Sseolmul)** -- ebb tide. Content recedes, leaves tidal-pool residues (small asides, footnotes, marginalia). 5. **간조 (Ganjo)** -- low water. Bare ground revealed: credits, quiet links, a single lantern. 6. **조금 (Jogeum)** -- neap tide / closing. The viewport fades back into fog; loops. A horizon line -- one single 1px hairline in ink-black #0B1E2A -- runs the entire width of the composition at 52% viewport height, never breaking, never thickening. It is the one structural constant. Everything else rises, falls, or dissolves around it. Content blocks are **not cards**. They are **부유물 (buyumul, floating objects)**: torn paper fragments, a driftwood plank of text, a fisherman's chalkboard with a day's catch written on it, a sheet of handmade 한지 (hanji) paper with poetry bleeding through from the other side. Negative space is not decorative; it is *water*. Whitespace IS the sea. Text and image are islands, buoys, nets -- finite intrusions on an infinite liquid field. **ma-negative-space** is used not in a Japanese-minimalist register but in a specifically maritime-Korean one: the space between islands in the Namhae archipelago, the space between gulls. ## Typography and Palette **Typography** - **Display / Seasonal titles**: "Noto Serif KR" (Google Fonts), weight 300, for Korean wave-phase names (사리, 밀물, 만조). Set at clamp(3rem, 9vw, 7.5rem), letter-spacing 0.04em. The thin weight reads as ink held back from the brush, reluctant to commit. - **Roman display**: "Cormorant Garamond" (Google Fonts), weight 300 italic, paired alongside the Korean. The low-contrast italic feels like a hand-written ship's-log caption. Used at clamp(2rem, 5vw, 4rem). The name itself (Cormorant -- the black sea-bird that dives for fish) is a deliberate in-joke. - **Body**: "Nanum Myeongjo" (Google Fonts), weight 400, for Korean prose, paired with "EB Garamond" (Google Fonts) weight 400 for Roman body. Both are old-style serifs with humanist modulation -- they read as *printed on damp paper*, absorbing light rather than reflecting it. Line-height 1.8 for the hangul, 1.7 for Roman. Paragraph measure 48ch maximum. - **Marginalia / tide-tables**: "Gowun Dodum" (Google Fonts), weight 400, at 0.78rem. A gentle Korean sans with the air of a hand-lettered survey marker. - **Decorative single-character accents**: "Gaegu" (Google Fonts) -- a handwritten Korean face used sparingly for a single calligraphic 바 or 다 floating in negative space at massive sizes (18rem), treated as ink-wash rather than text. **Palette** -- Korean coastal dawn, seven hues, named after fisherman's weather-vocabulary: - **`#0B1E2A`** -- *먹물 (Meogmul, ink-water)*: the true deep, used for horizon line, body text on light ground, the underside of waves. Not quite black; dark teal-slate. - **`#1F3A4A`** -- *새벽 바다 (Saebyeok bada, dawn sea)*: ambient background at the left edge (opening fog). - **`#3E6478`** -- *파랑 (Parang, blue-of-waves)*: mid-scroll water color, used for 52%-to-100% vertical gradient below horizon. - **`#89A7B2`** -- *해무 (Haemu, sea-fog)*: translucent overlay for hazing edges of floating objects. - **`#D9DCCC`** -- *개펄 (Gaepeol, tidal-flat clay)*: primary "paper" background above horizon; warm gray-green, the color of wet mudflat drying in the sun. - **`#F3ECD7`** -- *한지 (Hanji, mulberry paper)*: secondary paper ground for body-text islands; cream with a faint gold undertone. - **`#C86B47`** -- *소금꽃 (Sogeumkkot, salt-bloom)*: single accent color, used maybe four times across the whole page, for hover-states, a setting-sun disc, a buoy, a lantern flame. The burnt-orange of a persimmon drying in coastal wind. No gradients in the CSS-developer sense (no `linear-gradient(135deg, ...)`). Color transitions happen through **watercolor-bleed SVG filters** with feTurbulence + feDisplacementMap, so edges are always slightly *wet*. ## Imagery and Motifs **Core motif: 물결 (mulgyeol, wave-pattern).** Drawn not as sine curves but as the stylized cloud-wave chevrons from Joseon 청화백자 (blue-and-white porcelain) -- three-stroke curls with a dot tucked into each hollow. These are rendered as SVG, stroke-width 1.2px, stroke #0B1E2A, drawn with **path-draw-svg** stroke-dasharray animation as the user scrolls, so each wave draws itself at 600ms into view and then holds. **Secondary motifs**: - **만다라 조수도 (tidal mandala)**: a faint circular dial at the bottom-right corner, always visible, showing which of the six tidal phases the viewer is currently scrolled into. The dial is a clock with moon-phase markers instead of hours. Hand drawn in SVG with deliberate jitter. - **소금 입자 (salt particles)**: not the generic "floating particles" library look. These are 1-2px #F3ECD7 dots, maybe 40 across the whole viewport, drifting very slowly (15s per drift cycle) in horizontal currents. They are the suspended sediment in a quiet harbor. - **해조류 (seaweed silhouette)**: a single clump of undulating kelp rendered in CSS at the far left edge, swaying with a 7-second ease-in-out sine, low contrast (opacity 0.35). The user sees it more than they notice it. - **어부의 흔적 (fisherman's traces)**: scattered hand-drawn SVG marginalia -- a knotted rope, a cleat, a numbered buoy, a handwritten tide-height "2.3m 04:17" -- placed with intentional carelessness, slightly tilted (-2deg to +3deg). - **계단 (stairs into the water)**: a single recurring architectural detail -- the stone steps that descend into Korean harbors, disappearing below the tide line. Rendered as a subtle SVG in the mid-scroll region. - **갈매기 (seagull)**: exactly one gull, in silhouette, crossing the entire viewport horizontally over a 90-second journey. It loops once per full scroll-through. Scale: 12px. The user will either see it or not. **Texture layer**: a persistent noise-texture overlay using CSS `filter: url(#grainy-watercolor)` -- an SVG filter stack (feTurbulence baseFrequency="0.9" + feComposite) giving the entire page the grain of 한지 paper. Noise opacity 0.06 over light backgrounds, 0.12 over dark. **No photographs.** The entire visual system is hand-drawn SVG + CSS. The sea is *written*, not photographed. ## Prompts for Implementation **Narrative intention**: The visitor is not a user. The visitor is a 객 (gaek, guest) invited to walk the tideline for 90 seconds. They should leave the site with one mental image, not ten feature highlights. 1. **First paint (0ms)**: the viewport loads at #1F3A4A (Dawn Sea). No loading spinner. No logo reveal. The color simply exists, as if the user has opened their eyes on a ferry at 4:40am. 2. **Fog lift (0-1800ms)**: an SVG noise layer at opacity 0.95 slowly dissipates to 0.12 via a cubic-bezier(0.22, 1, 0.36, 1) easing. Through the thinning fog, the horizon hairline draws itself in from left to right over 2400ms, path-draw-svg style. 3. **Title plate (1800-3200ms)**: the character 바 fades in at viewport-left at 18rem, weight 300, color #0B1E2A, rotated -1.5deg. At 2400ms, 다 follows at viewport-center. At 3000ms, the Roman caption "bada · sea · a quest that returns" appears as a single justified line below, in Cormorant Garamond italic. 4. **Horizontal navigation**: scroll is **hijacked gently** -- vertical wheel input is translated to horizontal page movement via a spring-damped scroll (stiffness 80, damping 26). Scroll speed is intentionally slow: 1.0 wheel-tick ≈ 35px horizontal. This forces the tempo. A small "drag to sail" cursor appears on mouse-hover over empty water areas. 5. **Progress indicator**: the tidal mandala dial at bottom-right rotates its moon-marker. It is the ONLY progress UI. No progress bar. No section dots. No "scroll down" arrow (there is no down). 6. **Tidal-phase reveals**: as the user horizontally scrolls into each of the six phases, a single Korean word (사리, 밀물...) types itself in via **typewriter-effect** at the top-left of that phase. Stagger delay 80ms per character. Then the phase's floating content objects fade and drift-up into position with an elastic stagger (3-object maximum per phase). 7. **Water below the horizon**: below the 52% horizon line, the background is a slow CSS-animated SVG filter displacement. Two layered feTurbulence octaves, base frequencies 0.008 and 0.023, displaced 6px max, animating their seed values over 40 seconds. The effect is liquid -- the water *moves* but never crashes. 8. **Hover-ripple on every interactive element**: links, rare buttons, and the tide-dial all trigger a single circular **ripple** on hover, drawn with SVG stroke-dasharray from 0 to circumference over 600ms, then fades. The ripple is #89A7B2 at opacity 0.45. Only one ripple per hover event -- no repeating pulses. 9. **End-of-scroll behavior**: on reaching 간조 (low water) and then 조금 (neap tide / closing), the horizon line slowly lifts to 80% of viewport, then fog returns (noise opacity 0.12 → 0.85 over 3s), and the page softly auto-resets to the left edge. The tidal loop completes. The visitor may scroll again, or leave. 10. **Sound**: none, ever. This is a silent sea. The absence of audio is a deliberate design decision; any ambient loop would break the dreamlike register. **AVOID absolutely**: pricing tables, feature grids, testimonial carousels, stat counters, CTA buttons with arrow icons, "Learn more" affordances, card-grid layouts, social proof rows, hamburger-menu top-nav, sticky headers, cookie banners rendered as modal overlays, any element with `border-radius > 2px`, any drop-shadow, any gradient with more than two stops, the word "solutions," the word "seamless." **PREFER**: long paragraphs of Korean prose bleeding into English translation, tidal charts repurposed as navigation, handwritten marginalia at tilt angles, silence, one-color accents used four times per page, wet edges, wabi-sabi imperfections in SVG paths. ## Uniqueness Notes **Chosen seed/style**: *seapunk watercolor coastal-Korean*, derived from the underused seed vocabulary `seapunk` (8%) cross-bred with `watercolor` (10%) and `ocean-deep` (6%) palette, filtered through Joseon-dynasty painted-scroll formalism. This compound has not appeared in the current design corpus. **Differentiators from the existing 50 designs**: 1. **Horizontal-scroll only, as tidal scroll**: while 24% of designs use horizontal-scroll, none treat it as a six-phase *tidal* narrative mapped to Korean lunar-sea vocabulary (사리/밀물/만조/썰물/간조/조금). The structural metaphor is maritime-specific, not merely "sideways instead of down." 2. **Bilingual Korean-English typography as first-class structure**: most designs in the corpus are English-only or treat Korean as an afterthought. Here, Noto Serif KR + Nanum Myeongjo set alongside EB Garamond + Cormorant Garamond form a deliberate typographic duet where the Korean leads and English is the quiet echo. Every palette name, phase name, and motif is Korean-first. 3. **No photography, no gradients, no cards, no buttons**: this design actively rejects the four most overused patterns in the corpus (photography 94%, gradient 98%, card-grid 94%, and the implied CTA-button affordance). Every image is hand-drawn SVG; every color transition is a watercolor-bleed filter; every content unit is a "floating object" not a card; every link is a text-link with a hover-ripple, not a button. 4. **Palette derived from Korean fisherman's weather vocabulary**: 먹물 (ink-water), 해무 (sea-fog), 개펄 (tidal-flat clay), 소금꽃 (salt-bloom). Each hex value is documented not by hue-family (e.g. "dark blue") but by *what kind of water/weather it is*. This makes the palette culturally specific and non-transferable. 5. **One gull, ninety-second loop**: a single 12px seagull silhouette crosses the viewport once per full scroll-through. It is an Easter-egg-sized detail that rewards slow visitors. No other design in the corpus includes a scale-deliberate hidden creature. 6. **Silence as design principle**: the decision to forbid audio is itself a design motif. The visual grammar of "silent sea" shapes spacing, motion tempo, and copy voice. **Frequency-analysis avoidance**: corporate aesthetic (90% → rejected), gradient palette (98% → replaced with watercolor-bleed SVG filters), warm palette (96% → replaced with cool coastal-blend + single persimmon accent), card-grid layout (94% → replaced with floating-objects on water), mono typography (90% → replaced with dual serif families), scroll-triggered generic (94% → replaced with tidal-phase narrative triggers), photography imagery (94% → replaced with hand-drawn SVG). **Frequency-analysis preference**: seapunk (8%), watercolor (10%), ocean-deep (6%), coastal-blend (2%), ethereal-blue (2%), wave-forms (10%), water-bubbles (4%), horizontal-scroll (24%), organic-flow (18%), ma-negative-space (20%), path-draw-svg (30%), ripple (24%), zen-contemplative tone (14%), dreamy-ethereal tone (16%), botanical (2% -- used here as seaweed/kelp), nature-elements (2%).