# Design Language for matsurika.dev ## Aesthetics and Tone matsurika.dev — 茉莉花, *matsurika*, the Arabian jasmine that opens only after dusk and is steeped at dawn into the first cup of jasmine tea — is a developer's site disguised as the inventory ledger of a small ceramic tea-studio in late autumn. The governing aesthetic is **wabi-sabi**: the beauty of the incomplete, the impermanent, the imperfect. Nothing here is glossy. Surfaces look thrown on a wheel, not rendered in a browser. There are chips on the rims. There is a gold seam where a thing once broke and was mended — *kintsugi* — and the mend is the point, not the flaw. The mood is **zen-contemplative** crossed with the dry, exact pleasure of a craftsperson logging their kiln: each project on the site is a *piece*, fired and glazed and shelved, described with the same care a potter gives to "stoneware, reduction fired to cone 10, tenmoku over white slip, slight warp at foot — keep." It is unhurried. It breathes. Whole screens are mostly empty — *ma*, the active, charged negative space of Japanese composition — with one object placed off-center and left to be looked at. The writing has a tea-master's economy: short lines, present tense, no exclamation, occasional one-word paragraphs. Where most dev portfolios shout throughput and stack logos, this one offers you somewhere to sit down. The only ornament is the gold of the kintsugi line and the faint chalky bloom of glaze. The animation budget is spent almost entirely on *settling* — things come to rest the way a bowl rocks twice on a table and stops. Reference touchstones: the unglazed clay foot of a Hagi-ware chawan; Axel Vervoordt's empty rooms; the margins of a *haiku* anthology; a kiln log written in pencil; jasmine flowers floating in a glass of cold-brew tea at first light. ## Layout Motifs and Structure The site is **single-column** and **ma-negative-space**-driven — the opposite of the corpus's near-universal card-grid. There is a single narrow column of content, `min(64ch, 86vw)`, but it is *not centered*: it sits at roughly the golden ratio from the left edge on wide screens, leaving a broad, deliberately empty right margin where small "shelf" objects (a glaze-swatch, a footnote, a date stamp, a tiny SVG bowl) drift in as you scroll — like items set down beside the ledger. Structure as a **kiln log / inventory shelf**: - **The Opening (100vh).** Near-empty. An off-white "paper" field. Low and left: the name `茉莉花 matsurika.dev` in a quiet serif, and beneath it one line — *"a small studio. things made of code, fired slow."* High and right, alone: a single hairline-drawn SVG tea bowl with one **kintsugi gold seam** running through it, the seam drawn live by an SVG path on load. Nothing else. No nav bar yet — the nav fades in only after the first scroll, as a thin vertical list pinned to the left margin. - **The Shelf (the work).** Each project is a **shelf row**: a horizontal hairline rule (1px, warm grey), a generous `padding-block` of `clamp(6rem, 12vh, 11rem)` so each piece has air around it, the title set large in serif, a 2–4 line "kiln note" in mono describing what it is and how it was "fired," and — placed in the empty right margin — a small abstract "glaze tile": a soft-edged blob of layered colour-wash unique to that piece (CSS `radial-gradient` + `mix-blend-mode: multiply`, faintly grainy). Hovering a row does almost nothing — the hairline rule above and below it extends a few pixels into the margins, like a drawer easing open, and the glaze tile gains one slow `box-shadow` bloom. That is the entire interaction. - **The Notes (about / writing).** Set as **editorial-flow**: long measure, ragged-right, wide leading (`line-height: 1.85`), the occasional pulled phrase in the left margin in jasmine-tinted mono. Pencil-grey horizontal rules between sections, drawn slightly wavering (an SVG path with a tiny sine wobble), never perfectly straight — *the ruler slipped*. - **The Foot (contact / colophon).** Literally the *foot* of the page treated like the unglazed foot-ring of a bowl: a band of bare "raw clay" texture (subtle SVG noise, warmer and rougher than the body), the contact lines stamped into it like a maker's seal in a small square — initials inside a hand-drawn red `square` border, the only saturated red on the site. No hero CTAs, no pricing tiers, no stat counters, no logo wall. Scroll is vertical and calm; scroll-snap is *off* — you should be able to stop anywhere, like pausing on a shelf. Section transitions use `scroll-triggered` `fade-reveal` only, never slide or zoom. ## Typography and Palette **Typography** pairs an elegant brush-adjacent serif with a humanist mono for "log entries" — both real Google Fonts: - **Display & titles — *Shippori Mincho* (or *Shippori Mincho B1*)**, weights 400 / 600. A Japanese *mincho* serif with elegant, slightly dry brush terminals; carries both Latin and kana beautifully, so `茉莉花 matsurika.dev` can sit on one line in one face. Used at `clamp(2.6rem, 6vw, 5.2rem)` for the name, `clamp(1.7rem, 3.4vw, 2.6rem)` for shelf titles. Letter-spacing `0.01em`, leading tight (`1.08`). - **Body & long-form — *Spectral***, weights 300 / 400 / italic 400. A warm, low-contrast serif with generous open counters that reads like good book paper. Body at `1.075rem`, `line-height: 1.85`. Italic for plant/Latin names (*Jasminum sambac*) and quiet asides. - **Kiln notes, dates, nav, footnotes — *Spline Sans Mono***, weight 400 (mono is near-ubiquitous in the corpus, so it is used *sparingly and quietly* — only for log-like microtext, never for headlines), at `0.82rem`, letter-spacing `0.02em`, colour dimmed. Type colour is never pure black on pure white — it is warm ink on warm paper. **Palette — a wabi-sabi ceramic studio in late autumn:** - `#F2EDE3` — *kinari* (raw, unbleached) — the paper/page ground. - `#E7DFD0` — *clay slip* — slightly darker raw band for the foot/colophon. - `#3B362F` — *sumi-warm* — primary ink (a brown-black, never `#000`). - `#6E665A` — *ash grey* — secondary text, hairline rules, mono microtext. - `#C9A24B` — *kintsugi gold* — the mend seam; the single accent; used only on the SVG repair lines and on link underlines. - `#9FB08C` — *jasmine-leaf sage* — a muted desaturated green for pulled-quote mono and one or two leaf motifs. - `#FBFAF6` — *jasmine petal* — the near-white used for the glaze-tile highlights. - `#A8362A` — *maker's-seal red* — a deep brick red, used *once*: the stamped contact seal at the foot. Nowhere else. Glaze tiles for each project are built from low-opacity washes of sage, gold, ash, and a dusty plum `#7C5C66` layered with `multiply`, so no two are alike but all belong on the same shelf. ## Imagery and Motifs Imagery is **hand-drawn line illustration** + **paper/clay texture** — emphatically *not* photography (which 98% of the corpus uses). Every illustrative element is a single-weight ink line, as if drawn with one stroke of a fude brush, intentionally a little uneven: - **The signature object: the kintsugi bowl.** A simple chawan rendered as an open SVG path with `stroke-linecap: round`, `vector-effect: non-scaling-stroke`. Through it runs the *kintsugi* seam — a separate gold (`#C9A24B`) path with a faint outer `drop-shadow`, animated with `stroke-dasharray` so it draws itself once on first paint, never repeating. It reappears small in the favicon and in section dividers. - **Glaze tiles** — soft, irregular, grainy colour-wash blobs in the right margin, one per project; `border-radius` in the lopsided `42% 58% 53% 47% / 38% 44% 56% 62%` style so they read as a thrown form, not a circle. - **Wavering rules** — horizontal dividers are SVG paths with a tiny baked-in sine wobble (amplitude ~1.5px); they are *almost* straight. The ruler slipped. Leave it. - **The maker's seal** — a small hand-drawn red square (corners not quite meeting) enclosing the author's initials in mincho; the only place red appears. - **Jasmine sprigs** — at most two: one tiny five-petal jasmine flower with two leaves, line-drawn in sage, set near the page name and again at the colophon. Used like a printer's flower, sparingly. - **Grain & bloom** — a faint full-page SVG `feTurbulence` noise overlay at ~3–4% opacity gives everything the tooth of laid paper; the "clay" foot band gets a stronger, warmer noise. Glaze tiles get their own grain mask so they look chalky, not digital. No icons-as-buttons, no isometric anything, no glassmorphic cards, no neon, no 3D renders, no stock photos. ## Prompts for Implementation Build this like a quiet object, not a brochure. The feeling to chase: walking into a small studio where someone is working with their hands and there is plenty of room and no music. - **Honour the *ma*.** Resist the urge to fill space. The content column is `min(64ch, 86vw)` and offsets left (`margin-left: clamp(1.5rem, 18vw, 16rem)` on wide screens); the right margin stays largely empty, hosting only small drifting "shelf" items via `position: sticky` / scroll-tied translate. If a screen looks "too empty," it is correct. - **Spend the animation budget on *settling*, not entrance.** Use a single soft spring/ease for everything (`cubic-bezier(.22,1,.36,1)`), short distances (8–16px), and let things come to rest with one tiny overshoot — like a bowl rocking twice. The hero kintsugi seam draws once via `stroke-dasharray`/`stroke-dashoffset` on load (≈1.6s, ease-out) and is then still forever. No looping ambient animation anywhere. Respect `prefers-reduced-motion` by skipping the draw and showing the seam complete. - **Shelf rows are the core component.** Markup: `
` → `

