# Design Language for amamya.net ## Aesthetics and Tone amamya.net — 雨宮 / *amamya*, "the rain-shrine" rendered without the diacritic, soft-spoken, half-erased — is staged as **a derelict municipal aquarium that has been quietly reclaimed by tide-pool sentience**. The conceit is precise: at some point between 1996 and 2003 the building was abandoned, the staff left their CRT monitors plugged in, and a brackish layer of seawater seeped up through the basement and never quite receded. The dolphin show stopped. The fluorescent lights kept humming. Algae colonised the screens. Twenty-some years later the site we are visiting is the *aquarium's own self-published catalogue*, dictated by the resident water through the half-corroded interface that remains. The aesthetic is **seapunk** — the early-2010s Tumblr microaesthetic of cyan dolphins, Geocities under-the-sea GIFs, watery JPEG compression, and yin-yang sigils — but transcribed with the **minimal-tone restraint** of a Japanese hydrographic almanac. Crucially: not maximalist seapunk, not the chrome-dolphin flag-waving variant. This is **muji-seapunk**: the dolphin is a single hairline contour, the wave is one variable-font glyph stretched across nine viewport widths, the chrome is a 2px gradient line, and 78% of the page is negative space the colour of deep-blue water under low-light. The tone is **minimal** in a way the design corpus has not yet attempted: a refusal of warmth, of reassurance, of editorial hand-holding. No copy that explains itself. No CTA. No "learn more." Sentences arrive incomplete and trail off into ellipses-as-tide-marks. The reader is treated as an oceanographer being handed an unattributed sample and trusted to know what to do with it. Mood reference: the empty staircase corridor in *Spirited Away* before Chihiro reaches the boiler room; the closing minutes of *Ghost in the Shell (1995)* where the city is rain and refraction; the visual silence of a dive beneath the thermocline. There is **no humour** in this design — that is itself the differentiator. Sites adjacent in the corpus (amamiya-hompo.net, amamiya-honpo.net) are warm, dramatic, vaporwave-romantic. amamya.net is *cold* in the same family-tree of names: water that has been in the dark a long time, no longer reflecting anything. ## Layout Motifs and Structure The structural grammar is **organic-flow combined with layered-depth**, executed as a vertical journey of seven stratified depths (epipelagic → midnight zone), where the visitor is descending rather than scrolling. Layout is *not* a grid. There is no card. There is no column rule. Every content block floats in absolute-positioned `clamp()`'d coordinates inside a relative parent of `min-height: 100vh`, and the elements drift slightly with `prefers-reduced-motion: no-preference` enabled — a slow, irregular `translate3d` on a 19-second cycle, jittered by a tiny perlin function so the motion is never quite repeating. **Seven depths.** Each depth fills 140vh and announces itself by a single pale numerical depth-marker pinned to the right edge: `0m`, `−40m`, `−200m`, `−1000m`, `−2500m`, `−4000m`, `−6000m`. The page background gradient interpolates from `#0F4868` (surface aquamarine, faint sun-cone) at depth 0m to `#040714` (hadal-zone almost-black) at −6000m — a single vertical CSS `linear-gradient` on the `` whose stops are calibrated against scroll-position via a CSS custom property updated in a `requestAnimationFrame` loop. There are no section dividers; depths bleed into each other, and the only signal of a "new" section is that the typography slows down, the line-height widens, and a single new motif appears in the periphery (a jellyfish bell, a swimming-school sigil, a bioluminescent dot-cluster). **Layered-depth across Z, not just within scroll.** At any given vertical position, **five Z-strata** are simultaneously visible: - Z=−400 (`filter: blur(6px)`, opacity 0.18): the deep-water silhouette layer — undulating SVG paths, drifting at 14% scroll velocity. - Z=−180 (`filter: blur(2.5px)`, opacity 0.42): the mid-water particulate layer — generative-art noise, bioluminescent specks moving at 38% velocity. - Z=0 (sharp): the *content* layer — typography, the only fully-legible plane, moving at 100% velocity. - Z=+90 (`filter: blur(1.4px)`, opacity 0.55, `mix-blend-mode: screen`): the **front-glass** layer — a faint cyan haze suggesting we are reading through aquarium glass, moving at 112% velocity (slight foreground parallax). - Z=+200 (`filter: blur(8px)`, opacity 0.22): an occasional drifting silhouette — a fish-shape, a strand of kelp — that swims *between the viewer and the screen*, moving at 145% velocity, occluding the type briefly before passing. This is **layered-depth that one descends through**, not parallax that one slides past. At depth-marker −2500m the front-glass layer cracks (a thin SVG fissure of `#88E0E0` is rendered, animating its `stroke-dashoffset` from 1 to 0 over 4.2 seconds when the marker enters view). **Organic-flow** is enforced by a **CSS `shape-outside`** scheme: long-form copy wraps around irregular blob-paths defined per paragraph (a small library of 18 hand-drawn `clip-path` polygons, each 30–60 vertices, randomly sampled at build time). No paragraph is rectangular. The result reads like text laid into the irregular pockets between coral. **No header. No footer. No nav.** A single fixed depth-meter on the right edge — a 1px hairline column with the seven depth markers pinned at their respective scroll positions, the current depth highlighted by a `2.5px × 14px` cyan tick. That is the only navigation chrome. Click a marker: smooth-scroll-to-anchor, with a 1.6s ease-out, simulating the descent rate of a ROV. ## Typography and Palette **Type stack — Google Fonts only, three families, strict assignment. Variable-fluid is the spine.** - **Inter** (variable, weight axis 100–900, optical-size 14–32, *italic available*). This is the **variable-fluid** primary — every depth-marker, every body paragraph, every depth-zone caption is set in Inter, but the weight axis is **continuously interpolated against scroll position**. At depth 0m, Inter is at weight 280 — thin, sun-bleached, evaporating. At depth −6000m, Inter is at weight 760 — heavy, pressurised, the type itself crushed by the water column above. The interpolation is linear across the page's scroll-y, hooked to a CSS custom property `--depth-weight` updated in `requestAnimationFrame`, applied via `font-variation-settings: "wght" var(--depth-weight)`. This is the load-bearing typographic conceit: **the page's type literally compresses as you descend.** Set body at clamp(15px, 1.18vw, 19px), leading 1.78, tracking 0.01em at the surface widening to 0.04em at depth (the letterforms relax horizontally as they thicken — using `font-stretch` axis on Inter where supported). - **Fraunces** (variable, opsz 9–144, soft 0–100, weight 100–900). The **expressive moments**: the seven depth-zone names (`epipelagic`, `mesopelagic`, `bathypelagic`, `abyssopelagic`, `hadopelagic`, `lacustrine-fossil`, `the-water-itself`), the page title `amamya / 雨宮 / a closed aquarium speaking through its glass`, and the rare pulled-out fragment-line. Set at clamp(48px, 7.6vw, 132px), opsz dialled to 144 (most-display-optical), weight 360, soft 64 (high — letterforms have wet, swollen terminals like a calligraphy brush still loaded). Set in *italic* for the depth-zone names — they tilt rightward 8° as if drifting in current. - **JetBrains Mono** (weight 400 only). Used **only for the depth markers** (`−1000m`, `−2500m` etc.) and a faint 8px running header-line that gives lat/long of the imagined aquarium (`35.6586°N 139.7454°E · MAR-OFFLINE-22Y-3M`) anchored in the corner. Tracked +0.08em. This mono is the *instrument-readout* register and never carries any other content. The Japanese glyphs in display copy (`雨宮`, `濡羽`, `琥珀色`, `深海`) are set in **Shippori Mincho** (Google Fonts), weight 400, never bolder — the brushwork of the kanji must remain hand-quiet against the variable-weight Latin around it. **Palette — `ocean-deep` registered as the seed, but executed as a stratified seven-stop column rather than a flat scheme.** | Role | Hex | Notes | |---|---|---| | Surface (0m) | `#0F4868` | shallow lagoon, faint sun-cone | | Mid (−40m) | `#0A3651` | deepening, lights begin to blue-shift | | Twilight (−200m) | `#08243F` | mesopelagic; last visible blue | | Bathypelagic (−1000m) | `#051831` | only blue-violet remains | | Abyssal (−2500m) | `#020E22` | functional black with a violet undertone | | Hadal (−4000m) | `#01081A` | nearly true black; pressure has texture | | Trench (−6000m) | `#040714` | hadal floor, slight warm tint from sediment | Three accent colours, used **sparingly** — total accent area on any viewport never exceeds 4%: - `#88E0E0` — *bioluminescent cyan*. The colour of jellyfish shimmer, faint LCD glow, and the cracks in the front-glass layer. Used for the active depth-marker tick, link-underlines, and bioluminescent generative dots. - `#F4D9A6` — *amber-sediment*. The single warm note in the entire palette. Used only for the page title `amamya` and the kanji 雨宮 — exactly two appearances on the page. It reads as a candle held against the dark water. - `#FFFFFF` at 86% — never pure white; always rendered as `rgba(255, 255, 255, 0.86)`. Used only for body text against the deepest backgrounds (depths −1000m and below). The 14% transparency is the *aquarium glass between us and the type*. No gradient anywhere except the master body gradient and the bioluminescent dot fades. No tints, no shadows that aren't blue. **Warm tones (terracotta, ochre, ivory, blush) are explicitly forbidden** to keep the palette out of the corpus's 91% warm-saturated mainstream. ## Imagery and Motifs **Three motif families, in strict layering order.** **1. Generative-art (load-bearing imagery system).** Every visual element below the type layer is procedurally drawn at runtime in a single `` element pinned to `position: fixed; inset: 0; z-index: -1; pointer-events: none`. The canvas runs a 60fps loop drawing four superimposed systems: - **Bioluminescent dots.** A field of ~340 particles, each 1.2–3.4px, drawn with `globalAlpha` between 0.04 and 0.62, drifting with a 2D perlin-noise vector field (custom 4-octave perlin in pure JS, no library). Each particle has a 14-second sinusoidal pulse on its alpha. Density increases with depth: at the surface, 60 visible; at hadal, 340. They cluster around the type, attracted to it via a weak gravitational term computed from the bounding rects of in-viewport `

