# Design Language for shinonome.monster

## Aesthetics and Tone

shinonome.monster is a **bestiary of the false dawn** — a horizontal, scroll-driven cabinet of creatures that only exist in the seven minutes before sunrise, when the sky is the color of cold steel and nothing has decided whether to be day or night yet. "Shinonome" (東雲) is the old Japanese word for that interval — the *daybreak*, the gauze of low cloud lit from beneath the horizon. ".monster" is the catalogue. The site reads as a **surreal field-journal kept by a sleepless naturalist** who only goes out at 4:50am and draws the things that are gone by 5:30: the morning-fog leviathan, the dew-strider, the lamplight moth that eats streetlights, the heron that is actually a folded letter.

The tone is **mysterious-moody, not horror** — there is no gore, no jump-scare, no "spooky" cliché. It is the unease of *liminal hours*: too early, too quiet, the feeling that the world has not finished rendering. The aesthetic is **surreal dreamscape rendered in a near-monochrome midnight-blue field with one bruised dawn-band** — generative line-creatures that breathe and re-draw themselves, soft displacement warping, and a single horizon-glow that creeps brighter as you scroll east. Nothing is photographic; everything is ink, vapor, and procedural noise. Think *Leuchtturm field-notebook bound in storm-grey paper*, crossed with the title sequence of a film about insomnia, crossed with a planetarium that only shows the sky at civil twilight.

## Layout Motifs and Structure

The site is a **single horizontal scroll-track — a 7-panel "dawn transect" that moves west-to-east** (from `#10131F` deep-night on the left to `#3B3A4E` bruised-twilight on the far right, the dawn-band rising along the bottom 18% of the viewport the whole way). Vertical scroll is hijacked into horizontal travel; on touch it is a native swipe-deck. No card-grid, no centered hero stack, no bento — the page is a **continuous strip**, like unrolling a scroll-painting (emakimono) of a single long morning.

- **Fixed furniture, minimal:** a thin top-left rubric — `しののめ — a bestiary of the false dawn` — in condensed caps; a fixed bottom progress-rail that is literally a **horizon line**: a hairline that brightens from `#1A1E2E` to `#E8C9A0` as you traverse the seven panels, with a tiny sun-disc marker that never fully rises. No top nav, no hamburger, no logo cluster, no footer, no sidebar.
- **Each panel is a "specimen plate":** left two-thirds is the live generative creature drifting in negative space; right third is the **field-note column** — a hand-set label block (specimen number `№ I` … `№ VII`, vernacular name, the hour it appears, three lines of journal prose, a "last observed" date that is always tomorrow). Plates are separated by **fog-gutters**: 20vw of empty warped haze so each creature gets its own breath of ma (negative space).
- **Depth via parallax-of-vapor only:** three slow fog layers drift at 0.2×/0.5×/0.85× the scroll rate; the creature sits between layer 2 and 3. No tilt-3d, no card-flip — depth is *atmospheric*, not geometric.
- **Entry panel (Panel 0, fully off to the left of the start):** just the title, a single blinking cursor-dot, and the instruction `scroll east →` that fades after first interaction.

## Typography and Palette

**Type system — Google Fonts only:**

- **Condensed display face:** `Oswald` (weights 300–600) — for the rubric, the vernacular creature names, panel numbers, and the `scroll east →` prompt. Tall, narrow, slightly austere — it reads like a museum specimen-drawer label or an old observatory logbook header. Tracking `0.14em` at uppercase rubric size; vernacular names set large (clamp 2.6rem–4.4rem) in weight 300 with `0.02em`.
- **Body / field-note face:** `Spectral` (serif, weights 300 + italic 300/400) — the naturalist's prose. A screen-native serif with a literary, slightly nocturnal contrast; italic used heavily for "last observed: tomorrow, 04:58" lines and Latin-mock binomials (`Bruma serpens`, `Lampyris noctivora`).
- **Micro-label / metadata face:** `IBM Plex Mono` (weight 400) — only for the hour-stamps (`04:51 — 05:09`), coordinates, and the horizon-rail readout. Kept tiny (10–11px), `0.08em`.
- **Japanese accent:** `Shippori Mincho` (weight 400) — for the single word しののめ in the rubric and one large watermark kanji 雲 ("cloud") ghosted at 4% opacity behind Panel IV. (If unavailable in pipeline, fall back to `Noto Serif JP`.)

**Palette — near-monochrome midnight with one dawn-band:**

