# Design Language for bada.systems ## Aesthetics and Tone `bada` is the Korean word for *sea*, and `bada.systems` is what happens when an ocean is operationalized — a luxury control room for an imaginary marine intelligence platform that monitors, names, and quietly worships the reef life moving beneath it. The aesthetic is **Aquatic Dopamine HUD** — a tropical-coral neon overlay grafted onto the dashboard chrome of a six-figure submersible. Picture: the helm of a private yacht designed by Hermès and tuned by a Korean fintech architect, where every gauge happens to be reading the heart-rate of an angelfish. The mood is *opulently aquatic*: glassy, sun-pierced, but always governed by the discipline of a HUD reticle. This is the **luxurious** register of `dopamine` — not the playful candy-burst variant that shows up in 7% of the corpus, but a slower, denser, **tropical-saturated** dopamine where every neon is wrapped in a soft warm-water bloom and every interaction confirms itself with the assured *click* of a brushed-titanium dial. Where bada.cafe was a Scandinavian punk by the East Sea, **bada.systems is the boardroom — air-conditioned, marble-floored, and watching reef cams from a wall of curved OLED**. The tone never raises its voice. It *announces*. It addresses the visitor as someone who has already been issued a key. The unifying emotional question the site asks is: *what would a coral reef look like if it were also a stock ticker for itself?* Every screen answers a fragment of that question, and the answer arrives wearing a tuxedo. ## Layout Motifs and Structure The site is a **single tilted holographic console** — one continuous full-viewport HUD plane that the user pivots through, rather than a stacked-section page that scrolls past. The entire layout sits on an `rotateX(6deg) rotateY(-9deg)` baseline at rest, and every section is a **floating glass instrument** docked to that plane at a precise three-dimensional offset. Scrolling does not translate vertically; it **changes the angle of the console**, sweeping the camera around six docked instruments arranged in an arc, each instrument an independent HUD panel with its own depth, parallax floor, and reticle behavior. **Spatial blueprint — the six instruments, in order of camera arrival:** 1. **THE BRIDGE** — a 320×80vh hero panel with the wordmark `bada.systems` set in the oversized display register at 22vw, letterforms half-submerged behind a horizontal waterline that shimmers in real time. Above the waterline the type is dry coral-pink; below it, the same letters appear refracted, slightly enlarged, and fish-pink. A single targeting reticle floats over the dot in `bada.systems`. 2. **THE REEF MANIFEST** — a hud-overlay manifest panel listing seven "monitored species" as if they were portfolio assets. Each row is a tilt-3d card that responds to cursor proximity by leaning toward the cursor like a curious wrasse. Numbers are ticking, fish silhouettes are drifting across the row's negative space. 3. **THE TIDAL CHRONOGRAPH** — a circular instrument occupying 60vw that displays the system's "heartbeat" as concentric tide rings. Three nested dials rotate at different rates. The center reads a single luxurious phrase in italic display: *"the reef is awake."* 4. **THE PROVENANCE WALL** — a vertical column of six small HUD chips, each a tropical-fish portrait rendered as layered SVG with a thin gold-leaf bezel and a serial number. Functions as the "team / case studies / history" zone, but presented as a museum vitrine of fish. 5. **THE OBSERVATORY** — a wide split panel: left half is a live-feeling reef cam (procedural SVG, drifting fish silhouettes), right half is a typographic translation of what the cam sees, set in oversized display type. The right panel rewrites itself every 8 seconds in a typewriter cadence. 6. **THE COLOPHON DECK** — a flat instrument panel that lays itself flush at the end of the journey: legal, contact, and signature, set as a brass nameplate. The console finally lies down. **Layout discipline:** there is **no centered hero**, no full-bleed photographic plate, no gradient mesh, no pricing block, no stat-grid. The HUD reticle (a 2px coral square with a 1px crosshair, 32×32px) is the **only** centered element on the page, and it follows the cursor as a single magnetic agent across all six instruments. Every section is anchored to a 12-column **glass grid** that itself is rotated in 3D and overlaid with a 1px reef-blue lattice at 4% opacity. ## Typography and Palette **Typography (Google Fonts only):** - **Display — [Big Shoulders Display](https://fonts.google.com/specimen/Big+Shoulders+Display)**, weights 800 and 900. The oversized-display voice. Used for hero, instrument titles, and the rewriting Observatory text. Set in **22vw** for the Bridge title, **9vw** for instrument labels. Tracking compressed to -3% on display lines so vertical strokes form a near-continuous coral-pink picket. Optical-size axis pushed to maximum. - **Display Italic Counter — [Fraunces](https://fonts.google.com/specimen/Fraunces)**, weight 700, italic, with the SOFT axis at 100 and the OPSZ axis at 144. Used for *"the reef is awake"* and other single-line phrases at the center of circular instruments. Carries the **luxurious** register on its own. - **Interface / Body — [Manrope](https://fonts.google.com/specimen/Manrope)**, 400 / 500 / 700, base 16.5px, line-height 1.55. The HUD chrome voice — every label, every gauge tick, every legal line. - **Numerals & Telemetry — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 500, used **only** for ticking numbers, depth readouts, serials on the Provenance Wall, and timestamp marginalia. Tabular figures locked. Never used for prose, never larger than 14px. The four-typeface system is deliberately stratified by altitude: Big Shoulders is the surface, Fraunces is the underwater italic, Manrope is the deck instrumentation, JetBrains Mono is the engine room. **Palette — Tropical Reef Analogous:** The palette is strictly **analogous** across the warm-coral / pink-magenta / orange-amber arc, anchored against a single deep luxury-teal substrate. No greens. No yellows outside amber. No blues outside the substrate teal. This is the palette discipline that turns it from "candy" into "luxury." - `#0B2A33` — **Abyssal Teal** (substrate / canvas; the water that everything floats in) - `#0E3A45` — **Deep Lagoon** (secondary glass surface) - `#FF5E7A` — **Live Coral** (primary dopamine; HUD reticle, key strokes, hover states) - `#FF8A6B` — **Fire Anemone** (secondary; ticker numerals, accent glyphs) - `#FFB37A` — **Reef Amber** (tertiary; subtle warm bloom on glass edges) - `#E94A93` — **Mantis Magenta** (saturation peak; appears once per instrument as a "loud" event) - `#F4E1C6` — **Gold-Leaf Bone** (Provenance Wall bezels; signature plate) - `#F7F5F0` — **Salt Paper** (text on dark, set at 92% to never be pure white) The analogous span is **#FFB37A → #FF8A6B → #FF5E7A → #E94A93** — a continuous coral-to-magenta sweep, never broken by complementary or triadic intrusion. This is the analogous-palette discipline (not used elsewhere as a named palette in the corpus) wedded to dopamine intensity. ## Imagery and Motifs **No photography.** No stock fish, no aerial reef shots, no corporate hands-on-glass. All imagery is **inline SVG** plus three textural layers: a 1024×1024 caustics PNG (procedurally generated rippling light), a 800×800 brushed-titanium PNG (the chrome bezels), and a 600×600 fine-grain noise overlay at 3% opacity (atmospheric grain, not nostalgic). **Six recurring motif families:** 1. **Tropical fish silhouettes (the cardinal motif, 1% in the corpus).** Six species rendered as layered SVG: angelfish, parrotfish, butterflyfish, lionfish, clownfish, mandarin dragonet. Each is drawn in the analogous palette using the tilt-3d transform — body fill in Live Coral, dorsal in Mantis Magenta, eye in Reef Amber. Fish drift across instruments with `requestAnimationFrame` on a parallax floor independent of scroll. They never repeat their path; their courses are seeded by the user's first cursor position. 2. **The HUD reticle.** A 32×32 coral crosshair in a 1px square, with four micro-tick marks at the cardinal points, that follows the cursor. On hover-eligible elements it blooms to 64×64 with a 2px ring and emits a single 200ms ripple. The reticle is the visitor's only avatar. 3. **Caustic light bands.** Horizontal bands of refracted sunlight that drift left-to-right across the entire console at ~12px/sec. Implemented as a CSS-animated `linear-gradient` mask on a 1024px caustics PNG. They are *not* parallax — they exist on the surface plane and remind the viewer that there's a sun above. 4. **Reef tide-rings.** Concentric circles drawn at exact phi-spaced radii (1, 1.618, 2.618, 4.236...) — these structure the Tidal Chronograph and reappear as faint background lattices on every panel at 6% opacity. 5. **Gold-leaf bezels.** Every Provenance Wall chip is framed by a 1px Gold-Leaf Bone bezel with an inset 1px Mantis Magenta hairline 3px inside. The double-bezel is a visual luxury cue copied from Cartier watch faces and Hermès saddle-stitching. 6. **Marginal serial codes.** Tiny JetBrains Mono codes — `BS-04A.7`, `BS-09Z.1` — appear in the bottom-right of every instrument. They have no real meaning; they exist to assert that this is a calibrated machine. ## Prompts for Implementation **Story to tell with HTML/CSS/JS:** a private client opens a sealed envelope. Inside is one card with one URL: `bada.systems`. They go to the URL on a Friday evening. The page resolves into a tilted holographic console, the kind a yacht's captain might use. A single coral reticle finds their cursor. As they move, the console listens. As they scroll, the console pivots — six instruments swing into view, each a luxurious window onto the same imaginary reef. By the end, the visitor has not bought anything, has not learned a price, has not signed up. They have simply been **shown**, with discipline, that an entire reef is being monitored on their behalf. **Macro narrative — the six-instrument pivot:** 1. **Resolve.** Page loads dark Abyssal Teal. The waterline shimmer establishes itself first, then the wordmark fades up *through* the waterline (top half dry, bottom half refracted) over 1.4s. The reticle drops from offscreen-top and locks to cursor. 2. **List.** First scroll input does not move the page — it tilts the console 4° further and flips the Bridge into the Reef Manifest. The seven species rows stagger in from the right with a 60ms delay each, each row tilting toward cursor on hover. 3. **Pulse.** The Tidal Chronograph swings into center. Three rings rotate at 1×, 1.618×, 2.618× the base rate. The italic Fraunces phrase types itself out, character by character. 4. **Worship.** The Provenance Wall's six fish portraits build themselves SVG-stroke-by-SVG-stroke, top to bottom, each chip arriving with a soft brass *click* (CSS keyframe scale 0.96 → 1.0 with a 200ms cubic spring). 5. **Watch.** The Observatory split-panel arrives. Left side is the live reef cam; right side rewrites itself in oversized Big Shoulders 9vw type with a typewriter-effect cadence, replaced every 8s. 6. **Sign.** The Colophon Deck flattens. The console lies down. The reticle releases. The site exhales. **HTML structure:** - Semantic `
` containing six `
` elements, each with `
`, body content, and a `