# Design Language for bada.moe

## Aesthetics and Tone

bada.moe is a shrine to the Korean word **바다** (*bada*, "sea") built inside the rainbow-tiled foyer of an abandoned 2003 DDR arcade that has flooded with luminous aquarium water. The aesthetic is a deliberate collision of three rarely-paired vocabularies: **seapunk** (the 2011-2013 tumblr micro-genre of dolphins, Windows 95 ripples, and cyan-magenta duotone), **mcbling y2k-futurism** (chrome blobs, lip-gloss highlights, glittering rhinestone cursors, the pink-chrome glamour of 2004 flip phones), and **Korean moe kawaii** (glossy droplet-shaped mascots, heart-shaped bokeh, ASCII kaomoji borders like ♡( ◡‿◡ )). The result feels less like a calming spa and more like a **haunted lisa-frank Trapper Keeper submerged in a bioluminescent tide pool** -- syrupy, over-saturated, weirdly devotional.

The tone is **dreamy-ethereal** but cut with **edgy-rebellious** sugar -- a teenage fan-shrine sincerity that refuses the muted, mature restraint that dominates ocean-themed design. Where other sea sites reach for navy-and-beige calm, bada.moe reaches for **holographic scales, wet-look chrome, and the particular shade of pool-light that flickers on concrete at 2am**. There is a vaporwave melancholy beneath the sparkle: this is the sea as remembered by a 2004 Cyworld minihompy, the Pacific mourned through glittering GIFs. The mood word is *젖은-꿈* ("wet-dream-memory"): saturated, slightly indecent, iridescent.

Inspiration sources: the Azumanga Daioh water-bottle episode, FRUITS magazine street-snaps circa 2002, Hyperbeast seapunk moodboards, Korean **굿즈(goods) packaging** for idol merchandise (pearlescent envelopes, holographic stickers), the inside of a conch shell lit by a blacklight, and the title screen of *Ecco the Dolphin* on Sega CD. Reference palette anchor: **pool-chlorine cyan against cotton-candy magenta** with an emergency drop of **marine-biology research-vessel orange**.

## Layout Motifs and Structure

The site uses a **hexagonal-honeycomb** primary grid (a pattern almost never used in this collection) inspired by the cellular structure of a **medusozoa (jellyfish) epidermis** -- each cell a six-sided chamber containing a fragment of content, webbed together with thin chrome filaments. Sections are arranged as a **horizontal-scroll reef**: the visitor does not descend, they **drift sideways** through five oceanic biomes, each biome a full-viewport hexagonal tessellation that shifts color temperature as the current carries them.

**Primary structure:**

- **The Surface Bloom (biome 1, viewport 1):** A full-bleed hex grid of 37 cells (rings of 1+6+12+18), each cell tiled with a different seapunk-era motif rendered in SVG: a leaping dolphin silhouette, a Windows 95 cursor, a ♡ emoji, a yin-yang, a chrome cherub, the hangul character 바, the hangul character 다, a pearl, a scallop. The central cell holds the site title -- **bada.moe** -- set in an oversized display face with a pearlescent gradient fill. As the visitor moves the cursor, the hex cells tilt slightly toward the pointer (max 8deg rotateX/Y per cell) like surface water disturbed by a fingertip.

- **The Thermocline Corridor (biome 2):** Horizontal scroll enters a narrower ribbon where the hex grid collapses to a single row of larger cells (each 60vh tall). Each cell contains one section of content (About, Words, Sea Log, Mascots, Guestbook). Between cells, **chrome kelp strands** (animated SVG paths) drift upward in slow sinusoidal motion. The background is a vertical gradient from Pool-Chlorine Cyan at the top to Abyssal Indigo at the bottom, suggesting depth while movement is lateral.

- **The Reef (biome 3):** The hex grid returns but **broken** -- cells float at varied depths (z-translations from -40px to +60px), creating a parallax honeycomb. This is the gallery biome: each hex frames a piece of sea-themed ephemera (a scan of a 90s shell-necklace receipt, a pixel-art seahorse, a hand-drawn wave, a Korean 고래(whale) stamp). Cells scale up on hover with a **wet-look specular highlight** sliding across them.

