# Design Language for yamato.quest ## Aesthetics and Tone yamato.quest is the field log of a slow, unmanned deep-sea descent — a single autonomous submersible sinking through the East China Sea toward the broken hull of a sunken battleship that the site never quite names, only circles. The mood is **abyssal-calm**: not the adrenaline of a salvage thriller, but the strange spa-like hush of pressure, cold, and slowness. Think of it as a meditation app for shipwrecks. The screen is mostly black water — true ink-black at the edges, warming only where the submersible's lamps reach — and the user does not click their way through a marketing funnel; they *descend*, watching depth tick up and temperature tick down while fragments of the wreck drift into the cone of light and out again. Three tonal anchors hold it together. First, **pressure as a felt thing**: type compresses very slightly as you scroll deeper, line-height tightens, the lamp-cone narrows — the page behaves as if the water column above it were physically squeezing the layout. Second, **bioluminescent punctuation**: in an otherwise near-monochrome field, the only saturated color is the cold cyan-green of a chemical glow and the rare warm amber of the sub's sodium lamps; nothing else is allowed to be bright. Third, **the sonar-as-narrator**: a quiet, low-frequency ping structures time on the page — every interaction and every section entrance is timed to (or echoes the rhythm of) a slow sonar return, so the whole experience has a heartbeat measured in seconds, not milliseconds. The voice in the body copy is the submersible's own telemetry: terse, lowercase, technical, occasionally beautiful by accident. This is **seapunk drained of its neon kitsch** — the underwater-tech romance kept, the chrome-dolphin Tumblr palette thrown out and replaced with the actual color of the deep ocean, which is to say almost no color at all. ## Layout Motifs and Structure The site is a **single continuous vertical descent** — one long scroll, no pagination, no tabs, no horizontal jumps — divided into **seven depth-stations** (Surface, Thermocline, Twilight 200m, Midnight 1000m, Hadal Approach, The Field of Debris, The Hull). The whole layout is built as a **lamp-cone composition**: at every scroll position there is a single soft elliptical pool of light roughly centered, and content only exists inside or at the edge of that pool. Everything outside the cone is black, with occasional motes drifting through. As you descend, the cone **narrows from ~80vw at the Surface to ~34vw at the Hull**, so the reading column physically tightens with depth — a structural metaphor doing real layout work. Pinned to the **left margin is a vertical depth-ruler**: a thin hairline that runs the full height of the document, ticked every 100m, with the current depth and water temperature rendered as a small fixed readout that updates as you scroll (a `counter-animate` pattern driven by scroll position, not a click). Pinned to the **right margin is the sonar gauge**: a single small circle that emits a faint expanding ring every few seconds; when a depth-station scrolls into view, the ring "catches" something and a label briefly resolves on the circle's circumference (`path-draw-svg` arc). These two rails are the only persistent UI; there is no top nav bar at all — the depth-ruler *is* the navigation, and clicking any tick on it smooth-scrolls (slowly, with a long ease) to that depth. Within each depth-station, content is **asymmetric and sparse**: a single fragment of the wreck (an SVG line-relic — a buckled railing, a torn deck plate, a clock face stopped, a propeller blade) floats off-center inside the lamp-cone, and the telemetry caption sits to one side of it, never centered, never in a card. **No `card-grid`, no `bento-box`, no stat-grid, no pricing block, no testimonial row, no CTA band.** The closest thing to a "feature section" is the Field of Debris, where 5–7 relic fragments drift at different parallax depths and the user moves their cursor to "sweep the lamp" across them — a cursor-as-flashlight interaction, not a clickable grid. ## Typography and Palette **Type system (Google Fonts only):** - **Telemetry / UI / depth-ruler / sonar labels — `IBM Plex Mono`** (weights 300, 400, 500). All readouts, captions, station numbers, and the depth/temperature display are set in this. Lowercase by default; `letter-spacing: 0.04em` at micro-sizes, `0.12em` for the rare uppercase station tags (`STATION 04 · MIDNIGHT`). The monospace gives the whole site the feel of instrument output, which is exactly the narrator's voice. - **Headlines / station titles — `Yeseva One`** (single weight, 400) — a high-contrast, slightly nautical display serif with swelling curves that read like engraved brass nameplates on old marine equipment. Used very large (`clamp(2.6rem, 8vw, 6rem)`) for the seven station titles only, and these *compress*: `font-stretch` isn't available, so depth-compression is faked with a downward `scaleY(0.96)` applied progressively as the station scrolls past mid-viewport. - **Long-form prose / log entries — `Spectral`** (weights 300 italic, 400) — a screen-tuned serif with a quiet, slightly literary cadence; used at small size and generous measure for the few passages of reflective text (the parts where the telemetry "becomes beautiful by accident"). Italic 300 for anything quoted from the wreck itself. **Palette (the actual colors of the deep, plus two lights):** - `#03070B` — **abyss black**, the page background; not pure #000, it has a trace of blue so the lamps read warm against it. - `#0A1822` — **midnight column**, used for the faint lamp-cone gradient's outer stop and for subtle section dividers. - `#13303C` — **thermocline teal**, the muted blue-green of the upper twilight zone; the lamp-cone's mid stop near the top of the page. - `#A9C4C2` — **silt grey-green**, the primary text color in the cone — never white, always this slightly turbid sea-glass grey so text reads "lit underwater" rather than "on a screen." - `#5BD7C0` — **biolume cyan**, the single cold accent: glow-tags, the active depth tick, the sonar ring at the moment it catches something. Used at well under 5% of surface area, always at low opacity bloom. - `#E8A24A` — **sodium lamp amber**, the warm accent: the very center of the lamp-cone has the faintest wash of this, and it tints the leading edge of relic SVGs that sit closest to the "lamp." - `#6B7C7A` — **dead-instrument grey**, for inactive ticks, disabled-feeling micro-labels, and the parts of relics that fall outside the light. ## Imagery and Motifs **No photography anywhere.** All imagery is **hand-built SVG line-relics** — single-weight (1px–1.4px) strokes in silt grey-green, with a single amber-tinted highlight edge and a single cyan glow point per relic, so each fragment looks like it's being grazed by the sub's lamp: 1. **Surface** — a horizon line and the silhouette of the launch crane lowering a small sphere on a cable; the cable runs *off the bottom of the section* and reappears at the top of the next, literally threading the descent together. 2. **Thermocline** — a thermometer drawn as a thin glass tube with the mercury frozen mid-fall; the temperature readout in the left ruler matches the level in the glass. 3. **Twilight 200m** — a single jellyfish, drawn as 9 nested bezier bells, the only "alive" thing in the whole site; it pulses on the sonar's rhythm. 4. **Midnight 1000m** — pure black except a drifting field of marine snow (tiny dots on slow parallax) and one line of text. 5. **Hadal Approach** — a pressure gauge with the needle buried past its max peg; cracks spider across an inferred glass plane (`path-draw-svg` on scroll). 6. **The Field of Debris** — 5–7 relics: a buckled railing section, a torn deck plate with rivet line, a ship's clock stopped at a specific time, a single boot, a bent ladder, a porthole ring with the glass gone. They sit at staggered z-depths; the cursor is the lamp. 7. **The Hull** — the largest relic: a long, gently curving line that is unmistakably *part of a vast ship's flank*, rivets marching along it, fading into black at both ends so its true scale is implied, never shown. This is the destination, and the descent simply stops here — no "explore more," no next. **Recurring motifs:** the **lamp-cone ellipse** (every section); the **sonar ring** (right rail, perpetual); the **single threading cable** (connects sections 1→2 and is echoed as a faint vertical hairline elsewhere); **marine snow** (slow-drifting motes throughout, denser with depth); **the stopped clock / frozen thermometer / pegged gauge** — a quiet trio of instruments that have all "given up," reinforcing the theme of a place beyond rescue. ## Prompts for Implementation Build yamato.quest as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a slow, ~90-second descent. There is **no CTA, no pricing, no email capture, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no nav bar**. If a section feels like it wants a button, it's wrong — replace the button with a depth-tick. **Descent mechanics (the spine of the whole thing):** - The body is `~700vh` tall. Scroll position maps linearly to "depth" (0m → ~8000m). A fixed left-rail readout shows `current depth` and `temperature` (temperature is a simple inverse curve of depth, with a small warm bump at the thermocline) using a `counter-animate` tween so digits roll, never snap. - The **lamp-cone** is a fixed, pointer-following radial gradient layer (`background: radial-gradient(ellipse ... )`) over a `#03070B` base. Its radius shrinks as depth increases (`--cone: clamp(34vw, 80vw - depthFactor*46vw, 80vw)`). Its center has a faint `#E8A24A` core fading through `#13303C` to transparent. Content `z-index` sits above the cone; everything is `color: #A9C4C2`. - The **sonar** (right rail): every ~3.4s emit an expanding ring (scale + fade keyframes, staggered so two can overlap). When a depth-station's heading crosses mid-viewport, fire a "catch": the ring snaps to that radius, a `#5BD7C0` glow blooms once, and the station label arc-draws (`stroke-dashoffset`) around the sonar circle for ~1.6s, then fades. **Storytelling structure (seven depth-stations, one continuous scroll):** 1. **Surface** — large `Yeseva One` title "you go down to find out". Crane + sphere SVG, cable exits bottom of viewport. 2. **Thermocline** — frozen thermometer; left-rail temp matches the glass; one `Spectral` italic line about the layer where warm and cold refuse to mix. 3. **Twilight 200m** — the jellyfish, pulsing on the sonar beat (`animation-delay` synced to the sonar interval); telemetry caption set off-center in `IBM Plex Mono`. 4. **Midnight 1000m** — near-total black; only marine-snow parallax + one centered `Spectral` line: "no light has ever reached this. ours is the first." Hold this section long (extra vh) so the user sits in the dark. 5. **Hadal Approach** — pressure gauge pegged; on scroll, hairline cracks `path-draw-svg` across the screen; type compresses noticeably here (`scaleY` + tighter line-height). 6. **The Field of Debris** — 5–7 relic SVGs at parallax depths `0.2`–`0.9`. The lamp-cone IS the reveal: relics fully outside the cone render at ~6% opacity (`dead-instrument grey`), inside the cone they bloom to full with an amber leading edge. Moving the cursor sweeps the lamp. No clicks — discovery is by sweeping. 7. **The Hull** — the great curving riveted line, fading to black at both ends. The page stops. A single `IBM Plex Mono` line: `depth 8 0 5 1 m · contact`. Then black. Footer is one hairline and the domain in dead-instrument grey. Nothing after it. **Motion budget:** everything slow. Section entrances use a long ease (`cubic-bezier(.16,1,.3,1)`, ~900ms) with `spring`-feel settle, staggered children. Parallax on marine snow and relics only. `prefers-reduced-motion`: keep the lamp-cone and depth readout, drop sonar rings + parallax, snap section entrances. Hover states: relic fragments brighten + lift 3px; the depth-ruler ticks glow `#5BD7C0` on hover and slow-scroll to that depth on click. No `tilt-3d`, no `magnetic` cursor games, no typewriter — the only "typing" is the depth counter rolling. **Texture:** a very subtle full-screen grain/`noise-texture` overlay at ~3% opacity (sea murk, sensor noise). A faint vignette always present beyond the cone. Section dividers are single `#0A1822` hairlines, nothing more. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Scroll-position drives a physical metaphor that reshapes the layout itself.** The reading column literally narrows (80vw → 34vw) as you scroll "deeper," and type compresses with pressure. Most immersive-scroll sites in the corpus just trigger fade/parallax reveals; here the scroll *is* descent and the layout responds to depth as a force. No `card-grid`, no `bento-box`, no `dashboard` — the 93%-common card grid and 35%-common dashboard are entirely absent. 2. **A near-monochrome ocean-deep palette with a strict <5% accent rule.** The page is `#03070B` black water and `#A9C4C2` sea-glass text, with biolume cyan `#5BD7C0` and sodium amber `#E8A24A` rationed to almost nothing. Against a corpus where 98% of palettes are "warm" and 92% are gradient-heavy/bright, this is deliberately cold, dark, and desaturated — `ocean-deep` palette territory that sits at ~3% in the corpus. 3. **Seapunk with the kitsch surgically removed.** The underwater-tech romance is kept; the chrome dolphins, vaporwave gradients, and Tumblr neon of typical seapunk are replaced with the genuine color and silence of the abyss. The result reads as instrument telemetry, not a 2013 mood board. 4. **The navigation is a depth-ruler and a sonar gauge — there is no nav bar, no CTA, no button anywhere.** Time on the page has a literal heartbeat (the ~3.4s sonar ping) that all motion is timed to. Photography is banned entirely; every image is a hand-drawn single-weight SVG "line-relic" grazed by lamplight. The site ends at the hull and simply stops — no "explore more," no next step. **Chosen seed/style:** `ocean deep calming spa` — interpreted as the *calm* and *slowness* of the deep ocean applied to a wreck-dive descent: spa-like hush, but the spa is 8000 meters down. Vocabulary leaning: aesthetic `seapunk`, layout `immersive-scroll` + `minimal-navigation`, typography `tech-mono`, palette `ocean-deep`, patterns `path-draw-svg` + `counter-animate` + `spring`, imagery `line-illustration`, motifs `wave-forms`, tone `zen-contemplative`. **Avoided patterns from frequency analysis:** no `glassmorphism` (85%), no `hand-drawn`-as-aesthetic-label (94%), no `card-grid` (93%), no `full-bleed` hero photography (84% + 98% photography), no `cursor-follow` magnetic gimmicks (89%) beyond the single justified lamp-sweep, no `tilt-3d` (32%), no warm palette (98%), no `pastoral-romantic` tone (30%). Leans instead on underused `seapunk`, `ocean-deep`, `minimal-navigation`, `hud-overlay`, and `zen-contemplative`.