# Design Language for matsurika.bar ## Aesthetics and Tone matsurika.bar — 茉莉花, jasmine — is not a cocktail lounge dressed up in neon. It is a **wabi-sabi tea-bar**: a six-seat counter where a single person ladles cold-brewed jasmine, steeps roasted oolong over ice, and pours unhurried bitter-herbal infusions into hand-thrown cups that do not match. The site should feel like the inside of one of those cups — uneven glaze, a kiln-kissed iron spot, a rim that is not perfectly round. The mood is *zen-contemplative* crossed with *grounded-earthy*: quiet, slightly austere, smelling faintly of warm clay and night-blooming flowers. Nothing here shouts. The hero does not sell; it breathes. Inspiration: Raku ware and unglazed bizen pottery; the *ma* (間) of a tokonoma alcove holding one branch; the slow-drip ritual of a Kyoto kissaten; the way a paper shoji screen turns hard daylight into something you can stand inside. The tone of voice in copy is short, present-tense, sensory — "the water is 4°C", "the jasmine opens for ninety seconds", "we close when the pot is empty" — never marketing-speak, never exclamation marks. Imperfection is the point: asymmetry, visible seams, a deliberately off-center axis, textures that look touched. This is the antithesis of glassmorphism's frictionless gloss — it is matte, fibrous, and a little rough under the thumb. ## Layout Motifs and Structure The spine of the layout is **ma — negative space as structure**, not decoration. A single, narrow reading column (max-width clamp(38ch, 46vw, 620px)) sits **off the geometric center** — pushed left at ~38% of viewport width on wide screens — so the right two-thirds is intentional emptiness, the way a hanging scroll leaves the paper to do the work. Sections are *stacked* full-height (100svh) panels separated not by hard edges but by long fades of unglazed-clay color. There is **no card grid anywhere** — content is presented as horizontal "shelf" rows: a thin baseline rule (1px, the color of a kiln shadow) on which a cup, a name, and a one-line tasting note rest like objects on a wooden plank. Navigation is a vertical column of small lowercase labels pinned to the left margin, rotated 0° (never sideways gimmick), spaced generously. A faint, hand-irregular vertical hairline runs the full document height at the 38% mark — the "wheel axis" everything is thrown around; it wobbles by ±2px using an SVG path, never a straight `
` border. Scroll is slow and weighted (a CSS-driven ease that overshoots by 1–2% then settles, like clay finding its center). One signature break from the calm: the **menu panel** opens as a single column that *unrolls downward* like a bamboo blind, each item revealed on its own line with a soft settle. ## Typography and Palette Typography is **serif-revival** anchored by a humanist sans and a single small mono accent — all genuinely on Google Fonts: - **Display & headings:** *Fraunces* (variable; opsz 144, weights 300–500, soft optical setting, italic preferred for verbs and flower names). Set large but never huge: clamp(40px, 6vw, 96px), leading 1.0, letter-spacing -0.01em. Used for the bar name, section titles, and the names of drinks. - **Body & tasting notes:** *Spectral* (weights 300, 400, italic 400) at 18–20px, generous leading (1.7), measure held to ~46 characters. Spectral's slightly inky, low-contrast forms read like letterpress on soft paper. - **Labels, hours, prices, the mono accent:** *Spline Sans Mono* (weight 400), tracked +0.08em, uppercase only for two-letter and number labels (e.g., "04°C", "JPY", "OPEN 18—24"). Tiny — 11–12px. This is the only "machine" voice and it stays subordinate. Palette — a **muted, warm-earthy** clay range, deliberately low-chroma, no gradients-as-decoration (only one soft tonal wash allowed, top-to-bottom, between two adjacent clays): - `#E7E0D4` — unglazed clay / paper ground (primary background) - `#C9BEA8` — kiln dust (section dividers, the wobbling axis line) - `#8A7B62` — roasted oolong (secondary text, rules) - `#3A322A` — wet clay dark (primary text) - `#1F1B16` — iron-spot near-black (the menu panel background, footer) - `#6E7A5C` — jasmine-leaf sage (the single accent — links, the cursor dot, hover underlines) - `#F4EFE4` — bone-white slip (raised surfaces, the unrolled menu items) High-contrast text-on-paper is allowed and wanted; chromatic contrast stays low. White (#FFFFFF) is forbidden — paper is never pure. ## Imagery and Motifs No stock photography. The imagery vocabulary is **paper-aged texture + custom line illustration + a single hero still life**: 1. **Ceramic line drawings.** Each drink is represented by a single-weight (1.25px) ink drawing of the actual cup it's served in — a tall unglazed beaker, a wide raku bowl, a tokkuri-shaped infuser — drawn slightly wonky, never perfectly symmetrical, with one or two short hatching strokes for the iron spot. SVG, stroke color `#3A322A`, drawn-on with a slow `path-draw-svg` animation when it enters view (1.4s, ease-out, like a brush completing a stroke). 2. **Jasmine, sparingly.** One five-petal jasmine blossom, rendered as a flat sage (`#6E7A5C`) silhouette at ~9% opacity, appears exactly twice in the whole site — once large and bleeding off the top-right empty space of the hero, once tiny beside the footer. It never repeats as a pattern. Restraint is the motif. 3. **Paper grain everywhere.** A subtle fibrous noise (SVG `feTurbulence`, baseFrequency ~0.9, very low alpha, `mix-blend-mode: multiply`) sits over the whole document so flat color never looks digital-flat. Add a faint deckled (torn) edge to the menu panel's top border using an irregular SVG path. 4. **Steam, optional and barely there.** When a drink row is hovered, two thin wavering vertical SVG paths rise ~40px above its cup illustration and dissipate — `#8A7B62` at 20% opacity, a 3s loop, prefers-reduced-motion disables it. 5. **Water temperature as a recurring micro-motif:** a tiny mono number with a degree mark sits beside every cold drink, the only "data" on the page. ## Prompts for Implementation Build this as a **quiet, full-height scroll narrative of one bar**, not a restaurant template. - Structure: `
` is a stack of `
` panels, each `min-height: 100svh`, each containing the narrow off-center reading column. Implement the off-center column with CSS grid: `grid-template-columns: 38vw 1fr` on the body, content placed in column 1, column 2 left empty (it holds only the bleeding jasmine silhouette and air). - The "throwing axis" hairline: an absolutely-positioned full-height inline `` at the column boundary whose single `` is a near-vertical line with two or three subtle Bézier wobbles; stroke `#C9BEA8`, 1px. Never a `border-left`. - Scroll feel: use a small JS scroll-smoothing (or CSS `scroll-behavior` + a transform-based lerp on section reveals) that **overshoots by ~1.5% and settles** — the "finding center" easing. Section content fades and rises 24px on entry with a long 1.1s `cubic-bezier(0.22, 1, 0.28, 1)`. Stagger child lines by 90ms. - The menu: a panel anchored to a "menu" nav label. When opened it does **not** modal-overlay; it pushes content and **unrolls downward** — `transform-origin: top; scaleY(0)→1` with a `cubic-bezier(0.34, 1.4, 0.64, 1)` slight overshoot, background `#1F1B16`, items in `#F4EFE4` Spectral, each item's baseline rule drawing left-to-right (`path-draw-svg`) as it settles, 80ms apart, like slats of a bamboo blind dropping into place. - Each drink row: thin baseline rule, the wonky SVG cup on the left, *Fraunces italic* name, *Spectral* tasting note, *Spline Sans Mono* temperature/price flush right. On hover: the baseline rule's color shifts clay→sage, the cup's path-draw replays subtly, optional steam rises. Use `:focus-visible` to mirror this for keyboard. - Cursor: replace nothing heavy — just a small 6px sage (`#6E7A5C`) dot that trails the pointer with a gentle spring (stiffness low, ~0.12 lerp), and a `blur-focus` micro-effect where the dot softens (2px blur) when idle for >800ms. Disable entirely on touch and on reduced-motion. - Texture: ship the `feTurbulence` paper grain as one fixed full-viewport SVG with `pointer-events: none; mix-blend-mode: multiply; opacity: 0.06`. Plus a per-section very faint tonal wash (clay→kiln-dust, top→bottom) via `linear-gradient` — the *only* permitted gradient, and it must be nearly invisible. - Type animation: the bar name in the hero uses a slow `typewriter-effect`? No — too mechanical. Instead reveal it as a single brush stroke: clip-path inset wipe left-to-right over 1.6s. Reserve the mono typewriter feel only for the live "OPEN 18—24" status line, which types its 9 characters once. - AVOID: any CTA buttons, "Book now" banners, pricing tier blocks, stat grids, testimonials carousels, hero photography, glass cards, neon, big drop shadows, pure white, gradients-as-decoration, parallax-of-many-layers, sideways-rotated text gimmicks. There is exactly one accent color and it is used like a single drop of dye. ## Uniqueness Notes Differentiators from the corpus: 1. **Wabi-sabi ceramic as the literal structural metaphor** — an intentionally wobbling SVG "throwing axis" line, off-center single column, mismatched hand-drawn cups, and a forbidden-pure-white matte clay palette. `wabi-sabi` is ~4% of the corpus and almost never paired with a true `ma`-driven off-center column. 2. **Card-grid-free, photography-free.** ~88% of designs use a card grid and ~98% use photography; this site uses neither — content lives on thin baseline "shelf" rules with single-weight line drawings only. 3. **The unrolling bamboo-blind menu panel** — content-pushing (not modal), with per-slat left-to-right rule-draws — replaces the conventional dropdown/overlay nav entirely. 4. **Restraint as a motif:** the jasmine blossom appears exactly twice, the accent color is one drop, the only "machine" type is a tiny mono temperature reading. Most of the corpus is additive/maximalist by comparison. 5. **Heavy use of underused patterns** — `blur-focus` (7%), `path-draw-svg` used as a ritual brush-completion rather than logo flourish, plus `ma-negative-space` (9%) and `single-column` (16%) as the dominant layout — and deliberate avoidance of the corpus-saturated `hand-drawn` (97%), `glassmorphism` (74%), `warm gradient` (96–98%), `parallax` (95%), `cursor-follow` heavy effects, and `mono` as primary typography (94%). Chosen seed/style: **wabi-sabi imperfect ceramic**