` (Shippori Mincho), `

` (Spline Sans Mono, dimmed), and an aside `

` absolutely placed in the right margin. On `:hover`/`:focus-within`, extend the top & bottom hairline rules a few px outward (`transform: scaleX()` on `::before`/`::after` pseudo-rules anchored at the column edge) and bloom the glaze tile's `box-shadow` over ~600ms. Nothing flips, slides, or tilts. - **Glaze tiles in CSS.** Layer 3–4 `radial-gradient`s of low-opacity sage `#9FB08C`, gold `#C9A24B`, ash `#6E665A`, plum `#7C5C66` at different offsets, `mix-blend-mode: multiply`, over a `kinari` base; mask with an SVG `feTurbulence` noise so the surface is chalky. Lopsided `border-radius` (e.g. `42% 58% 53% 47% / 38% 44% 56% 62%`). Each piece varies the gradient stops with a CSS custom property `--throw-seed`. - **Wavering dividers.** Generate `` rules with a path that's a near-straight line plus a low-amplitude sine offset (a tiny inline JS helper, or a static handmade path). `stroke: #6E665A; stroke-width: 1`. Never use a plain `
` straight border. - **The colophon foot** is a full-bleed band of `clay slip` `#E7DFD0` with a warmer, coarser noise overlay; contact links live inside a small hand-drawn red `#A8362A` square (SVG, corners slightly open) like a stamped seal — this is the *only* saturated colour event on the page. - **Links** are body-coloured with a `#C9A24B` kintsugi-gold underline that, on hover, "mends" — animates from a 1px dashed line to a solid gold seam (`background-size` trick), ≈220ms. That's the link interaction. No buttons styled as CTAs. - **Type & ink:** body is `#3B362F` on `#F2EDE3`, never black on white. Long-form gets `line-height: 1.85`, ragged-right, max-measure ~64ch. Mono microtext is `#6E665A` at `0.82rem`. Headlines in Shippori Mincho, tight leading. - **Tell the story:** the homepage should read top-to-bottom like a kiln log — a quiet line of intent, then a shelf of fired pieces each with its maker's note, then the studio's own description as marginalia-rich prose, then the stamped foot. No grids of equal cards. No pricing. No stat counters. No logo wall. Let the visitor *sit* on the page. ## Uniqueness Notes Differentiators from the corpus: 1. **Single-column, *deliberately off-center*, ma-driven layout** — no card-grid at all (the corpus is 88% card-grid, 86% centered). The charged empty right margin as a "shelf" for drifting micro-objects is the structural signature, not a hero or a grid. 2. **Kintsugi as the entire visual system** — the only ornament and only accent is a self-drawing gold repair seam (`#C9A24B`); broken-and-mended, not glossy. Line illustration only, zero photography (vs. 98% photography corpus-wide), zero glassmorphism (74% corpus-wide). 3. **Animation spent on *settling*, never on entrance or ambience** — one soft spring, 8–16px moves, single-overshoot rests, one one-time SVG path draw; no looping/parallax/cursor-follow theatrics (parallax 95%, cursor-follow 89%, magnetic 80% corpus-wide — all absent here). 4. **"Kiln log / inventory shelf" content model** — projects described as fired ceramic pieces with maker's notes; one-word paragraphs; tea-master economy of language. A genuinely different information architecture for a dev site. 5. **Wabi-sabi imperfection baked into the geometry** — wavering SVG dividers (the ruler slipped), lopsided `border-radius` glaze tiles (thrown, not circular), an open-cornered hand-drawn maker's-seal square; warm ink on warm paper, never `#000`/`#fff`. Chosen seed/style: **"wabi-sabi imperfect ceramic"** (wabi-sabi appears in only ~4% of the corpus; zen ~7%; this exact ceramic-studio framing is unused). Avoided overused patterns from frequency analysis: hand-drawn-as-default (97%), glassmorphism (74%), photography (98%), card-grid (88%), centered (86%), parallax (95%), cursor-follow (89%), magnetic (80%), warm-gradient palettes (96%), tilt-3d (24%). Mono is present but consciously demoted to quiet microtext only.