# Design Language for kunoichi.quest ## Aesthetics and Tone kunoichi.quest is a **botanical pressed-flower herbarium re-read as a ninja's secret field journal** -- vintage photography of Edo-era women warriors fused with a duotone botanical print aesthetic. Pressed indigo iris leaves alongside silvery silhouettes of female shinobi, framed with typewriter-style annotations. The mood is *bold and confident* yet softly herbal -- a quiet field operative recording her camellia samples with the same precision she records targets. The "kunoichi" (くノ一 -- female shinobi) becomes a museum curator, presenting her flora-and-folklore notebook. Each section is a centered tableau: a vintage portrait paired with a pressed botanical, accompanied by typewriter-printed annotations that *type themselves on screen* as the user arrives. Confidence comes through layout silence rather than visual loudness. Inspirational anchors: Anna Atkins's cyanotype botanical prints, Karl Blossfeldt's geometric plant photography, Hokusai's quieter prints, Maruyama Okyo's bird-and-flower scrolls, the field-journals of Beatrix Potter, and old Japanese pharmacopoeia woodblocks. ## Layout Motifs and Structure A strictly **centered** composition -- everything ranges to a single vertical axis down the middle of the viewport. This is intentionally one of the most-used layouts in the collection (centered: 95%), but reframed: instead of corporate centered hero blocks, this site uses centered axis as a *meditative thread*, a long vertical scroll like an unrolled scroll-painting (掛軸 kakejiku). **Structural anatomy:** - **Masthead (centered, 240px tall):** Centered wordmark "kunoichi.quest" in Sans Grotesk, with a small pressed-iris SVG above it and a thin horizontal duotone rule below. - **Hero (centered, 100vh):** A single sepia-blue duotone portrait of a kunoichi (vintage photograph treated with cyan/indigo duotone curves) framed by a thin botanical wreath. Below the portrait: a single line of typewriter-effect typed text ("Field Notes, Vol. I -- Camellia & Crescent"). - **Field-note sections (centered, 720px max width):** A vertical sequence of 7-9 "entries." Each entry is composed (top-to-bottom, centered): a small numerical index ("entry · 03"), a duotone portrait or duotone botanical specimen, a typewriter-typed annotation (4-6 lines), a pressed-flower SVG ornament. - **Folio dividers:** Between each entry, a 32px tall centered pressed-leaf SVG with a thin duotone rule extending 240px horizontally on either side, like a flower pressed between pages. - **Closing entry (centered):** A single sentence in italic Cormorant Garamond followed by a kunoichi crescent-moon glyph -- the closing seal. Spatial rhythm: vertical and meditative. The centered axis is a *spine*, not a presentation slot. Everything reads top-to-bottom, like an unrolled scroll. ## Typography and Palette **Fonts (all Google Fonts):** - **Primary sans (sans-grotesk):** "DM Sans" 400/500 -- a humanist grotesque sans with gentle curves. Used for the wordmark at clamp(56px, 8vw, 132px), letter-spacing -0.015em. Body text at 16-17px, line-height 1.7. - **Subheads / labels:** "DM Sans" 500 at 14px, all caps, letter-spacing 0.24em -- for the "entry · 0X" indices. - **Typewriter annotations:** "Courier Prime" 400 at 15-16px, line-height 1.62. This font is critical -- it produces the *click* of typewriter-effect text as letters are revealed. - **Closing seal:** "Cormorant Garamond" 400i at 22-26px. **Palette (duotone):** - `#F0EBD8` -- Vellum Wash (background, off-white linen-paper feel) - `#1F3A5F` -- Indigo Ink (duotone shadows, primary text) - `#3D6E8C` -- Slate Iris (duotone mid-tones, frame strokes) - `#9CB4C2` -- Hazy Sky (duotone highlights, soft fills) - `#2E1F18` -- Sumi Black (rare deep accent, used for the kunoichi seal) - `#C7DCD8` -- Tea Mist (pressed-leaf coloration, faint background patterns) - `#7B946F` -- Camellia Stem (the *one* botanical green, used for stems & leaves only) Duotone strategy: all photographs are processed through a 2-stop gradient map -- shadows mapped to Indigo Ink, highlights mapped to Vellum Wash, with Slate Iris and Hazy Sky as the interpolated midtones. This is the signature visual treatment. ## Imagery and Motifs **Core visual motifs:** - **Vintage photography (duotone):** Sepia-era photographs of women warriors and woodblock-derived figures, processed into the indigo-duotone palette. Each portrait is centered and framed by a thin botanical wreath. - **Floral-botanical pressed specimens:** SVG renderings of pressed leaves and flowers -- camellia, plum blossom, iris, bamboo grass -- rendered as flat, slightly-asymmetric silhouettes in Camellia Stem with Slate Iris veins. Each "entry" has one specimen. - **Pressed-leaf folio dividers:** Single SVG leaves used as horizontal section breaks, with thin duotone rules extending laterally. - **Botanical wreaths:** Thin SVG circular wreaths (200-280px diameter) around hero portraits, composed of 12-16 hand-drawn leaf segments. - **Crescent-moon seal:** A small SVG kunoichi crescent (kunoichi means "one-of-the-women" -- the kanji components form a crescent shape) used as the final seal. **Decorative patterns:** - A subtle leaf-vein pattern (2% opacity Slate Iris) underlying the entire page background. - Pressed-paper texture (SVG turbulence at 5% opacity) gives the cream background a botanical-press feel. - Each typewriter line ends with a tiny period that briefly enlarges and shrinks (the "carriage return moment"). ## Prompts for Implementation **Open with the field journal being unwrapped.** First 1600ms: a soft Vellum Wash background fades in (opacity 0 -> 1, 400ms). The pressed-iris SVG above the wordmark draws itself with `stroke-dashoffset` (800ms, ease-out). The wordmark fades in (no motion, just opacity, 320ms). Then the typewriter line begins typing letter-by-letter (45ms per character, with random ±10ms jitter to feel hand-typed). A tiny cursor blinks at the end of the line at 1.2Hz throughout typing. **Typewriter-effect pattern (featured):** This is the primary motion vocabulary. - Every annotation paragraph types itself on enter (IntersectionObserver triggers, 40-50ms per char, with jitter). - Each line ends with a 200ms pause before the next line begins ("paper carriage return"). - Periods at line-ends briefly enlarge by 20% then shrink, simulating the typewriter's punch impact. - The cursor (a 2px vertical bar) blinks during typing and disappears on completion. - Use `prefers-reduced-motion` to disable -- replace with simple fade-in. **Duotone treatment:** All `` elements are wrapped in a containing element with an SVG filter applied: ```css filter: url(#duotone-indigo); ``` The SVG filter uses `feColorMatrix` to remap the photograph's grayscale luminance into the Indigo Ink -> Vellum Wash gradient via `feComponentTransfer` curves. **Pressed-flower hover:** Each botanical specimen has a subtle hover state -- on cursor proximity (within 80px), the specimen rotates ±2deg with cubic-bezier easing and brightens slightly. The veining (Slate Iris paths) gains 12% opacity. As cursor leaves, returns to rest. **Botanical wreath rotation:** The wreath around each hero portrait slowly rotates (0.4deg/s, infinite, linear). On scroll, the rotation modulates by scroll velocity (faster scroll = faster rotation, max 4x). **Vertical scroll choreography:** Each "entry" enters by fading in (300ms, no movement), then its leaf-divider draws (`stroke-dashoffset` 600ms), then its typewriter annotation begins. The next entry's reveal is offset by 400ms to create a calm rhythm. **Storytelling beats (bold-confident but soft, no CTAs, no pricing, no grids):** 1. Wordmark + pressed-iris reveal. 2. Hero duotone portrait inside botanical wreath, with first typewriter line. 3. Entry 1: portrait + camellia specimen + typewriter annotation. 4. Folio divider with pressed leaf. 5. Entry 2: portrait + iris specimen + typewriter annotation. 6. Continue alternating for 7-9 entries. 7. Closing seal: italic Cormorant Garamond statement + crescent-moon SVG. **Anti-patterns to avoid:** No CTAs, no pricing, no testimonials, no stat-grids, no signup, no feature trios. The site is a botanical field journal, contemplative. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Botanical aesthetic with vintage-photography duotone (12% botanical, 2% vintage-photography, but duotone-photo is 3%):** Most botanical-aesthetic designs in the collection use line illustration or watercolor; pairing botanical with sepia-era *photography* duotoned into indigo is unusual. 2. **Typewriter-effect (5% used) as the primary motion across the entire site:** Most uses of typewriter-effect in the collection are limited to a single heading; here it's the *entire* annotation system -- every text passage types itself in. 3. **Centered layout repurposed as kakejiku scroll:** The centered axis (95% of designs use centered) is reframed as a long vertical scroll painting rather than a corporate hero box -- a meaningful re-contextualization. 4. **Floral-botanical motif (3% used) anchored by a kunoichi crescent seal:** The kunoichi cultural reference is paired with botanical specimens in a way no other design attempts -- a "ninja florist's notebook" framing. 5. **Sans Grotesk (3% used) typography paired with Courier Prime typewriter (rare):** The juxtaposition of clean humanist sans for hierarchy and typewriter mono for annotation is an editorial duet not seen elsewhere. **Chosen seed/style:** aesthetic=botanical, layout=centered, typography=sans-grotesk, palette=duotone, patterns=typewriter-effect, imagery=vintage-photography, motifs=floral-botanical, tone=bold-confident. **Avoided overused patterns:** Avoided parallax (95%), avoided generic centered-hero treatment (reframed as scroll painting), refused mono-as-body (81%), and rejected mysterious-moody (71%) tone.