# Design Language for bada.quest ## Aesthetics and Tone bada.quest captures the restless spirit of urban seaside cities where the ocean meets concrete -- think Busan's Haeundae district at sunset, Marseille's Vieux-Port at dawn, or Lisbon's Alfama crumbling down toward the Tagus. The editorial aesthetic channels the raw, documentary gaze of a street photographer who wanders port cities collecting fragments: weathered signage, rusted cargo containers, turquoise water glimpsed between apartment blocks. "Bada" (바다) means sea in Korean, and the ".quest" suffix implies a journey -- so the visual identity is an editorial travelogue through coastal urban landscapes, told with the unflinching honesty of raw-authentic storytelling. The palette is drawn from terracotta rooftops, sun-bleached walls, and the iron-oxide stains on harbor infrastructure. Every element should feel lived-in, tactile, and slightly sun-damaged. ## Layout Motifs and Structure The layout follows a **z-pattern** reading flow: the eye enters top-left at the masthead, sweeps right across a panoramic image strip, drops diagonally to a pull-quote or wayfinding element, then sweeps right again into the next content block. This zig-zag rhythm mimics the way you navigate a coastal city -- turning corners, descending stairways, emerging onto unexpected vistas. **Primary structure:** - **Opening viewport (100vh):** A full-bleed photograph-style gradient wash (terracotta to slate) with the "bada.quest" logotype set in the upper-left like a magazine masthead. A single large isometric city-block illustration sits right-of-center, casting a long CSS shadow as if lit by low afternoon sun. Below the fold indicator: a subtle animated wave line (SVG path) that pulses gently. - **Content sections:** Each section is a two-column z-pattern block. Left column holds a large isometric illustration (harbor crane, stacked containers, lighthouse); right column holds editorial text in a narrow measure (max 38ch). Columns alternate sides every section, creating the z-rhythm. - **Interstitial strips:** Between major sections, full-width horizontal bands display panoramic isometric cityscapes (a continuous skyline that scrolls at a slightly different rate than the page, creating a subtle depth effect without relying on standard parallax). - **Footer:** A harbor map-style illustration with labeled "ports" linking to different sections, drawn in the isometric style with terracotta and slate tones. Navigation is minimal: a fixed top-left "bada" wordmark and a thin horizontal progress bar at the very top of the viewport that fills terracotta as the user scrolls. ## Typography and Palette **Fonts:** - **Headlines:** "Nunito" (Google Fonts) -- a rounded sans-serif with warm, approachable curves that echo the softness of sea-worn stone. Weight 800 for primary headings, size clamp(32px, 5vw, 72px). Letter-spacing: -0.02em for a compact, magazine-masthead feel. - **Body text:** "Libre Baskerville" (Google Fonts) -- a sturdy editorial serif with excellent readability at body sizes. Weight 400, size 18px, line-height 1.75. Its classical proportions give the editorial content authority while remaining warm. - **Accents/Labels:** "IBM Plex Mono" (Google Fonts) -- used for section numbers, coordinates, and navigational labels. Weight 500, size 13px, letter-spacing 0.08em, uppercase. Provides a utilitarian counterpoint to the warm body type. **Palette:** - **Terracotta Roof:** #C2703E -- primary accent, used for headings, progress bar, and hover states - **Sun-bleached Wall:** #F2E6D9 -- primary background, warm and sandy - **Harbor Slate:** #4A5568 -- body text and structural lines - **Deep Brine:** #1A3A4A -- dark accent for footer, overlays, and the logotype - **Oxidized Iron:** #8B4513 -- secondary accent for borders, underlines, and pull-quote marks - **Salt Spray White:** #FDFBF7 -- card/panel backgrounds, slightly warmer than pure white - **Dusk Sky:** #D4896A -- gradient companion to Terracotta Roof, used in transitional washes ## Imagery and Motifs **Core visual motifs:** - **Isometric city blocks:** The signature illustration style is isometric architectural vignettes rendered in flat colors with subtle grain texture overlays. Buildings are terracotta and slate; water is rendered as repeating chevron patterns in #1A3A4A at 30% opacity. Each isometric scene is a self-contained "postcard" from a different port city moment: a fish market, a lighthouse, a container yard, a cliff-side apartment block. - **Wave-line dividers:** Section dividers are not straight lines but gentle sine-wave SVG paths in Harbor Slate at 40% opacity. These oscillate slowly (CSS animation, 8s period) to suggest tidal rhythm. - **Coordinate stamps:** Each section bears a small label in IBM Plex Mono resembling geographic coordinates (e.g., "35.1N 129.0E" for Busan), adding a navigational/cartographic layer to the editorial experience. - **Grain texture overlay:** A subtle noise texture (SVG feTurbulence, baseFrequency 0.65, type fractalNoise, 3% opacity) applied to the entire page gives the warmth of aged newsprint. - **Terracotta highlight marks:** Key phrases in body text receive a background highlight that looks like a sun-faded marker stroke -- a soft terracotta wash (#C2703E at 20% opacity) with slightly irregular edges achieved via a CSS clip-path with subtle polygon variation. ## Prompts for Implementation **Full-screen narrative experience:** The site opens as a single continuous scroll through a coastal city travelogue. The isometric city illustration in the hero viewport should assemble itself piece by piece on load -- buildings rise from the baseline (translateY: 20px to 0, opacity 0 to 1) in a staggered sequence (each element 120ms apart), mimicking a city being "built" before the viewer's eyes. This stagger animation uses CSS @keyframes with animation-delay calculated per element. **Scroll-triggered editorial reveals:** As the user scrolls into each z-pattern section, the isometric illustration enters from the side (translateX: -40px or +40px depending on alternating side) while the text block fades in from the opposite direction. Use IntersectionObserver with threshold 0.2 to trigger CSS class additions. The wave-line dividers between sections should begin their oscillation animation only when scrolled into view. **Interstitial panoramic strips:** The continuous isometric skyline strips use a CSS background-position animation tied to scroll position (calculated via a lightweight JS scroll listener, updating a CSS custom property --scroll-progress). The skyline moves at 0.3x the scroll speed, creating a subtle layered depth effect. **Typography animation:** The masthead "bada.quest" logotype on initial load should have each character appear with a slight bounce (scale 1.1 to 1.0, opacity 0 to 1, staggered 60ms per character). Pull-quotes within sections use a slow fade-in (opacity 0 to 1 over 600ms) triggered by scroll. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie-cutter SaaS patterns. This is an editorial journey, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Z-pattern editorial with alternating isometric illustrations:** No other design in the collection uses a strict z-pattern reading flow where each zig and zag is anchored by an isometric architectural vignette. The combination of editorial typography with isometric illustration (rather than photography or abstract art) creates a distinctive visual identity. 2. **Geographic coordinate labeling system:** The cartographic coordinate stamps on each section create a wayfinding metaphor unique to this design -- transforming a scroll experience into a mapped journey across port cities. This navigational layer adds narrative depth without UI clutter. 3. **Assembling city hero animation:** The staggered building-rise animation in the hero viewport -- where isometric structures construct themselves sequentially -- is a distinctive opening moment not shared by other designs. It establishes the city-building theme immediately. 4. **Wave-line animated dividers replacing hard rules:** Using gently oscillating SVG sine-wave paths as section dividers (rather than straight lines or decorative borders) reinforces the oceanic theme at a structural level and adds persistent subtle motion to the page. **Chosen seed/style:** editorial aesthetic, z-pattern layout, playful-rounded typography (adapted to Nunito), terracotta-warm palette, scroll-triggered patterns, isometric-icons imagery, city-urban motifs, raw-authentic tone. **Avoided overused patterns:** Avoided centered layout (93% frequency), card-grid (80%), photography imagery (73%), gradient palette (96%), parallax pattern (90%), mono typography (90%), mysterious-moody tone (73%). Instead used z-pattern layout, isometric-icons imagery, terracotta-warm palette, scroll-triggered reveals, playful-rounded typography, and raw-authentic tone.