# Design Language for bada.city ## Aesthetics and Tone bada.city is a scholarly cyberpunk atlas — imagine a marine-research institute that operates out of an abandoned signal-relay station on a deep-water platform, publishing field notes in a quiet, almost reverential tone. "bada" is the Korean word for sea, and the site treats the ocean as the primary metaphor for the city: data swims, currents pull the eye, depth replaces hierarchy. The aesthetic fuses cyberpunk's hard, instrument-like surfaces (brushed navy plates, hairline grids, riveted seams) with the softness of bioluminescent organic blobs that drift through the negative space like jellyfish caught on a sonar plot. The tone is scholarly-intellectual, never neon-loud. Where most cyberpunk sites scream with magenta and acid green, bada.city whispers in oxidized navy and cool platinum. Annotations appear as if written by a tired cartographer: small caps, tracked-out monospaced numerals, footnote daggers. The mood is the second hour of a dive — pressure equalized, breathing slow, the only sound the click of instruments. Visual inspirations: the dashboard of a 1970s research submersible, Olafur Eliasson's Weather Project filtered through a thermal lens, Edward Tufte's Sparklines, the title cards of Mamoru Oshii's Ghost in the Shell, the field journals of Jacques Cousteau, and the navy-on-platinum identity systems of Swiss watch ateliers. ## Layout Motifs and Structure **Minimal-navigation, depth-first.** There is no top bar. A single hairline rule across the upper margin holds three glyphs in the corners: a serial number (lot/issue), a depth gauge that updates as you scroll (00m → 1280m), and a one-character locale switcher. That is the entire chrome. Everything else is content. **The Sounding Column.** The page is a single vertical sounding — a bathymetric profile rendered as a 12-column grid that compresses and expands like a watery accordion. Sections are not "sections"; they are *strata*. Each stratum has a depth label in the left gutter (e.g., "—120m / pelagic"), a Latin specimen-tag in the right gutter ("Fig. iii"), and a generous 38ch reading measure down the center. Between strata, organic blob clouds drift across at half-opacity, never aligned to the grid, as if the grid itself were submerged. **The Specimen Plate.** Major content blocks are presented as museum specimen plates: a thin platinum frame, a single hairline cross-hair indicating the centroid, and four corner registration marks. Inside, a data-viz plot, a portrait, or a quote. Plates never sit flush — they hang at 0.4° to 1.2° rotations, as if pinned by a careless archivist. **The Margin as a Living Footer.** The right margin is permanently reserved for moving telemetry — a narrow 64px rail of ticking sparklines, current depth, water temperature (°C, scrolls with you), bearing, and a quiet path-drawn SVG of the page's own scroll progress as a sonar trace. The footer at the bottom is just a dotted line and the words "end of transmission · bada.city · ⛓ signal lost". **Compositional rules.** Negative space is treated as water — never decorate it, never fill it. Asymmetry is allowed only along the central axis (the "keel"). Headlines hang from the top of their stratum like kelp from the surface; body copy sinks toward the bottom. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Headlines:** *Space Grotesk* (700, optical wide tracking +0.04em). A grotesque-neo with the right amount of mechanical precision; used for stratum titles and the wordmark. - **Sub-display / Annotations:** *Archivo* (500, all caps, tracked +0.18em). Carries tags like "FIELD NOTE — VOL. III" and depth labels. - **Body / Long-form:** *Inter* (400/500, 17px, 1.7 line-height). A workhorse humanist that holds a 38ch measure at scholarly density without fatigue. - **Monospace / Telemetry & Data:** *JetBrains Mono* (400, 13px, tabular-nums). For coordinates, sparkline labels, footnotes, the moving margin rail. - **Serif accent (rare):** *Cormorant Garamond Italic* (400, 22px) — used only for pull-quotes, like a librarian's pencil note in the margin. **Palette — "Navy & Platinum, Submerged":** - `#0B1426` — *Abyss Navy* (page base, deepest layer) - `#16243D` — *Hadal Steel* (panel base, plate background) - `#1F3357` — *Mariana Indigo* (mid-depth, gradient stop) - `#3E5A86` — *Mesopelagic Blue* (rule lines, secondary text) - `#7C8CA8` — *Tarnished Silver* (body copy on dark) - `#C9D1DC` — *Platinum Mist* (high-emphasis text, frame stroke) - `#E8ECF1` — *Brushed Argent* (display headlines, brightest) - `#5BC8C5` — *Bioluminescent Cyan* (single accent — link hover, sonar pings, blob highlight; used at <8% of any viewport) - `#B8915C` — *Oxidized Brass* (rare warm — registration marks, footnote daggers; used at <3%) The palette obeys a "depth law": as you scroll deeper, the page base interpolates from `#0B1426` toward `#050912`, and the brass accent fades while the cyan brightens. Gradients exist only as soft blob-glows on the organic shapes; nothing else gets a gradient. ## Imagery and Motifs **Data-viz as primary imagery.** Real charts, not decoration. Every stratum carries at least one quiet plot: a depth-vs-temperature line, a small-multiples grid of sonar pings, a horizon chart of signal frequency, a Marey-style train-schedule diagram of the city's data flows. All plots are drawn live in SVG with hairline strokes (`stroke-width: 0.5px`), platinum on navy, with the cyan accent reserved for the *single* most-recent data point. Tufte's small multiples are the patron saint here. **Organic blobs as bioluminescence.** Three to seven amorphous SVG blobs (generated with cubic Bézier perturbation at four anchor points) drift across the page on slow, lazy paths — 40 to 90 second loops, never linear, eased on a custom cubic-bezier(0.65, 0, 0.35, 1). They carry a soft 32px Gaussian blur and a radial gradient from `#5BC8C5` at 18% opacity to fully transparent. They never touch text; they react to cursor proximity by gently retreating, like a school of squid. **Path-draw SVG signatures.** Every stratum heading is preceded by a 1px platinum SVG path — a hand-traced underline, a sonar arc, a depth-bracket — that draws on with `stroke-dasharray` over 1.4s when the stratum enters the viewport. The wordmark itself draws on as a continuous polyline on first load: 2.2 seconds, ease-out-quart. **Specimen registration marks.** Tiny `+` cross-hairs (8px, brass, 0.5px stroke) appear at the four corners of every plate, every figure, every blockquote. They are the page's punctuation. **Telemetric margin rail.** The right gutter contains a perpetually-running ticker: live(-feeling) sparklines that re-seed with deterministic noise on each visit, depth coordinate, "BEARING 087°", a heartbeat dot. None of it is interactive — it is *atmosphere*, like the radar in a submarine cabin. **No photography.** No stock images, no portraits unless rendered as halftoned duotone navy/platinum at 60-line halftone. Faces, if any, appear as ASCII contour plots. ## Prompts for Implementation Build the page as a **single immersive scroll sounding** — first paint should already feel like the user is mid-dive, not "above the fold." - **Opening sequence (0–2.5s):** Page fades up from `#050912`. The wordmark "bada.city" draws on as a continuous SVG polyline, left to right, 2.2s ease-out-quart. Below it, a single line of *JetBrains Mono* text types in character by character: `> initiating descent · 00m`. After typing completes, the depth gauge in the upper-right corner activates and starts following scroll. - **Stratum reveals:** Each stratum (there should be 5–7 of them — Surface, Photic, Twilight, Midnight, Abyssal, Hadal, Signal) enters with: (1) the depth label fading in from the left gutter, (2) the SVG underline path-drawing across, (3) the headline rising 12px and easing to 0 with `cubic-bezier(0.16, 1, 0.3, 1)`, (4) body text fading in with a 40ms stagger per line. Driven by IntersectionObserver, threshold 0.15. - **The drifting blobs:** Append 5 SVG blobs to a fixed-position layer at z-index 0. Animate with `requestAnimationFrame`, each blob owning its own slow Lissajous path. Mouse proximity within 240px applies a gentle repulsion vector with spring damping (k=0.04, damping=0.12). Never let a blob exceed 28% viewport opacity. - **The telemetric rail:** Right margin, 64px wide, fixed. Render four miniature SVG sparklines that update every 1.8s with deterministic Perlin noise seeded from the day-of-year, so the page feels alive but is reproducible. Show a live depth readout (`${scrollPercent * 1280}m`), a fake bearing that rotates with scroll velocity, and a single blinking 3px cyan dot (heartbeat: 0.85s sine). - **Storytelling above CTAs.** Do not build a hero with a button. Do not build pricing tiles. Do not build a "stats grid" with three big numbers. Instead, write a long opening passage as a field journal entry — dated, signed, with crossed-out words and editorial margin notes in *Cormorant Italic*. Let curiosity, not conversion, drive the scroll. - **Cursor as an instrument.** Replace the cursor inside the main column with a 14px platinum cross-hair and a faint 1px tail showing the last 240ms of motion (path-drawn, fading). Outside the column, restore the system cursor. - **Sonar ping interaction.** Click anywhere in negative space → a single `circle` SVG element grows from r=0 to r=180 over 1.1s, stroke `#5BC8C5`, opacity 0.6 → 0, accompanied by a single 600Hz sine ping (40ms attack, 220ms decay) — but only if `prefers-reduced-motion` is not set and the user has clicked at least once. - **Footnote system.** Inline references (¹ ² ³, set in brass) reveal full footnotes in the right gutter on hover with a 180ms fade and a hairline `path-draw-svg` connector linking the reference number to the gutter note. - **Depth-driven palette shift.** As `scrollY / scrollMax` advances from 0 to 1, the page's `--bg` CSS variable interpolates from `#0B1426` to `#050912`, and `--accent-warmth` (the brass) fades from 1.0 to 0.3. Pure CSS, driven by a single `scroll` listener that writes a CSS variable every 16ms, throttled. - **Typography in motion.** Stratum headlines use `font-variation-settings` if available (`'wght' 700`); on hover, they smoothly transition `letter-spacing` from 0.04em to 0.08em over 320ms. No bouncing. No elastic. The page is below 200m — physics are slow here. - **No CTAs, no pricing, no stat grids.** If a "next" gesture is needed, it is a single 1px platinum line at the very bottom of each stratum that reads "↓ continue descent" in tracked monospace caps. That is all. The implementation should feel less like a website and more like a slowly-unspooling field document recovered from a brass pneumatic tube. Every animation should have the patience of cold water. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **Navy-metallic palette is 1% in the registry** — almost no other site uses this exact oxidized-navy + platinum + brass combination. We deliberately reject the dominant warm (92%) and gradient (94%) palettes; nothing here is warm except 3% brass accents, and gradients are confined to blob auras only. 2. **No photography (97% of the registry uses photography)** — bada.city uses only SVG data-viz, halftoned duotone, and ASCII contour plots. This alone separates it from nearly every other design. 3. **Minimal-navigation layout (4% in registry)** — no top bar, no menu, no buttons; the entire chrome is three corner glyphs and a margin rail. The sounding-column structure is unique even within minimal-navigation designs. 4. **Scholarly-intellectual tone applied to cyberpunk aesthetic** — cyberpunk sites in the registry trend energetic/edgy; pairing it with the calm, footnoted voice of a research journal is rare. The cyan accent is held below 8% of any viewport — almost the opposite of conventional cyberpunk. 5. **Depth-driven palette interpolation tied to scroll** — the page literally darkens as you read deeper, and the brass accent fades. No other design in the registry uses scroll-position to interpolate the entire base palette. 6. **Telemetric margin rail as ambient atmosphere** — a permanent right-gutter instrument panel of running sparklines, depth, and bearing, reproducible per-day via seeded noise. Pure atmosphere with no functional CTA. 7. **Bioluminescent blob behavior** — organic blobs (7% in registry) here are not decorative shapes but *agents* that retreat from cursor proximity with spring physics, behaving like a school of squid. **Avoided overused patterns from frequency analysis:** - Avoided **hand-drawn aesthetic (94%)** — bada.city is precisely the opposite: instrument-drawn, hairline-precise. - Avoided **glassmorphism (68%)** — surfaces are matte brushed metal, not frosted glass. - Avoided **photography (97% imagery)** — replaced entirely with data-viz and SVG. - Avoided **gradient (94% palette)** — gradients confined to blob auras only. - Avoided **warm palette (92%)** — palette is cold navy with 3% brass. - Avoided **card-grid (65% layout)** and **full-bleed (87%)** as primary structures — replaced with the vertical sounding column and specimen plates. - Avoided **mono typography as default (95%)** — mono is reserved for telemetry only; body is Inter humanist; display is Space Grotesk grotesque-neo. - Avoided **cursor-follow (62%)** in the conventional sense — the cursor becomes a cross-hair instrument inside the reading column only, not a generic trailing dot. - Avoided **CTA-heavy layouts, pricing blocks, and stat grids entirely** as instructed. **Chosen seed (from assignment):** aesthetic: cyberpunk · layout: minimal-navigation · typography: grotesque-neo · palette: navy-metallic · patterns: path-draw-svg · imagery: data-viz · motifs: organic-blobs · tone: scholarly-intellectual.