- **The Benthic Archive (biome 4):** A vertical sub-scroll pocket mid-journey. The hex grid rotates to a **pointy-top orientation** and becomes denser (cells 1/3 the size), forming a seabed floor of tiny chambers. Each chamber is a footnote, a kaomoji, or a fragment of diary. The background is near-black with bioluminescent plankton dots (canvas particles) that brighten as the cursor hovers near them.

- **The Guestbook Tidepool (biome 5, final viewport):** A circular arrangement of hex cells forming a pool, with a larger central hex for the contact/subscribe form. The form inputs are styled as **carved-chrome plaques** with a liquid shimmer. Around the pool, kaomoji seagulls (`〜(^▽^〜)`) drift on slow CSS transforms.

Horizontal scroll is implemented with `scroll-snap-type: x mandatory` on biome boundaries but `scroll-snap-align: none` within each biome, so the visitor feels current-like drift punctuated by moments of chamber-stillness. A thin vertical **chrome ruler** on the left edge of the viewport marks depth in fathoms (0, -20, -200, -2000, -11000) -- a fake scientific instrument that grounds the kitsch in mock-rigor.

## Typography and Palette

**Typography:**

- **Display / Hero face:** "Rubik Glitch" (Google Fonts) -- but used SPARINGLY, only for the single "bada.moe" logotype on biome 1 and for numerical depth markers. Its broken, displaced glyphs evoke the scanline tearing of an old LCD aquarium-monitor. Applied at clamp(4rem, 12vw, 10rem) with a holographic background-clip: text gradient (cyan -> magenta -> chrome-silver -> cyan) animated with a 12s linear infinite shift, and a subtle 2px text-shadow in Cotton-Candy Magenta offset diagonally to create a **chromatic aberration wet-screen** effect.

- **Subhead / Biome labels:** "Oi" (Google Fonts) -- a voluptuous, inflated, bubble-letter display face that reads as both **seapunk dolphin-chubby** and **moe kawaii-plump**. Used at clamp(2rem, 5vw, 4rem) with letter-spacing: -0.04em so the bubbles nest against each other like roe (fish eggs). Fill color alternates between Pool-Chlorine Cyan and Cotton-Candy Magenta by biome.

- **Body text (Latin):** "DM Mono" (Google Fonts) -- a geometric monospace with slightly rounded terminals, evoking the `.txt` readme files that shipped inside 2003 winamp-skin zips. Weight 400, size clamp(0.95rem, 1.1vw, 1.1rem), line-height 1.75. Color: Ice-Filament White on dark biomes, Deep-Chrome Ink on light biomes.

- **Body text (Korean):** "Gowun Dodum" (Google Fonts) -- a soft, handwritten-feeling modern hangul face that pairs with the moe sensibility without becoming cartoonish. Used for Korean captions, the recurring word 바다, and kaomoji-adjacent asides. Same sizing as DM Mono, but with letter-spacing: 0.01em.

- **Accent / Kaomoji borders:** "Zen Dots" (Google Fonts) -- a squared pixelly face used at 0.85rem for section dividers rendered as `~ ∽ ♡ ∽ ~ ( ◠‿◠ ) ~ ∽ ♡ ∽ ~` strings in Holographic Scale Lilac.

**Palette (eight colors -- a deliberately maximalist seapunk spectrum, not a muted coastal blend):**

