# Design Language for bada.day ## Aesthetics and Tone bada.day is a **seapunk dreamscape** -- a site that treats a single day at sea as a complete cosmogony, moving from pre-dawn black water to noon's chrome-silver glare to the phosphorescent night where plankton writes cursive in the wake of unseen things. The Korean word 바다 (bada) means "sea," but here it also means "to receive" -- the homophone is the design's secret engine: the site is built as a receptacle, a shell pressed to the ear, a tide pool that holds whatever the scroll pours into it. The aesthetic refuses the clean, corporate "ocean-calm" cliche of spa-and-saas blue gradients. Instead it leans into the **wet maximalism** of early-1990s seapunk: chrome dolphins rendered like CD-ROM intro screens, waveform bitmaps, PNG-era transparency, holographic fish-scale gradients, Hypercard-era button chrome. But the execution is contemporary -- every kitsch element is treated with the severity of a museum vitrine, so the tone becomes **sincere surrealism** rather than ironic nostalgia. Think: a Bjork music video directed by an oceanographer who has read too much Clarice Lispector. The mood shifts with the day-cycle of the site itself. Visit at local dawn and the whole palette is cold violet and bone; at local noon it bleaches to overexposed cyan-white; at dusk it burns coral; at night it switches to a bioluminescent mode with inky black background and pulsing cyan motes. The site listens to the visitor's system clock and commits to the time of day as a narrative stance -- there is no dark-mode toggle, only the actual hour. Voice is **incantatory and granular**: short lines set in a display serif that reads like verse, interleaved with long technical captions in mono that feel like a marine biologist's field notebook. Nothing is "content-first"; everything is **weather-first**. The writing describes light on water before it describes anything useful. ## Layout Motifs and Structure The structure is **horizontal-scroll tide**, not vertical scroll. The entire site is one continuous 24-viewport-wide panorama that the visitor moves through laterally using scroll-wheel-to-horizontal translation, mapped to a day-long timeline. Vertical scroll within each "hour" reveals depth -- moving the cursor downward descends through the water column from surface to abyssal, with content strata revealed at each depth. So the navigation space is genuinely 2D: horizontal is time, vertical is depth. **Hour bands (horizontal):** The panorama is divided into 12 bands of roughly 2 viewports each, labeled with the hour in Hangul numerals (영시, 두시, 네시 ...). Each band has its own dominant hue and its own characteristic "creature" -- a silhouetted fish, jellyfish, gull, or drift-weed -- that recurs in the band's decorative elements. Bands do not have hard edges; they bleed into each other through gradient mesh transitions, mimicking the way light bleeds across hours on open water. **Depth strata (vertical):** Within any hour band the visitor can scroll down through five strata -- Surface Film, Epipelagic, Mesopelagic, Bathyal, Abyssal -- and each stratum has a distinct visual treatment: the surface film is mostly white space with tiny ripple SVG; the epipelagic carries photographs and typography; the mesopelagic dims to midnight blue with bioluminescent highlights; the bathyal is nearly black with only outline illustrations; the abyssal is pure black with occasional pinpoint cyan motes and the site's deepest, strangest content (long-form essays, experimental pieces). Depth is not a gimmick -- real content lives at real depths. **The Tidal Margin:** A thin strip along the bottom of the viewport always shows the literal coastline of bada.day -- a procedurally generated shoreline SVG that rolls continuously, with foam advancing and retreating in a sine-wave rhythm tied to a global "tide clock" that runs on a 12h25m cycle (a real lunar tidal period). This strip is the only persistent chrome on the site. **The Horizon Line:** A 1px horizontal line crosses the viewport at a height that corresponds to the real sun's elevation at the visitor's latitude and the current hour band. As the visitor moves through hours, the horizon tilts subtly -- flattening at local noon of that hour, acute at dawn and dusk. Content compositions respect this horizon: typography sits above or below it but almost never crosses it. **No cards. No tiles. No grids.** Composition inside each band is **organic-flow** -- free-form placement following underlying water currents. Text wraps around invisible eddies. Images drift. Nothing snaps to a column. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Hour titles:** **"Fraunces"** -- a soft, swelling serif with optical sizing that feels carved from wet stone. Used at extreme scale (clamp(6rem, 16vw, 20rem)) for the Hangul hour labels and for single-word interstitials like 밀물 (flood tide), 썰물 (ebb tide), 해무 (sea fog). Variable weight 100-900, variable softness 0-100 (pushed high), variable opsz used aggressively so it becomes almost bulbous at display sizes. - **Literary / Verse:** **"Cormorant Garamond"** Italic at 400 weight, used for the short incantatory text blocks. Line-height 1.8, set in narrow measure of ~32ch. Color varies by depth stratum (paler at surface, more saturated at depth). - **Field notebook / Captions:** **"JetBrains Mono"** at 400 weight, 13px, wide tracking (0.08em). Used for technical marginalia -- water temperature, salinity readings, species names in Latin -- that appear alongside the main content like field notes in a marine log. - **Korean body:** **"Gowun Batang"** -- a traditional Hangul batang with soft serif terminals that pair seamlessly with Fraunces. Used for all Korean paragraphs. 17px, line-height 1.9. - **Ambient UI:** **"Space Grotesk"** at 500, all lowercase, 11px. Used for tiny labels on the tidal margin, hour counters, depth indicators. **Palette -- "Coastal Blend" shifting by hour:** Core anchor colors present across all hours: - `#03141f` -- **Abyssal Ink** (background at depth; never pure black) - `#f4ede1` -- **Bone Foam** (paper white with a warm sand cast) - `#8aa6a3` -- **Sea Fog Grey-Green** (a mid-tone that resolves disputes) Hour-cycle hues (the "mood" layer, interpolated by system clock): - `#1b1a3d` -- **Pre-dawn Violet** (03:00-05:00) - `#d6e9ee` + `#c8a27a` -- **First Light Cyan + Amber Horizon** (05:00-08:00) - `#4aa0b5` -- **Mid-morning Turquoise** (08:00-11:00) - `#e8efe9` + `#ffffff` -- **Noon Chrome Bleach** (11:00-14:00, overexposed, desaturated) - `#f08a5d` + `#c2185b` -- **Dusk Coral + Magenta Reef** (17:00-19:00) - `#06202a` + `#21e6c1` -- **Night Abyss + Bioluminescent Cyan** (21:00-03:00) Accent specials: - `#b4d7e0` -- **Spray** (used for foam and ripple SVG fills) - `#d4a574` -- **Wrecked Brass** (used sparingly for found-object type elements) - `#f5b9c4` -- **Anemone Pink** (tiny pulses; only appears at mesopelagic depth) Gradients are never linear. All sea-surface gradients use radial or conic meshes with 4-6 stops, and all are dithered with fine noise (0.04 opacity) so they never band. Chrome gradients on the seapunk kitsch elements (buttons, the dolphin silhouette) use oil-slick rainbows -- a conic-gradient sweep from #d0f0ff through #f0b8ff, #ffd69a, #9fffcf and back -- but always masked down to thin strips so they never overwhelm. ## Imagery and Motifs **Core visual motifs:** - **The Dolphin Vitrine:** A single recurring motif -- a chrome-dolphin SVG (heavy outline, conic oil-slick gradient fill) floats somewhere on almost every hour band. It is the site's mascot and deadpan joke: rendered with full reverence, as though it were an artifact in a museum, labeled with a species plaque (Tursiops truncatus, seapunk). It rotates slowly (one full revolution per real-world hour) and refuses to explain itself. - **Tide-pool SVG micro-maps:** Small top-down circular illustrations showing a tide pool's inhabitants -- barnacles, limpets, a tiny crab, a sea star -- rendered as fine hairline drawings (#03141f strokes on bone paper). These appear in the margins of text blocks as decorative asides and at intersections between content sections. No two are identical; each is procedurally generated from a seed derived from the visiting hour. - **Waveform bitmap ribbons:** Narrow (32px-tall) horizontal ribbons of pixel-art sine wave, rendered at 1:1 pixels with visible aliasing, colored with the hour's dominant hue on a transparent background. These are the most overtly seapunk element and appear as section dividers and as the "loading" graphic. Animated by stepping their pixel offset one step per 100ms -- mechanical, not smooth. - **Bioluminescent particles:** In night hours and at mesopelagic+ depths, fine cyan motes drift slowly across the viewport following a flow-field derived from a low-frequency Perlin noise. Rare "plankton blooms" appear when the cursor moves quickly -- a swarm of 200+ particles briefly outlines the cursor's path in cyan before fading. Density: ~40 particles per viewport at night, 0 by day. - **Real photography (sparse and reverent):** A few slow-shutter, hand-held photographs of actual Korean coastlines -- 강릉, 제주, 남해 -- rendered full-bleed but only within specific hour bands. Treated with a duotone mapping (deep color -> bone, highlight -> the hour's accent). Grain overlay at 0.12 opacity. - **Specimen cards, not product cards:** When the site needs to present a discrete unit of content, it frames it as a **specimen card** -- an aged-paper rectangle with a hand-drawn numbered label in the corner, a Latin binomial, a coordinate pair, and a date. These appear rarely and never in grids; they are pinned at angles like lab notes. - **The Tide Chart:** A single authentic data visualization -- a real tidal curve for the visitor's nearest coast (or, if geolocation is declined, for Incheon by default) -- drawn as a thin line wandering across the bottom strip of the entire panorama. It is the site's spine. **Textures:** - A base paper texture (subtle, #f4ede1 with 0.03 noise) underlies every light-mode stratum. - Water-surface caustics -- animated as a 3s-looped SVG turbulence displacement -- appear as a faint overlay on hero compositions. - A 0.04-opacity film-grain layer sits above everything. ## Prompts for Implementation **Narrative architecture:** The site is one continuous **horizontal panorama**, rendered as a single long `
` element translated on the X-axis using `transform: translate3d()` in response to wheel events and touch gestures. Vertical movement within each hour band translates the same panorama additionally on the Y-axis, cycling through five depth strata. Use CSS custom properties (`--time-of-day`, `--depth-stratum`) updated on a RAF loop and on scroll; let CSS do the visual interpolation so the motion is expressive rather than mechanical. **Implementation stack suggestions:** Vanilla HTML/CSS/JS for the shell. GSAP (or bespoke RAF) for the scroll choreography. A small WebGL canvas for the caustics and bioluminescent particle system -- these need GPU work to stay smooth. SVG for all illustrations and the horizon line, the dolphin, the tidal margin, and the tide chart. No frameworks. **Day-cycle without a toggle:** On load, read `Date` and pick the hour palette; interpolate between adjacent hour stops if close to a transition. Re-check every 60s and fade the CSS custom properties for any hour that crosses a boundary during the visit. Do not expose a manual override -- the commitment to real-time is the point. **Horizontal scroll mechanics:** Capture `wheel` events with `preventDefault()` on the desktop, translating `deltaY` into horizontal progress with an easing curve (ease-in-out-cubic applied to wheel accumulator). On touch devices, rotate the mental model: natural swipes become the hour transitions; vertical swipes move through depth. Include a persistent minimap in the top-right corner showing a 180-long-pixel strip with the panorama compressed and the visitor's location as a small dolphin silhouette. **The horizon line:** Render as a single full-panorama SVG ``, positioned absolutely, with its `y` attribute animated by scroll position and hour. Typography either sits above (`align-items: flex-end`) or below (`align-items: flex-start`) the horizon in its hour band -- use a mixin to express this preference per composition. **Depth transitions:** When the visitor scrolls downward into a deeper stratum, the whole viewport's background lerps toward the stratum's color via a CSS variable; typography fades its sibling strata while the current stratum blooms in; particle density increases; audio ambience (optional, opt-in) crossfades from surface breeze to muffled deep-water rumble. **Typography as current:** Every large type element subtly drifts on a flow-field so that it appears to be borne on a slow current. Amplitude is small (+/- 3px), period is long (8-12s), and phase is randomized per element. This is the site's characteristic breath. **Cursor-as-fish:** On hover-capable devices, replace the cursor with a 12px silhouette fish SVG that follows the actual cursor with a spring-damped lag. The fish rotates to face the direction of motion. When the cursor is still for 2s, the fish performs a lazy circular drift. On tap-capable devices, this is disabled. **Storytelling over CTAs:** There are no "Sign up," "Learn more," "Get started" surfaces. The visitor enters the panorama and moves through a day. If the site represents a real project or writer, the relevant links appear only at the 영시 (zero hour) band, after the full day has been traversed -- as a kind of coda. **Avoid CTA-heavy layouts, pricing blocks, and stat grids entirely.** **Sound design (optional, must be muted by default):** A small speaker icon in the tidal margin, when activated, introduces a six-layer ambient bed that mixes differently in each hour band -- distant gulls at dawn, sizzling cicadas at noon, buoy bell at dusk, whale song at night. The layers crossfade with hour transitions. Silence is always one click away. **Motion principles:** Everything moves slowly. Even the fastest animation on the site takes 600ms. The tidal margin's foam takes 12s to complete a cycle. The dolphin rotates once per hour. This is a site that rewards patience; it does not compete for the visitor's attention, it earns it through time. **Accessibility of feel (not compliance, per brief):** Prefer reduced-motion users can still have the day-cycle palette and static compositions; the horizontal panorama collapses to a vertical scroll with the same content ordering. This is aesthetic graciousness, not a checklist item. ## Uniqueness Notes **Differentiators from other designs:** 1. **Real-time day-cycle as the organizing principle.** No other design in the portfolio commits to the system clock as a narrative stance. The visible palette is dictated entirely by the hour the visitor arrives, with no override. This turns every visit into a different site without a CMS -- the time itself is the content. 2. **Horizontal-scroll panorama mapped to a day, with vertical depth.** The portfolio shows horizontal-scroll at only 20% frequency, and almost none of those treat the horizontal axis as **narrative time** combined with a vertical **depth** axis. This 2D navigation (time X depth) has no peer in the portfolio. 3. **Sincere seapunk.** Chrome dolphins, oil-slick gradients, waveform bitmap ribbons -- the vocabulary of 1990s seapunk kitsch -- executed with museum-grade seriousness rather than irony. The aesthetic tag "seapunk" appears in the seed vocabulary but is absent from the frequency analysis (0%), making this a genuinely unused lane. 4. **Underused aesthetic combinations.** The design foregrounds **ethereal (7%)**, **watercolor (7%)**, **blobitecture (2%)**, and **surreal (20%)** traits together, combined with **organic-flow (15%)** layout and the near-unused **wave-forms (2%)** and **water-bubbles** motifs. This cluster is not represented in any completed design. 5. **Typography as current, not content.** Every display type element drifts on an invisible flow-field as though borne on water. This is a treatment of type as **medium rather than message** that no other design applies systematically. 6. **Tide clock grounded in real lunar periodicity.** The tidal margin and foam rhythm run on a 12h25m cycle, not a 12h. This is a detail most visitors will never notice but that gives the site a subconscious correctness -- it feels like the sea because it obeys the sea. 7. **AVOIDED overused patterns.** Explicitly avoids: **corporate (87%)**, **card-grid (92%)**, **centered (85%)**, **photography-dominant (92%)** treatment, **mono-heavy (87%)** typography. Here photography is sparse and duotoned; mono is used only as marginalia; cards are replaced by specimen frames; the composition is free-form organic-flow rather than centered or gridded. 8. **Chosen seed:** `seapunk` -- with surreal-dreamscape and ethereal-calm modifiers, drawn from the seeds.json vocabulary. The Planned Seed governs the kitsch-reverence dialectic at the heart of the design.