# Design Language for kunoichi.quest ## Aesthetics and Tone **kunoichi.quest** is a *moon-phase espionage codex* — the private field-ledger of a kunoichi who measures her work not in contracts but in nights. It is the opposite of a marketing page; it is a thing you find, not a thing that finds you. The aesthetic is **japanese-minimal** in the strict, almost austere sense: sumi-e ink on un-dyed kozo paper, *aizome* indigo-dyed cloth folded in shadow, lacquer that has gone matte with age, the single brushstroke that says everything because nothing surrounds it. The governing principle is **ma** (間) — the charged interval, the held breath, the pause between footfalls. Most of this site is *empty on purpose*. Content does not fill the screen; it *occupies a clearing in it*, and the darkness around it is not background — it is the subject. The tone is **mysterious-moody**: low-lit, unhurried, watchful. Never cheerful, never loud, never "engaging" in the conversion sense. The voice in the few words that appear is terse, first-person, written as if for one reader only — clipped sentences, no exclamation, the cadence of someone who has learned to say less. Think *the margin notes of a 17th-century shinobi scroll*, the silence of a teahouse at 3am, ink still wet, the lamp turned down. There is romance here, but it is the romance of restraint — of the unsaid, the half-seen, the figure that was there a moment ago. ## Layout Motifs and Structure **Single-column descent through eight Watches (刻), governed by ma-negative-space.** The page is one continuous vertical scroll — no nav bar, no sidebar, no card grid, no hero-with-CTA, no router. The reader falls slowly through eight numbered sections ("First Watch" through "Eighth Watch"), each one a *single tableau in a vast dark field*. There is no max-width content well in the usual sense; instead each Watch is a **clearing** — a small island of ink (rarely more than 38ch wide, often far less) placed off-center against 100vh+ of near-black. The placement of each clearing migrates: Watch I sits low-left, Watch II floats high-right, Watch III is centered but tiny, Watch IV hugs the bottom edge — the eye must *track* a moving figure down the page, never resting where it last looked. **Composition rules:** - Each Watch occupies a minimum of 100vh; several stretch to 160–220vh of mostly-empty darkness so the scroll itself becomes a passage through night. - A **vertical hairline rule** (1px, indigo, 22% opacity) runs the full document height, offset ~14vw from the left margin — the "spine" of the codex. Clearings hang from it or cross it; none align to a conventional grid. - **Tategaki accents:** short labels (the Watch numeral as a kanji, the time-of-night) are set *vertically* (`writing-mode: vertical-rl`) in the right gutter, like notations brushed down the edge of a scroll. - One — and only one — Watch breaks the column: the **Fifth Watch ("the moment of crossing")** goes momentarily full-bleed, the indigo flooding the entire viewport edge to edge for the duration of a single scroll-screen, then receding. It is the page's only crescendo. - **No footer chrome.** The codex ends on the Eighth Watch with a single sealed mark (a brushed circle, *ensō*, deliberately unclosed) and three lines of vertical text. The scroll simply stops, as a held breath ends. ## Typography and Palette **Type stack — Google Fonts, all confirmed available:** - **Zen Kaku Gothic New** (weights 300, 400, 500) — the primary voice. A quiet, even, low-contrast Japanese-and-Latin gothic; used for the body fragments, the Watch titles at ~1.5rem, and the Latin transliterations. Set at 1.0625rem, line-height 2.05, letter-spacing 0.02em — generous leading so each line floats. - **Shippori Mincho** (weights 400, 500, 600 + italic-substitute via the 600) — used *only* for the single "first-person line" that opens each Watch — the brushed-Mincho serifs give it the weight of something inked by hand. Set at clamp(1.6rem, 4.5vw, 3.4rem), line-height 1.32, letter-spacing -0.01em. - **JetBrains Mono** (weight 400, light tracking) — used for the small marginal coordinates, the Watch numerals in Latin ("I" / "II"), timestamps, and the unsigned colophon. Set at 0.7rem, letter-spacing 0.18em, uppercase. The single concession to the "field-ledger" mechanic — it should feel like pencil, not terminal. - **Optional accent:** **Yuji Syuku** (weight 400) for the eight large Watch-kanji that anchor each section as faint, oversized background glyphs (刻 / 子 / 丑 / 寅 / 卯 / 辰 / 巳 / 午) — a brush-style kaisho that reads as ink, not type. **Palette (minimum three; here eight, monochrome-leaning toward midnight-blue):** - `#0B0E14` — **Sumi-yoru / Ink-Night** — the dominant field; not pure black, a black with the faintest blue-graphite undertone. - `#10131C` — **Kachiiro Shadow** — slightly raised panels and the upper gradient of the Fifth Watch flood. - `#1A2740` — **Aizome Indigo** — the dyed-cloth blue; the hairline spine, the ensō, the active state of any link. - `#2E4063` — **Tsuki-kage / Moon-shadow** — secondary text, the vertical gutter labels. - `#8B97A8` — **Usuzumi / Thin Ink** — body text colour; ink diluted with water, never full white. - `#C9CFD8` — **Gofun White** — reserved exclusively for the first-person Mincho lines; shell-white pigment, slightly cool, never #FFFFFF. - `#B89B5E` — **Kin-deshi / Sparing Gold** — used *once or twice in the whole document* — a single flake of gold leaf: the unclosed point of the ensō, perhaps one underline. Restraint is the point. - `#7A1F2B` — **Beni-kuro / Dark Crimson** — the "danger" register, used at most once (the Fifth Watch numeral). Almost never seen; its rarity is what gives it force. Backgrounds are flat ink with a barely-perceptible **paper-grain noise overlay** (~5% opacity, 0.5px structure) and an extremely slow vertical luminance drift (top 3% darker than bottom) so the night feels lit by a single low lamp somewhere off-screen. ## Imagery and Motifs **No photography. No 3D renders. No gradient-mesh, no glassmorphic cards, no stock anything.** All imagery is **line-illustration / custom-illustration** — SVG ink, hairline strokes, the visual grammar of a brushed scroll glimpsed by lamplight. **Required motif assets (SVG, ink strokes 0.6–1.4px in Aizome Indigo / Thin Ink):** - An **ensō** (single brushed circle), rendered as an animated SVG path that draws itself on load — but left **deliberately open** at the top, the gap glinting with the one flake of Kin-deshi gold. It is the site's mark; it recurs small in the right gutter of each Watch. - A **moon-phase ribbon** down the left spine: eight tiny moon glyphs (new → waxing crescent → first quarter → … → waning crescent → new again) marking the eight Watches — the only "navigation" the page has, and it does not click; it merely tells you where in the night you are. - **Brush-stroke fragments** as section dividers — single horizontal sumi sweeps with frayed bristle-ends and a dry-brush tail, never a clean line. - **Eight oversized faint Watch-kanji** (子丑寅卯辰巳午 + 刻) sitting behind each clearing at ~38vw tall, 6–9% opacity, half-cropped by the viewport edge — present the way a wall-scroll is present in a dark room: sensed before read. - **A folded-cloth texture** (aizome shibori indigo, the white resist-dye starbursts barely showing) used *only* as the backdrop of the Fifth Watch flood. - **Hand-brushed punctuation:** the first-person lines get a tiny vermilion *hanko*-style mark (a single square seal stamp, ~14px, Dark Crimson at 60%) at their end — the only red, and only there. - **Drifting motes:** a very sparse particle field (8–14 dust motes, sub-pixel-slow drift, near-invisible) — the air in a still room, not a "particle effect." Decorative grammar overall: **everything is a single gesture** — one stroke, one circle, one stamp, one rule. If an element needs two strokes, it is two too many. ## Prompts for Implementation Build kunoichi.quest as **one long single-column HTML document** — eight Watches, no SPA, no router, no modal, no nav chrome, no email capture. The reader descends slowly through the night like turning the leaves of a borrowed scroll by one lamp. **Atmosphere over information. Silence over copy. One slow vertical fall over any branching.** There is NO pricing block, NO stat-grid, NO testimonial wall, NO "trusted by" logos, NO feature cards, NO CTA buttons, NO FAQ accordion, NO signup. If a single call-to-action is unavoidable, it appears once, in the colophon, as one line of vertical Mincho text near the unclosed ensō — never as a rectangle. **Storytelling spine.** The eight Watches are a single night told in order: I *the lamp turned down* — II *the rooftop* — III *the listening* — IV *the locked room* — V *the moment of crossing* (the full-bleed indigo flood) — VI *the return path* — VII *the unwriting* — VIII *the seal*. Each Watch is one Mincho first-person line (the kunoichi's terse note), then two to four short Zen-Kaku-Gothic fragments, then a brush-stroke divider, then darkness, then the next clearing somewhere else on the page. Total reading time: long on scroll, short on words. **Motion direction** — restrained, ink-like, never bouncy: - **Scroll-triggered fade-reveal** for each clearing: text rises 14px and resolves from `filter: blur(8px)` to `blur(0)` over ~900ms with `cubic-bezier(.16,1,.3,1)` — a **blur-focus** entrance, like an eye adjusting to a dark room. No spring, no overshoot. - The **ensō draws itself** via `stroke-dasharray` path animation on first paint (~1.6s), stopping short of closing; the gold flake at the gap does a single 0.3s glint and never repeats. - **Path-draw-svg** for the brush-stroke dividers — they ink in left-to-right as they enter the viewport, the dry-brush tail last. - The **moon-phase ribbon** updates its "current" glyph as the corresponding Watch crosses mid-viewport — a 250ms cross-fade, nothing more. - The **Fifth Watch flood**: as it enters, `clip-path` opens the indigo cloth from a 1px horizontal slit to full-bleed over ~700ms; as it leaves, it closes back to a slit. The crimson "V" numeral does a single 0.4s ink-bleed-in. - **Tategaki gutter labels** drift in vertically by 8px on reveal — no other animation. - A whisper-slow background luminance drift over the whole document (60s loop, ±2% lightness) so the "lamp" seems to breathe. - **Reduced motion:** all blur, draw, and clip animations collapse to a plain 200ms opacity fade; the ensō renders pre-drawn-and-open; the flood is simply present. - **Cursor:** a faint 3px Aizome dot trails the pointer with heavy easing (~180ms lag) — a sense of something *following*, deliberately subtle, not a flashy cursor-follow gimmick. Hidden entirely on touch and on reduced-motion. **Build constraints.** Vanilla HTML/CSS/JS only — no framework. CSS custom properties for the eight-colour palette. `IntersectionObserver` for all reveals (no scroll-jacking, no pinned sections, native scroll only). SVGs inline so paths can animate. System-honouring `prefers-reduced-motion` and `prefers-color-scheme` (this site is dark-only; a light scheme is simply not offered). Keep the DOM tiny — emptiness is cheap and it is the design. ## Uniqueness Notes **Differentiators against the existing corpus (300+ designs):** 1. **Emptiness as the primary material.** Where the corpus runs 92% full-bleed, 89% card-grid, 86% centered, this design is a near-black void with eight small migrating clearings and a single momentary flood. It uses **ma-negative-space** not as breathing room around content but as the content itself — the dark is the subject, the ink is the interruption. No card grid exists anywhere on the page. 2. **Hard rejection of the corpus defaults.** No hand-drawn doodle layer (97% of corpus), no glassmorphism (72%), no warm palette (98% — this is cold ink-blue monochrome), no gradient washes (96% — flat ink only), no photography (98% — pure SVG line-illustration), no parallax-everything (95% — native scroll, IntersectionObserver reveals only), no spring/magnetic bounce (86%/81% — blur-focus and path-draw instead). It deliberately occupies **japanese-minimal** territory, which the frequency analysis shows at ~1%. 3. **Vertical text as structure, not decoration.** Watch numerals, time-of-night labels, and the lone colophon CTA are set in `writing-mode: vertical-rl` Japanese type running down the right gutter and the spine — a layout axis essentially absent from the corpus. 4. **One crescendo, strictly rationed.** The entire page has exactly one full-bleed moment (the Fifth Watch indigo flood), exactly one gold flake (the ensō's open point), exactly one red mark per first-person line (the hanko), and exactly one crimson numeral. Scarcity is enforced as a design law — the opposite of the maximalist/dopamine register seen elsewhere. 5. **The unclosed ensō.** The site's mark is a circle left deliberately open — a refusal of resolution that doubles as the anti-CTA: the work is never "complete," there is nothing to convert, the night simply ends on a held breath. **Chosen seed / style:** `aesthetic: japanese-minimal, layout: ma-negative-space, typography: mono, palette: midnight-blue, patterns: blur-focus, imagery: line-illustration, motifs: star-celestial, tone: mysterious-moody` (with `path-draw-svg` and `fade-reveal` as secondary patterns; `single-column` + `immersive-scroll` as secondary layout). Selected for being almost entirely unrepresented in the corpus — japanese-minimal ~1%, blur-focus ~7%, line-illustration ~5%, ma-negative-space ~7%, mysterious-moody ~4%. **Avoided patterns from frequency analysis:** hand-drawn (97%), photography (98%), glassmorphism (72%), warm palette (98%), gradient (96%), parallax (95%), cursor-follow as gimmick (88%), spring (86%), magnetic (81%), stagger-everything (78%), card-grid (89%), centered-default (86%), full-bleed-everywhere (92%), dashboard (34%) — all consciously rejected or rationed to a single instance.