- `#00E5D4` -- **Pool-Chlorine Cyan** (primary / background of biome 1, the exact hex of a 2003 AOL messenger pool-emoji)
- `#FF5AA8` -- **Cotton-Candy Magenta** (primary accent / seapunk-mcbling bridge color, used for hover states and hearts)
- `#B8A6FF` -- **Holographic Scale Lilac** (secondary accent / borders, dividers, kaomoji text)
- `#FFF6E2` -- **Ice-Filament White** (primary body text on dark biomes, slightly warm to suggest beach sand through cold water)
- `#0A1833` -- **Abyssal Indigo** (background of biomes 2 and 4, near-black with a blue cast)
- `#C8D4DE` -- **Wet-Chrome Silver** (chrome fills, kelp strands, form-plaque borders -- a metallic mid-gray)
- `#FF7A2D` -- **Research-Vessel Orange** (emergency accent, used for error states, unvisited-link underlines, and the single cell on biome 3 that marks "current position" -- one drop of orange in a bath of cyan-magenta)
- `#1A0F1F` -- **Deep-Chrome Ink** (body text on light biomes, a plum-black with a purple undertone)

The palette is deliberately **complementary + triadic hybrid** -- cyan vs. magenta vs. orange forms a triad, with lilac softening and chrome-silver + abyssal-indigo providing neutrals. No brown, no beige, no navy-and-cream. This is a Lisa-Frank-meets-deep-ocean assertion that the sea can be **loud**.

## Imagery and Motifs

**Core visual motif: the bada-droplet mascot.** A recurring character rendered in SVG -- a chubby water-droplet with two dot-eyes and a tiny `‿` mouth, wearing a pearl on its forehead like a bindi. The droplet appears at three scales: as the site's fav-cell in biome 1 (centered in a hex cell, 120px), as decorative spacers between paragraphs (24px), and as a cursor-follower that trails the actual cursor with a 180ms lag (using `requestAnimationFrame` lerp, not CSS transitions). The cursor-follower droplet leaves a brief **cyan ripple** on click (expanding ring SVG, 600ms ease-out). Four mascot variants exist: plain droplet, droplet with pearl, droplet with a tiny sailor-hat (for About section), droplet with closed `^^` eyes (for Guestbook).

**Recurring elements:**

- **Seapunk dolphin silhouette** rendered as a single SVG path, used as a bullet point for list items and as a decorative element in the Thermocline Corridor where three dolphins leap across the biome in a slow 8-second loop.

- **Chrome kelp strands:** Animated SVG paths (5 vertical strands per biome 2 and 3) using stroke-dasharray + dashoffset + `<animate>` to undulate. Each strand is a gradient from Wet-Chrome Silver at the root to Holographic Scale Lilac at the tip, giving the impression of light refracting through water.

- **Hex-cell pearl highlights:** Every hex cell gets a small white gradient spot in its upper-left, 15% of cell width, blur(20px), opacity 0.6 -- the CSS equivalent of a lip-gloss specular highlight. This single touch shifts the cells from "abstract geometry" to "wet tactile object."

- **Kaomoji border strips:** Section transitions use horizontal strips of repeating kaomoji set in Zen Dots: `(◡‿◡✿) ~ ♡ ~ 🌊 ~ ( ˘ ³˘)♥ ~ ♡ ~ 🌊 ~` (emoji used sparingly -- only wave and heart). These strips are Holographic Scale Lilac on the dark biomes and Cotton-Candy Magenta on the light ones.

- **The 바다 title pattern:** The two hangul characters 바 and 다 are used as decorative infinity-tile patterns on empty hex cells -- the character 바 in Pool-Chlorine Cyan, 다 in Cotton-Candy Magenta, at 40% opacity, rotated randomly between -15 and 15 degrees per cell.

- **Holographic scales background:** A subtle SVG pattern of overlapping scallop-arcs (fish-scale tessellation) forms the background of biomes 3 and 5, with a `mix-blend-mode: overlay` and an animated hue-rotate(0deg -> 30deg -> 0deg) over 18 seconds -- the scales shift color like a parrotfish flank.

- **Wet-look reflections:** Beneath each hex cell in biomes 2 and 5, a CSS `::after` pseudo-element with `transform: scaleY(-1); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);` creates a **pool-surface reflection** that subtly wobbles via a `filter: url(#wobble)` SVG turbulence displacement map.

NO photography. All imagery is SVG, CSS, or canvas-generated. The closest thing to a "photo" is a hand-illustrated (via SVG path) seashell in biome 3 -- deliberately **flat and flag-like**, not rendered-3d.

