# Design Language for tobikage.monster ## Aesthetics and Tone tobikage.monster is **a surrealist sumi-e dreamscape where a shadow learns it has a body** — picture a single brushstroke of black ink that detached itself from a calligrapher's scroll at midnight, drifted out the window, and is now wandering a tilted blue world looking for the hand that drew it. The name *tobikage* (飛影) means "flying shadow," and the whole site treats the cursor, the scroll position, and the viewport itself as **the body the shadow doesn't quite trust** — it follows you, but reluctantly, with a half-second of doubt, like a reflection that has started thinking for itself. The tone is **mysterious-moody, never gothic-edgy** — this is not horror, not a haunted house, not dripping-blood typography. It is the specific melancholy of *being a copy of something* — beautiful, weightless, slightly resentful. Think of the dream sequences in Kurosawa's *Yume*, the floating ink-figures of Lei Lei's animation, the deep indigo of a Hokusai night wave, and the way a Noh mask seems to change expression when the light tilts. Everything is rendered in **flat ink shapes that cast no shadow of their own** (because the shapes *are* the shadows) drifting across a backdrop of deep midnight blues that are never quite black — there is always a little starlight bleeding through. The `.monster` in the domain is the joke and the heart of it: the "monster" here is just *a shadow that got loud*. The site should feel like it's quietly amused by its own ominousness — a creature that practiced its scary face in the mirror and then got distracted by how the mirror works. ## Layout Motifs and Structure The page is built on **diagonal-sections** — every section boundary is a hard slanted seam raked at a consistent **−14 degrees** (down toward the left), so the entire site reads as a stack of **leaning ink-paper sheets that have slid against each other in the dark**. Never a horizontal divider; the floor is always tilted, which makes the floating shapes feel like they're the only things in the world that know which way is up. - **The tilted-sheet stack.** Six full-bleed sections, each a single flat color from the midnight palette, each clipped along the −14° seam. As you scroll, the seam *wipes* across the viewport like a sliding shoji screen, the next color sheet arriving from the lower-left. - **The shadow-gutter.** A persistent vertical band down the left ~18% of the viewport stays one shade darker than everything else — this is "where the shadow keeps its things." Section labels, the wandering ink-blob's resting spots, and a thin hand-drawn vertical ink-line (path-draw-svg) live in this gutter. It is the one stable column in a world that is otherwise raked. - **No grid for content — content floats.** Body text blocks are placed asymmetrically, never centered, never in cards, each one rotated a tiny amount (±1.5°) so it looks like a torn slip of rice paper that landed where it landed. Text is the *only* thing that isn't tilted to −14°; it has its own little independent angles, reinforcing that the prose is "found objects" inside the shadow's world. - **The morph-spine.** A single SVG blob — the protagonist, the "flying shadow" itself — travels the full height of the page, morphing between forms section to section (a brushstroke → a crow silhouette → a human profile → a fox-mask → a puddle → a question mark). It is always somewhere on screen, always slightly behind the cursor's horizontal position, never reacting instantly. - **Minimal-navigation.** No header bar. Six tiny ink-dots stacked in the shadow-gutter; the active one swells into a tiny brushstroke. That's the whole nav. AVOID entirely: hero-with-CTA, card-grid, bento-box, pricing tiers, stat counters, testimonial rows, logo walls, footers-with-four-columns-of-links. This is a scroll-through tone poem, not a landing page. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & the wandering shadow's "voice" — *Zen Kaku Gothic New* (weights 300, 500, 900)** — a Japanese sans with humanist warmth and beautifully even strokes; at weight 900 and very large sizes its kana and Latin both read like confident wet brush-marks, but it never tips into novelty. Used for the wordmark "tobikage" and the six section titles. Section titles are set in lowercase, letter-spacing slightly negative, and they are the one display element that gets **kinetic-animated** treatment — each title's glyphs settle into place one at a time with a tiny overshoot, like ink dots dropped from a brush, then a faint horizontal "smear" finishes the word. - **Body & "the found paper slips" — *Cormorant Garamond* (400, 400 italic, 600)** — a high-contrast old-style serif with long, dreamy extenders. Its fragility against the heavy ink-blue is the whole point: the prose feels like it was written by a person, in a world now run by a shadow. Italic is used liberally — the shadow's own asides are always italic. - **Micro-labels, gutter text, the morph-spine's stage directions — *Zen Kurenaido* (400)** — a soft handwritten-ish Japanese brush face; used tiny, in the shadow-gutter, for things like "the shadow rests here" / "13:04 — still no hand." It is the diary handwriting of the creature. **Palette — "starlight bleeding through a closed eyelid":** - `#0B1026` — **deep night ground**, the base sheet color, an indigo so dark it pretends to be black - `#141B3C` — **shadow-gutter / lower-left arriving sheets**, one notch lighter, cold - `#1E2A57` — **mid-section sheets**, the "deeper into the dream" blue - `#3A4A8C` — **dawn-threat blue**, used for the section where the shadow worries about sunrise; the lightest blue - `#E8E4D8` — **rice-paper bone-white**, the body text color and the torn-paper-slip backings; warm against all that cold blue - `#C9462C` — **vermilion seal**, the single accent — the calligrapher's stamp color. Appears exactly where a hanko would: one small square mark per section, the morph-blob's "eye," the active nav brushstroke, and the link underlines. Never more than ~2% of any screen. - `#0A0A0C` — **true ink black**, reserved ONLY for the morph-spine blob and hand-drawn ink lines, so the protagonist is literally darker than the night around it. Gradients are used sparingly and only as **vertical "atmosphere" washes** within a sheet (e.g. `#0B1026` → `#141B3C`), never as buttons or borders. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration. Everything is flat SVG ink-work and CSS — a shadow has no texture, only edges.** - **The morph-spine blob (the hero motif).** One continuous closed SVG path, filled `#0A0A0C`, that morphs through ~7 silhouettes down the page using `path-draw-svg` keyframe morphing on scroll. Forms: (1) a single horizontal brushstroke with a frayed tail, (2) a perched crow, (3) a human head in profile (the calligrapher), (4) a kitsune fox-mask, (5) a spreading puddle/ink-spill, (6) a question mark, (7) back to the brushstroke. It has one vermilion dot for an eye that stays the same size through every morph — the constant in the creature. - **Floating ink-debris (`floating-elements`).** Small flat black shapes — torn brush-bristles, splatter dots, a stray comma, half a kanji radical — drift slowly upward and across each sheet on independent slow loops, parallaxed by depth (smaller = slower = further). They never collide, never react; they're just *stuff the shadow shed*. - **The −14° seams as torn-paper edges.** Each diagonal section boundary isn't a clean line — it's a hand-drawn deckle edge, a slightly ragged SVG path, like real torn washi. - **Hanko seals.** One small vermilion square stamp per section, each containing a different tiny carved-looking glyph (生 / 影 / 飛 / 夢 / 待 / 朝). Slightly rotated, slightly imperfectly inked (one corner faint). These are the only "UI chrome" the site has. - **Starlight pinpricks.** A scatter of 1px `#E8E4D8` dots at very low opacity in the darkest sheets — barely there, the "bleeding through." - **The hand-drawn gutter line.** A single vertical brush-line down the shadow-gutter that `path-draw-svg`s itself in as you scroll past each section, like the shadow tracing the wall to find its way. ## Prompts for Implementation Build tobikage.monster as **one HTML file, one CSS file, one JS module** — a single-route, vertically-scrolled ink dream that takes about 70 seconds to fall through. Treat it as a six-act tone poem narrated, in tiny italic asides, by a shadow that suspects it might be a monster but is mostly just lonely. **Narrative structure (six leaning sheets, top to bottom):** 1. **「生」— it wakes.** `#0B1026`. The wordmark "tobikage" assembles glyph-by-glyph (kinetic). The morph-blob is a brushstroke lying flat at the bottom. First italic aside, large, in the rice-paper paper-slip: *"I was a line in someone's handwriting. Then the candle went out."* The morph-blob lifts off the floor as you start to scroll. 2. **「影」— it follows you.** Sheet wipes to `#141B3C`. Now the morph-blob (a crow) tracks the cursor's X with a lazy spring, always ~0.4s behind, sometimes overshooting and having to drift back — *make the doubt visible*. Aside slip: *"You move. I move. I never decided this."* Floating ink-debris begins. 3. **「飛」— it remembers the hand.** Wipe to `#1E2A57`. Morph to the calligrapher's profile. Hand-drawn ink-line in the gutter draws itself downward. Slip: *"There was a wrist. I used to live near it."* The morph-blob's vermilion eye briefly looks toward the gutter line. 4. **「夢」— it tries on faces.** Wipe to `#1E2A57` (same, deeper). Morph cycles fox-mask → puddle as the user scrolls, the blob "trying on" forms — let scroll velocity affect morph speed (`morph` + `scroll-triggered`). Slip, multiple short italics scattered: *"a fox? / a flood? / a punctuation mark? / which one of these eats people."* This is the section that's quietly funny. 5. **「待」— it worries about morning.** Wipe to `#3A4A8C` — the only light sheet, "dawn-threat blue." The starlight pinpricks fade out. Morph-blob shrinks slightly, edges fray more. Slip: *"shadows don't survive noon. I have until noon to mean something."* A faint warm wash creeps in from the seam. 6. **「朝」— it decides it's a monster, sort of.** Wipe back to `#0B1026` (night returns; the morning was a worry, not a fact). Morph back to the brushstroke, but now standing *vertical* instead of lying flat — it learned to stand. Final slip, centered for the only time, small: *"Fine. I'm a monster. A quiet one. I'll be in the margins if you need me."* The wordmark re-appears below it, then the morph-blob drifts up off the top of the screen and is gone. Below: just the vermilion 影 hanko and the domain in tiny Zen Kurenaido. **Motion rules:** - **`morph`** is the signature pattern — SVG path morphing, eased, scroll-coupled. Everything else serves it. - **Cursor-follow with deliberate lag** — the morph-blob's horizontal position lerps toward the cursor at a low factor (~0.04), so it's always trailing. On mobile, it follows scroll velocity instead. - **Sheet wipes** on the −14° seam between sections — `scroll-triggered`, the new color sheet sliding up from lower-left, the torn deckle edge leading. - **Glyph-by-glyph kinetic** title settles, only for the wordmark and section kanji. - **Path-draw-svg** for the gutter ink-line and the hanko stamp strokes (stamps "press in" — a quick scale-down + opacity pop, one corner left faint). - **Floating-elements** drift on slow independent loops, depth-parallaxed. - Respect `prefers-reduced-motion`: morphs become slow cross-fades between static silhouettes, no parallax, no cursor lag — the shadow holds still. **Hard nos:** no CTA buttons, no email capture, no pricing, no stats/counters, no testimonial cards, no feature-grid, no nav bar, no multi-column footer, no hover-lift cards, no glassmorphism panels. The only interactive elements are the six gutter nav-dots and the scroll. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **A morphing SVG protagonist as the entire site spine.** `morph` sits at 14% and is almost always a decorative blob-background or a button hover; here a single morphing path *is the narrator and the only consistent character* across all six sections — the site is a story told by a shape that changes shape. Combined with `surreal` (8% aesthetic) this "shadow with a personality crisis" framing appears nowhere in the corpus. 2. **Diagonal-sections claimed for an ink-dream, not a Memphis/retro romp.** `diagonal-sections` is at ~5% and tends to read energetic/retro; pinning every seam to −14° as *torn washi edges in a midnight world* repurposes the broken-grid impulse for melancholy instead of fun. 3. **Midnight-blue that refuses to be gothic.** `midnight-blue` palette ~8% and `mysterious-moody` tone ~11% — but the combo almost always means "luxury crypto" or "haunted/horror." This design uses deep indigo for *quiet melancholy and dry humor* (a monster that's mostly just self-conscious), with a single vermilion hanko as the only warm note. No neon, no glow, no skull iconography. 4. **Anti-card, anti-grid by construction.** Against `card-grid` 92% and `centered` 80%: there is exactly one centered element on the whole site (the last line), zero cards, and body text floats as rotated "found paper slips." The only stable column is a deliberately *darker* gutter — structure expressed as absence of light, not as boxes. 5. **Kinetic typography used surgically, not as a hero gimmick.** `kinetic-animated` ~2%; here it's restricted to the wordmark and six kanji "settling like dropped ink," never on body copy — restraint as the differentiator. Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal, layout: diagonal-sections, typography: kinetic-animated, palette: midnight-blue, patterns: morph, imagery: generative-art, motifs: floating-elements, tone: mysterious-moody*. Avoided overused patterns from frequency analysis: hand-drawn aesthetic (94%), glassmorphism (85%), card-grid layout (92%), full-bleed-with-hero, centered (80%), photography imagery (98%), warm palette (98%), cursor-follow used as a snappy gimmick (89% — here it's deliberately laggy and reluctant), parallax-as-default (89% — used sparingly, only on shed ink-debris), spring/magnetic micro-interactions on cards (none — there are no cards).