# Design Language for matsurika.quest ## Aesthetics and Tone matsurika.quest is a **night-blooming jasmine apothecary-ledger** — *matsurika* (茉莉花, the Arabian / sambac jasmine that opens only after dusk and is gathered at dawn for tea) treated as the central conceit, with `.quest` reframed not as a gamified call-to-adventure but as a slow, devotional *pilgrimage through one season of a single hedge*. The whole site behaves like a damp linen-bound observation journal kept by someone who tends a moon-garden: thumbed corners, tea-rings, pencil tallies of which buds opened on which night, a pressed flower flattening the gutter of a page. The dominant mood is **wabi-sabi imperfect ceramic** crossed with **japanese-minimal** restraint — celadon glaze with a crawl-flaw at the rim, an unfilled tea bowl, the dignity of a chipped thing kept in use. Nothing here shouts. The tone is **calm-serene**: hushed, exact, faintly nocturnal, the register of a tea master writing field notes by a single oil lamp. Where most of the corpus runs warm-and-gradient-and-bright, this site is *cool, matte, and largely empty* — its luxury is the air around the type, not glow or chrome. The reader should feel they have been handed something fragile and asked to turn the pages slowly. ## Layout Motifs and Structure The skeleton is **ma-negative-space** — *ma* (間), the charged interval — paired with a strict **horizontal-scroll** spine: the site reads left-to-right like an unrolled *makimono* handscroll, one "panel" at a time, each panel a single night of the jasmine's flowering. A thin vertical hairline (1px, #6B7A5C) divides panels the way a fold divides a folding screen. Within each panel the type sits on an asymmetric two-band grid: a wide *upper meadow* of pure emptiness (55–65% of panel height left intentionally bare, holding only a faint pressed-leaf silhouette) and a *lower terrace* where a single column of text — never wider than 58 characters — rests low and left, the way water collects. Margins are deliberately uneven: 14vw on the left, 9vw on the right, a 22vh "sky" above. No card grid, no bento, no centered hero. Section breaks are marked only by a hand-stamped vermilion seal (a small SVG *hanko* circle) drifting in the white. On narrow viewports the handscroll *un-rolls downward* instead — panels stack vertically, the hairline fold rotating to horizontal — but the ma is preserved: each mobile panel is still mostly air. A persistent, almost invisible "moon phase" indicator (a thin arc filling left-to-right) tracks scroll progress through the season. ## Typography and Palette The typographic spine is **garamond-classic**: **EB Garamond** (Google Fonts) for everything substantive — body at 18px / 1.78 leading in a long 54–58ch measure, italic used freely for botanical Latin (*Jasminum sambac*), night dates, and marginalia; headings step up through `clamp(2.1rem, 4.2vw, 3.6rem)` in Garamond regular (never bold — weight comes from size and air, not ink). Small caps, letter-spaced +0.12em, label each night ("NIGHT THE SEVENTH"). A single companion face, **Shippori Mincho** (Google Fonts), appears only for the occasional vertical Japanese phrase set in the empty upper meadow — a true Mincho serif that sits in quiet kinship with Garamond's old-style forms. For the rare tally / measurement readout (bud counts, dew weights), **IBM Plex Mono** (Google Fonts) at 12.5px, tracked wide, in a muted ink. Palette — **forest-green** anchored, matte and ceramic, no gradients: - `#1F2A22` — *deepest hedge* (near-black green; primary text, hairlines at full strength) - `#3A4A38` — *pine ink* (headings, seals' shadow) - `#6B7A5C` — *moss hairline* (fold lines, rules, secondary text) - `#A8B89A` — *young leaf* (dividers, hover states, the pressed-leaf silhouettes) - `#EFEADD` — *unsized paper* (primary background — warm-grey, faintly fibrous) - `#F7F4EC` — *moonlit page* (panel highlight / lifted areas) - `#B23A2F` — *vermilion seal* (the lone accent: hanko stamps, link underlines, the moon-phase arc) - `#C8B98C` — *aged jasmine* (the dried-flower tone for botanical illustration linework) ## Imagery and Motifs Imagery is **botanical-illustration** in the spirit of a 19th-century *Curtis's* plate redrawn by a tea farmer: fine ink-line studies of *Jasminum sambac* — the five-petalled pinwheel bloom, the bud cluster like a clenched hand, a single leaf with its venation traced — rendered as thin #C8B98C strokes on #EFEADD, never filled, occasionally over-lapped by a *pressed-flower* ghost (a flattened, slightly translucent leaf shape at 14% opacity drifting in the empty meadow). Motifs braid **leaf-organic** with **floral-botanical**: a recurring jasmine-pinwheel that doubles as a section glyph and as the "loading" mark; SVG path-drawn vine tendrils that grow along the bottom hairline as you scroll a panel; the vermilion *hanko* seal as punctuation; a faint *tea-ring* (an open thin ellipse, off-centre) staining one corner of roughly every third panel; pencil-tally marks (||||‾) counting opened buds in the margin. No photographs, no 3D, no glassmorphic cards, no neon. Decoration is sparse, hand-keyed, and always subordinate to the white. ## Prompts for Implementation **Structure:** build the site as a single horizontal `scroll-snap` track — `display:flex; overflow-x:auto; scroll-snap-type: x mandatory;` — with each `
` a `100vw` panel and `scroll-snap-align: start;`. Each panel is internally a CSS Grid: `grid-template-rows: 22vh 1fr;` with the text column placed in the lower row, `padding-left: 14vw; padding-right: 9vw;`, max-inline-size `58ch`. Below ~860px, switch the track to vertical (`flex-direction: column; overflow-y: auto; scroll-snap-type: y mandatory;`) and rotate the hairline fold. Respect `prefers-reduced-motion` by disabling tendril growth and any drift. **Storytelling:** this is a *full-screen narrative experience first* — the content is the diary of one jasmine season (a "quest" measured in nights, not chapters): the planting and the waiting, the first bud, the night it opened and the dawn it was picked, the steeping, the empty bush after, the seed saved for next year. Each panel = one night. The horizontal unroll IS the passage of time; the moon-phase arc at the top edge fills from new to full to new across the journey. Write copy as terse field-journal entries — dated, observational, occasionally tender. Avoid CTA-heavy layouts, pricing blocks, stat-grids; there are none here. The only "interaction" is turning the scroll like turning a page. **Animation (restrained, ink-not-glow):** - On panel entry (`IntersectionObserver`), the night's small-cap label *draws on* via a clip-path wipe left-to-right over 700ms `cubic-bezier(.22,.61,.36,1)`; body text below it does a 12px rise + fade with a 90ms-per-line stagger. - A `path-draw-svg` jasmine vine along the bottom hairline of the active panel animates `stroke-dashoffset` from full to 0 over ~1.6s, easing like calligraphy (slow start, quick finish). - The vermilion *hanko* seal stamps in: scale `1.08 → 1` + opacity over 240ms with a faint ink-spread (`filter: blur(0.4px)` resolving to 0). - Pressed-leaf silhouettes in the upper meadow drift only ±6px on a 14s loop — barely alive. - Links: vermilion underline drawn left-to-right on hover (`background-size` transition), 320ms; no lift, no glow. - Page background carries a static, very low-opacity paper-fibre SVG noise — *never* animated. - The moon-phase progress arc updates on `scroll` via `requestAnimationFrame`, a thin vermilion stroke filling a 180° SVG arc fixed to the top edge. **Texture:** keep everything matte — no `box-shadow` beyond a single hairline (`box-shadow: 0 0 0 1px #6B7A5C` style), no rounded "card" chrome, no gradients anywhere. The "lift" of a foreground area is conveyed by switching its background from `#EFEADD` to `#F7F4EC` and nothing else. ## Uniqueness Notes Differentiators from other CMassC designs: 1. **Horizontal handscroll (*makimono*) as the primary navigation**, mapped one-to-one onto narrative time (one panel = one night of a jasmine season) — horizontal-scroll sits at ~7% in the corpus and is almost never used as the *whole* site spine tied to a temporal story. 2. **Ma-negative-space at near-extreme** — 55–65% of every panel left deliberately empty, type sunk low-and-left like settled water. The corpus is dominated by full-bleed (90%) / card-grid (88%) / centered (86%) layouts; this commits to ~9%-frequency *ma* as the load-bearing idea. 3. **Wabi-sabi + japanese-minimal ceramic restraint** (both ≤4% prior) with a **forest-green matte / vermilion-seal** palette and **EB Garamond + Shippori Mincho** pairing — zero gradients, zero glassmorphism, zero photography, zero neon, in a corpus that runs 98% warm / 96% gradient / 74% glassmorphism / 98% photography. 4. **Botanical-illustration-only imagery** (≈2% prior) — hand-keyed ink jasmine plates and pressed-flower ghosts, never photos; decorative motifs (hanko seal, tea-ring, pencil tallies, path-drawn vines) are all diegetic to the "garden journal." 5. **Animation philosophy is "ink, not glow"** — clip-path calligraphic wipes, stroke-dashoffset vine growth, a stamping seal, a moon-phase arc — explicitly avoiding the corpus-dominant parallax (95%), cursor-follow (89%), spring (86%), magnetic (80%) interaction stack. Chosen seed/style: **`aesthetic: wabi-sabi + japanese-minimal, layout: ma-negative-space + horizontal-scroll, typography: garamond-classic, palette: forest-green, patterns: path-draw-svg + scroll-triggered, imagery: botanical-illustration, motifs: leaf-organic + floral-botanical, tone: calm-serene`** — synthesized as *"a night-blooming jasmine apothecary-ledger unrolled as a handscroll: one panel per night of a single season, mostly air, drawn in ink and sealed in vermilion."* Avoided patterns from frequency analysis: hand-drawn (97%), glassmorphism (74%), photography (98%), warm (98%), gradient (96%), full-bleed (90%), card-grid (88%), centered (86%), parallax (95%), cursor-follow (89%), spring (86%), magnetic (80%), mono-as-primary-type (94%).