## Prompts for Implementation

**Full-screen narrative drift:** The site is a continuous **horizontal voyage through five biomes**. There are no pages, no top-nav menu, no header/footer in the conventional sense. The visitor scrolls **right** (or uses trackpad horizontal-drag / arrow keys) and the sea currents carry them through biome transitions. Use `overflow-x: auto` on the body with `scroll-snap-type: x mandatory` tuned to biome-width (each biome is 100vw). Intercept wheel events on desktop to translate vertical-wheel into horizontal-scroll (with a graceful fallback for trackpad users who already scroll horizontally). On mobile, swap to vertical scroll but preserve biome-by-biome snap.

**Hexagonal grid math:** Use CSS clip-path `polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)` for flat-top hexagons and offset rows by 50% of cell-width with negative margin-top of 25% cell-height to achieve tessellation. Do NOT use a library for this. The grid should be generated via a single JS function that accepts `ringCount` and outputs an array of `{row, col, x, y}` positions. Biome 1 uses 3 rings; biome 3 uses a broken placement where 30% of cells are offset by `transform: translate3d(random -40px to 40px, random -40px to 40px, random -40px to 60px)`.

**Liquid-chrome gradient engine:** Implement a reusable CSS custom-property-driven gradient:

```
--chrome-gradient: conic-gradient(
  from var(--angle, 0deg),
  #C8D4DE 0deg,
  #FFF6E2 60deg,
  #B8A6FF 120deg,
  #00E5D4 180deg,
  #FF5AA8 240deg,
  #C8D4DE 360deg
);
```

Apply this to form plaques, hero text (via background-clip: text), and the hex-ruler. Animate `--angle` from 0deg to 360deg over 14s with `@property --angle` so the gradient rotates smoothly.

**Mascot cursor:** Replace the default cursor with `cursor: none` and render the bada-droplet SVG positioned via `transform: translate(x, y)` updated every rAF. The trail uses a simple lerp: `currentX += (targetX - currentX) * 0.15`. On hover over interactive elements, the droplet's mouth morphs from `‿` to `◡` (swap inner SVG path via CSS variable pointing to a different `d` attribute). Clicks fire a ripple: a circle element scaled from 0 to 8x with opacity 1 -> 0 over 600ms ease-out-quart.

**Biome transitions:** As the visitor scrolls from biome N to biome N+1, use Intersection Observer to:
1. Fade the background-color between the two biomes via a CSS custom property on `body` (300ms linear, driven by scroll position within the 100vw transition zone).
2. Trigger the dolphin silhouettes to leap across the gap (staggered SVG path animations).
3. Rotate the hex ruler to show the new depth marker (CSS transform: rotateZ with a spring curve).

**Kaomoji liveness:** The kaomoji border strips are not static text. Every 2 seconds, one random kaomoji in a visible strip swaps to a variant via a small JS loop. This creates the sense that the sea is watching and blinking back.

**Audio (optional, with user toggle):** A single looping ambient track -- bubbling water + very faint distant whale call + a sub-audible chiptune arpeggio in the key of F# minor -- can be enabled via a pearl-shaped toggle in the top-right. Default OFF. Respect `prefers-reduced-motion`.

**Motion reduction:** When `prefers-reduced-motion: reduce`, freeze the chrome gradient rotation, disable the cursor-follower droplet (restore default cursor), stop kaomoji swaps, and replace horizontal-wheel interception with a simple horizontal scrollbar. The biome snapping remains.

**AVOID:** Do not build a hero with CTAs. Do not add pricing blocks. Do not use stat-grids or testimonial cards. Do not include a "Features" three-column row. The site has no product to sell -- it is a **devotional shrine / guestbook / word-museum** for the Korean word 바다, built as if it were a 2003 fan-site that accidentally became beautiful.

## Uniqueness Notes

**Differentiators from other designs in this collection:**

