# Design Language for matsurika.moe ## Aesthetics and Tone matsurika.moe is **a single cup of jasmine tea, photographed at the exact second a folded "blooming" tea-pearl unfurls into a full white flower under hot water — slowed down to last for the entire length of the page.** *Matsurika* (茉莉花) is the Japanese name for Arabian jasmine, the flower that scents the tea; this site is a wabi-sabi tea-room built around that one quiet event. Nothing here is glossy, neon, or symmetrical. Everything is the colour of unglazed clay, raw paper, steeped leaf, and the off-white of a real jasmine petal — which is never pure white, always faintly green-yellow at the throat. The tone is **zen-contemplative bordering on wabi-sabi**: the beauty of the chipped rim, the kiln-flash on the bowl, the single tea-leaf that didn't fully open. The site embraces *kintsugi* logic — a hairline crack runs visibly through the layout's central column and is "repaired" with a thin seam of matte gold; the flaw is not hidden, it is the most carefully made part of the page. Reading it should feel like the seventeen unhurried minutes of a tea steeping: you arrive, the water is poured, the pearl turns, the room dims, the cup is set down. There is no urgency, no conversion funnel, no "get started" — only a slow vertical descent through the life of one infusion, narrated in short lines like a tea-master's notes brushed in the margin of a worn manual. This is explicitly **not** a hand-drawn-doodle site, **not** glassmorphism, **not** a warm-gradient landing page. The corpus is saturated with all three; matsurika.moe is matte, ceramic, and almost colourless on purpose. ## Layout Motifs and Structure The page is a **single vertical column the width of a tea-scroll — 560px on desktop — held dead-centre in a vast field of bone-paper negative space (`ma`).** The empty margins on either side are not "wasted"; they are the *tatami* the cup sits on. Layout family: **ma-negative-space** crossed with **single-column** and a true **timeline-vertical** reading of the steeping clock — the page literally scrolls from "0:00 — water poured" at the top to "17:00 — cup emptied" at the bottom, with the elapsed-time read out in a fine mono numeral fixed to the left edge of the scroll-column, ticking as you descend. **Spatial system:** - **The Crack (kintsugi seam):** a single 1px irregular hairline (hand-described SVG path, slightly wandering) runs down the *exact centre* of the 560px column from the first section to the last. Around it, a 2.5px band of matte gold (`#9A7B3D`, no shine, no gradient) — the repair. Section dividers are not horizontal rules; they are small gold "staples" perpendicular to the Crack, as if the scroll were mended at each fold. - **The Bowl Zone:** the hero is not a headline — it is a near-square (`max-width: 460px`, aspect ≈ 1.05:1) "bowl" rendered as a low matte ellipse of unglazed clay (`#C6B9A6`) with one deliberate kiln-flash (a soft asymmetric scorch of `#8A6E52` at roughly 7 o'clock on the rim) and one chip on the upper-left lip. Inside it, suspended, a folded tea-pearl. The site's name *matsurika* is brushed beneath, small, in an elegant serif — never large, never bold. - **Steep Stations (5–7 of them):** each is a band of generous vertical air (min-height ~78vh) containing: the elapsed-time numeral (left, mono), one short brushed line of text (centre, indented off the Crack so the gold seam runs *through* the whitespace beside it), and one slow visual event (the pearl rotating a few more degrees of unfurl, the water darkening one shade). Text is never centred under the column — it hangs to one side, leaving the other side as breathing tatami, an asymmetric calm. - **The Cooling Saucer (footer):** the column widens slightly into a shallow saucer-ellipse; the gold Crack terminates not at an edge but in a single gold dot — the last drop. Three plain text links sit on the saucer rim, spaced like three tea-leaves settled at the bottom of a cup. No social row, no newsletter, no logo wall. No card-grid, no bento-box, no full-bleed hero image, no sidebar, no dashboard. The container is intentionally narrow; the world around it is intentionally empty. ## Typography and Palette **Type system — three Google Fonts, all quiet, no display-bold, no neon mono headline:** - **Brushed serif / display & the name "matsurika": Cormorant Garamond** — weights 300 and 400 only, often in *italic 300* for the tea-master's marginal notes. Used at restrained sizes (the largest single instance on the page is ~30px). Its high stroke contrast and slightly nervous italics read like a fine brush lifting off washi paper. This is the "voice" of the site — never set above 30px, never tracked tight, always with `0.01em` of air. - **Body & short brushed lines: Zilla Slab** — weight 300/400. A soft, low-contrast slab with humanist warmth and gently rounded slab feet — it sits on the page like ink that has *bled* a hair into the paper fibre rather than printed crisp. Body copy at `16px / 1.85` line-height, lines kept short (≤ 42ch) so each reads like one brushed phrase. - **The steeping clock & micro-labels: Spline Sans Mono** — weight 300 only. Used *exclusively* for the elapsed-time readout (`0:00`, `4:30`, `17:00`), the water-temperature note (`82°C`), and tiny field labels ("infusion", "leaf", "pour"). Tabular figures so the clock doesn't jitter as it ticks. This is the page's one concession to "mono", and it is hairline-thin and used like a watermark, not a banner — a deliberate counter to the corpus's 94% heavy-mono habit. **Palette — ceramic, paper, leaf, gold. No pure white, no pure black, no gradient.** - `#F2EDE3` — **Bone Paper.** The page ground. Warm off-white the colour of un-bleached washi; carries a faint 2.5% SVG paper-grain so it never reads as flat `#fff`. - `#C6B9A6` — **Unglazed Clay.** The bowl, the saucer, station backplates when any exist. Matte, dusty, slightly cool. - `#8A6E52` — **Kiln Flash.** The scorch on the bowl rim, deepest text, the darkening tea as it steeps past minute 10. Stands in for "black". - `#9A7B3D` — **Matte Gold (kintsugi).** The repair seam, the staples, the final drop. Absolutely no metallic gradient or `box-shadow` glow — it is *powdered* gold mixed into lacquer, dead matte. - `#E7E2D4` — **Steam.** Near-invisible lighter-than-paper tint for the rising steam wisps and the unfurled-petal whites; jasmine-petal off-white with the faintest green-yellow throat (`#EDE9D2`) used only at petal centres. - `#7E8C6E` — **Sencha Leaf (single accent).** The colour of the dry tea leaf and the link underlines; the only "green" on the page, sage-grey and muted, never saturated. - `#B8492F` — **Steeped Amber (rare).** Used at *one* moment only — the colour the water reaches at full strength around minute 12 — as a single warm note so the long neutrality has somewhere to resolve. ## Imagery and Motifs **Everything is matte, ceramic, and procedurally rendered — no photography, no character illustration, no glassmorphic cards.** - **The blooming tea-pearl (the protagonist):** an SVG of a tightly bound tea-pearl that, across the scroll, unfurls into a stylised jasmine flower — 5 narrow asymmetric petals (`#E7E2D4` with `#EDE9D2` throats), one of which deliberately *fails to fully open* (wabi-sabi). Built as a single SVG with `path` morphs driven by scroll progress; the rotation is irregular, not a clean spin — it catches, slows, releases, like a real leaf in water. - **Kiln-flash & chip:** the bowl is a layered CSS/SVG ellipse — base `#C6B9A6`, a soft radial scorch of `#8A6E52` placed off-centre, a single notch cut from the upper-left rim, and one fine `#9A7B3D` hairline already running through it (the crack that the page's central seam continues). The imperfections are hand-placed, never mirrored. - **The kintsugi seam:** the single most rendered element — an irregular SVG path (subtle Bézier wander, no two segments equal) stroked first in `#8A6E52` at 1px (the original crack) then overlaid in `#9A7B3D` at 2.5px with a slightly soft edge (the gold lacquer). Gold "staples" are tiny 9px perpendicular strokes at each section fold. - **Steam:** 2–3 extremely faint `#E7E2D4` SVG ribbons that drift upward and dissipate behind the text near the top stations, animated with a slow, low-amplitude sine warp — barely perceptible, the way real steam is barely there. - **Tea-stain rings:** in the deep margins (the tatami space), 1–2 faint single-line `#C6B9A6` circles — the ghost ring a cup leaves on paper — placed asymmetrically, off the column, as quiet texture. Never more than two; never centred. - **Paper grain:** a single tiled SVG `feTurbulence` noise at ~2.5% opacity over the whole `#F2EDE3` ground so the site reads as a physical surface, not a screen. No stock photos, no 3D product renders, no neon, no holographic foil, no isometric icons. ## Prompts for Implementation Build matsurika.moe as **one HTML file, one CSS file, one small ES module — no framework, no build step, no bundler.** It is a ~6–7 minute slow vertical scroll narrating a single jasmine-tea infusion from "water poured" to "cup emptied". There is **no nav bar, no hero CTA, no pricing, no plans, no testimonials, no FAQ, no logo wall, no stat-grid, no feature-grid, no signup, no newsletter, no contact form, no chatbot, no cookie banner, no social-icon row, no team section.** **Document order, top to bottom:** 1. **The pour (0:00):** centred-narrow bowl of unglazed clay with its kiln-flash and chip; a folded tea-pearl suspended inside; "matsurika" brushed small in Cormorant Garamond italic 300 beneath it; a single mono line at the left edge: `0:00 — 茉莉花 — pour, 82°C`. The gold kintsugi seam begins here, descending from the bowl's existing crack. 2. **First swell (≈1:30):** the pearl rotates ~15°, one outer wrap loosens; a brushed Zilla Slab line hangs to the right of the seam: *"the pearl remembers it was once a flower."* 3. **Opening (≈4:00):** two petals separate, `#E7E2D4` against the clay; the water tint shifts from `#F2EDE3` toward `#E7E2D4`; left numeral now `4:00`. Line hangs left this time — alternate the indent side at each station so the whitespace breathes asymmetrically. 4. **Full bloom, one flaw (≈8:00):** all five petals out, but the deliberately-stunted petal stays half-curled; brushed line: *"the leaf that did not fully open is the one I keep."* This is the wabi-sabi pivot. 5. **Deep steep (≈12:00):** the water colour reaches `#B8492F` Steeped Amber — the page's single warm resolution; steam thins; numeral `12:00 — full strength`. 6. **Setting down (≈15:00):** the bowl image (now scrolled far above) is echoed as a faint tea-stain ring in the margin; the petals begin to settle; line: *"every cup is the last cup of that water."* 7. **The cooling saucer (17:00):** column widens into a shallow saucer ellipse; the gold seam ends in a single `#9A7B3D` dot — the last drop. Three plain text links on the rim, `#7E8C6E` sage underlines that draw in on hover (`underline-draw`), spaced like three settled leaves. A final mono line: `17:00 — empty — 茉莉花`. **Animation & interaction (restraint is the brief):** - Drive the pearl-to-jasmine SVG `path` morph and rotation from scroll progress with a **spring** ease and gentle **stagger** between petals — but keep amplitudes *small* and timing *irregular*; nothing should snap. The unfurl should feel like it's resisting slightly, the way a leaf does in water. - **fade-reveal** the brushed text lines as each station enters the viewport — slow (~900ms), `cubic-bezier(.2,.7,.3,1)`, a 12px upward drift, never a bounce. - **scroll-triggered** colour interpolation on the "water" background tint across stations 3→5 (`#F2EDE3` → `#E7E2D4` → `#B8492F` at the single deep-steep beat, then easing back toward `#E7E2D4`). - The left-edge mono **clock counts up** smoothly as you scroll (`counter-animate`-style tween of the displayed minutes, tabular figures so it never jitters). - Steam ribbons: a continuous, very low-amplitude sine warp via `requestAnimationFrame` on an SVG path — barely visible, paused via `prefers-reduced-motion`. - Honour `prefers-reduced-motion`: hold the pearl at its mid-unfurl pose, disable steam warp, keep only opacity fades. - One subtle pointer touch only: a faint `#E7E2D4` ripple where the cursor rests over the bowl, as if breath disturbed the steam — no magnetic buttons, no cursor-follow trail, no 3D tilt, no parallax layers. **Build it as full-screen narrative, not a marketing page.** If a section feels like it wants a button, give it a brushed sentence instead. ## Uniqueness Notes **Differentiators from the corpus of 300+ designs:** 1. **A literal kintsugi (gold-repair) seam as the page's structural spine** — a hand-wandering SVG crack stroked first as a flaw, then "repaired" with dead-matte powdered-gold lacquer, with gold staples at each fold. The corpus has almost no wabi-sabi work (≈4%) and none that makes a *visible repaired crack* the load-bearing layout element. 2. **A timeline-vertical layout where the timeline is a 17-minute tea steeping** — the elapsed-infusion clock counts up at the page's left edge as you descend, and the scroll IS the steep. Timeline-vertical is only ≈3% of the corpus, and never used as a brewing clock. 3. **No pure white, no pure black, no gradient anywhere** — every value is unglazed-clay / bone-paper / kiln-flash / matte-gold / sage-leaf, with `#B8492F` Steeped Amber appearing at exactly one scroll beat. This deliberately rejects the corpus's 96% gradient and 98% warm-bright-photography habits, and the 94% heavy-mono-headline habit (mono here is hairline, watermark-scale, used only for the clock). 4. **The protagonist is a single morphing SVG tea-pearl that unfurls into jasmine — and one petal deliberately fails to fully open.** Imperfection-as-feature, scroll-driven, no photography, no character illustration. 5. **Extreme `ma` negative space with a 560px scroll-column floating in bone-paper** — the empty margins are framed as tatami, carrying only 1–2 off-centre tea-stain rings. Most corpus sites are full-bleed card-grids; this is intentionally narrow, matte, and almost empty. **Avoided patterns from frequency analysis:** hand-drawn (97%), glassmorphism (74%), warm/gradient palettes (96–98%), photography imagery (98%), full-bleed + card-grid layouts (88–90%), cursor-follow / magnetic / heavy-parallax interaction (80–95%), heavy mono headlines (94%). **Chosen seed/style: wabi-sabi imperfect ceramic** (wabi-sabi + zen, ceramic/tea-ceremony motif, ma-negative-space + timeline-vertical layout, ceramic-neutral palette, restrained spring/fade-reveal/scroll-triggered motion).