# Design Language for bada.studio ## Aesthetics and Tone `bada.studio` is **a quiet bathymetric instrument shop, half a kilometer off the coast of Tongyeong, where the sea has been pressed flat into a single slab of cream-colored porcelain**. The Korean word **바다 (bada)** means *sea*, and the entire site is an act of gentle reverence toward that one syllable. But the sea here is not photographed, not painted, not sound-tracked — it is **measured, with the patience of a marine cartographer who has stopped caring about deadlines**. The studio's imagined work is hydrography rendered as soft hardware: tide gauges that look like soap bars, bathymetric charts shaped into low-relief plaster, sonar pings rendered as breathable circles drawn live by SVG paths. The aesthetic is **neomorphism — but the deeply correct kind**, the kind that almost no one ships, the kind that returns to the original 2019 thesis (*soft UI surfaces extruded from a single substrate, lit by one diffuse light source from the upper-left*) and treats it as **a fifteen-year-old discipline of plaster and porcelain**, not a Dribbble fad. There are no buttons that look like floating credit cards over a starry purple gradient. There is, instead, **one continuous panel of warm, slightly off-white substrate**, and from this substrate **rise and recede** a small number of objects: a gauge, a dial, a chart, a rectangular plate with a single sentence pressed into it like a printer's intaglio. Every shadow is **light** (`rgba(180, 160, 130, 0.18)`, blur 22px, offset 14px down-right), every highlight is **a single pale chalk stroke** (`rgba(255, 252, 244, 0.96)`, blur 14px, offset 10px up-left), and every corner radius is generous (24px to 64px) so the surfaces read as **lozenges of soft milk-soap**, not chamfered plastic. The tone is **calm-serene** — but specifically the **stillness of a pre-dawn harbor at slack tide**, when the water has stopped breathing and the only sound is a halyard tapping a mast 200 meters away. There is no urgency, no CTA, no "schedule a call," no animated scroll-jacker shouting "LET'S BUILD SOMETHING AMAZING." The site offers, instead, **a single horizontal traverse from west shore to east shore**, taking exactly as long as the visitor is willing to drift, and the only thing that ever happens is that **shapes resolve themselves more clearly the longer you remain still**. Inspirations stacked deliberately: - **Dieter Rams's Braun T1000 world-receiver radio (1963)** — for the discipline of monolithic substrate with quietly recessed controls. - **Korean *baekja* white porcelain of the Joseon dynasty** — for the warmth-of-cream-not-blue-not-white of every surface tone. - **Sonar PPI displays of the late 1970s, screen-printed on cream** — for the slow, breathing path-draw of the radial scan line. - **Naoto Fukasawa's "without thought" design philosophy** — every micro-interaction must be the one a calm person would already expect, not the one that announces itself. - **The bathymetric charts of the East Sea (Sea of Japan / Donghae)** drawn by the Korea Hydrographic and Oceanographic Agency — soft contour lines at 50m intervals, labeled in 9pt Hangul. ## Layout Motifs and Structure The structural metaphor is **a horizontal cross-section of the sea, sliced from shore to shore, and laid across the viewport from left to right**. The site is **one single horizontal scroll panel**, not a series of vertical sections, and it traverses **eight depth zones** the way a research vessel's transect would traverse them. There is no header, no footer in the conventional sense — the studio's name `bada.studio` sits in the upper-left of the viewport at all times, fixed, and a single thin line drawn in SVG marks the surface of the water across the entire 8000px-wide canvas, rising and falling with the seafloor. **Horizontal-scroll discipline.** The viewport is locked to `100vh` (or rather `100svh` to respect mobile chrome), and vertical wheel input is translated to horizontal motion via `transform: translate3d(-Xpx, 0, 0)` on the inner stage, eased through a low-pass filter so the panel **glides like a heavy door on linear bearings, not skids like a marble**. Touch devices receive native horizontal swipe with `overflow-x: auto` and `scroll-snap-type: x proximity` (proximity, not mandatory — the user may rest anywhere). Total stage width is **eight viewports wide on desktop** (8 × 100vw, target 12000–14400px on a 1500–1800px monitor), and **six viewports wide on mobile**. **The eight depth zones, in order:** 1. **西 (Seo) — Shore 0m.** A single neomorphic plate floating in the upper third of the panel, embossed with the word `bada` at 18vw display size in Cormorant Garamond italic 300, like a name pressed into wet plaster. 2. **Inter-tidal +0 to -3m.** Two concave dials (one tidal phase, one moon-phase), each a true neomorphic well, 240px diameter, with breathing path-draw indicator lines. 3. **Photic zone -3 to -40m.** A long horizontal bathymetric chart, 2400px wide, 380px tall, drawn as soft contour ridges in low-relief, labeled `-10`, `-20`, `-30`. 4. **Mesopelagic -40 to -200m.** A vertical column of six small "specimen plates" (each a 180×120 neomorphic raised tile) listing the studio's working subjects: *cartography, sonification, instrument design, slow-systems, marine-time, hydroacoustics*. 5. **Bathypelagic -200 to -1000m.** A slowly drawing SVG sonar PPI display, 520px diameter, with a sweep arm rotating once every 14 seconds and leaving a trailing path that fades in 6 seconds. 6. **Abyssopelagic -1000 to -4000m.** A long horizontal "log entry" plate, 1800px wide, 200px tall, with a single block of body text — the studio's manifesto, in Lora 18px, set to a 540px measure inside a 1800px plate so the text sits in a pool of cream substrate. 7. **Hadalpelagic -4000 to -10000m.** Three deep concave wells, each holding the name and year of one past commission, set in IBM Plex Mono 11px small-caps, almost-too-quiet. 8. **東 (Dong) — Far shore.** A single neomorphic envelope-plate with `studio@bada.studio` pressed into it in 9pt mono. No mailto: link styling change. No button. Just the address, in soft-debossed type, like a colophon at the end of a Joseon scroll. **Spatial relationships.** Every object on the stage sits on the **same z-plane** (no parallax depth between objects — they are all extruded from the same substrate), but each has its own **emboss/deboss sign**: roughly 60% of the objects are **raised** (positive z, lit from upper-left), 40% are **recessed** (negative z, shadow inverted). The visual rhythm of raised-recessed-raised across the 14000px transect is **scored deliberately**, like a music staff: zones 1, 3, 5, 7 are raised; zones 2, 4, 6, 8 are recessed. The eye reads the panel as **a long braille line of breathing surfaces**. **No grid in the conventional sense.** Objects are placed by hand on a 14400px × 1080px artboard at coordinates derived from a **Fibonacci sequence on the x-axis** (89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946) so the spacing breathes outward toward the deep zones. The y-axis uses a relaxed **golden-section** division (0.382 / 0.618) for vertical placement. **Negative space dominates.** At any given viewport (1500px wide), at most **22% of the visible area is occupied by objects**. The remaining 78% is the warm cream substrate, lit and shadowed only by the global light source. ## Typography and Palette **Three Google Fonts only, used architecturally, no decorative substitutions.** - **Display — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)**, weights 300 (light) and 400 (regular), italic and roman. Used exclusively for **oversized-display** moments: the `bada` wordmark at `clamp(180px, 18vw, 320px)` (italic 300), zone numerals (`I`, `II`, `III` … `VIII`) at `clamp(72px, 8vw, 128px)` (roman 400), and the single Hangul depth-glyphs `西` and `東` at `clamp(96px, 10vw, 168px)`. Cormorant is chosen for its **calligraphic restraint at large sizes** — the italic `b` and `a` lean like reeds in a slow current, and the diagonal stress reads as oceanic, not pretentious. - **Body — [Lora](https://fonts.google.com/specimen/Lora)**, weight 400 regular, 500 medium for occasional emphasis. Body text sits at 18px / 1.65 leading, tracking `-0.005em`, measure 540px (≈30em). Lora's **slightly humanist serif terminals** soften the geometric precision of the surrounding instruments. Used only in zone 6 (the manifesto plate) and in plate captions throughout. - **Mono — [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono)**, weight 400, used at **11px small-caps with `letter-spacing: 0.18em`** for instrument labels, depth markers (`-10M`, `-20M`, `-30M`), commission-year stamps, and the colophon email address. Plex Mono's **slab-serif terminals** read as **calibration-tick marks** rather than terminal-text, which is deliberate: this is a hydrographic instrument shop, not a hacker dashboard. The combination — Cormorant Garamond display, Lora body, Plex Mono ticks — is a **literal restatement of a 1962 Royal Navy nautical almanac**: italic Garamond title, Lora-like Times Roman body, Plex-Mono-like Univers labels on the chart inserts. **Palette — creamy-pastel, six values, all warm-side of the sea-color spectrum:** - `--bada-substrate: #F4EDE0` — **the porcelain cream**. The base color of every surface in the entire site. Slightly warmer than #F5F5F0 ivory, slightly cooler than #F4E8D0 vanilla, sitting in the warm-cream range of Joseon *baekja* white porcelain photographed under tungsten light. - `--bada-mist: #E8DFCE` — **the recessed shadow tone**, used where a plate is debossed below the substrate. Approximately 7% darker than the substrate, in the same hue family. - `--bada-glaze: #FBF6EC` — **the raised highlight tone**, used where a plate is embossed above the substrate. Approximately 4% lighter, with a 1° hue shift toward 50° (warmer). - `--bada-ink: #5C6B6F` — **the contour line**, **the body text**, **the calibration tick**. A muted slate-teal that reads as **graphite on cream**, but warmer than pure graphite, with a hint of seawater. Used at 100% for body type, 60% for tick labels, 28% for path-draw contour lines. - `--bada-tide: #A6BFC4` — **the sea-color**. Used **only on the SVG surface line** (1.5px stroke, the line that crosses the entire 14400px stage at the y-position of "0m sea level") and on the **PPI sweep arm** as a 22% gradient trail. Never as a fill, never as a background. The sea is a **drawn line**, not a wash. - `--bada-coral: #D89B7C` — **the single accent**, used **once per zone, never more**. A muted terracotta-coral that signals "current reading" on a dial, "today" on the tide chart, "you are here" on the bathymetry. Total accent area across the entire 14400px stage must not exceed **0.6% of the visible canvas** at any time. The palette is **monochromatically warm with a single cool axis** (the sea-line tide blue) and a **single warm signal** (the coral). Everything else is cream. The frequency report shows `creamy-pastel` at only 4% of the corpus (one prior use), and `warm` palette dominance at 97% — but most warm palettes are **gradient-heavy** (91% gradient). bada.studio is **flat warm cream with no gradient**, only embossed shadow. This is the differentiation. **Noise-texture overlay.** A persistent 1px PNG of fractal monochrome noise at 4% opacity sits over the entire substrate via `background-image: url(noise.png); background-blend-mode: multiply; opacity: 0.04`. This gives every surface the **fine tooth of laid paper** or **the subsurface haze of unglazed porcelain**, and prevents the cream from reading as digital flatness. Without this layer, neomorphism becomes plastic; with it, neomorphism becomes ceramic. ## Imagery and Motifs **No photography. No raster illustration. No stock.** Photography sits at 93% of the corpus; bada.studio opts out. The imagery is built from four families of generated form, each sympathetic to the sci-fi-hud-as-soft-instrument metaphor: 1. **Bathymetric contour lines, drawn as SVG paths.** Each zone has a unique contour signature, generated by a one-time Perlin noise pass at design time and exported as static SVG (no runtime generation — this is a contemplative site, not a procedural one). Contours are stroked at 1px, color `var(--bada-ink)` at 28% opacity, with depth labels (`-10M`, `-20M`, `-30M`) set in Plex Mono 11px small-caps at the line breaks. The contours are **drawn live on first reveal** via `stroke-dasharray` animation: 4-second draw, ease-out-quart, staggered 200ms per contour, so the chart **inks itself onto the substrate** as the visitor scrolls into the zone. 2. **A single PPI sonar sweep**, the centerpiece of zone 5 (-200 to -1000m, bathypelagic). 520px diameter, concave neomorphic well as the dial face. The sweep arm is a single SVG path rotating around the center once every 14 seconds (linear, not eased — like a real radar), drawing a **trailing arc of `var(--bada-tide)` at 22% opacity** that fades over 6 seconds via SVG `feGaussianBlur` + opacity decay. Behind the sweep, six "echoes" — small filled circles 4–9px diameter — appear and fade at quasi-random angles, suggesting **distant marine objects** (whales, thermoclines, a wrecked junk from 1840). The echoes are the only "data" on the entire site, and they say nothing in particular. 3. **Sci-fi-hud-as-soft-instrument dials and gauges.** Every interactive surface is shaped as a **physical instrument**: tidal phase dial (zone 2), moon phase dial (zone 2), depth selector (zone 3), specimen index (zone 4), PPI (zone 5), commission roll (zone 7), colophon plate (zone 8). Each dial has a **machined ring** (a 1px inner shadow at 8% opacity), a **dished face** (concave neomorphic shadow), a **single coral indicator needle** (the path-draw-svg accent, 1.5px stroke, animated on first reveal), and a **Plex Mono micro-label** at the lower edge. The HUD vocabulary is borrowed from sci-fi (the breathing rings, the calibration ticks, the radial scans) but **slowed to one-tenth speed and stripped of color**, so it reads as **a museum-vitrine instrument**, not a Star Trek bridge. 4. **Path-draw-svg as the universal animation primitive.** Every line on the site — the surface line of the sea, every contour, every dial needle, every underline beneath every label — is drawn live with `stroke-dasharray` / `stroke-dashoffset` on first viewport intersection. The draw rate is **120 pixels per second**, eased `cubic-bezier(0.22, 1, 0.36, 1)` (the calm "out-quart"), and each draw is preceded by a 400ms "pen-hover" pause so the visitor sees **the pen pause before the line begins**, the way a calligrapher pauses before the brush touches the silk. Frequency analysis shows path-draw-svg at 36% — already used, but rarely as the **only** animation primitive on a site. bada.studio's claim is that **every motion is a line being drawn**. **Decorative pattern: a single repeating compass rose**, embossed faintly into the substrate at the bottom-right corner of the eighth zone, 240px diameter, deboss depth 1px, opacity 12%. It is the only decorative motif on the site and acknowledges that this is a navigational document. **No icons from a system library** (no Heroicons, no Phosphor, no Material). Three custom icons exist, all hand-built as SVG: a half-moon (zone 2), a fathom-mark (zone 3), and a cardinal compass-cross (zone 8). Each is 24×24px, 1.5px stroke, color `var(--bada-ink)` at 60%. ## Prompts for Implementation Build `bada.studio` as **a single horizontal-scroll stage, 8 viewports wide on desktop, 6 on mobile, traversed by translating wheel/touch input into horizontal motion**. One HTML file. One CSS file. One JS file (≤ 200 lines). No framework, no bundler, no SSR. **Bias every implementation decision toward stillness and the sensation of slow drift.** This is not a portfolio-as-spectacle. This is a portfolio-as-tide-table. Aim for **the visitor to forget they are scrolling and feel they are drifting**. **Storytelling structure: the visitor crosses the sea from west shore to east shore, passing through eight depth zones.** No chapter headings, no "next" buttons, no progress bar (the surface-line acts as the progress bar implicitly, since it's drawn longer the further the visitor traverses). The narrative is **carried entirely by the rising-and-falling of objects against the substrate** and by the **path-draws revealing themselves as you arrive at each zone**. **Implementation prompts, in priority order:** 1. **Lock vertical scroll, translate to horizontal.** On desktop, capture `wheel` events and translate `deltaY + deltaX` to `transform: translate3d(-X, 0, 0)` on `.stage`, with low-pass smoothing (a single exponential moving average, `next = current * 0.86 + target * 0.14`, ticked at rAF). On touch, use native `overflow-x: auto` with `scroll-snap-type: x proximity` and `scroll-snap-stop: normal`. Snap points are **the start of each zone**, but only at proximity, so the visitor can rest anywhere. 2. **Draw the surface-line as a single SVG path 14400px wide.** It is the line of the sea at y=0. Stroke it with `var(--bada-tide)` at 1.5px, opacity 70%. As the visitor traverses, the path draws itself **one viewport ahead** of the visible window via `stroke-dashoffset` driven by the scroll progress. The visitor sees the sea's surface materialize in front of them as they move east. 3. **Build every plate as a true neomorphic surface.** Two layered box-shadows (one dark at offset `+14px +14px blur 22px color rgba(180,160,130,0.18)`, one light at offset `-10px -10px blur 14px color rgba(255,252,244,0.96)`), with `background: var(--bada-substrate)` and `border-radius: clamp(24px, 2.4vw, 64px)`. **Recessed plates invert both shadows** (move dark to upper-left, light to lower-right) via the `.recessed` modifier. The shadows must be **exactly these values**, calibrated against the noise overlay; any cheaper shadow ruins the porcelain. 4. **Animate every line via path-draw, every plate via emboss-rise.** When a zone enters the viewport (intersection threshold 0.4), trigger: (a) a 400ms pen-hover pause, (b) the path-draw of every SVG line in the zone at 120px/s, eased out-quart, staggered 200ms, (c) a simultaneous emboss-rise of every neomorphic plate in the zone — `transform: translateZ(0)` interpolating from a flat-shadow state to the full-depth shadow state over 1.2 seconds, eased `cubic-bezier(0.22, 1, 0.36, 1)`. The plates **rise from the substrate** as if pressed up from below. After full reveal, plates breathe with a 14-second sine cycle, ±2px shadow blur amplitude — imperceptible unless you stop and look. 5. **Sonar PPI in zone 5.** A single SVG, 520×520px. The sweep arm is one `` rotating via `transform: rotate(Xdeg)` driven by `rAF`, period 14 seconds, linear. The trailing arc is a `` with a radial-gradient fill (full opacity at the sweep's leading edge, fading to 0 over 60° of arc, color `var(--bada-tide)`). Six echoes are `` elements at fixed quasi-random `cx, cy`, opacity `0` by default, popping to `0.7` for 200ms when the sweep arm crosses their angle, then decaying to `0` over 5 seconds via `transition: opacity 5s ease-out`. The PPI is the **single procedural element** on the page; everything else is static. 6. **Wordmark in zone 1.** `bada` in Cormorant Garamond italic 300, embossed into a raised plate via two filters: an SVG `feGaussianBlur` + `feSpecularLighting` to give the type itself a subtle 3D extrusion (1px depth), and a `text-shadow` cast at the same angle as the plate shadow (offset `+2px +2px blur 4px` of `var(--bada-mist)`). The word reads as **debossed type on a raised plate**, like a name pressed into a soap bar. 7. **Manifesto in zone 6.** A single 540px-measure block of Lora 18px text, ~140 words, set in `var(--bada-ink)`. Copy is a single paragraph, no headings, no subheads. The paragraph reads (write this verbatim — do not invent placeholders): *"bada.studio is a small practice in instrument design, hydrographic illustration, and the sonification of slow systems. We work in three modes: charts that read as objects, instruments that read as charts, and recordings that read as both. Our commissions are typically commissioned by oceanographic institutes, contemplative-software studios, and the occasional tide-mill restoration. We do not believe the sea is metaphor. We believe it is a measuring instrument that has not yet been read at the appropriate resolution. Our job, when we have one, is to read it slowly. We are based half a kilometer from the south coast of the peninsula, and we work, mostly, in the morning. studio@bada.studio."* 8. **AVOID, absolutely.** No CTA buttons. No pricing tiers. No "Our Services" three-column block. No statistics counters ("250+ projects shipped"). No testimonials carousel. No team-grid with circular avatars. No "Get in Touch" hero. No "scroll to explore" hint after the first 4 seconds (a single fade-in path-draw arrow appears at second 2 and fades at second 6, never returns). No dark-mode toggle. No language switcher (the site reads in English with two Hangul ideograms; that is the entire bilingual surface). 9. **Cursor**. The cursor becomes a **soft cream-disk 24px diameter** with the noise-texture inside it and a 1px ring of `var(--bada-ink)` at 30% opacity, lagging the system cursor by 90ms via lerp at rAF. On any hoverable surface (dials, the manifesto plate's text, the colophon address), the disk **expands to 48px and the ring brightens to 60% opacity**. Touch devices receive no custom cursor. 10. **Sound (optional, off by default).** A single ambient layer: a 90-second loop of harbor halyards at low volume, with a soft hardware-synth drone tuned to A1 (55Hz). Triggered only by an explicit, almost-invisible 11px Plex Mono `[ ♪ ]` toggle in the colophon plate. Default off, no autoplay, no asking. ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: **neomorphism** - layout: **horizontal-scroll** - typography: **oversized-display** - palette: **creamy-pastel** - patterns: **path-draw-svg** - imagery: **noise-texture** - motifs: **sci-fi-hud** - tone: **calm-serene** **Frequency-analysis context** (from `tools/design/frequency.sh`, 49 designs): 1. **Neomorphism is at 4% in the corpus** — only one prior use across 49 sites. Almost everyone has avoided it because shipped neomorphism is usually purple-and-blue Dribbble-bait. bada.studio rehabilitates the language by **returning it to its 2019 Material Design ancestor and stripping every modern excess**: no purple, no glow, no gradient — only warm porcelain cream extruded from a single substrate, lit by one diffuse 45° light, with shadow values calibrated against a noise overlay so the surfaces read as **ceramic, not plastic**. This is the only neomorphic site in the corpus that treats neomorphism as **a 2019-era idea allowed to mature into a 2026 craft discipline**, rather than a meme. 2. **Horizontal-scroll at 6% in the corpus, but no prior horizontal-scroll site uses it as a bathymetric transect.** Most horizontal-scroll designs in the corpus use it as a portfolio gallery or a slide-deck-as-website. bada.studio uses it as **a literal hydrographic cross-section from west shore to east shore**, with the surface-line of the sea drawn across the entire 14400px stage as a single path that **inks itself ahead of the visitor**. The horizontal axis is **a measurement of geographic distance across the sea**, not a paginated navigation device. No other site in the corpus turns the scroll axis into a literal cartographic instrument. 3. **Sci-fi-hud at 6% in the corpus, but always loud.** Every prior sci-fi-hud site renders the HUD as **fast, neon, scan-lined, glowing**. bada.studio is the **first calm sci-fi-hud** in the corpus: same vocabulary (PPI, dials, calibration ticks, breathing rings) but **slowed to one-tenth speed, drained of color, embossed into porcelain instead of projected onto glass**. The PPI sweeps once every 14 seconds, not once per second. This is sci-fi-hud as **museum vitrine**, not as combat overlay. 4. **Calm-serene at 4% (only one prior use), and the prior use was a botanical site.** bada.studio is the first calm-serene site in the corpus that is **not nature-coded** — there are no leaves, no flowers, no rivers, no wood-grain. The calmness is achieved purely through **measured negative space (78% empty cream substrate at any viewport), 14-second breathing cycles, 400ms pen-hover pauses before every animation, and the deliberate refusal to ever say "amazing"**. Stillness here is engineered, not decorated. 5. **Creamy-pastel at 4% in the corpus**, and the prior use was high-saturation pastel. bada.studio is **flat warm cream with no gradient at all**, in a corpus where 91% of palettes are gradient-heavy. The substrate is **one solid color (#F4EDE0), period**. Depth is delivered by neomorphic emboss-shadow, not by gradient wash. This is the only flat-cream-no-gradient site in the corpus. 6. **Oversized-display typography is unranked in the typography category** (the report shows only `mono`, `humanist`, `handwritten`, `garamond-classic`, `serif-classic`, etc., dominating). bada.studio sets the wordmark `bada` at `clamp(180px, 18vw, 320px)` Cormorant Garamond italic 300, **so the single word occupies almost a full viewport's width**, which is a typographic gesture no other site in the corpus performs. It is **the sea spelled across the sky**. 7. **Noise-texture at 8% in the corpus**, used here as **the load-bearing material property of every surface** rather than as a decorative grain layer. Without the noise overlay, neomorphism reads as plastic; with it, neomorphism reads as porcelain. Other noise-texture sites in the corpus use noise as a vibe atop photography or gradients; bada.studio uses noise as **the tooth of unglazed ceramic** that makes the entire neomorphic system possible. 8. **Bilingual restraint, used as material, not decoration.** The site contains exactly two Hangul ideograms — `西` (west) and `東` (east) — at the start and end of the transect. (These are technically Hanja, deliberately, because hydrographic charts of the East Sea use Hanja cardinals, not Hangul.) The Korean word `bada` (meaning *sea*) is used as the studio name in Latin transliteration, and the entire body copy is in English. This restraint — **bilingual at the ideogram level, monolingual at the sentence level** — is unique in the corpus and reflects the actual practice of Korean hydrographic charts, where the sea is Hangul but the cardinals are Hanja. **Patterns deliberately avoided based on frequency analysis:** - **Avoided photography (93% of corpus).** Replaced with SVG bathymetric contours and PPI sonar. - **Avoided centered layout (93%) and full-bleed (89%).** Used left-aligned horizontal-scroll stage with deliberate 78% negative space, no center-stack hero block. - **Avoided gradient palette (91%).** Used flat warm cream with neomorphic emboss-shadow as the only depth mechanism. - **Avoided parallax (91%).** Every object sits on the same z-plane; depth is emboss-shadow, not parallax-translate. - **Avoided mono typography dominance (95%).** Mono is used only for 11px micro-tick labels; Cormorant Garamond display and Lora body do all the load-bearing typesetting. - **Avoided vintage motifs (89%).** The site is contemporary instrument design with a 1960s/70s undercurrent, but it does not pastiche vintage — no sepia, no patina, no fake age. - **Avoided "professional" tone (40%) and "friendly" tone (34%).** The tone is **monastic-quiet**, closer to a tide-table than to a service brochure.