# Design Language for matsurika.date ## Aesthetics and Tone matsurika.date is the slow, hand-tended notebook of a jasmine grower who picks blossoms only after dusk — because *matsurika* (茉莉花, Arabian jasmine) releases its scent in the dark, and the whole site is built around the idea that the most fragrant hours are the ones nobody photographs. The aesthetic is **wabi-sabi rendered as a ceramicist's working journal**: not the polished "Japanese minimal" of luxury skincare, but the *imperfect, slightly-stained, lovingly-flawed* version — kiln-marked, fingerprint-glazed, with one corner of the page always a little crumpled. Every surface should feel like unglazed bisque-ware: matte, faintly porous, warm to the touch, with the small accidents (a drip of celadon glaze, a hairline crack repaired in gold) treated as the point rather than the mistake. The tone is **zen-contemplative but never precious** — it speaks the way a potter speaks while their hands are busy: short observations, long pauses, no salesmanship. There is no "discover," no "elevate," no exclamation. The site is a record of a single jasmine season told in seven unhurried movements, the way you'd narrate watering a plant to someone sitting quietly beside you. Embrace *fukinsei* (asymmetry), *kanso* (simplicity), *seijaku* (stillness) — but also *yūgen*, the profound grace of things half-seen: blossoms rendered as pale silhouettes at the edge of legibility, scent suggested by negative space, the moon implied by the shadow it casts on a clay rim. ## Layout Motifs and Structure The page is **one vertical scroll composed as a hand-thrown scroll of seven "leaves"** (notebook pages), each leaf occupying roughly one viewport but never *exactly* — every leaf is intentionally mis-sized by 4–11vh so the scroll never clicks into a grid. This is **ma-negative-space** taken to its limit: on most leaves, 60–72% of the visible area is empty warm-paper, and the content (a short line of jasmine-journal text, one botanical silhouette, one small ceramic-fragment image) huddles into a single off-center cluster — sometimes lower-left, sometimes upper-right, never centered, following a slow asymmetric drift down the page like petals settling in still water. There is **no top navigation, no hamburger, no logo lockup, no footer bar**. Navigation is a single **vertical "kiln-shelf" rail** pinned to the right margin: seven thin horizontal ticks, like firing-cones on a shelf, each labeled only with a tiny seasonal kanji-or-romaji marker (蕾 *tsubomi* / 一輪 *ichirin* / 夜 *yoru* …). The active tick swells very slightly and a hairline of *kintsugi* gold draws itself along it. Between leaves, instead of hard section breaks, there are **"breathing bands"** — 30–40vh of pure paper with nothing but a single drifting blossom-silhouette and a faint horizon-line of glaze-drip, so the eye is forced to rest before the next movement. Structurally the seven leaves are: **01 蕾 The Closed Bud** (title leaf — domain name set very small in a corner, enormous empty paper) · **02 葉 The Leaf** (the grower introduces the plant in three lines) · **03 夕 Dusk** (the hour the scent begins) · **04 一輪 One Flower** (a single blossom, described) · **05 香 Scent** (a leaf that is *almost entirely empty* — scent as ma) · **06 月 Moon** (night, the clay rim, the shadow) · **07 金継ぎ Kintsugi** (the season ends; the broken pot mended in gold; a quiet sign-off). No CTA leaf exists. ## Typography and Palette **Type system — Google Fonts only:** - **Elegant-serif primary face:** `Cormorant Garamond` (weights 300, 400, 500; italic used liberally) — for all journal prose and the seasonal markers in romaji. Its high contrast, slender ductus, and slightly nervous italics read like a fountain-pen note written on absorbent paper; set body at a generous `1.45rem`, `line-height: 1.85`, `letter-spacing: 0.005em`, color never pure black. - **Quiet companion / micro-labels:** `Zen Maru Gothic` (weight 400) — a soft-cornered Japanese sans whose Latin glyphs are gently rounded; used *only* for the tiny kanji shelf-markers (蕾 葉 夕 一輪 香 月 金継ぎ) and the leaf numerals (01–07). Its roundness against Cormorant's blade is the typographic equivalent of a thumb-smoothed clay edge against a sharp-trimmed foot-ring. - **Accent display, used twice in the entire site:** `Cormorant Garamond` at 300 weight, ~7rem, letter-spacing `0.18em`, set in the leaf-01 corner and the leaf-07 sign-off — never elsewhere. Restraint is the brand. Numerals and any incidental measurements (a date, "season three") use Cormorant's old-style figures. No monospace anywhere — this site has no terminal, no code, no "tech" register. **Palette — honeyed-neutral, muted, with one disciplined accent (named like glazes):** - `#EFE7D7` — **Bisque** (primary paper / background; warm unglazed-clay off-white) - `#E3D7BE` — **Raw Straw** (secondary paper for breathing bands; slightly deeper, like the back of the page) - `#C8BFA6` — **Ash Glaze** (hairlines, glaze-drip horizon strokes, inactive shelf ticks) - `#7C6F58` — **Steeped Tea** (primary text; a soft sepia-brown, never #000) - `#4A4234` — **Kiln Smoke** (rare emphasis text, leaf numerals) - `#9DAE8E` — **Celadon** (the botanical silhouettes; a dusty greyed jade, the only "color") - `#B89A4E` — **Kintsugi Gold** (the single accent — repaired-crack lines, active shelf tick, two hairline underlines; used in *total* on no more than ~1% of any screen) Background gradients are forbidden except one: a barely-perceptible radial on each leaf (`#EFE7D7 → #E9E0CD`) no more than 6% delta, simulating uneven kiln-firing across the paper. Everything else is flat matte color with a faint paper-grain texture overlaid at 4–6% opacity. ## Imagery and Motifs **No photography. No stock. No gradient-mesh. No glassmorphic cards.** All imagery is **hand-feeling SVG and a few duotone-treated illustrations** in the Celadon / Steeped-Tea range: 1. **Jasmine-blossom silhouettes** — five-petalled *matsurika* flowers drawn as filled Celadon shapes at 6–14% opacity, deliberately *not* botanically perfect: one petal always slightly larger, edges drawn with a wobbling 0.5px hand-stroke. They drift through breathing bands and cluster faintly behind text. Some are shown *closed* (the bud, leaf 01), some *half-open*, only one *fully open* (leaf 04). 2. **Ceramic fragments** — small (≤240px) illustrations of bisque shards, a chipped rim, a *guinomi* cup with a celadon drip, a cracked plate. Rendered as flat fills with one or two hand-hatched shadow areas; on leaf 07, one shard has a visible **kintsugi seam** — a single gold bezier path that *draws itself* on scroll. 3. **Glaze-drip horizon lines** — instead of borders or dividers, a single irregular horizontal stroke (Ash Glaze) with a slow drip or two hanging off it, like glaze that ran during firing. These mark where one leaf ends and a breathing band begins. 4. **The implied moon** — never drawn directly. On leaf 06, the *only* sign of the moon is a crisp crescent of paper left *unstained* on the rim of an illustrated clay bowl — light defined by where the matte texture stops. 5. **Brush-pause marks** — tiny circular ink-dots (like the resting point of a calligraphy brush) used as the only "bullet" or list marker, and as a full-stop ornament at the close of each leaf's prose. Decorative restraint is absolute: no icons-as-decoration, no patterns repeating wallpaper-style, no particles, no confetti, no neon, no chrome. ## Prompts for Implementation Build matsurika.date as **one HTML page, one CSS file, one small ES module** — no framework, no build step, no service worker. The whole page is a quiet ~80–100 second scroll through seven leaves of a jasmine-grower's journal. It contains **no CTA, no pricing, no plans, no stat grid, no testimonials, no logo wall, no email capture, no contact form, no FAQ, no newsletter, no cookie banner, no chatbot**. If a section feels like marketing, delete it. **Storytelling spine (seven leaves + six breathing bands, top to bottom):** 1. **Leaf 01 蕾 — The Closed Bud.** Near-empty Bisque paper. In the lower-left, very small: `matsurika.date` in Cormorant 300, letter-spaced. Upper-right, a single closed-bud silhouette at 9% opacity. One line of prose, italic: *"It does not open in daylight."* — that's all. The shelf-rail fades in after 1.2s. 2. **Breathing band** — Raw Straw paper, one drifting half-open blossom, a glaze-drip horizon. 3. **Leaf 02 葉 — The Leaf.** Three short lines, off-center cluster, about the plant: where it grows, how the leaves feel, that it is older than the grower. A small bisque-shard illustration anchors the cluster. 4. **Leaf 03 夕 — Dusk.** The radial firing-gradient deepens ~3% here. Prose about the hour the scent begins; the word *"dusk"* is one of only two phrases ever underlined in Kintsugi Gold (a hairline that draws on enter). 5. **Leaf 04 一輪 — One Flower.** The single *fully-open* jasmine silhouette, larger (up to 320px) at 14% opacity, lower-center-left. Four lines describing exactly one blossom — its weight, its five petals, the one that's bigger. 6. **Leaf 05 香 — Scent.** **Almost entirely empty.** ~85% bare paper. A single sentence, set small and high: *"You cannot put it on the page, so here is the page."* The blossom silhouettes here are at 4% — barely there. This leaf is the emotional center precisely because it withholds. 7. **Leaf 06 月 — Moon.** Slightly cooler paper tint. An illustrated clay bowl, rim catching an unstained-paper crescent of "moonlight." Three lines: night, the cup, what the dark smells like. 8. **Leaf 07 金継ぎ — Kintsugi.** A cracked plate illustration; on scroll-into-view, a single gold bezier `path-draw` traces the mend over ~1.6s. Prose: the season ends, the pot broke, it is more beautiful mended. Final line in Cormorant 300 ~5rem, letter-spaced, lower-right: *"again next dusk."* No link, no button — the scroll simply ends in paper. **Motion — `fade-reveal` first, everything slow:** - Primary entrance for every text cluster and silhouette: a soft **fade-reveal** — opacity 0→1 and a 14px upward drift over **900–1400ms**, `cubic-bezier(.22,.61,.36,1)`, staggered by ~140ms within a cluster (lines appear like the grower writing them one at a time). - Two and only two **`path-draw-svg`** moments: the dusk gold underline (leaf 03) and the kintsugi seam (leaf 07). - Shelf-rail: active tick grows from 1px→3px height with a gold hairline easing in; transitions ~600ms. - Blossom silhouettes in breathing bands have a *very* slow parallax — they drift at ~0.15× scroll speed, almost imperceptible. - `prefers-reduced-motion`: all of the above collapse to instant opacity reveals; the path-draws appear already-complete. - **Forbidden:** cursor-follow, magnetic buttons, tilt-3d, spring/elastic bounce, ripple, typewriter, counter-animate, hover-lift cards, parallax-heavy hero. Nothing here springs, bounces, or chases the mouse. The whole page should feel like it has *exhaled*. **Texture & finish:** overlay a faint paper-grain (SVG `feTurbulence` or a tiny tiled PNG) at 4–6% across everything. Round nothing with box-shadows; if depth is needed, use a single soft 1–2px Ash-Glaze offset like the shadow of a thin ceramic edge. Default cursor everywhere — no custom cursor. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Wabi-sabi as a *working journal*, not a luxury spa.** The few wabi-sabi/japanese-minimal sites in the corpus lean serene-premium (skincare, ceramics shop, calm portfolio). matsurika.date is deliberately *unfinished-feeling* — mis-sized leaves, hand-wobbled strokes, a celadon glaze-drip left mid-run, a crack repaired in gold and shown off. The flaws are the content. 2. **A leaf that is almost entirely empty on purpose (Leaf 05 香).** In a corpus where 90% are `full-bleed` and 88% are `card-grid`, this site's emotional climax is ~85% bare paper with one withholding sentence. Negative space *is* the imagery. 3. **One color, one accent, one gradient — total.** Celadon for every illustration, Kintsugi Gold capped at ~1% of any screen, and a single ≤6%-delta firing radial. Against a corpus that's 96% gradient and 98% warm-saturated, this is near-monochrome restraint disguised as warmth. 4. **No springs, no magnetism, no cursor-chasing.** Explicitly rejects the 95% `parallax` / 89% `cursor-follow` / 86% `spring` / 80% `magnetic` pattern stack. Motion is only slow fade-reveal plus two path-draws. The interaction model is "breathe," not "delight." 5. **A bilingual kanji shelf-rail instead of nav.** Navigation is seven firing-cone ticks marked with seasonal kanji (蕾 葉 夕 一輪 香 月 金継ぎ) — no menu, no logo, no footer, no hamburger anywhere. **Chosen seed / style:** `wabi-sabi imperfect ceramic` — expressed as *aesthetic: wabi-sabi, layout: ma-negative-space, typography: elegant-serif, palette: honeyed-neutral, patterns: fade-reveal, imagery: custom-illustration, motifs: leaf-organic, tone: zen-contemplative*. **Avoided over-used patterns (from frequency analysis):** dropped `hand-drawn` (97%), `glassmorphism` (74%), `photography` (98%), `full-bleed` (90%), `card-grid` (88%), `centered` (86%), `warm`-saturated `gradient` (96–98%), `parallax`/`cursor-follow`/`spring`/`magnetic`/`stagger` as the default stack, and `mono` typography (94%). Leaned instead into under-used territory: `wabi-sabi` (4%), `ma-negative-space` (9%), `fade-reveal` (13%), `custom-illustration` (4%), `honeyed-neutral` (3%), `zen-contemplative` (6%), `path-draw-svg` used *sparingly* (31% but here only twice).