# Design Language for tobikage.monster
## Aesthetics and Tone
tobikage.monster is an **anti-design** dossier of a flying shadow that may or may not exist — a half-classified intelligence packet leaked from a long-disbanded reconnaissance unit, photocopied onto cold blue paper and reassembled by someone who has stopped caring whether the columns line up. The tone is **mysterious-moody**: every page reads like it was opened by mistake, every photograph is zoomed past the point of recognizability, every caption is half-redacted. The site refuses the comforts of a grid; it refuses the comforts of contrast hierarchy; it refuses to tell you what tobikage *is*. Instead it lays out evidence the way an obsessed researcher pins it to a wall — torn out, taped down, annotated in margins with sans-grotesk monospace, surrounded by the soft astigmatic bokeh of streetlamps photographed through a rain-streaked windshield at 4 AM.
Differentiators: the design treats **legibility as conditional** — body text is set in a comfortable size, but headlines collide with imagery, captions slip beneath the baseline, and entire paragraphs are rotated -2.7° as if peeled and re-stuck. Yet there is nothing chaotic in service of "edginess"; the moodiness is **archival**, **forensic**, **slow**. A visitor lingers because they sense the page is hiding something, not because it is shouting. The ethereal-blue palette pulls the whole document toward a 3 AM monitor-glow, the kind of blue that exists only on television static and inside abandoned subway stations.
The site never says the word "ninja". It never explains "tobikage". The closest it comes is a single dossier line, blurred halfway: `subject: 飛び影 — last verified position: ▮▮▮▮▮▮ ▮▮▮▮ Ward, 02:14 JST`.
## Layout Motifs and Structure
**Magazine-spread** as the master grid — but a magazine that has been torn from its binding and laid out on the floor in a sequence the reader must *walk through*. Each "spread" is a full-viewport landscape pair: a left page and a right page, asymmetric, with imagery that bleeds across the gutter. On desktop this is a horizontal scroll-snap container (`scroll-snap-type: x mandatory`, `scroll-snap-stop: always`); on mobile it stacks vertically but preserves the spread's internal collage logic.
The spreads are numbered in roman-and-arabic mixed: `№ I.01`, `№ I.02 — III.07`, with gaps that suggest pages are missing. Six spreads exist; the navigation index lists nine. **Three spreads are deliberately unreachable** — their numbers appear in the index, hovering them shows a fragmentary tooltip ("classified", "redacted", "subject relocated"), and clicking them does nothing.
**Sharp-angles** govern every container. No `border-radius`. Every panel is either a true rectangle or a clipped polygon — `clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%)` for a notched corner that reads as a folder tab; `polygon(0 12%, 100% 0, 100% 88%, 0 100%)` for the parallelogrammed "evidence card" that holds each photo. Lines of text intersect images at 7.2° offsets. A horizontal rule is never `` — it is a 1px ethereal-blue line drawn at -1.4° rotation across the spread, sometimes broken by an overlapping caption.
The sidebar is an **anti-sidebar**: a 64px-wide vertical strip on the left edge holding only a barcode, a JIS timestamp that updates in real time (`tools/cron-updated`), and a single-character status indicator (`◉` red, `◯` blue, `◐` flickering). It is not a navigation. Navigation lives in the spread index, which is itself just one of the spreads — number `№ 0.00 / contents`, with hand-drawn arrows pointing at the others.
The footer is a single sentence in 9pt monospace, set ragged-right against the right edge of the last spread: `documents recovered 2024–2026 // mirror unauthorized // tobikage remains at large`.
## Typography and Palette
**Fonts (Google Fonts only):**
- **Display (sans-grotesk):** **Space Grotesk** — for spread numbers, dossier headers, and the single shouting headline of each spread. Used at weights 500 and 700. Tracking is *negative*: `letter-spacing: -0.04em` at display sizes, `-0.025em` at midweight. Set with `font-feature-settings: "ss02", "ss05"` so the `a` and `g` take their alternate forms — flatter, more telegraphic. Headline scale: `clamp(3.6rem, 9.4vw, 7.2rem)`, leading collapsed to `0.92` so descenders cut into the line below.
- **Body (sans-grotesk supporting):** **Inter** at weight 400 with `font-optical-sizing: auto`, set at 17px / 1.55 leading. Used for dossier body copy, captions, and the brief field-report passages. Captions drop to 12px Inter italic with `letter-spacing: 0.06em`.
- **Mono (forensic annotations):** **JetBrains Mono** at 11–12px for marginalia, classification stamps, JIS timestamps, redaction codes (`▮▮▮▮▮ // CLASS-A`), and the sidebar barcode-adjacent metadata. Used at weight 400 and weight 700 for stamps.
- Display size collisions are intentional: a 7rem headline routinely overprints a 17px paragraph at 18% opacity, and the page does not "fix" the collision.
**Palette — ethereal-blue (8 swatches):**
- `#e8f0ff` — paper-blue (background, the base sheet of the dossier; cold, almost a non-color)
- `#c4d6f0` — fog-blue (secondary panels, evidence card backs)
- `#7a9bc8` — surveillance-blue (mid-tone strokes, divider lines)
- `#3d5e8c` — twilight-blue (body text on lighter panels)
- `#1a2540` — abyss-blue (primary text, headline strokes)
- `#0a1428` — null-blue (deep voids, redaction bars, the sidebar)
- `#9fb8e0` — phosphor-blue (hover states, scanline glow, the bokeh midtones)
- `#d4422a` — emergency-vermilion (used exactly four times across the entire site: the sidebar status dot when active, the "CLASSIFIED" stamp on Spread III, the underline on the single live link in the dossier, and a single 6×6px square in the bottom-right of the contents spread)
The vermilion is the only warm color in the system. It must never be used decoratively. It marks **only what is currently in motion**.
## Imagery and Motifs
**Zoom-focus** is the dominant imagery rule and the visual signature of the site. Every photograph on tobikage.monster is presented at one of three magnifications: **1.0× context**, **3.4× detail**, or **8.2× pathological**. The 1.0× appears once per spread as a faint background ghost (opacity 0.18, bokeh-heavy, no subject readable). The 3.4× appears as the spread's central evidence — a corner of a doorway, a reflection in a puddle, the back of a head turning. The 8.2× appears as inset crops, irregular trapezoids cut from the 3.4× and pinned with a CSS-drawn corner-tape graphic — these crops are pixel-soft, JPEG-honest, deliberately not "enhanced". The viewer is meant to feel they are looking too closely and seeing less than they did at the wider zoom.
**Bokeh-background** is the spatial atmosphere. Every spread has a stack of 24–36 SVG `` elements, blurred via `filter: blur(28px) blur(56px)`, sized between 60px and 280px, opacity 0.22–0.48, drifting at 0.04–0.12 px/frame on a Lissajous path. Colors sampled exclusively from phosphor-blue, fog-blue, and twilight-blue. The bokeh **does not respond to scroll** — it has its own time. It loops every 47 seconds, a prime number chosen so it never syncs with anything else on the page.
**Sharp-angles** as motif: hand-drawn (SVG-traced) diagonal slashes appear as connecting marks between captions and their referenced detail-zooms. These are not arrows. They are bare line segments terminating in a tiny perpendicular hash mark, the way a forensic photographer marks evidence on a contact sheet. Each slash is 0.5–1.5px stroke, ethereal-blue surveillance tone, sometimes broken mid-line as if the printer ran out of ink.
A recurring visual: the **shadow that does not match its object**. On three spreads, an object's drop-shadow is rotated, displaced, or shaped wrong (a streetlamp casts a human-figure shadow; a coffee cup casts a bird-wing shadow). The mismatch is never called out in copy. It is just present, waiting to be noticed on a second visit.
The site contains exactly one moving image: a 14-frame animated SVG of a silhouette crossing between two buildings, looped, 9 seconds total, occupying a 96×96px square in the corner of Spread V. It is small enough to be missed. It is the only place tobikage is depicted directly.
## Prompts for Implementation
Build tobikage.monster as a **horizontally-scrolled forensic dossier** with magazine-spread spatial logic. Prefer collage and overlap to clean separation. Every spread should look like it was assembled, not designed.
**Concrete implementation moves:**
- Single-page application built as static HTML + CSS + a thin vanilla-JS bokeh animator. No framework. The horizontal scroll is achieved with CSS `display: flex` + `overflow-x: scroll` + `scroll-snap-type: x mandatory` on the spread container; each `` is `100vw` wide with `scroll-snap-align: start`.
- Use `clip-path: polygon(...)` aggressively for evidence cards, dossier folders, and notched corners. Never use `border-radius`. Variable-edge containers should use `clip-path: path('M 0,0 L 100%,3% ...')` to suggest hand-torn paper, with three pre-defined "tear profiles" rotated and reflected for variety.
- Bokeh: a single `