# Design Language for amamiya.monster
## Aesthetics and Tone
amamiya.monster is **a rain-monster's lab notebook, kept inside a frosted-glass aquarium that breathes**. The conceit: a non-malevolent kaiju — a translucent, 4-meter-tall amphibian-shaped "ame-miya" (雨宮 — "rain shrine") creature — has, over six wet centuries, taught itself molecular biology, ASCII art, and statistical mechanics, and has now opened a public-facing **research blog**. The blog is hosted inside the creature's own body. The body is a soft, blob-shaped chamber of frost-lit water; the visitor reads scholarly notes that float, like dye plumes, through the chamber. Every paragraph is a dissolved cloud of ink that the creature has exhaled into its own torso. Every code block is a neat row of luminescent eggs lined along the ventral wall. Every footnote is a vibrating silver bubble that drifts upward and pops at the chamber's roof.
The tone is **energetic-scholarly** — a graduate-student kaiju who has had three espressos and is delighted that someone finally asked about its dissertation. Sentences accelerate. Citations land like punchlines. The creature is genuinely thrilled by ribosomes, by the Riemann zeta function, by the rainfall regimes of the Kii Peninsula, by why cuttlefish blink, by the etymology of *amamiya* — and it cannot stop talking. The page reflects this: animations push, never pull. Hover lifts. Scroll surges. The cursor is followed by a small school of prefetched glyphs the way pilot fish follow a host. Where most "scholarly" sites whisper, amamiya.monster **vibrates with monster-grade enthusiasm** — the page hums at the threshold of audibility, the typography clicks like wet pebbles, the bokeh in the deep background pulses in time with a 72bpm gill rhythm.
Inspirations that are actually load-bearing (not aesthetic name-drops):
- **Yves Tanguy's biomorphic surfaces** (1936–1955) — the way semi-organic shapes float without ground, casting their own internal weather.
- **Frutiger's classroom diagrams for Univers** (1954) — pedagogical clarity inside chromatic playfulness.
- **The frosted-glass beaker shelves of an actual wet lab at 7am** — overhead fluorescents through translucent reagent bottles, condensation halos, a fridge hum.
- **The Hayao Miyazaki "Ponyo" wave-spirits** — the moment when water decides to have a face.
- **Knuth's *Concrete Mathematics* margin notes** — chatty, learned, eager — what the creature aspires to in voice.
Critically, this is **not glassmorphism** (65% of cohort) and **not cottagecore-shrine** (3%) and **not cyberpunk** (16%). The frosted aesthetic is structural — the entire page's container *is* a translucent body — not a decorative blur on cards. The shrine reference is biological, not architectural. There is no neon. There is one creature, and it is reading aloud from its own notebook.
## Layout Motifs and Structure
A strict **single-column** spine, 640px wide, vertically centered in viewport, scrolled top-to-bottom. Single-column sits at **6% in the layout frequency analysis** — almost everyone reaches for cards or asymmetric splits — and within those 6% the implementations are usually documentation-clean-slate (Stripe-style API docs) or soft-serif-editorial (long-form essays). amamiya.monster claims single-column for **a different purpose: vertical aquatic narrative**. The column is not a "reading column." It is a **water column** — a vertical core of frosted-glass water, 640px wide, infinitely tall, through which the visitor descends. The creature's body wraps around this column. Reading is diving.
The visible rendering of the column:
- **Outer membrane (z=0):** A single rounded-rectangle, 640px × 100vh, `border-radius: 320px / 80px`, painted with a translucent frost gradient (#E6F2F4 at 12% alpha → #B6D8DC at 28% alpha → #E6F2F4 at 12%). The membrane's edge is hand-drafted as a soft, irregular blob curve via SVG `path d="..."`, not a CSS rectangle — the membrane breathes, scaled `1.0 ↔ 1.018` over 6.4s with a custom cubic-bezier `(0.42, 0.0, 0.58, 1.0)` (gill-rhythm easing).
- **Bokeh field (z=-1):** Seven layers of out-of-focus circular gradients, sized 240–520px, blurred 80–160px, spread across the viewport behind the column. Slow drift (90s loop, sinusoidal, max 12% displacement). Bokeh is at **3% in the imagery frequency analysis** — claimed here as the page's living "weather."
- **Ventral egg-row (z=1):** Code blocks, footnotes, and inline cited terms render as small luminescent ovals (32px × 18px, radial gradient #FBFBFD center → #C9DFE4 rim, soft 4px outer glow), arranged along the inner left wall of the column. They pulse on hover-lift.
- **Floating sentences (z=2):** Each paragraph occupies a "dye plume" region with a faint ink-cloud SVG mask (5–8% alpha, 800px wide, 320px tall), behind the text. The mask drifts slowly (40s, opposite direction to bokeh) so the ink under the words feels alive.
- **Cursor school (z=3):** A trail of 9 small glyphs (★ ✦ ⊹ ◌ ⌖ ⟡ ⌬ ✧ ✺) follows the cursor with magnetic spring easing, but only inside the membrane — the school refuses to leave the body, bouncing softly off the membrane edge.
Vertical chapter rhythm: **9 chapters, ~140vh each, ~1260vh total document height**. Each chapter is one note from the creature's research blog: (1) Etymology of amamiya, (2) Why I built this body of water, (3) Rainfall regimes I have tasted, (4) On ribosomes and prayer-bells, (5) The cuttlefish blink, (6) Statistical mechanics for monsters, (7) Field notes from the Kii Peninsula 1487 / 2026, (8) ASCII as a form of devotion, (9) Colophon — the creature signs off, dims the bokeh, and goes back to sleep.
Chapter transitions are **submerge-events**: the membrane briefly compresses (scale 0.98 / 200ms ease-in), the bokeh dims 8% for 600ms, then both bloom back as the next chapter rises. No card-grids. No bento. No sidebars. The column is the only architectural element on the page.
The wordmark `amamiya.monster` lives at the very top of the column, set in tech-mono at 22px, color `#2E5560`, with the `.monster` TLD rendered in `#5BA8B6` and gently underlined by an animated SVG path that draws-in over 1.4s on first load (path-draw-svg pattern at 20%, used here once not throughout — restraint). Below the wordmark, a one-line bio in lowercase: *"amphibian. statistician. shrine. wet."*
## Typography and Palette
**Fonts — Google Fonts only, three families, used with lab-notebook discipline.**
- **JetBrains Mono** (variable, weights 300/400/600/800). The page's load-bearing voice — body text, headings, captions, code, footnotes. JetBrains Mono is **tech-mono** in the frequency vocabulary (8% of cohort) and is chosen here over the more common Space Mono because its glyphs have **slight italic terminals on the lowercase a, e, g** that make body-paragraphs at 16px feel less like a terminal and more like a hand-typed wet-lab notebook from 1968. Body set at 16px / 26px line / 0.01em tracking / weight 400. Headings at 28px (chapter), 22px (section), 18px (callout), all weight 600, tracked −0.01em, color `#1F3D47`. Code inside the egg-ovals at 13px / 18px / weight 400, with subtle 200ms color-cycle on hover (`#2E5560` → `#5BA8B6` → `#2E5560`).
- **Fraunces** (variable, opsz 14–144, soft axis, weights 300/500). The creature's *voice* — every direct first-person sentence from the kaiju is set in Fraunces italic, opsz 96, soft 60, weight 300, color `#2E5560`. Used sparingly: 2–4 sentences per chapter. Fraunces has the wet, literary, slightly-1840s warmth that marks "the monster speaking," distinct from JetBrains Mono's "the notebook recording." This contrast is the page's prosodic engine — when Fraunces appears, the page slows; when JetBrains resumes, the page accelerates.
- **DM Mono** (regular only, 400 weight). Used exclusively for inline citations and the `[n]` footnote markers. DM Mono's tighter tabular figures align numerical citations cleanly along the ventral egg-row. 12px, weight 400, color `#7B95A0`.
**Three families, no fourth. No display face. No handwriting.** The handwritten/hand-drawn aesthetic is at 93% in the cohort and is deliberately refused here.
**Palette — "translucent-frost" claimed structurally.** Translucent-frost is at **3% in the palette frequency analysis** and is mostly used as a glassmorphism accent layer. amamiya.monster uses it as the **primary substrate** — the page is *made* of frost. Eight values, all derived from a single hue family (cool teal-grey-blue) so the page feels like one continuous body of water:
- `#E6F2F4` — page background (lightest frost). The "outside" of the creature.
- `#FBFBFD` — inner membrane highlight, code-egg fills.
- `#C9DFE4` — mid frost, gradient stops, code-egg rims.
- `#B6D8DC` — deeper water, inner column saturation.
- `#7AB5BD` — bokeh light cores.
- `#5BA8B6` — TLD accent, citation hover, gill-rhythm pulses.
- `#2E5560` — primary ink (body text, all JetBrains Mono headings).
- `#1F3D47` — heading deepest, hover state on chapter titles.
A single warm dissonant — `#E8B85A` (one warm gold) — is reserved for **exactly one element on the entire page**: the small `★` that marks the creature's most-loved sentence in each chapter (one star per chapter, nine stars total). The gold against the all-cool palette is the page's only chromatic surprise, and it is rationed. No other warm color appears anywhere. No red. No green. No purple. The entire page lives inside a 30° hue arc plus one gold star.
Background gradient: a subtle `linear-gradient(180deg, #E6F2F4 0%, #C9DFE4 38%, #E6F2F4 76%, #B6D8DC 100%)` that scrolls *with* the viewport, not the document — so the visitor always feels mid-water, never reaching the top or bottom of the tank.
## Imagery and Motifs
**Primary imagery: bokeh-background as living weather, plus book-scholarly motif as marginalia.**
**Bokeh-background (3% in cohort)**, reclaimed structurally:
- 7 SVG circles per viewport, `r = 120–260px`, fill = radial gradient (transparent rim → frost-color core 18% alpha), filter `blur(80–140px)`, mix-blend-mode `screen`.
- Drift on slow per-circle Lissajous paths (a=240px, b=160px, ω₁=1, ω₂=0.7, period 90s) — never repeating exactly across the chapter.
- Gill-rhythm pulse: every 6.4s, all 7 bokeh disks brighten 6% for 300ms. This is the page's heartbeat. Visitors who linger will notice; visitors who skim will not. That asymmetric reward is the design.
- On hover over the membrane, the nearest bokeh disk gently magnetizes toward the cursor by ~24px — a soft "the water notices you" effect.
**Book-scholarly motif** (rare in cohort), used with restraint:
- Each chapter opens with a small SVG **monogram capital** — the chapter's first character drawn as a hand-drafted scholarly initial, ~64px square, in `#2E5560` ink with a single `#E8B85A` gold-leaf accent dot (not the gold star — a separate, smaller punctuation gold). Initials are: 雨 (rain), 宮 (shrine), 体 (body), 雨 (again), 烏 (cuttlefish), 統 (statistics), 紀 (chronicle), 字 (character), 終 (end). The kanji are painted in a wet, slightly bleeding ink-on-paper style with deliberate halos.
- Each chapter closes with a **colophon line** in DM Mono 11px: `— ame-miya, ${chapter_date}, water temperature ${rendered_value}°C` where the temperature is dynamically computed from the chapter's hash so it feels measured, not invented. (Range: 11.4°C to 17.8°C — cool-water shrine pond temperatures.)
- Margin notes appear as **`※` daggers** (Japanese reference mark) hanging off the right edge of the column, in `#7B95A0`, set in JetBrains Mono 11px italic, lowercase, max 60ch wide. They drift in from `translateX(40px)` with a 600ms delay after the paragraph they annotate enters viewport.
**No photography. No 3D renders. No raster textures.** The only raster texture is a single 200×200px **wet-paper grain tile** at 3% opacity, multiply-blended over the entire page — pre-baked into a tiny PNG, ~1.4KB — so the frost never feels CSS-flat.
**The creature itself is never depicted.** No illustration of a kaiju. No silhouette. No eye. No tentacle. The visitor is *inside* the creature; an illustration would break the conceit. The closest thing to a "self-portrait" is a single 48px **gill-rhythm indicator** in the bottom-right margin: three tiny vertical lines that breathe in sync with the bokeh pulse. That is the only visual signature of the host.
**Pattern motifs as decoration:**
- **Hover-lift** (8% in cohort) — used everywhere a clickable object exists. Code-eggs lift 4px on hover (`translateY(-4px)`, 240ms cubic-bezier) and brighten 8%. Citation links lift 2px and grow a soft 6px frost halo. Chapter titles lift 6px with a 320ms ease-out and reveal a thin underline drawn in `#5BA8B6` from left to right over 380ms. **Lift, never depress.** The page never sinks. This is the energetic tone, expressed mechanically.
- A faint **wave-form rule** — a 1px sine-wave SVG, amplitude 4px, period 32px, color `#C9DFE4` — separates each paragraph instead of `
`. The waves animate their phase by 32px over 8s, so paragraph separators are also slowly flowing.
## Prompts for Implementation
Build amamiya.monster as **a single static HTML page, one stylesheet, one small ES module (~5KB minified), one ~1.4KB PNG, one Google Fonts request**. No SPA. No router. No framework. No React. No Vue. No build step beyond a single esbuild pass on the JS module. The page is one continuous vertical scroll, ~1260vh tall, nine chapters, gill-rhythmically alive throughout. Total document weight (excluding fonts): under 70KB.
**Storytelling is the organizing principle, not navigation.** There is no nav menu. There is no "About" link. There are no buttons that say "Get Started." The visitor lands at the top of the water column, reads (or scrolls past) the creature's nine chapters, reaches the colophon, and — if they wish — refreshes to start over. The creature does not collect emails. The creature does not have a pricing page. The creature does not link out except in citations, which open in a new tab silently.
**Layout, concrete:**
- The viewport is **always** showing the same vertical core: a 640px-wide rounded-blob membrane, centered horizontally, full viewport height, with body content scrolling *through* the membrane while the membrane itself stays fixed (`position: sticky; top: 0`). The bokeh field is `position: fixed` at z=-1 and never scrolls. The text content scrolls inside the membrane via a normal document scroll, with overflow visible so paragraphs near chapter boundaries can briefly extend past the membrane curve before being clipped by a soft SVG mask (`` on a ``).
- **Single-column, no exceptions.** Body text, headings, code, footnotes — all stack vertically in one 580px-wide content lane (640px membrane − 30px inner padding × 2). The only horizontal element is the wave-form rule between paragraphs.
- **Chapter heads** are sticky-pinned at the top of the membrane while their chapter is in viewport, fading out as the next chapter's head enters. Use `IntersectionObserver` with thresholds at 0.0 and 0.95 to drive the fade.
**Animation, concrete:**
- **Gill rhythm (the page's heartbeat):** a single `requestAnimationFrame` loop, started on `DOMContentLoaded`, period 6400ms, drives a CSS custom property `--gill` ∈ [0, 1] via `document.documentElement.style.setProperty`. All membrane breathing, bokeh pulsing, and code-egg glow are derived from `var(--gill)` in CSS. **One JS loop. No per-element timers.**
- **Membrane breathing:** the SVG path `d` attribute is *not* animated — it is static. The breathing is `transform: scale(calc(1.0 + var(--gill) * 0.018))` on the membrane element. Cheaper and smoother.
- **Bokeh drift:** seven `` elements, each with `transform: translate(calc(...), calc(...))` driven by Lissajous functions of a master clock, computed once per frame in the same RAF loop. Use `will-change: transform` only on these seven and on the membrane.
- **Cursor school:** 9 small SVG glyphs in a fixed-position container, positions updated in the same RAF loop with spring physics (k=0.12, d=0.78, per-glyph offset of i × 60ms lag). Bounded inside the membrane by reflecting their target whenever the cursor exits.
- **Hover-lift:** pure CSS `transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 240ms ease-out`. Slight overshoot (the cubic-bezier with `1.56`) is critical — that's the *energetic* tone made mechanical. **Without the overshoot the page is calm; with it, the page is excited.**
- **Path-draw on the TLD underline:** SVG `` with `stroke-dasharray` and `stroke-dashoffset` animated once on first load (1.4s), then never again.
- **Reveal on scroll:** paragraphs fade-in from `opacity: 0; transform: translateY(12px)` to `opacity: 1; transform: translateY(0)` via IntersectionObserver, 480ms ease-out, staggered 60ms per paragraph within a chapter.
**Voice/copy guidance for the implementer:**
- The creature speaks in first person, present tense, lowercase except for proper nouns and kanji. Sentences are often short, sometimes single-word ("delighted."). Em-dashes are common — the creature breathes between thoughts. Footnotes are encouraged, as are parenthetical asides that break into the main flow.
- Citations are real. The creature has read Knuth, Feynman, Kawabata, Hokusai's *Hyakumonogatari*, and a 1972 paper on Hokuriku rainfall isotopes. **Citations link to actual DOIs / archive.org pages.** No fabricated references. The creature's energy is real because the creature's reading list is real.
- Ratio of JetBrains Mono ("notebook") to Fraunces italic ("monster speaking") is roughly 6:1 — the monster speaks ~17% of the time. When the monster speaks, it is delighted.
- Each chapter must contain exactly one `★` (the gold star) on the creature's most-loved sentence. **Exactly one. Nine total on the page.** This is the visitor's hidden game: the careful reader collects all nine. There is no UI for this. There is no counter. The reward is private.
**AVOID (explicit):**
- No CTAs. No "Subscribe." No "Join the newsletter." No email capture.
- No pricing blocks. No tiers. No comparison tables. The creature does not sell.
- No stat-grids ("10K researchers / 3M citations / 24/7 monster"). The creature does not boast in numbers.
- No testimonials. No press logos. No "as seen in." The creature does not need credentials.
- No hero with a giant headline and a giant button. The hero is the wordmark, the bio, and the first chapter's monogram capital. That is the entire hero.
- No card-grid of "Latest Posts" — the page is one post, in nine movements.
- No social-share buttons. The creature is not optimizing for reach.
- No dark-mode toggle. The frost-tank is the frost-tank. There is no other state.
- No cookie banner. The page does not set cookies. (Use no analytics, or a server-side log if one is required.)
**Performance posture:**
- Lighthouse is not the goal; **the gill rhythm is the goal**. The page should feel alive on a 2018 ThinkPad with a soft CPU. If the gill loop drops below 50fps, drop the bokeh disk count from 7 to 5 — never disable the rhythm itself. The rhythm is the design.
## Uniqueness Notes
Eight differentiators this design commits to. None should be duplicated by any other CMassC site.
1. **The viewport is the inside of a creature.** Most "frost" / "glass" sites at 65% glassmorphism use translucency as a *card decoration*. amamiya.monster's entire viewport-spanning rounded-blob membrane *is* the creature's body, and content is rendered *through* the body wall. The chamber breathes. This is not glassmorphism; it is **biotic-architecture**. **Blobitecture is at 1% in the aesthetic frequency analysis** — claimed structurally here, not as a pastel-bubble background flourish.
2. **Single-column as water column.** Single-column sits at 6%, almost always rendered as documentation or essay layouts. amamiya.monster reframes single-column as a **vertical aquatic narrative core** — the visitor descends through 1260vh of water, not through nine sections of a blog. The semantics of single-column become diving.
3. **Tech-mono as wet-lab notebook, not terminal.** Tech-mono sits at 8% and is overwhelmingly used for "developer tool" or "dark crypto dashboard" voices. amamiya.monster uses JetBrains Mono as the **typewriter of a 1968 wet biology lab notebook**, paired with Fraunces italic for the creature's voice. The mono is wet, not crisp; humid, not chrome; pedagogical, not technical. Zero terminals. Zero command-line motifs. Zero `>` prompts. **The mono is repurposed as scholarly humid script.**
4. **Translucent-frost as primary substrate, not accent.** Translucent-frost (3%) is normally a glass-card overlay. Here it is the page's entire material — there is no "behind the frost," because the frost *is* the page. Eight values inside a 30° hue arc, plus exactly one rationed gold star per chapter. The chromatic discipline is severe.
5. **Hover-lift everywhere, with overshoot.** Hover-lift (8%) is usually a 2px lift with linear easing — calm, corporate. amamiya.monster lifts 4–6px with a `cubic-bezier(0.34, 1.56, 0.64, 1)` overshoot — the page literally *bounces with enthusiasm* on every hover. **The overshoot is the energetic tone, mechanically expressed.** No other site in the cohort should do this.
6. **Bokeh-background as gill-driven heartbeat.** Bokeh-background (3%) is normally a static wallpaper. Here the seven bokeh disks pulse on a 6.4-second gill rhythm shared with the membrane and the code-egg glow — **one master clock drives every breathing element on the page**. The rhythm is felt, not seen. Visitors who linger discover it; visitors who skim feel it as ambient calm.
7. **Book-scholarly as scholar-monster, not Oxford library.** Book-scholarly motif is rare in the cohort and is typically dark-academia (13%) or light-academia (10%) — leather, Latin, candles. amamiya.monster's scholar is **a kaiju with a wet PhD**: monogram capitals are kanji, not Trajan; colophon temperatures are pond-cool; citations are real but include 15th-century rainfall records. The scholarship is **biotic, not architectural**. No leather. No Latin. No candles.
8. **Energetic tone via mechanical overshoot, not loud color.** Energetic (8% in tone) is normally rendered with neon, dopamine palettes, or dense card-grids. amamiya.monster expresses energy through **six microscopic decisions**: hover-lift overshoot, paragraph fade-in stagger, cursor-school pilot-fish lag, gill-rhythm pulse, the creature's accelerating sentence-rhythm in copy, and the gold-star payoff. The page is calm-looking and energetic-feeling. No other site in the cohort fuses translucent-frost stillness with overshoot-driven enthusiasm.
**Chosen seed (per assignment):** aesthetic: blobitecture, layout: single-column, typography: tech-mono, palette: translucent-frost, patterns: hover-lift, imagery: bokeh-background, motifs: book-scholarly, tone: energetic.
**Patterns deliberately avoided** (from frequency analysis): no hand-drawn aesthetic (93%), no photography imagery (96%), no card-grid layout (60%), no warm palette dominant (91%), no parallax-heavy scrolling (93% — used here only minimally for the bokeh field), no glassmorphism cards (65%), no asymmetric layout (56%), no full-bleed (85%), no mono-as-terminal cliché (95% mono usage), no centered hero with CTA (78% centered), no spring/stagger on every element (63%/61% — used here only on cursor-school and paragraph fade respectively, not as universal motion vocabulary).