1. **Seapunk + mcbling y2k + Korean moe trihybrid.** Forty existing designs, zero use seapunk. Most treat "ocean" as an invitation to muted navy-and-cream spa-minimalism (the obvious "ocean deep calming spa" seed). bada.moe does the opposite: saturated pool-chlorine cyan, cotton-candy magenta, holographic lilac -- the sea of a teenager's glitter binder, not a resort brochure. This is the only site in the collection that takes a nature theme and renders it with the loud kitsch vocabulary of a 2003 tumblr micro-genre.

2. **Hexagonal-honeycomb primary grid.** Frequency analysis shows hexagonal-honeycomb at 5% -- one of the least-used layouts. Most designs default to card-grid (92%) or centered (85%). bada.moe commits fully: every content block is a hex cell, and the tessellation is the spatial logic, not a decoration. Additionally, biomes use **different hex orientations** (flat-top vs pointy-top) as semantic punctuation.

3. **Horizontal-scroll voyage through five biomes.** While horizontal-scroll appears at 20%, it's usually for a gallery subsection. bada.moe makes the ENTIRE site horizontal, with biome-by-biome snap and wheel-interception. The physical act of drifting sideways mimics an ocean current in a way no vertical scroll can.

4. **Custom SVG mascot cursor with lerp-trailing droplet.** The bada-droplet replaces the system cursor entirely and leaves a soft-follow trail with expression-change on hover and ripple on click. Cursor-follow is at 22% in the collection but nearly always as a blob highlight, never as a full mascot character with multiple expression variants.

5. **Kaomoji-as-typography borders.** No other design in the collection uses kaomoji ( ◡‿◡ )-style text borders as structural section dividers. They appear here as **live-swapping** text strips that blink every 2 seconds, turning punctuation into a small companion creature.

6. **Korean hangul as ornamental tile pattern.** The characters 바 and 다 are used decoratively at 40% opacity across empty hex cells -- a language-specific motif that other designs (even the corporate-gradient-saas majority) never attempt. This roots the site in the specific Korean word the domain is named after, rather than translating it to English.

7. **Eight-color maximalist palette anchored in pool-chlorine + lip-gloss-magenta.** Frequency shows warm (95%), gradient (97%), muted (67%) dominating. bada.moe is deliberately NOT warm, uses gradients as chrome tools rather than background washes, and rejects muted entirely. The Research-Vessel Orange accent is used exactly once per biome -- a deliberate rationing that makes each appearance sing.

8. **Chosen seed:** **seapunk y2k-mcbling moe fan-shrine** (a deliberate hybrid of `seapunk` + `y2k-futurism` + the underused `mcbling` vocabulary, with `hexagonal-honeycomb` layout and `horizontal-scroll` voyage structure). Inspired by but distinct from the generic "ocean deep calming spa" seed -- bada.moe is the loud, sugary, glittering opposite.

**Frequency analysis avoidances (from `tools/design/frequency.sh`):**
- AVOIDED: corporate aesthetic (87%), gradient palette (97% -- used here only as a chrome tool, not as atmospheric wash), warm palette (95%), card-grid (92%), centered (85%), photography (92%), mono (87% -- used only for Latin body, not display).
- AVOIDED: scroll-triggered (95%), parallax (52%) -- replaced with current-drift horizontal snap and mascot-cursor interaction.
- AVOIDED: mysterious-moody (37%) -- replaced with dreamy-ethereal sugared with edgy-rebellious.
- PREFERRED (underused): hexagonal-honeycomb (5%), horizontal-scroll (20%), seapunk (0%), mcbling (0%), y2k-futurism (2%), dopamine (2%), anti-design (2% -- partially embraced via maximalist color), kaomoji typography (never used).
- PREFERRED (novel): Korean hangul ornamental tiling, kaomoji-as-border-strips, mascot cursor with expression states, pool-chlorine-cyan as primary.
<!-- DESIGN STAMP
  timestamp: 2026-04-24T06:49:33
  seed: text borders as structural section dividers
  aesthetic: bada.moe is a shrine to the Korean word **바다** (*bada*, "sea") built inside the ...
  content_hash: 9a904ec08b76
-->