# Design Language for martial.quest ## Aesthetics and Tone martial.quest is not a gym, a class booking site, or a "transform your body" funnel. It is a **digital scroll** — a single hand-bound treatise on the *quest* of martial practice, presented the way a 17th-century ink master would have set down a manual of the sword: sparingly, with enormous silence between strokes, every mark deliberate because ink does not forgive. The governing aesthetic is **zen / wabi-sabi**: the beauty of the unfinished, the asymmetric, the worn. Black sumi ink on aged kozo paper. A single misregistered vermilion seal. The page should feel like it was *brushed*, not built — with the understanding that in calligraphy the empty space (the *ma*, 間, the *yohaku*, 余白) is not leftover; it is the most important part of the composition. The reader scrolls slowly downward through a sequence of **kata** — forms — each one a near-empty field holding one figure, one line of text, one breath. Tone: **zen-contemplative**, almost austere. No exclamation. No urgency. Sentences are short and end like a strike landing. The voice is that of an old teacher who has stopped trying to impress anyone — it states the form, names the principle, and lets the student sit with it. There is exactly one moment of warmth in the entire site: the closing seal. Everything before it is discipline. This deliberately rejects the corpus tendencies toward hand-drawn doodle warmth, glassmorphism gloss, photography-stuffed hero blocks, and gradient-soaked dopamine palettes. martial.quest is monochrome, matte, and quiet. ## Layout Motifs and Structure **No grid. No cards. No max-width content well that pretends the page is a magazine.** The structure is a **vertical hanging scroll** (a *kakemono*) — one continuous column, but the column is mostly *air*. This is a **ma-negative-space** layout taken to its logical extreme, combined with **immersive-scroll** pacing. The page is divided into eight **Forms** (Form 一 through Form 八), each occupying a minimum of 130vh so that the reader must scroll *through* emptiness to arrive at the next mark. Within each Form: - A single composition zone, never centered by default — it sits at one of nine *hanmi* (半身, "half-body") anchor points borrowed from a 3×3 calligraphic placement grid (top-left, top-right, lower-third-right, etc.), and it changes anchor from Form to Form so the eye is pulled diagonally down the scroll like a brush stroke. - One vertical line of text set in *tategaki* (縦書き, top-to-bottom right-to-left) running down the right margin like a colophon — the Form's title and number. - The horizontal "body" line, when present, is one sentence, set on a baseline that aligns with the *bottom* of the ink figure, so text and image rest on the same ground. - A faint horizontal **fold line** (1px, 8% ink) crosses the viewport at irregular intervals — the creases of a paper that has been rolled and unrolled many times. There is **no top navigation bar.** A thin vertical progress mark — a single brush stroke that lengthens as you scroll — lives on the far left edge. That is the only chrome. The opening (Form 一) is a **near-blank field**: 90% empty paper, one small vermilion seal in the lower-right, the domain name written tiny in *tategaki*. The reader scrolls *into* the manual. ## Typography and Palette **Typefaces (all Google Fonts, all verified available):** - **Cormorant Garamond** — the primary Latin voice. Used for the body sentences and the running colophon. Set generously: 1.0625rem, line-height 2.0, letter-spacing +0.01em, weight 400, with weight 500 italic reserved for the single aphorism that closes each Form. Cormorant's slightly nervous, hand-cut quality reads as *brushed* rather than typeset. - **Shippori Mincho** — the Japanese voice and the display weight. Used for the large *kanji* Form numerals (一二三四五六七八) and any Japanese term. A Mincho with strong vertical stress and visible *uroko* (the little triangular serifs at stroke ends) that mirror the bite of a real ink brush. Used at 700 for numerals at clamp(4rem, 12vw, 11rem). - **JetBrains Mono** — the marginalia. Tiny technical annotations (the romaji of a term, a date, "余白 / yohaku", the progress percentage) sit in mono at 0.6875rem, letter-spacing +0.08em, 45% ink. The mono is the only thing on the page that feels modern — a quiet acknowledgment that this is a screen, not silk. **Palette — sumi ink on aged kozo, plus one seal:** - `#F4F1E8` — *kozo* paper. The base. A warm-grey off-white, the color of mulberry-bark paper that has yellowed slightly at the edges. Never pure white. - `#161412` — *sumi*. Near-black ink with a faint warm-brown undertone, never `#000`. The text color and the figure ink. - `#3C372E` — *usuzumi*, thinned ink. For the colophon text, fold lines, and any secondary mark — ink that has been diluted with water. - `#9A9281` — *kasure*, the dry-brush grey. For the mono marginalia and the most distant background washes. - `#B23A28` — *shu* (朱), cinnabar/vermilion. The seal color. Appears **exactly four times** in the whole document: the opening seal, the chapter rule under Form 四, the active state of the progress stroke, and the closing seal. It is the only chromatic event. Used at full strength, never tinted. - `#E8E2D2` — a faint paper-shadow tone, for the 1–2px drop the hanging scroll casts against the viewport edge. ## Imagery and Motifs **No photography. No icons. No stock anything.** Every visual element is either ink-on-paper texture or pure SVG line, in keeping with wabi-sabi restraint and to stand apart from the photography-saturated corpus. - **Ensō-adjacent strokes.** Each Form is "illustrated" by a single inline SVG figure rendered as one continuous variable-width stroke — an arm describing a circular block, a stance reduced to two diagonal lines and a curve, a falling figure as an arc breaking against a horizon line. These are *gesture drawings*, eight to fourteen anchor points each, with stroke-width animated along the path to mimic brush pressure (thin at the start of the stroke, swelling at the turn, dry and split — "kasure" — at the tail). - **The seal (落款, rakkan).** A hand-cut-looking square stamp, ~64px, intentionally misregistered ~1.5° and bleeding slightly at one corner, containing two stylized characters. Rendered in `#B23A28` with a subtle paper-grain mask so the ink looks pressed, not printed. - **Paper grain.** A very low-opacity (4–6%) fibrous noise overlay across the whole document — irregular, with occasional darker flecks (the bits of bark left in handmade kozo). This is the *texture* of the site; without it the off-white reads as flat digital beige. - **Fold creases.** Faint horizontal lines at irregular vertical positions, slightly soft, as if the scroll were once folded into a satchel. - **The horizon line.** A single hairline that appears in three Forms at exactly the same y-position within the figure zone, so the standing figure, the falling figure, and the seated figure all share one ground — a quiet visual rhyme about "where the body meets the earth." Motif vocabulary in play: leaf-organic and flowing-curves in the brush strokes, mountain-landscape only as the implied horizon, layered-depth via the paper-shadow and grain — never crystalline, never circuit, never sci-fi-hud. ## Prompts for Implementation Build martial.quest as **one long single-page HTML document** — eight Forms, no router, no SPA framework needed, no modals, no nav, no footer-with-links, no cookie banner styled as a card. The reader does exactly one thing: scrolls slowly downward through a manual. Prioritize *silence over information*, *one figure per screen over density*, *the descent over branching*. There is **no CTA, no pricing table, no testimonial carousel, no stat-grid, no "book a class," no email capture, no feature comparison, no FAQ accordion.** If a section tempts you toward any of those, replace it with more empty paper. **Structure & scroll:** - Eight `
` Forms, each `min-height: 130vh`, the figure/text composition pinned within the *middle ~60vh* of each section so there is a long approach and a long departure of pure paper. - Use `IntersectionObserver` to trigger each Form's reveal once, at ~35% visibility. Respect `prefers-reduced-motion`: if set, skip all stroke-draw animation and just present the finished ink. - The left-edge progress mark is a single SVG `` whose `stroke-dashoffset` (or height) maps to scroll progress; when it passes the midpoint of the document it shifts from `#3C372E` to `#B23A28` — the practitioner has crossed into the second half of the quest. **Animation — brush, not bounce:** - The hero figure of each Form draws itself: animate `stroke-dashoffset` from full to 0 over 1.6–2.4s with a slow ease (`cubic-bezier(.22,.61,.36,1)`), and simultaneously animate `stroke-width` keyframes (e.g. 1.2 → 5.5 → 3 → 0.8) so the line *breathes* like a loaded brush running dry. End frames may leave a tiny "split" gap to read as *kasure*. - Text fades in **after** its figure completes, never before — the form precedes the name. - The *tategaki* colophon writes itself top-to-bottom, character by character, ~90ms stagger. - Page load: a 1.8s overture on Form 一 — the paper grain fades up from a flat tone, then the single opening seal *presses down* (a quick 120ms scale from 1.08→1.0 with the paper-grain mask wiping in) with a soft `0.06` opacity ink-spread ring. No spinner. No skip button. One breath, then the manual is open. - Hover on a figure (desktop only): the stroke very slowly "re-inks" — a subtle 2% darkening and a 0.3px width swell over 600ms. Touch: nothing. Restraint is the interaction. - Absolutely no parallax-on-everything, no cursor-trailing particles, no magnetic buttons, no 3D tilt cards. The only "follow the cursor" allowed is *nothing*. **Type & spacing:** - Body line-height 2.0; section vertical rhythm built on a 1.5rem base unit multiplied generously (margins of 8–14 units between elements). - `tategaki` via `writing-mode: vertical-rl;` for the colophon and Japanese terms. - Big kanji numerals are *background-weight* — set them at 6–10% ink (`#161412` at low alpha) so they sit *behind* the figure like a watermark pressed into the page, with the romaji ("Form Three / 第三形") tiny in mono nearby. **Texture:** - One full-page fixed pseudo-element with a tiled fibrous-noise PNG or an inline SVG `feTurbulence` filter at 4–6% opacity, plus a 2nd layer of sparse darker specks. This is non-negotiable; it's what makes the off-white *paper*. - The whole document sits in a viewport with a 1–2px `#E8E2D2` inner shadow on the left and right edges so the "scroll" appears to hang slightly proud of a darker wall — but keep the wall itself the same `#F4F1E8`; the shadow is the only hint of dimension. **Content tone:** Each Form names a principle in one or two words (e.g. *Distance*, *Yielding*, *The Empty Hand*, *Falling Well*), states it in a single Cormorant sentence, and closes with one italic aphorism. The eighth Form returns to near-emptiness — the figure dissolved to a single dry stroke — and the closing seal presses down for the last time, slightly larger, slightly more bled. Below it: the domain, tiny, in *tategaki*. Nothing else. The reader has reached the end of the scroll; there is no "next." ## Uniqueness Notes **Differentiators from sibling designs:** 1. **A literal hanging-scroll structure with extreme *yohaku*.** Most "immersive-scroll" siblings still pack each viewport with content; martial.quest deliberately keeps ~85–90% of every screen as empty paper and uses a *nine-point calligraphic anchor grid* that walks the composition diagonally down the page. The negative space *is* the design — almost no other site in the corpus treats emptiness as the primary element rather than a luxury margin. 2. **A four-uses-only chromatic budget.** The entire document is sumi-grey on kozo-off-white; the vermilion `#B23A28` appears in exactly four places, all of them ink-seal or progress events. This severe color discipline is the opposite of the corpus's near-universal warm gradient palettes. 3. **Variable-width self-drawing brush strokes as the only imagery.** No photography, no doodle illustration, no glassmorphic cards, no icons — every figure is one continuous SVG path with animated `stroke-width` keyframes simulating brush pressure and dry-brush *kasure*. The visual language is "gesture drawing in ink," which is essentially unrepresented in the photography-dominated corpus. 4. **Restraint as interaction model.** Hover does almost nothing; touch does nothing; there are no magnetic buttons, no cursor particles, no tilt cards, no parallax-on-all. The only moving things are the brush strokes drawing themselves and the *tategaki* colophon writing itself — directly countering the corpus's near-ubiquitous cursor-follow / spring / magnetic / parallax pattern stack. 5. **No conversion architecture at all.** Zero CTAs, pricing, testimonials, stat-grids, FAQs, or email capture — the page is a treatise to be read once, top to bottom, ending on emptiness and a seal. **Chosen seed / style:** `japanese zen portfolio` — interpreted as aesthetic: zen + wabi-sabi, layout: ma-negative-space + immersive-scroll, typography: elegant-serif (Cormorant) + tech-mono (JetBrains Mono) marginalia + Shippori Mincho display, palette: monochrome sumi-on-kozo + single shu vermilion, patterns: path-draw-svg + fade-reveal + scroll-triggered, imagery: custom ink-stroke vector + grain-overlay, motifs: leaf-organic / flowing-curves / mountain-landscape (implied horizon), tone: zen-contemplative. **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (73%), photography (98%), card-grid (89%), centered (87%), warm palette (98%), gradient (96%), parallax (95%), cursor-follow (89%), spring (86%), magnetic (79%), stagger-everything (77%), pastoral-romantic tone (35%). martial.quest pulls instead from the low end: zen (6%), monochrome (12%), ma-negative-space (9%), japanese-minimal typography (1%), path-draw-svg used as the *primary* imagery rather than a flourish, and zen-contemplative tone (6%).