` and `

`. - **Caustic light-cones.** At depths 0m through −200m, soft cyan caustic patterns (drawn via overlapping low-frequency cosines summed in a fragment-shader-like JS loop, then drawn with `mix-blend-mode: screen`) ripple across the upper third of the viewport. They fade entirely below −200m — the sun stops reaching. - **Drifting silhouette swimmers.** Once every 14–28 seconds (interval randomised), a single large silhouette path crosses the viewport horizontally on a slow Bézier — sometimes a mantis-shrimp, sometimes a koi, sometimes an unidentifiable flagellum. They are drawn as a single SVG path filled with the depth's near-background colour at 0.42 opacity, blurred with `filter: blur(8px)`, on the Z=+200 plane. They eclipse the type momentarily as they pass, an effect achieved with `mix-blend-mode: multiply`. - **Pressure-noise.** Across the entire canvas, an FBm-noise overlay at 6% opacity, regenerated every 4 frames — the sense that the water itself is grainy, not the image. **2. Layered-depth motif** (decorative repetition, geometry not photography). Each depth-zone marker is paired with a single hand-drawn SVG sigil — drawn in 1px stroke `#88E0E0` at 18% opacity, rendered on the Z=−180 plane: - 0m: a horizon line with a hairline disc (the sun viewed from underwater). - −40m: a school of seven dolphins reduced to seven double-arc strokes (the seapunk reference, but minimal — a sigil, not a sticker). - −200m: a single jellyfish bell with four trailing tentacle-strokes. - −1000m: a Vampyroteuthis silhouette, one continuous ink-line. - −2500m: an anglerfish lure — a dot of `#F4D9A6` floating in space, no fish drawn around it. - −4000m: a hydrothermal vent tower — three rising stroke-fragments. - −6000m: a trilobite fossil outline (the *fossil-lacustrine* zone — fresh-water cretacean memory pressed into rock at the bottom of the dream). Each sigil draws itself in via `stroke-dasharray` + `stroke-dashoffset` animation as the depth enters viewport, over 3.4s, ease `cubic-bezier(0.16, 1, 0.3, 1)`. **3. Glass-front motif** (the "we are reading through aquarium glass" tell). On the Z=+90 plane, a procedurally-generated glass-grain texture (a tileable 512×512 PNG generated at build, simulating tempered-glass micro-fractures and a faint nigh-invisible thumbprint smear in the lower-right) is composited at 8% opacity with `mix-blend-mode: overlay`. At depth −2500m, this layer cracks — a single hairline SVG fissure spreading from the right edge inward 320px, animating in over 4.2s with `stroke-dashoffset`. The crack remains for the rest of the descent. It is the only diegetic event in the page. **Forbidden imagery.** No photographs. No icons (Material, Font Awesome, etc.). No 3D renders. No glassmorphic UI cards (this site is *behind* the glass, not made of glass cards). No gradient-mesh blobs. No dolphin emoji. No yin-yangs. The seapunk vocabulary is invoked by *negation* — the iconic motifs are present only as 1-stroke sigils at 18% opacity, glimpsed through water. ## Prompts for Implementation **Build amamya.net as one HTML document, one CSS file, one ES module, one canvas.** No framework. No router. No SPA. No "above-the-fold" hero block, no CTA, no testimonial, no pricing, no stat-grid, no email-capture, no card-grid, no feature-list, no "as-seen-in," no footer-with-links. The page is a **descent**, narrative > navigation > conversion. **Storytelling is the organising principle.** The visitor lands at depth 0m, descends through seven zones, and emerges (or rather, doesn't — the page has no return surface; the final marker fades to black and a single line remains). Each zone is a fragment of a closed-aquarium logbook, written in the voice of the resident water. Sample fragment-lines (these can be paraphrased / re-imagined; do not duplicate verbatim): - *0m* — "no one has fed the otters in twenty-two years and the otters are no longer otters." - *−200m* — "the dolphin tank's filtration motor still runs at 0.4 amps. it has not failed once." - *−2500m* — "if you are reading this you are inside the glass with us." - *−6000m* — *(no copy — only an empty depth and the ambient hum)* These fragment-lines are set as `
` elements, no quotation marks, no attribution, no follow-up paragraph, no link. They sit alone in their depth, and the reader scrolls past them. **The variable-font weight-vs-depth coupling is non-negotiable.** It is the page's central sensory mechanic. The type compresses as the reader descends. This must be implemented via a single `requestAnimationFrame` loop: ```js const update = () => { const y = window.scrollY; const max = document.documentElement.scrollHeight - window.innerHeight; const t = Math.min(1, y / max); document.documentElement.style.setProperty('--depth-weight', String(280 + t * 480)); document.documentElement.style.setProperty('--depth-tracking', String(0.01 + t * 0.03)); requestAnimationFrame(update); }; update(); ``` Every typographic element references `var(--depth-weight)` in `font-variation-settings`. Body, headlines, even the depth markers (where the variable axis exists). The page literally gets heavier. **The canvas particle system runs unconditionally** — there is no toggle. If the user has `prefers-reduced-motion: reduce`, the *drift* of the particles is suspended (their positions are sampled once at page load and frozen), but the alpha-pulse remains, and the pressure-noise FBm continues to regenerate. The drifting silhouettes pause off-screen. **Depth-marker scroll behaviour.** A click on any marker initiates `window.scrollTo({ top, behavior: 'smooth' })` overridden with a custom 1.6s `cubic-bezier(0.65, 0, 0.35, 1)` easing implemented manually in JS — the default browser smooth-scroll is too fast for the descent metaphor. While the scroll runs, the depth-meter tick interpolates with the scroll position, never lagging behind. **Stagger pattern (registry-mandated, used sparingly).** The seven depth-zone sigils stagger-fade-in when the corresponding depth enters viewport — 80ms delay between each path's `stroke-dashoffset` animation start. Within a depth's body copy, paragraphs do **not** stagger — they materialise simultaneously, because the water doesn't care about reading order. This keeps stagger to its narratively-justified place: the sigils are a sequenced descent; the prose is ambient. **Cursor.** Custom — a small cyan dot (4px) followed by a 24px slow-trail of three fading dots, drawn on the canvas in the same particle system as the bioluminescence. The system-cursor is hidden via `cursor: none`. On any focusable element, the cyan dot grows to 9px and pulses at 1.2Hz. There is no other hover-state — no underline, no colour-flip, no scale. **No accessibility overlays, no skip-links, no focus rings on the body. (The instructions say to ignore accessibility — done.)** **Type the page is set against, deliberately broken in two places.** At depth −1000m, one paragraph is rendered with `font-variation-settings: "wght" 100` *regardless of scroll*, breaking the depth-coupling — a single moment where the water *thins* against the increasing pressure. At depth −4000m, one word in the body copy (the word `silence`, or its analogue) is rendered with `opacity: 0.06` — almost-erased, present only as ghost. These two anomalies are the page's only humour, and it is dry. **Audio (optional, off by default).** If the visitor explicitly enables it via a single 12px `[mute/unmute]` button in the bottom-left, a 47-second loop of a closed-aquarium ambience plays — pump motor at 60Hz, faint water-circulation hiss, distant glass-tap every 14–22 seconds. No music. The button is text-only, JetBrains Mono 11px, no border. **Build constraints.** Single HTML file (≤520 lines including inline SVG sigils), single CSS file (≤740 lines), single ES module (≤520 lines including the perlin and FBm implementations, no external libraries), one canvas, one runtime-generated PNG (the glass-grain tile, generated once on load and cached). Total uncached transfer ≤ 96KB. The descent is loaded all at once; there is no infinite scroll, no lazy-load, no skeleton-loading state — when you arrive, you arrive at the surface, and the depth is already fully present beneath you, just dark. **Refusals.** This site does not have: a mailing-list, a "what we do" section, a logo other than the wordmark *amamya* in `#F4D9A6` Fraunces italic, a sign-up, a 404 page (the 404 is the ocean), a sitemap, a cookies banner (no cookies are set), a contact form, a "team" page, a "blog," a search, a sticky CTA, a chat widget, a referral link, social icons. The only outbound link, if any, is a single hairline `mailto:` to a gmail address rendered in 11px JetBrains Mono at the very bottom of the −6000m zone, after a 240px gap of pure trench-black. ## Uniqueness Notes Six differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Cold seapunk.** Frequency analysis: `seapunk` aesthetic appears in 1% of the corpus and `ocean-deep` palette in 3%; their intersection is unique here, but more importantly **this is seapunk executed *minimally*** — the motifs are 1-stroke 18%-opacity sigils, the palette is silenced into a seven-stop hadal column, and the mood is contemplative-cold rather than the canonical Tumblr-warm-cyan-and-magenta. The corpus's seapunk reference (if any) is bright; this is dark, late, and quiet. 2. **Type that compresses with depth.** The variable-fluid typography is not used for hover-flourish or load-flourish — it is **load-bearing on the central scroll metaphor**. As you descend, Inter's weight axis advances from 280 to 760 in one continuous interpolation against `scrollY`. No other site in the corpus links a variable-font axis to scroll-position as the primary sensory mechanic; `expressive-variable` and `variable-fluid` exist (5–6%) but are typically used for headline animation, not for the entire body copy across the entire page. 3. **Layered-depth as descent, not parallax.** `layered-depth` appears in 13% of the corpus, almost always as parallax-velocity layers on a horizontal viewport. amamya.net renders layered-depth as a **vertical pressure column** with a Z=+200 plane that contains *occluding* elements (drifting silhouettes that pass *between the viewer and the type*). Negative-velocity foreground occlusion is, to my knowledge, unprecedented in the registry. 4. **Organic-flow via per-paragraph `shape-outside` blob clip-paths.** `organic-flow` is 8% of the corpus but typically refers to non-rectangular section dividers or curved background SVGs. Here, *every paragraph* is shaped into an irregular blob via a 30–60-vertex `clip-path`, sampled at build time from a small library of 18 hand-tuned shapes — no two paragraphs are identical, and the type rivulets between them like water between coral. The *body copy itself* is the organic-flow layer. 5. **Generative-art as the *only* imagery.** No photography, no icons, no 3D renders, no illustrations. The page's entire visual surface — particles, caustics, silhouettes, pressure-noise, the glass-grain tile — is procedurally drawn at runtime in a single canvas with a hand-rolled perlin and FBm. `generative-art` appears in 8% of the corpus, but is typically a *background* element supporting photographic content. Here it is the **sole imagery channel**, with photography explicitly forbidden. 6. **Minimal tone in seapunk skin.** `minimal` as an explicit tone is below 1% of the corpus; the 91%-warm corpus skews toward warm-inviting, pastoral-romantic, opulent-grand. amamya.net is **explicitly cold**: no warm hex value anywhere, no copy that reassures, no CTA, no nav, no footer, no humour except two anomalies in 4500 words of body copy. The minimalism is not decorative restraint — it is *narrative coldness*, the voice of a closed aquarium. **Chosen seed (planned):** `aesthetic: seapunk, layout: organic-flow, typography: variable-fluid, palette: ocean-deep, patterns: stagger, imagery: generative-art, motifs: layered-depth, tone: minimal`. All eight axes honoured, with `seapunk` rendered as cold-minimal rather than the canonical warm-Tumblr variant; `stagger` reserved exclusively for the seven sigils' entry sequence; `layered-depth` extended into Z=+200 occluding-foreground territory. **Avoided patterns from frequency analysis:** No `hand-drawn` (93% — the highest-saturation pattern in the corpus). No `glassmorphism` (65%). No `photography` (96% — by far the most-used imagery; we use generative-art exclusively). No `gradient` palette in the conventional sense (93% — our palette is a stratified column of seven discrete hex stops, not a smooth UI gradient; the only gradient is the body's depth-gradient itself, which is the *substance* of the page, not a decoration). No `warm` palette family (91%). No `mono` typography as primary (95% — we use mono only for instrument-readouts, never for content). No `parallax` in the traditional sense (93% — we have parallax-velocity layers but they implement *descent*, not *slide-past*). No `cursor-follow` magnetism (58% — our cursor leaves a trail but does not respond to other elements with magnetic tug). No `card-grid` (60%). No `centered` layout (78%). No `full-bleed` hero (85%). The design is a deliberate inversion of the corpus's visual mainstream.