- `#0C0F1A` — abyssal night (page base, left edge)
- `#10131F` — deep night (Panel I–II field)
- `#1A1E2E` — slate-night (fog layer base)
- `#2A2E42` — dust-blue (mid fog, creature shadow)
- `#3B3A4E` — bruised twilight (right edge, Panel VII)
- `#8E97B5` — ash-violet (creature line-ink, default stroke)
- `#C7CEDF` — pre-light grey (text on dark, headlines)
- `#E8C9A0` — cold dawn-gold (the horizon-band glow, accent ONLY — used for ≤6% of pixels)
- `#B5615A` — ember-rust (a single warning-flicker color: the lamplight moth's eyes, one underline)
- `#F4F1E8` — paper-bone (the field-note column background — a narrow vertical strip of "page" laid over the night)

Color rule: 92% of every screen is in the `#0C0F1A → #3B3A4E` cold range; warmth is *rationed* and always sits at the bottom of the frame, like real dawn.

## Imagery and Motifs

**Seven generative creatures (one per panel) — all rendered live in `<canvas>` or animated SVG, no bitmaps:**

- **№ I — `Bruma serpens` / the Fog Leviathan, 04:51.** A 9-segment metaball spine that undulates through low-frequency Perlin noise; rendered as overlapping translucent ash-violet blobs with a single hairline contour traced over the silhouette every frame (path-draw, then erase, then re-draw — it never holds still).
- **№ II — `Roris gradiens` / the Dew-Strider, 05:02.** Six absurdly long thread-legs (quadratic béziers) that "walk" by recomputing foot anchors; each footfall drops a 3px expanding ripple-ring that fades. Body is a single hollow ellipse.
- **№ III — `Lampyris noctivora` / the Lamplight Moth, 05:08.** Twin triangular wings of generative vein-fractals (recursive line-branching, depth 5); the only creature with the ember-rust accent — two `#B5615A` eye-points that pulse. Wings beat via a slow sine on the fractal's rotation.
- **№ IV — `Charta ardea` / the Paper Heron, 05:14.** An origami-fold heron: hard-edged polygon planes that *unfold and refold* on a loop (a crease-pattern morph), casting flat geometric shadows. Behind it, the ghost-kanji 雲.
- **№ V — `Echo cervus` / the Hollow Stag, 05:19.** Antlers drawn as a slow generative L-system that grows new tines as the panel enters view, then the body fades to just the antler-network floating alone. Particle-motes drift up through it.
- **№ VI — `Nimbus equus` / the Cloud-Mare, 05:25.** A horse-shaped negative space — the creature is the *absence* in a field of fog; mane is wind-combed noise streaming rightward. Almost invisible; you see it only by what the fog refuses to fill.
- **№ VII — `Aurora bestia` / the Last One, 05:30.** Not a creature — a slowly brightening rectangle of dawn-gold gradient with a faint horned silhouette dissolving into it. The journal note: *"by the time it has a name, it is morning."*

**Recurring decorative motifs:** the **horizon hairline** (present in every panel, the through-line); **fog-gutters** of displacement-warped noise between plates; **specimen-pin marks** (tiny `+` registration crosses at plate corners, like a botanical mounting sheet); **drifting motes** (1px particles, max ~40, slow upward drift); **star-celestial residue** — three or four faint fixed stars in the upper-left that get washed out one by one as you scroll east. A **subtle film-grain + 1px chromatic-fringe** overlay on the whole canvas, very low amplitude.

## Prompts for Implementation

Build shinonome.monster as **one HTML page, one CSS file, one ES module, plus an optional second module for the canvas creatures** — no framework, no build step, no service worker. The whole thing is a ~2-minute horizontal walk through seven dawn-creatures. There is **no CTA, no pricing block, no stat-grid, no testimonials, no email capture, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no "features" section**. It is a bestiary, not a landing page.

**Structure & scroll mechanics:**
1. Hijack vertical wheel/trackpad into horizontal translation of a `position: sticky` strip (or `transform: translateX()` on a 700vw track driven by `scrollY`). Provide a real scroll length so the native scrollbar works; on touch, use `scroll-snap-type: x mandatory` with one snap-point per panel and let it be a native swipe-deck — do NOT fight touch.
2. Each of the 7 panels is 100vw. Between panels, a 20vw "fog-gutter" of warped noise. Panel 0 (title) sits at translateX 0 with the rubric, blinking cursor-dot, and `scroll east →`.
3. The **horizon-rail** at the bottom is the progress indicator: a 1px line whose color interpolates `#1A1E2E → #E8C9A0` based on overall progress; a small sun-disc marker moves along it but its `cy` never goes above ~70% of the rail height — the sun never rises.

**Animation & storytelling (this is the whole point — bias hard toward immersive narrative, away from UI):**
- Each creature lives in its own `<canvas>` (or inline SVG) sized to its panel; animate with `requestAnimationFrame`, but **only run the rAF loop for panels currently in/near the viewport** (IntersectionObserver gates it) — others freeze.
- Core technique is **morph + path-draw-svg + generative noise**: silhouettes are continuously re-drawn (stroke-dashoffset sweeps, metaball recomputation, L-system growth). Nothing is a static asset. Use a tiny hand-rolled 2D Perlin/simplex function (≈30 lines) — no libraries.
- **Fog parallax:** 3 layers of large blurred radial-gradient blobs translating at 0.2× / 0.5× / 0.85× the track speed; creature canvas pinned between layers 2 and 3.
- **Field-note column** (the `#F4F1E8` paper strip on the right third of each panel): the journal prose fades + slides up 16px with a gentle stagger (number → name → hours → 3 prose lines → "last observed: tomorrow") as the panel crosses 35% into view. Vernacular names in `Oswald` 300, prose in `Spectral` italic.
- **The dawn creep:** maintain one CSS custom property `--dawn` (0→1 across the whole scroll); the bottom 18% dawn-band's brightness, the horizon-rail color, and the fog tint all read from it. Panel VII is `--dawn ≈ 1` and is mostly `#E8C9A0` glow — the page literally ends at sunrise.
- **Stars wash out:** 4 fixed 1px stars upper-left; their opacity = `1 - (--dawn * 1.3)`, clamped — they vanish one by one.
- **Grain + fringe:** a full-viewport overlay div with an animated SVG-noise `feTurbulence` background at ~5% opacity and a 1px `text-shadow`-style chromatic offset on headlines only. Keep amplitude tiny — atmosphere, not glitch.
- **Entry:** on load, hold on Panel 0 for ~1.2s, cursor-dot blinking; first wheel/swipe begins the eastward travel and fades the `scroll east →` prompt.
- **Reduced-motion:** if `prefers-reduced-motion`, freeze all creatures on a representative pose, disable fog parallax, keep the dawn-creep but make it a static per-panel gradient, and let the deck be plain horizontal-snap.

**Voice of all on-page text:** terse, nocturnal, first-person naturalist. Latin-mock binomials in italic. Every "last observed" date is *tomorrow*. The rubric is the only place しののめ appears in kanji-kana; everywhere else, romanized or English. Never explain the conceit — let the seven plates do it.

## Uniqueness Notes

**Differentiators from other designs in this codebase:**

1. **Horizontal "dawn transect" instead of vertical scroll or card-grid.** The corpus is 92% card-grid and 86% full-bleed *vertical* stacks; this is a single west-to-east horizontal emakimono strip where the scroll axis itself encodes the passage of twilight into morning. Layout uses the rare `horizontal-scroll` (8%) pattern, with `ma-negative-space` fog-gutters — no card-grid anywhere.

2. **Disciplined near-monochrome midnight-blue with rationed dawn-gold — against a corpus that is 98% "warm" and 94% "gradient."** Here warmth is a *budget* (≤6% of pixels) and always physically at the bottom of the frame like real low-horizon dawn light. The `--dawn` variable means the palette literally changes as you read; the page ends *at sunrise*, in `#E8C9A0`, by design.

3. **Bestiary of liminal-hour creatures, all procedurally drawn live — zero photography, zero hand-drawn illustration assets.** Against 98% photography and 94% hand-drawn, every creature is generative (metaballs, L-systems, vein-fractals, origami-fold morphs, negative-space horse) re-drawn each frame. The "imagery" is code, not files.

4. **Surreal + mysterious-moody without horror clichés.** Surreal aesthetic (8%) and mysterious-moody tone (10%) are both underused; this avoids the goblincore/cyberpunk/glitch routes and the spooky-monster route entirely — it's the unease of being awake too early, not of being scared.

5. **No marketing furniture at all.** No CTA, pricing, stats, testimonials, logo wall, newsletter, contact form — it is a museum specimen-drawer experience, full stop. The only "navigation" is a horizon-line progress rail with a sun that never rises.

**Avoided overused patterns (from frequency analysis):** hand-drawn aesthetic (94%), glassmorphism (83%), warm palette (98%), gradient palette (94%), mono-only typography (94%), photography imagery (98%), card-grid layout (92%), full-bleed vertical stacks (86%), cursor-follow (89%), magnetic (79%), tilt-3d (30%). Used instead: `surreal` aesthetic, `horizontal-scroll` + `ma-negative-space` layout, `condensed` (Oswald) + `serif-revival` (Spectral) typography, `midnight-blue` / `monochrome` palette, `morph` + `path-draw-svg` + `parallax` (vapor-only) patterns, `generative-art` imagery, `star-celestial` + `wave-forms` motifs, `mysterious-moody` tone.

**Chosen seed / style:** `surreal dreamscape promo` — *aesthetic: surreal, layout: horizontal-scroll, typography: condensed, palette: midnight-blue, patterns: morph, imagery: generative-art, motifs: star-celestial, tone: mysterious-moody*
<!-- DESIGN STAMP
  timestamp: 2026-05-11T08:37:07
  domain: shinonome.monster
  seed: seed
  aesthetic: shinonome.monster is a **bestiary of the false dawn** — a horizontal, scroll-dri...
  content_hash: de58b0658586
-->