# Design Language for simai.bar ## Aesthetics and Tone `simai.bar` is "shimai" — the Japanese word for the close, the finishing gesture, the last thing of the night. The site is built as a *listening bar after the last train has gone*: a narrow room, one warm lamp, a turntable, and a bartender who only speaks when the record ends. The aesthetic is **wabi-sabi rendered in low light** — not the pottery-and-linen reading of wabi-sabi, but its nocturnal cousin: scuffed brass, a ring left by a wet glass, dust caught in a single beam, the imperfect crackle in a worn pressing. Everything is dimmed, intimate, and unhurried. There is no menu shouting at you; there is a page that behaves like a room you've been allowed to sit in. Tone is **mysterious-moody fading into zen-contemplative**. Copy speaks in short, low sentences — "the room is small.", "the record is on its B-side.", "we close when the record closes." Nothing is sold; an atmosphere is offered. The mood arc across the page goes from *threshold* (a dark door) to *seated* (the warm middle) to *shimai* (the lights coming up, gently, at the end). The whole experience should feel like 35 minutes inside a 9-square-meter bar in a basement in Nakameguro at 1 a.m. ## Layout Motifs and Structure The governing principle is **ma — negative space as the主 material**. Content sits in a single narrow column, roughly 540–620px wide, floated in a wide field of near-black. The column is never centered with mechanical symmetry; it drifts a few degrees off the vertical axis from section to section, the way a thought drifts. Generous vertical silence — 50–70vh of empty darkness — separates each "moment," so the visitor has to scroll *through the dark* to reach the next pool of light. Scrolling is the act of walking deeper into the room. Structure as a sequence of **lit pools**, not "sections": 1. **The Door** — full-viewport black, a thin vertical seam of amber light at the left edge (the door ajar), the words "simai" set very small and very low. 2. **The Counter** — a horizontal band of warm grain; the bar's hours, address fragment, and house rule appear as if scratched into the wood. 3. **The Record** — the page's pivot: a slowly rotating SVG ring (a record), with a soft tonearm path that draws itself across as you scroll. Around it, the "what we play tonight" note. 4. **The Pour** — a tall thin panel where a single line of liquid (amber → deep garnet) fills a glass-shaped SVG mask as you scroll past it; beside it, three or four house drinks named like song titles. 5. **The Regulars** — three short prose fragments, set far apart vertically, like overheard half-conversations. 6. **Shimai** — the background lifts from near-black toward a warm dawn grey over the last scroll distance; "we close when the record closes." and the contact seam appears, then the lamp dims to a dot. No card grid. No bento. No stat blocks. No CTA buttons styled as buttons — the only "action" is a quiet underlined word that draws its own line when you near it. ## Typography and Palette **Typefaces (all Google Fonts):** - **Display / headings:** *Fraunces* — its optical sizes and slightly melancholic "wonk" axis give headings the warmth of old printed matter; use the soft, high-contrast Light/Regular weights at large size, never bold. - **Body / prose:** *EB Garamond* — quiet, literary, reads like a paperback held close to a lamp. - **Functional / labels / hours / coordinates:** *Space Mono* — used sparingly and small, in lowercase, for the bar's "facts" (hours, the house rule, the record side) so they read like a ledger entry, not a UI. - Optional accent for the word "simai" only: *Shippori Mincho* — a Japanese serif whose Latin glyphs carry a vertical, brushed gravity. **Palette:** - `#0B0A09` — *sumi black*, the room with the lights off (page base) - `#161312` — *cellar wall*, panel base just barely lifted from black - `#E8A24B` — *lamp amber*, the single warm light source (primary accent, glows, the door seam) - `#7A2E2A` — *garnet vermouth*, deep red for the liquid fill and rare emphasis - `#C9B79C` — *aged paper*, the body text colour (never pure white — paper, not screen) - `#5A5550` — *dust grey*, secondary text and hairlines - `#D8CDBB` — *dawn*, the warm grey the background rises to in the Shimai section Light is *radial and local*: amber never floods the screen, it pools — a `radial-gradient` halo behind the lamp, behind the record, behind the active line of text — and falls off into `#0B0A09` within 400–600px. ## Imagery and Motifs No photography. Everything is **drawn in thin line and lit by gradient**: - **The record ring** — concentric SVG circles, slightly elliptical in perspective, with a faint hand-stippled "groove noise" texture; it rotates at ~⅓ rpm scaled (one turn per ~18s) and never stops. - **The tonearm** — a single bezier `path` that draws itself (`stroke-dashoffset`) from the rest position toward the record's edge as the Record pool enters view; it trembles a half-pixel on a slow loop (the needle in the groove). - **The glass** — an SVG outline of a Nick & Nora glass used as a clip-path; a `` of garnet-to-amber gradient rises inside it on scroll. - **The door seam** — a 2–4px vertical bar of amber with heavy `blur()` glow at the far left of the first viewport; it's the only thing visible in the dark, and it's what invites the scroll. - **Sound, as faint wave-forms** — extremely low-opacity (~6%) horizontal sine ripples behind the prose, the way a bass note moves the air; never loud enough to read as "audio UI." - **Grain & dust** — a fixed, low-opacity film-grain overlay across the whole page (animated `background-position` jitter, ~8fps), plus a few slow-drifting "dust mote" dots inside the lamp halos. - **Ring stains & scuffs** — on the Counter band, faint ellipse "wet-glass rings" and brass-scratch marks, as decorative SVG, slightly mis-registered. Iconography is almost absent; where a mark is needed (e.g. the hours), it's a tiny mono glyph or a 1px-stroke pictogram (a moon arc, a key) — quiet, ledger-like. ## Prompts for Implementation - Build it as a **single full-screen narrative scroll**, not a marketing page. Treat each pool of light as a "scene" with its own scroll-driven micro-story. Use `IntersectionObserver` for reveals and a light scroll-progress hook (or `scroll-timeline` where supported) for the record rotation, tonearm draw, and liquid fill — but keep all motion *slow* (0.8–2.4s eases, generous `cubic-bezier(.16,1,.3,1)` style), nothing snappy. - **Fade-reveal is the core transition**: prose fragments fade up from `opacity:0; translateY(14px); filter:blur(6px)` to clear as they enter the lamp's reach, and gently dim again as they leave the light. Stagger lines within a fragment by ~120ms. - **The lamp follows, faintly**: a single soft amber `radial-gradient` element lerps toward the cursor with heavy damping (~0.04 lerp), so the room "warms" wherever attention rests — on touch devices it simply rests behind whatever scene is centered. This is the *only* cursor effect; no trailing dots, no magnetic buttons. - **Path-draw-SVG** for the tonearm and for the single underlined "action" word (a hairline that draws left-to-right on approach). Use `stroke-dasharray`/`dashoffset`. - **The Shimai close**: drive the page `background-color` and the grain opacity from a CSS variable tied to scroll progress over the last screen, easing `#0B0A09 → #D8CDBB` and grain `0.14 → 0.03`; the lamp halo contracts to a small dot and fades. End the page there — no footer chrome, just the dot and, below it, the contact seam in `Space Mono`, tiny. - Respect `prefers-reduced-motion`: freeze the record, skip the lerp, keep only opacity fades. - AVOID entirely: hero CTA stacks, pricing/menu cards in a grid, stat counters, testimonial carousels, glassmorphism panels, big bold sans headlines, stock photography, anything bright or high-saturation across large areas. ## Uniqueness Notes - **Differentiator 1 — darkness as the dominant surface, light as the only content medium.** Where 86% of the corpus is "full-bleed" and 84% leans glassmorphism, this design is 70%+ near-black void with content existing *only* inside small radial amber pools the visitor scrolls between. The negative space isn't breathing room; it's the bar's unlit floor. - **Differentiator 2 — wabi-sabi read as nocturnal imperfection, not ceramic craft.** Wet-glass rings, brass scuffs, mis-registered marks, vinyl groove-noise, animated film grain — the "imperfect/impermanent" is the wear of a working bar at 1 a.m., a deliberately rare reading versus the usual pottery/linen/leaf interpretation. - **Differentiator 3 — a rotating record as the page's structural pivot + a scroll-drawn tonearm + a scroll-filled cocktail glass**, none of which are CTA-driven; the only "interaction" is a single hairline-underlined word. No buttons styled as buttons anywhere on the page. - **Differentiator 4 — a built-in mood arc that ends in light.** The background literally rises from sumi-black to warm dawn-grey over the final scroll ("shimai" = closing), inverting the usual dark-mode convention of staying dark; the experience resolves rather than just stopping. - **Differentiator 5 — typography as old printed matter, not UI.** Fraunces (soft, wonky, optical) + EB Garamond + tiny lowercase Space Mono "ledger facts", with paper-coloured text (`#C9B79C`) instead of white — reads like a paperback under a lamp, not a screen. - Documented chosen seed/style: **aesthetic: wabi-sabi (+ dark-mode), layout: ma-negative-space (immersive-scroll), typography: serif-revival (Fraunces/EB Garamond) with tech-mono accents (Space Mono), palette: midnight-blue→reframed as sumi-black + lamp-amber + deep-garnet (deep-burgundy / honeyed-neutral), patterns: fade-reveal + path-draw-svg + cursor-follow(as a single damped lamp), imagery: grain-overlay + line-illustration, motifs: candle-atmospheric + wave-forms, tone: mysterious-moody → zen-contemplative.** Built from underused tokens — wabi-sabi 9%, ma-negative-space 17%, deep-burgundy 3%, grain-overlay 10%, line-illustration 17%, candle-atmospheric 5%, wave-forms 3%, mysterious-moody 10% — fused into one object: *a 9-square-meter listening bar after the last train, where you scroll through the dark from lamp to lamp, a worn record turns, a tonearm draws itself, and the lights come up gently at "shimai."* - Avoided patterns from the frequency analysis: hand-drawn-as-primary-aesthetic (94%), glassmorphism (84%), photography (98%), card-grid (92%), centered-box symmetry (80%), bold sans-grotesk display, dopamine/neon palettes, plain cursor-follow dots (replaced by the damped lamp halo), and all CTA/pricing/stat-grid structures.