# Design Language for matsurika.day ## Aesthetics and Tone matsurika.day is **the diary of a single jasmine flower's twenty-four hours, written in tea-stain and kept under a clay lid**. *Matsurika* (茉莉花) is the Arabian sambac jasmine — the flower that perfumes jasmine tea — and its peculiar gift is brevity: a bud swells through the heat of the day, cracks open at dusk, releases its entire fragrance through the night, and is brown-edged and spent by the next sunrise. ".day" is not a marketing flourish here; it is the literal lifespan of the subject. The site is built as a slow vertical descent through that one day, and the design language is **wabi-sabi** — not the Pinterest version with linen throws and a single dried branch, but the older, harder idea: that things are beautiful *because* they are impermanent, asymmetrical, and worn. The corpus shows wabi-sabi at roughly 4% — barely touched — and what little exists tends toward beige minimalism. matsurika.day reclaims wabi-sabi as **a tea-master's notebook**: tannin rings, kintsugi-gold seams across cracked panels, paper that has absorbed steam, ink that bled before it dried. The tone is **zen-contemplative** (about 6% in the corpus) but with a melancholic undertow — *mono no aware*, the gentle sadness of watching something perfect end on schedule. Nothing on the page is urgent. Nothing is sold. The page asks the visitor to spend roughly ninety unhurried seconds watching a flower live and die, the way you might watch tea leaves unfurl in hot water and forget you were waiting for anything. ## Layout Motifs and Structure The page is **one column, 46ch wide, set off-center — pulled 4vw left of true-center on wide screens**, because a tea bowl set down by hand never lands dead-centre on the mat. To the right of the column runs a thin **vertical sundial rail**: a 1px hairline with a single travelling tick that descends as you scroll, labelled in hours (05:00 → 04:00 next morning, a full diurnal loop). This rail is the only navigation; there is no menu, no header bar, no footer CTA. The composition obeys **ma — negative space as substance** (about 9% in the corpus): generous unfilled margins are not "breathing room," they are the silence between two notes of a shakuhachi flute. Vertical rhythm is built on a **27px baseline** (the line-height of the body serif), and every section break is a multiple of nine baselines, leaving large bands of warm paper between passages. **The day unfolds in seven descending stations (top to bottom):** 1. **05:00 — The Closed Bud (first paint).** A small, tight white SVG bud sits near the top of the warm paper, almost lost in the margin. A single line of serif: the wordmark "matsurika.day" and beneath it, faint, "one flower, one day." The cursor leaves a slow fading wet-ring trail — like a teacup set down and lifted. 2. **09:00 — Heat.** A passage on the bud swelling under the morning sun. The paper warms perceptibly — a CSS gradient shifts a few degrees toward amber. A faint tannin ring appears beneath the text, hand-irregular (an SVG ellipse with jittered control points), as if a cup was rested here. 3. **13:00 — Stillness.** The flattest, quietest band. The most ma. One sentence centred in a sea of paper. Nothing animates except the slow sundial tick. 4. **18:00 — The Crack.** The bud SVG splits — a path-draw animation unzips one petal seam in kintsugi gold (#B98A3B). The first scent. The type here is set slightly larger; the prose breathes. 5. **21:00 — Full Bloom, Full Fragrance.** The flower SVG is now fully open, five lobed petals, drawn entirely in gold seams over white — like a repaired bowl. The paper is at its darkest, warmest evening tone. Faint motes (CSS particles, very few, very slow) drift upward — fragrance made visible. This is the only "rich" moment on the page, and it is rich the way a single perfect cup is rich, not the way a buffet is. 6. **02:00 — The Browning.** Petal edges curl; the gold seams dim toward bronze; the prose grows shorter, more spaced. *Mono no aware.* 7. **04:00 — Spent (final station).** The flower is a small browned shape. One closing line — something like "by the time you read the word *morning*, it is already over." Below it, a single faint tannin ring, complete and dry. The sundial tick reaches the bottom and stops. No newsletter. No "back to top." Just the dry ring and the wide quiet paper beneath it. No card grid. No bento. No hero with overlaid buttons. No stat row. No pricing. The page is a scroll, in both senses. ## Typography and Palette **Fonts (Google Fonts only — three voices, like the three traditional elements of a tea gathering: the scroll, the kettle, the marked time):** - **Display & Body prose — *Cormorant Garamond* (weights 300, 400, 500; italic available).** A high-contrast Garamond revival with long, almost liquid italics — it reads like brush-thinned ink. Used at ~1.25rem for body, ~2.4rem light for the few station phrases. Letter-spacing slightly loose (0.01em) so the page never feels dense. This is the *scroll*. - **Wordmark, hour labels on the sundial, and small captions — *IBM Plex Mono* (weights 400, 500).** A humanist monospace, warm-cornered, not clinical. Used very small (0.7rem), uppercase, wide-tracked (0.18em) for the wordmark "MATSURIKA.DAY" and the hour ticks "05:00 … 04:00". The monospace is the *marked time* — the rigid 24-hour grid against which the soft flower lives and dies. Mono appears in 94% of the corpus, but almost never *this* sparingly or *this* small; here it is a measuring instrument, not a UI font. - **Pull-phrases and the single closing line — *Zen Old Mincho* (weight 400).** A Japanese serif (mincho) with delicate, slightly irregular brush-influenced strokes — it carries CJK glyphs for the occasional 茉莉花 / 朝 (morning) inline, and its Latin set has a quiet antique warmth. This is the *kettle's voice* — used at most six times on the whole page. **Palette — "steeped paper, white flower, mended gold" (warm, muted, anchored — at least seven values):** - `#F2E8D5` — **steeped rice paper**, the base background at 05:00 (warm, slightly grey-yellow, like paper that has lived near a kettle). - `#E7D6B8` — **afternoon paper**, the warmer background tone the page drifts toward by 13:00–21:00. - `#3B342A` — **wet ink brown**, the primary text colour (never pure black — ink always carries the colour of the brush). - `#7A6E59` — **dry tannin**, for the irregular ring marks, hairlines, and the sundial rail. - `#B98A3B` — **kintsugi gold**, the petal-seam stroke and the crack at 18:00 — matte, not metallic; a powdered-gold-and-lacquer brown-gold. - `#FBF7EE` — **flower white**, the only near-white on the page, used solely for the open-petal fills at 21:00 and the closed bud at 05:00. - `#9C5A2E` — **browned edge**, the bronze-rust the gold seams and petal tips fade to at 02:00–04:00. - `#D8C4A0` — **scent mote**, a barely-there pale tone for the few drifting particles. Strictly no neon, no pure white, no pure black, no cool blues, no gradients with more than two stops. Every transition is one warm tone aging into a slightly warmer or browner warm tone. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No emoji. No icons in the UI sense.** Everything visible is (a) typeset, (b) hand-irregular SVG, or (c) a procedural paper/tannin texture. **The Flower (one SVG, six states).** A single 5-petal sambac jasmine drawn as **open path strokes only — no solid fills except the white petal bodies at full bloom** — so that the flower always looks like a *mended* object, white china held together by gold. Its six morph states map exactly to the seven stations (13:00 reuses the 09:00 state — even a flower has an uneventful hour). The strokes are deliberately uneven-width (variable stroke via tapered paths) so no edge is mechanically perfect. The bud is asymmetrical; one petal at full bloom is slightly smaller than its neighbours; the browning is uneven, starting from one tip. **The Tannin Rings.** Three of them appear down the page (09:00, 21:00, 04:00), each an SVG ellipse whose path has **jittered Bézier handles** — never a true circle, always the wobble of a real cup-bottom on real paper. The 04:00 ring is the darkest and most complete: the residue of the whole day. **The Sundial Rail.** A 1px tannin-coloured vertical hairline on the right margin with **one small filled lozenge** (the "gnomon shadow") that travels top-to-bottom tied to scroll progress, passing seven faint hour ticks. It is the page's only chrome, and it is a *clock*, which is the whole point of ".day". **Paper Grain.** A subtle procedural noise (SVG `feTurbulence` at very low frequency, ~3% opacity, multiply blend) over the whole background, plus two or three larger soft "steam stains" placed asymmetrically — pale, blurred, irregular blobs that read as places where kettle-vapour touched the page. Wabi-sabi insists the *ground* be imperfect, not just the figure. **Marginalia.** A few tiny hand-set monospace notes in the wide margins — "scent peaks ~22:00", "茉莉花", "do not water" — placed off-baseline, faint, like a tea-master's pencil. Never more than four on the whole page. ## Prompts for Implementation Build matsurika.day as **a single-route, single-column, vertically-scrolled diary of one flower's day** — one HTML file, one CSS file, one small JS module. Treat the whole experience as a ~90-second slow descent, not a landing page. There is **no CTA, no pricing, no stat grid, no testimonial row, no contact form, no signup, no nav menu, no footer links**. There is only the day, the flower, and the clock. **First paint.** Land on warm `#F2E8D5` rice paper with the full paper-grain texture already present (no flash of plain colour — texture is part of the ground). Near the top, off-centre-left, the small closed white-and-gold bud SVG and, beneath it in tiny wide-tracked IBM Plex Mono, "MATSURIKA.DAY" with "one flower, one day." in light Cormorant italic below. The right-margin sundial rail draws itself in with a 1.5s `path-draw-svg` of the hairline, then the gnomon lozenge fades in at the very top. Nothing else. No spinner, no preloader bar. **Scroll behaviour & storytelling (seven stations as described in Layout):** - The sundial gnomon's vertical position is bound linearly to scroll progress; as it passes each hour tick, that tick brightens briefly (a soft `fade-reveal`, ~600ms, then settles dim again) — the only "you are here" feedback. - Each station's prose enters by **`fade-reveal` + a 12px rise**, staggered line-by-line (`stagger`, ~80ms per line), slow easing — text should arrive like ink soaking up, not like a slide deck transition. - The **background colour drifts continuously**, not in steps: interpolate between `#F2E8D5` → `#E7D6B8` (peaking warmest around the 21:00 station) → easing slightly browner by 04:00. Use a scroll-driven CSS custom property; never a hard cut. - The **flower SVG is pinned** (sticky, small, near the top of the viewport once you've scrolled past the wordmark) and **morphs between its six states** as stations pass — bud → swollen → swollen → cracked-one-seam → fully-open-white-with-gold-seams → browning → spent. Use SMIL or JS-driven path interpolation; keep it slow (each morph ~1.2s) and slightly eased-out so it settles like something physical relaxing. - At **18:00 ("The Crack")**, run the single most deliberate animation on the page: one petal seam unzips as a `path-draw-svg` stroke in kintsugi gold `#B98A3B`, ~1.4s, accompanied by the prose stepping up one type size. - At **21:00 ("Full Bloom")**, release **a small number of scent motes** — at most ~14 on screen at once — pale `#D8C4A0` dots, 2–4px, drifting *upward* with gentle horizontal sway, very low opacity, slow (8–14s to cross). They thin out and stop by the 02:00 station. This is the page's one moment of visible richness; keep it restrained. - At **02:00–04:00**, the gold seams and petal tips transition toward `#9C5A2E` browned-edge; the prose grows shorter and more widely leaded (increase line-height as you descend); the tannin rings darken. - **Final station (04:00):** the flower is a small browned shape, the gnomon reaches the bottom of the rail and stops, one closing Zen Old Mincho line appears, and a single dark complete tannin ring `#7A6E59` fades in beneath it. The page simply ends in wide quiet paper. No "back to top," no newsletter, no related links. **Cursor & micro-interaction:** the cursor leaves a slow **wet-ring trail** — a faint expanding-then-fading tannin-coloured ring every ~200ms of movement, like cups set down and lifted; max 4 rings alive at once, each fading over ~1.2s. No magnetic buttons, no tilt-3d cards, no cursor-attached blobs. **Reduced motion:** if `prefers-reduced-motion`, skip the morphs/motes/trail; instead show all six flower states as a small static vertical filmstrip beside the prose, and let the background colour still drift (it's slow and non-vestibular). **Performance/accessibility:** out of scope per instructions — optimise for the feeling of watching tea steep. ## Uniqueness Notes Differentiators, each a deliberate move against the patterns in the frequency analysis: 1. **Wabi-sabi rendered as a tea-master's stained notebook, not beige minimalism.** Wabi-sabi sits near 4% in the corpus and what exists leans toward clean linen-and-driftwood calm. matsurika.day instead makes *imperfection structural* — jittered Bézier tannin rings, deliberately uneven SVG stroke widths, kintsugi-gold seams holding a "broken" flower together, procedural steam stains on the ground itself. The page is wabi-sabi as *wear and repair*, not wabi-sabi as *tasteful emptiness*. 2. **".day" taken literally as a 24-hour clock — the sundial rail replaces all navigation.** Almost no design in the corpus uses a literal diurnal timeline as its sole navigation. The single travelling gnomon lozenge on a 1px hairline, ticking from 05:00 through 04:00 the next morning, *is* the site map — there is no menu, header, or footer, which also sidesteps the overused full-bleed / card-grid / centered layout trio (90% / 88% / 86%) in favour of an off-centre single column (~6%) wrapped in ma negative space (~9%). 3. **Monospace demoted to a measuring instrument.** Mono appears in 94% of the corpus, almost always as a UI/brand font at normal sizes. Here IBM Plex Mono exists *only* at 0.7rem on the sundial ticks, the wordmark, and four margin notes — it is the rigid grid of clock-time set against the soft, doomed Cormorant/Zen-Old-Mincho flower-prose, a typographic enactment of the whole concept. 4. **A narrative whose climax is decay.** Most "immersive scroll" pages build to a CTA or a product reveal. This one builds to 21:00 full bloom and then *keeps scrolling into the browning* — the last third of the page is the flower dying on schedule, ending in a dry tannin ring and silence. *Mono no aware* as page architecture; no upsell anywhere. 5. **Avoided patterns:** no glassmorphism (74%), no hand-drawn aesthetic (97%), no photography (98%), no gradient palettes beyond a single two-tone warm drift (96% gradient — metabolised into one slow background age), no cursor-follow blobs / magnetic / tilt-3d / spring-bounce UI (80–95%), no card-grid / full-bleed / centered scaffolding, no parallax-of-images, no counters, no dashboards. The only "common" pattern used is `fade-reveal` and `path-draw-svg`, both kept slow and quiet. Chosen seed: **wabi-sabi imperfect ceramic** — *aesthetic: wabi-sabi (4%), layout: single-column + ma-negative-space (~6% / ~9%), typography: elegant-serif + mono-as-instrument, palette: honeyed-neutral / muted-vintage (warm, no gradient), patterns: fade-reveal + path-draw-svg (slow), imagery: paper-aged / noise-texture, motifs: floral-botanical + candle-atmospheric (steam, motes), tone: zen-contemplative with mono-no-aware undertow.* A frequency-aware claim on the corpus's quietest, least-occupied room: the imperfect, the impermanent, and the deliberately worn.