# Design Language for bada.systems ## Aesthetics and Tone 바다 (bada) is the Korean word for "sea" -- not the romantic postcard sea of Mediterranean holidays, but the deep, working East Sea that stretches from the Korean peninsula into the Pacific: gray-green, heavy with salt, full of ferry schedules and fish-market neon and coastal radar stations. The "systems" suffix turns that sea into a technical domain: the sea as infrastructure, as a computational substrate, as the world's oldest distributed system. bada.systems is therefore designed as a **control room at the bottom of a shallow coastal shelf** -- somewhere between a marine research station, a 1990s seapunk zine, and a harbor-master's console with barnacles growing on it. The tone is **seapunk by way of saltwater brutalism**: the kawaii dolphins and Windows 95 gradients of classic seapunk are present, but they have been weathered. Chrome has oxidized into patina. The iconic checkerboards have been stained by algae. Sparkle filters have sedimented into grainy phosphorescence. The result is a site that feels like it was hosted on a Tripod page in 1998, then left underwater for twenty years, then recovered and re-hosted on a modern CDN without ever being cleaned. The surface is playful and nostalgic; the undertow is mysterious and moody. Every interaction should feel like prying open a rusted hatch and finding a perfectly preserved diagram inside. Emotionally, the site inhabits a space that is simultaneously wistful and operational. Wistful because it treats computing as a lost marine biome; operational because it is pretending to be a working monitoring dashboard for that biome. Users are not visitors -- they are night-shift operators who have been assigned to watch the sea systems, and whose only company is a slow dolphin cursor and the hum of a CRT tide monitor. ## Layout Motifs and Structure The layout is **blobitecture + hud-overlay**: two underused motifs (6% and 6% in the existing portfolio) fused into a single architecture. The primary content lives inside **soft organic blobs** -- irregular, liquid-cornered shapes drawn with SVG `` elements using `morphSVG`-style interpolation -- that float and slowly breathe against a deep cyan substrate. Layered on top of these content-blobs is a **console HUD**: thin 1px hairline grids, compass roses, bearing marks, coordinates in decimal-degree notation, and a persistent "sonar frame" that runs around the entire viewport like a porthole. The structural spine is not vertical scrolling; it is a **horizontal-scroll** journey (24% usage, still underused relative to vertical defaults) that moves the viewer through **five tide stations**, each a full viewport wide: 1. **Station 00 / Surface** -- The opening. A single enormous content-blob containing the bada.systems wordmark, suspended in a sea of drifting particulate matter. The HUD frame reports "DEPTH: 0.0m" in its top-left corner. Sun shimmer plays across the top 30% of the viewport. 2. **Station 01 / Thermocline** -- A multi-blob formation. Each blob carries a single capability of the system (routing, storage, synchronization, messaging, observability) written as a short technical poem rather than a bullet list. The blobs are connected by thin braided "current lines" that flow between them. HUD depth reads between 15m and 40m. 3. **Station 02 / Wreck Site** -- Scattered rectangular debris of older web aesthetics: a small spinning GIF-style dolphin, a marquee of fake error messages from drowned servers, a broken-grid fragment of a 1999-style navbar. This is the site's archival and philosophical layer. HUD depth: ~120m. 4. **Station 03 / Abyssal Plain** -- A nearly-empty viewport. One tiny blob in the lower third carries the contact affordance; the rest is deep cyan-black negative space. Occasional bioluminescent particles drift up from below. HUD reads "DEPTH: 1,840m / PRESSURE: 184 bar / LIGHT: 0.0 lx." 5. **Station 04 / Benthic Archive** -- The "footer" reimagined as sediment layers. Horizontal strata of thin type, each layer holding one category of metadata (credits, stack, coordinates, last-modified, ferry schedule joke). The strata subtly compress and decompress as the user nears them. A secondary vertical axis is available: at any station, pressing the down arrow or scroll-down gesture **dives** into a detail view of the current blob -- the blob grows to fill the viewport, its contents expand, and the HUD depth counter increments rapidly. Escape surfaces back. Grid mechanics: 12-column on the HUD overlay (hairlines only, never filled), no grid for the content-blobs themselves -- they are positioned by absolute coordinates in a coordinate space whose origin is the center of the current station. All blobs are slightly different shapes; **no two blobs in the entire site share a silhouette**. ## Typography and Palette ### Typography (Google Fonts only) - **Display / Wordmark / Station Headers**: **"Syne"** -- a contemporary display sans with soft, slightly swollen letterforms that read as organic without being cute. Used at clamp(4rem, 11vw, 12rem) for station headers and the primary wordmark. Tracked at -0.02em. Syne's gentle curvature mirrors the blob silhouettes; its weight range (400--800) gives room for dynamic weight-shifting on scroll. - **Body / Poem Text**: **"Fraunces"** variable, optical size 9--144, soft axis turned up. Fraunces is a serif with a ball-terminal, old-style warmth that reads well at small sizes but feels literary at large ones. Used for the technical poems inside the content-blobs at 1.0625rem / 1.65 leading, and for any pull-quote at clamp(1.5rem, 3vw, 2.75rem). Fraunces against a dark cyan substrate takes on a phosphorescent quality -- like text printed on an aging nautical chart. - **HUD / Technical Readouts / Coordinates**: **"DM Mono"** -- a monospace with open apertures and a distinct personality at small sizes. Used at 0.6875rem / 0.875rem for all HUD chrome: depth readings, coordinates, bearing, pressure, timestamp. Always uppercase, letter-spaced at 0.08em, color #6FC3D4 at 70% opacity. DM Mono is chosen over the ubiquitous JetBrains/Space Mono (mono is 90% overused in the portfolio; the typographic choice must still be mono-category because the HUD demands it, but DM Mono is a less-taken path within that category). - **Archival / Wreck Site Fragments**: **"Unifraktur Maguntia"** (Google Fonts blackletter) -- used sparingly, only for the "drowned server error messages" at Station 02. Each fragment of blackletter is treated as an artifact, set at 1.25rem, half-opacity, sometimes rotated 3--7 degrees. ### Palette (ocean-deep, underused at 6%) - `#041E2A` -- **Abyss Ink** -- the primary background. Deep teal-black, slightly warmer than pure black, used for 70% of the canvas. - `#0A3949` -- **Thermocline** -- mid-depth water. Used for the blob fills at surface-level stations and for gradient transitions between stations. - `#16727D` -- **Kelp Teal** -- the working mid-tone. Primary structural color for HUD hairlines, blob outlines, and inactive UI. - `#6FC3D4` -- **Foam** -- desaturated pale cyan. All HUD text, coordinate readouts, and fine chrome. - `#F2E6C9` -- **Sailcloth** -- a warm off-white with a slight yellow cast, reading as aged paper or bone. Body text, wordmark, and high-emphasis type. - `#E85C3C` -- **Buoy Red** -- a single, unapologetic warning-beacon orange-red. Used for exactly one thing per viewport: the current station marker, or an error, or a live indicator. Never decorative. - `#B6F0A3` -- **Bioluminescence** -- a ghostly yellow-green used only for interactive hover states and drifting particles. Glows via `filter: drop-shadow(0 0 12px #B6F0A3)`. - `#8E6B9E` -- **Oil-on-Water Violet** -- reserved for the seapunk accent moments: the rim-light on the wreck-site debris, the dolphin cursor's iridescent belly, the Unifraktur blackletter ghost-glow. No gradient backgrounds. (Gradient is 98% overused.) Where color transitions occur, they are produced by layered blob fills with `mix-blend-mode: screen` or `lighten`, not by CSS `linear-gradient`. This is a deliberate constraint. ## Imagery and Motifs **No photography.** (Photography is 94% overused; this site rejects it entirely.) Every visual element is constructed from **SVG, Canvas, and CSS**. The imagery system has five components: 1. **The Blob Lexicon** -- A hand-authored set of ~20 unique blob silhouettes stored as SVG paths. Each blob is a closed bezier curve with 6--9 anchor points. On load, each blob is assigned a subtle **breathe** animation: 6--9 second period, sinusoidal scaling of the anchor points inward and outward by 2--4 pixels each. The effect is that every blob is perpetually, almost imperceptibly alive. 2. **The Sonar Frame** -- A persistent SVG overlay that runs around the viewport like a porthole rim. It contains: compass rose in the top-right corner, a horizontal bearing strip along the top edge (tick marks every degree, labeled every 10 degrees), a vertical depth strip along the left edge (tick marks every meter, labeled every 10m, scaled to the current station's depth), and a small "ping" radar in the bottom-right that sweeps once every 4 seconds leaving a fading green trail. 3. **The Dolphin Cursor** -- Replacing the standard cursor on desktop: a tiny SVG dolphin (12px long) that follows the mouse with a spring-damped lag of ~80ms. When idle for >3 seconds, the dolphin does a small loop. When hovering interactive elements, the dolphin pauses and wags its tail fin twice. This is the site's most overtly seapunk element, and it is kept small and rare enough to feel like a secret rather than a gimmick. 4. **Generative Particulate** -- A WebGL (or `` 2D fallback) layer at `z-index: -1` renders drifting marine particulate: 400--800 tiny particles (1--3px), each with its own vertical drift velocity, horizontal sway amplitude, and opacity oscillation. At deeper stations, some particles become bioluminescent (color shifts to #B6F0A3 and glows). Density decreases with depth. This layer never pauses, even when the viewport is still. 5. **Wreck Site Artifacts** -- Hand-drawn (in SVG) iconography appearing only at Station 02: a broken Netscape Navigator "N" half-buried in sediment, a fragment of a rotating-skull GIF rendered as a CSS animation, a fake MIDI-player widget with the play button stuck, a "Best Viewed in 800x600" badge rusted green. Each is paired with a Fraunces-set caption in the voice of a marine archaeologist logging the find. Motifs that persist throughout: **wave-forms** (10% usage, slightly underused) appear as subtle horizontal bands of opacity in the background, moving at different speeds to simulate a layered water column. **Crystalline** (12%) appears only at Station 04 as sediment-layer chevrons. **Nature** (22%) is present in the overall biophilic palette but never as a literal leaf or flower. ## Prompts for Implementation **Build this as a horizontal-scroll narrative, not a scrolling landing page.** The user lands on Station 00 and their only forward affordance is to press right-arrow, swipe right, or scroll-right with a trackpad/shift-scroll. The site snaps between stations using a scroll-snap container (`scroll-snap-type: x mandatory`) with custom easing. Each station is a full viewport (`100vw x 100vh`) and the total site width is `500vw`. Implement with CSS scroll-snap as the baseline; layer on a JS enhancement that adds keyboard navigation, a station indicator, and smooth inertial transitions. **The blobs must breathe.** Do not use static SVG paths. Either animate path `d` attributes with `requestAnimationFrame` and a perlin-noise-driven anchor-point offset, or use a CSS `@keyframes` on `transform: scale()` combined with a `filter: url(#turbulence)` SVG filter whose `baseFrequency` oscillates. The second approach is cheaper and looks remarkably organic. Every blob must be breathing at slightly different rates so the site never feels synchronized. **Dive interaction for depth.** On each station, down-arrow or scroll-down triggers a dive: the central blob grows to 85% of the viewport using a spring animation (Popmotion-style, `stiffness: 120, damping: 14`), its silhouette softens, its internal content (previously hidden) fades in over 600ms with a stagger, and the HUD depth counter rapid-increments like a descending altimeter. Escape or up-arrow reverses. Storytelling mechanic: each dive reveals the "detail" layer of that blob's content, turning a one-line poem into a full technical explanation. **HUD must feel alive, not static.** The depth counter should gently fluctuate (+/- 0.2m) even when stationary, as if the vessel is bobbing. The compass rose should drift by a fraction of a degree per second, as if on a slow current. The bottom-right radar ping should fire every 4 seconds; occasionally (1 in 20 pings) it should "detect" something -- a small green dot appears at a random radial position and fades out over 2 seconds, with no explanation offered. **Phosphorescence for interactive states.** Instead of underline-on-hover, every hoverable element emits a soft `box-shadow: 0 0 16px 2px #B6F0A3` or `filter: drop-shadow()` bioluminescent glow that fades in over 240ms. Click states briefly intensify the glow and trigger a small ripple emanating from the click point -- three expanding rings, 1px stroke, fading from #B6F0A3 to transparent over 600ms. (Ripple is 24% used; it earns its place here because bioluminescence IS a rippling phenomenon, not because it is a default effect.) **Kinetic typography on station transition.** When moving between stations, the station header wordmark does a variable-font dance: its weight axis animates from 800 to 400 and back, and its optical-size axis animates to make the letters "narrow" slightly as they exit and "widen" as they enter. This is a single 1.2s animation synced to the horizontal scroll motion. **Seapunk easter egg.** After the user has visited all five stations at least once, a small dolphin GIF-style icon appears in the bottom-left of the HUD. Clicking it plays a brief (2 second) synthesized whale-call via the Web Audio API and triggers a one-time screen-wide shimmer: every blob momentarily pulses bioluminescent-green in a staggered cascade from left to right. This is the site's reward for exploration. **Absolutely avoid:** pricing tables, feature-grid cards, "trusted by" logo walls, stat counters ("99.9% uptime" etc.), testimonials, a traditional top navbar, a CTA button that says "Get Started," any hero section with a photograph of a person or a laptop, cookie-banner-style bottom bars, a newsletter signup, and a footer with "Products / Company / Legal" columns. The site is a narrative experience, not a funnel. **Ambient audio (optional, muted by default).** A single ambient loop: gentle pressure hum + occasional distant sonar ping + very soft creaking-hull noises. A small muted-speaker icon in the HUD toggles it. If enabled, the audio's low-pass filter cutoff is tied to the current station's depth -- deeper stations muffle the high frequencies, simulating water-column absorption. **Performance note (aesthetic, not metric):** the site should feel **cool and slow** -- animations favor long durations (600ms--1400ms), easing favors `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-quint) for surfaces and `cubic-bezier(0.68, -0.55, 0.27, 1.55)` (back-ease) for the dolphin cursor. Nothing pops; everything settles. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Seapunk aesthetic at 8% usage, deployed literally-but-weathered.** No other site in the portfolio commits to the seapunk visual lexicon (dolphins, chrome, checkerboards, ocean gradients); most avoid it because it is considered dated kitsch. bada.systems embraces seapunk as a serious design language by letting it corrode. The dolphin cursor, the Unifraktur blackletter, the fake drowned-server error messages -- these are seapunk artifacts recontextualized as marine archaeology. The kitsch is treated with reverence, not irony. 2. **Blobitecture + hud-overlay fusion (6% + 6%).** These two layout motifs are each individually rare in the portfolio and have never been combined. The result is a site whose inner content is all soft organic shapes while its outer chrome is all hard technical grid -- a tension that directly maps the content (a "sea system": organic substrate, technical interface). 3. **Ocean-deep palette (6%) without a single CSS gradient.** Gradient is 98% overused in the portfolio. bada.systems achieves all color transitions through blended SVG blob fills with `mix-blend-mode`, proving that the ocean-depth feeling does not require a single `linear-gradient`. This is a deliberate technical constraint as design statement. 4. **Horizontal scroll as five tide stations (24% usage), with a perpendicular dive mechanic.** Horizontal scrolling is uncommon but not rare; the unique addition is the second axis -- a **dive** that takes the user perpendicular to the scroll direction into the detail layer of whatever blob is currently foregrounded. This produces a 2D navigational metaphor (longitude + depth) that no other site in the portfolio uses. 5. **No photography whatsoever (rejecting the 94% norm).** Every visual element is generated: SVG blobs, canvas particulate, WebGL shimmer, CSS ripples. This is not a stylistic choice for atmosphere; it is a structural refusal of the photographic realism that dominates the portfolio. 6. **Typography combining Syne + Fraunces + DM Mono + Unifraktur Maguntia.** This exact combination does not appear in any other design. Syne and Fraunces specifically avoid the overused Inter/Space Grotesk/JetBrains trinity; Unifraktur's blackletter presence is unique in the portfolio and serves a narrative purpose (archival artifacts) rather than decorative. 7. **Korean-language etymology as foundational concept.** The site's identity begins with the Korean word 바다 and treats the ".systems" TLD as a translation operator ("sea" → "sea infrastructure"). The design is unintelligible without knowing the name is Korean -- or rather, it is legible but loses its central poetic layer. This makes the site culturally specific in a way most domain-agnostic designs are not. **Chosen seed / style:** `seapunk` (from `tools/design/seeds.json`), extended with `blobitecture fluid layout` for structure and `ocean deep calming spa` palette re-cast as ocean-deep-working rather than ocean-deep-spa. The seapunk seed was selected because its 8% aesthetic frequency signals it is underused, and because the Korean name 바다 makes an ocean aesthetic thematically inevitable; the reinterpretation as "seapunk weathered into saltwater brutalism" is what prevents the design from collapsing into cliché. **Avoided patterns from frequency analysis:** corporate (90%), gradient (98%), warm palette (96%), scroll-triggered default (94% -- replaced with scroll-snap horizontal stations), card-grid (94%), centered hero (88%), photography (94%), mono typography default picks (90% -- used DM Mono specifically to dodge the JetBrains/Space Mono defaults), mysterious-moody without whimsy (42% -- tempered here by the dolphin cursor and seapunk kitsch), and CTA-heavy funnel layouts generally.