# Design Language for bada.moe ## Aesthetics and Tone `bada.moe` is the bridge between two worlds that should never have met: Korean *바다* (ocean) and Japanese *moe* internet sentimentality, fused inside the **calm-serene cyberpunk** of a deep-sea research outpost. Picture **Bathysphere Nine** — a fictional submersible that dropped below the photic zone in 1987 and never resurfaced, now broadcasting a soft, polite, chiptune-flavored telemetry feed to anyone who tunes in. The aesthetic is "cyberpunk after the riot has ended" — neon survives, but the streets are quiet, the rain is warm, and the operator on shift speaks in a low, careful voice. The page feels like the **passenger window of a slow descent vehicle**. There is no urgency. The HUD ticks once per second. Pressure gauges drift. Bokeh lights — bioluminescent plankton, or the running lights of unseen sister vessels — float past at parallax depths. The mood is the particular *calmness of being too deep to be rescued*, reframed as comfort. Cyberpunk usually screams; this one *hums*. The soundtrack in the visitor's head should be a held synth pad over distant sonar pings. Inspirations: - The interior monitors of the Nostromo (Alien, 1979) — green phosphor, generous black margin, wide-character labels. - *Subnautica*'s base interiors viewed from outside through aquarium glass. - The opening of *Ghost in the Shell* (1995) — but slowed 40%, and the rain is replaced with marine snow. - Yuri Suzuki's sound-art consoles: tactile, oversized, friendly hardware. - Korean ferry-port night photography — sodium lamps reflected on black water. Personality voice: a soft-spoken vessel AI named **MOE-7** that reports findings with gentle precision and occasional politeness particles ("readings are stable, please observe at your leisure"). The page is not selling anything. It is *keeping you company while you look out the window*. The cyberpunk vocabulary (HUD chrome, monospace coordinates, scan-lines, CRT bloom, terminal cursors) is present but **dialed to 30%** — used the way moonlight is used, not the way a billboard is used. Negative space is treated as ocean: vast, cold, and trustworthy. ## Layout Motifs and Structure **F-pattern as porthole sweep.** The visitor's eye enters top-left at the vessel callsign / depth readout, sweeps right along a horizontal HUD strip, returns left to a vertical instrument column, sweeps right again at a mid-page bulletin, and finally drops down the long left-margin telemetry rail. This is a deliberate, slow F — paced so that each sweep coincides with one breath. Eye-tracking heatmaps of this layout would resemble the letter *F* tilted slightly clockwise, like a vessel listing in current. **Three-rail vertical architecture:** 1. **Left rail (240px, sticky):** the *instrument column* — depth, heading, hull pressure, oxygen percentage, time-since-surface. Updates live but slowly. Always visible. This is the visitor's anchor. 2. **Center channel (fluid, max 880px):** the *viewport* — the actual window. Full-bleed bokeh-background imagery sits behind translucent content cards. Each card is one "log entry" from MOE-7. 3. **Right rail (collapses below 1100px):** the *advisory column* — soft sidebar holding sonar minimap, current-depth biology notes, and a single small "transmission signal" indicator that pulses once every six seconds. **Parallax depth is literal, not decorative.** Background layer drifts at 0.15× scroll (deep currents). Mid-layer bokeh at 0.45× (mid-water plankton). Foreground HUD chrome at 1.0× (fixed to the vessel). A subtle 4th layer of *suspended particulates* drifts at 1.05× — slightly faster than scroll — to give the sensation of *the vessel itself moving down* while content scrolls up. This counter-parallax is the signature trick. **Section transitions are pressure-zone changes.** Each major section is labeled with a depth (`-040m EPIPELAGIC`, `-280m MESOPELAGIC`, `-1100m BATHYAL`, `-3800m ABYSSAL`). As the visitor scrolls, the ambient background hue shifts darker, the bokeh thins, and the type weight increases. The page is a journey downward, not a list of features. **Grid:** 12-column on the center channel, but only 7 columns are ever used at once — the asymmetry creates a constant feeling of *off-center ballast*, as if the vessel is always correcting. Left margin is slightly wider than right, by a 1.2:1 ratio. This is unusual and the visitor will not consciously notice — they will only feel that the page "leans into them." **No CTA buttons. No pricing block. No stat-grid.** Where a conventional site would put a "Sign Up" button, this site puts a *transmission timestamp*. Where a conventional site would put a hero-with-3-features, this site puts a porthole with one slowly-drifting jellyfish silhouette. ## Typography and Palette **Fonts (all available on Google Fonts):** - **Display / large numerals:** **VT323** — the soul of CRT terminals, used for depth readouts, coordinates, and section headings. Set at 72-128px with 0.04em tracking. This is the *retro-display* anchor. - **Subhead / labels:** **Major Mono Display** — for HUD field labels (`DEPTH`, `HDG`, `O2`, `HULL`). Always uppercase, always wide-tracked at 0.18em. - **Body:** **IBM Plex Sans** — humanist, calm, reads like an operating manual that someone actually wanted you to read. 16px / 1.7 line-height. - **Long-form / log entries:** **IBM Plex Serif** — used sparingly for MOE-7's "personal" transmissions (the moe particles speak through the serif). - **Accent / Korean glyphs:** **Gowun Batang** — for the literal characters 바다 when they appear, treated as decorative ink-stroke punctuation rather than text. **Palette — Ocean-Deep (extended):** | Role | Hex | Usage | |------|-----|-------| | Abyssal Black | `#020714` | Deepest background, below 3800m sections | | Bathyal Navy | `#0A1933` | Primary background — the default "ocean" | | Mesopelagic Slate | `#142B47` | Section panels, content card base | | Hull Steel | `#1F3A5C` | Borders, dividers, inactive HUD chrome | | Sonar Cyan | `#3FD4D4` | Active HUD elements, depth numerals — primary accent | | Bioluminescent Mint | `#7FFFD4` | Highlight glyphs, transmission indicator pulse | | Plankton Glow | `#B8FFE8` | Bokeh particles (with 0.4 opacity) | | Warning Coral | `#FF6B6B` | Used exactly *once* per page — pressure warning, never repeated | | Pearl Mist | `#E8F1F5` | Body text on dark — never pure white, always slightly cool-warm | | Phosphor Green | `#4DFFB3` | CRT overlay scanline tint, used at 0.06 opacity over imagery | Ten colors total. The full page never uses all ten in the same viewport — a maximum of five colors are visible at any given scroll position. The transition between palettes as the visitor scrolls into deeper "zones" is the chromatic equivalent of a slow pressure equalization. **Type-and-color rule:** numerals are always Sonar Cyan over Bathyal Navy. Body copy is always Pearl Mist. MOE-7's transmissions get a 1px Bioluminescent Mint left-border. The Warning Coral never touches text — it only appears as a single 4px circular indicator that blinks once when the visitor first scrolls past 50% of the page (suggesting "you have crossed the no-return depth"). ## Imagery and Motifs **Primary imagery: bokeh-background, exclusively underwater-coded.** No stock photography. No people. No products. The center channel is always backed by: 1. A full-bleed **deep-water bokeh field** — out-of-focus circular highlights ranging 4-40px, drifting in slow Brownian motion. Generated procedurally in canvas, not images. Density: 0.3 lights per 1000px². Each light has a faint trailing comet-tail in the direction of drift, suggesting current. 2. **Bioluminescent silhouettes** at low opacity (0.12-0.18) — vampire squid, lantern fish, siphonophore chains, glass octopus — drifting across the background at depth-appropriate sections. Each silhouette is hand-drawn line art, not photograph. They never face the viewer; they always pass *through* the frame, suggesting indifference. 3. **Marine snow particles** — tiny 1-2px white-mint dots falling at constant velocity across all sections. This is the connective tissue between zones. **Sci-fi HUD motif vocabulary:** - **Crosshair reticles** at center of every porthole element — thin 1px Sonar Cyan, with corner-bracket framing (not closed circles). - **Tick-mark scales** on the left and right edges of the viewport — measuring nothing in particular, labeled in invented units (`Δ-7.2`, `pH 8.04`, `kPa 11200`). - **Wireframe sonar minimap** in the right rail — a slowly rotating circular sweep with three faint blips. The blips never resolve into anything. They exist only as ambient companionship. - **Boot sequence on first paint:** for 1.4 seconds the page renders as if the HUD is initializing — `SYS BOOT…`, `SONAR LOCK…`, `MOE-7 ONLINE…` — before the actual content fades in. This is the only "loading" moment; afterward the page is contemplative. - **Corner-bracket frames** (┌ ┐ └ ┘ in 1px lines, 12px arms) around content cards — never full borders. The bracket suggests "this is a sensor reading," not "this is a button." **Motifs to recur:** - The **transmission glyph** — a small hand-drawn icon resembling an old radio antenna with three concentric wave arcs. Appears beside every MOE-7 message. - **Korean wave character** 바 set in Gowun Batang at very large scale (300px+) and very low opacity (0.04) as a watermark behind the deepest section. - **Single, recurring jellyfish silhouette** that reappears in three different sections at different scales — the visitor will eventually notice "oh, it's the same one." This is the *moe* of the page: a creature that follows you down. **Forbidden imagery:** no photographs of people, no product mockups, no stock illustrations of arrows/checkmarks, no skyline silhouettes, no laptops, no UI screenshots, no "dashboard" visuals. ## Prompts for Implementation **Narrative principle:** treat the page as a single continuous descent. The visitor is not "browsing features" — the visitor is *sitting in the observation seat of Bathysphere Nine, watching things drift past the window for ten minutes*. Every implementation choice should reinforce this. If a developer is tempted to add a "Get Started" button, they have misread the brief. **HTML/structure:** - Single long-scroll page. No multi-page navigation. The "menu," if any, is a vertical depth-scale on the far left edge that doubles as a scroll indicator — clicking a depth jumps the camera (smooth scroll, easeInOutCubic, 1800ms duration) to that zone. - Each zone is a `
` with `data-depth="-280"` etc. JS reads this to drive the chromatic transition. - MOE-7's transmissions are `
` blocks with a timestamp (`02:14:07 UTC+9`), a sender label (`MOE-7 :: PASSIVE OBS`), and the message body. **CSS:** - `:root` custom properties for each depth-zone palette. Body class swaps on scroll via IntersectionObserver — CSS handles the actual color crossfade with a 2400ms cubic-bezier transition on `background-color` and `color`. - All HUD chrome rendered with **CSS-only** SVG-style (corner brackets via four absolutely positioned 12px-square divs with 1px borders on two sides each). No image assets for chrome. - A single 0.06-opacity scanline overlay (repeating-linear-gradient at 0deg, 2px) fixed over the entire viewport. Toggleable via a tiny "CRT" button in the bottom corner — defaults ON. - Subtle CRT bloom on numerals: `text-shadow: 0 0 8px currentColor, 0 0 18px currentColor` at low opacity blends. **JS / motion (this is where the page earns its rent):** - **Bokeh canvas** — independent `` element behind everything, ~120 particles, each with position, velocity (v.y = -0.08 to -0.22 px/frame, v.x = sine drift), radius, hue. Particles re-spawn at bottom when they exit the top. requestAnimationFrame, 60fps, falls back gracefully on prefers-reduced-motion (particles freeze, opacity drops to 0.06). - **Counter-parallax particulates** — second canvas with smaller, faster particles moving *up* faster than scroll, creating the "we are sinking" illusion. - **HUD telemetry** — depth readout in the left rail increments slowly (one digit per 220ms in the smallest decimal place) so the page is *always* showing motion even when the visitor is still. Heading drifts ±0.4° on a 14-second sine. Hull pressure ticks up monotonically — never resets. - **MOE-7 transmissions arrive on scroll**, not on page-load. As the visitor enters a new zone, the next transmission types in character-by-character (40-60ms per char, with brief pauses on punctuation) using a typewriter effect. The `▌` cursor remains blinking after. - **Sonar sweep** in the right rail — SVG, 6-second rotation, with three randomized blips at fixed radii that fade in/out over 4-second cycles. - **One easter egg:** if the visitor stops scrolling for 90 seconds, MOE-7 transmits a single line: *"thank you for staying."* Once. Never again in the session. **Performance & restraint:** - The page should feel weightless even though it's doing real animation work. Use `will-change` sparingly and only on the bokeh canvas. - All transitions are slow (1.2s+ defaults). Nothing snaps. Nothing pops. Anything fast feels wrong here. - `prefers-reduced-motion` fully respected: particles freeze, parallax disables, but the typewriter and color-zone transitions persist as fade-only. **Avoid (load-bearing):** - No CTA-heavy hero. No pricing tiers. No feature-cards-with-icons. No testimonial carousel. No team grid. No FAQ accordion. No newsletter signup. No "as seen in" logo bar. No stat counters with `+` symbols. No comparison tables. No social proof. No urgency. No scarcity. No conversion funnel. **The page is not trying to convert. It is trying to keep the visitor company.** ## Uniqueness Notes **Chosen seed:** `aesthetic: cyberpunk, layout: f-pattern, typography: retro-display, palette: ocean-deep, patterns: parallax, imagery: bokeh-background, motifs: sci-fi-hud, tone: calm-serene` **Differentiators from other designs in the registry:** 1. **Calm cyberpunk is rare.** The frequency analysis shows cyberpunk at 16% but it's nearly always paired with energetic / bold-confident / edgy tones. This site pairs cyberpunk with **calm-serene (only 6% in the corpus)** and with the *quietest* possible parallax usage. The result is a cyberpunk that *whispers*. No competing design in the corpus does this. 2. **F-pattern layout is genuinely underused (2%).** Almost all sites in the registry default to centered (81%) or full-bleed (87%) or card-grid (67%). Committing to a strict F-pattern with a sticky left instrument rail and offset center channel is structurally distinct from the prevailing centered/asymmetric defaults. 3. **Bokeh-background as the *only* imagery (3% in corpus).** No photography (97% corpus default), no product shots, no people. The entire visual identity is bokeh + line-art silhouettes + procedural particles. The page has zero raster images. 4. **Counter-parallax (the suspended-particulates layer moving faster than scroll)** is a technique I have not seen referenced in any sibling design. This single trick produces the "the vessel itself is moving down" sensation that anchors the entire conceit. 5. **No CTA, no pricing, no stat-grid, no testimonials** — the brief explicitly forbids these and the design honors it by replacing the conventional "above-the-fold conversion zone" with a *transmission timestamp and a slowly drifting jellyfish*. 6. **Bilingual semantic load:** the domain *bada* is Korean for "ocean" — almost no other design exploits the literal meaning of its domain string. The 바 watermark glyph at 0.04 opacity is a quiet acknowledgement that this site knows what its name means. Combined with the *moe* TLD, the page sits at a Korean-Japanese internet-culture intersection that is itself unusual. 7. **MOE-7 as a personality.** Most sites in the corpus are voiceless — they describe a product. This site has a narrator. The narrator is a soft-spoken vessel AI. Every piece of body copy is a transmission, not a marketing line. This is closer to interactive fiction than to landing-page copywriting. 8. **The depth-zone color shift is structural, not decorative.** Most parallax sites in the corpus use parallax for "fun." Here, scrolling literally takes the visitor deeper, and the palette darkens accordingly. The mechanic *is* the content. **Patterns deliberately avoided based on frequency analysis:** - **glassmorphism (70%)** — explicitly avoided. No frosted cards. Translucency exists only as ocean opacity, not as UI surface treatment. - **hand-drawn (93%)** — explicitly avoided. The line-art silhouettes are technical, not whimsical. - **gradient (95%)** — used only sparingly and only as vertical depth-fades, never as decorative card backgrounds. - **warm palette (93%)** — fully inverted. This palette is unrelentingly cool. - **photography (97%)** — zero photographs. The corpus is saturated; this site abstains entirely. - **card-grid layouts (67%)** — replaced with a single-column transmission stream. - **cursor-follow (67%) and magnetic (53%)** — avoided. The cursor in this design is a small Sonar Cyan crosshair. It does not follow. It does not magnetize. It just *aims*. - **spring (70%) and stagger (70%) animations** — avoided. Motion here is linear-slow or sinusoidal, never bouncy. Springs are the wrong physics for water at depth. **Patterns deliberately leaned into (underused in corpus):** - **f-pattern (2%)** — committed to as primary structure. - **calm-serene tone (6%)** — committed to as voice. - **bokeh-background (3%)** — committed to as exclusive imagery. - **sci-fi-hud (5%)** — committed to as ornamental vocabulary. - **ocean-deep palette (3%)** — committed to as chromatic identity. - **retro-display typography (6%)** — committed to via VT323 + Major Mono Display. The design is the intersection of six low-frequency choices, which alone makes it structurally distinct from the corpus mean. Every choice reinforces the others: calm tone needs slow parallax, deep ocean needs cool palette, F-pattern needs sticky instruments, retro-display needs CRT bloom, sci-fi-hud needs procedural chrome, bokeh imagery needs no photography. The combination is internally coherent and externally unfamiliar.