# Design Language for reiwa.bar ## Aesthetics and Tone reiwa.bar is **an eight-seat counter bar on the third floor of a narrow Yotsuya building, photographed the morning after the era changed names** — a wabi-sabi imperfect-ceramic landing rendered as the quiet hour between the last customer leaving and the first light coming up the stairwell. The Reiwa era (令和, "beautiful harmony," began 2019) gave its name to this bar the way a regular gives their name to a bottle-keep: half a promise, half a joke. The site is not a cocktail menu and not a reservation funnel. It is the **inventory of a small room** — the chips in the lip of a yunomi cup, the ring-stains layered on a 60-year-old keyaki counter, the single Edison bulb hung too low, the bottle-keep tags handwritten in fude pen and curling at the corners, the cassette deck nobody has the heart to replace. The mood is **mysterious-moody crossed with zen-contemplative** — low, warm, unhurried, slightly melancholic, the way a good bar feels when you are the only one in it. Think Wong Kar-wai's *In the Mood for Love* lit by a 40-watt bulb; think Bar Lupin in Ginza after closing; think the *kintsugi* philosophy that a thing is more beautiful for having been broken and mended in gold. Nothing here is glossy. Nothing here is symmetrical. Surfaces are matte, grainy, hand-thrown. The page should feel like it has a faint smell — cedar, whisky, cold ash, a damp dishtowel — even though a website cannot smell. This is **deliberately the opposite of nightlife marketing**: no neon, no "book now," no cocktail glamour shots, no DJ lineup, no Instagram grid. The era's name is a quiet anchor, not a hashtag. The bar does not want to be found by everyone. It wants to be found by you, at 1 AM, on a phone, slightly lost. ## Layout Motifs and Structure The site is a **single vertical immersive-scroll descent down a tight stairwell into a small room** — but the structure is governed by the principle of **ma (間), negative space as a material**, and by an **off-center asymmetric axis** that never lets anything sit in the middle. Roughly seven "stations," each ~100vh, each holding very little: 1. **The Stairwell (hero).** Near-black. A single warm pool of light on the lower-right third. The wordmark "令和" set enormous and bottom-aligned, half-cropped by the fold, with "reiwa.bar" small beside it in mono. A faint hand-drawn arrow of light pointing down. The negative space is 80% of the frame — that emptiness *is* the design. 2. **The Counter.** A horizontal band of keyaki wood-grain (SVG, hand-drawn rings and knots), the counter's edge running at a **2.5-degree tilt** because the building has settled. Text sits on the wood like a coaster, never centered — always nudged left or right of the rings. 3. **The Bottle-Keep Wall.** A loose, **broken-grid** masonry of bottle tags — paper rectangles at slightly wrong angles, slightly wrong sizes, each with a handwritten name and a date. They are not aligned. They are pinned. Hovering one makes it sway on its pin (gentle pendulum spring). 4. **The One Bulb.** A near-empty frame, mostly black, with one Edison-bulb filament glowing dead-center-but-slightly-high. Scroll dims and warms it. This is the only thing in the whole site that is centered, and it is centered *wrong*, a few percent off, on purpose. 5. **The Cup (kintsugi).** A single hand-thrown yunomi, chipped, with a gold-mended crack drawn as an animated SVG path. The longest-dwell station. Copy about the bar's small philosophy, set ragged-right, with generous leading. 6. **The Cassette.** A still-life of an old deck and a hand-labeled tape. A faint, optional, off-by-default loop of tape-hiss. The "playlist" is just six song titles in fude-pen handwriting, no links, no Spotify embed. 7. **The Door (footer).** The light goes out — the frame fades to true black except a thin horizontal seam of warm light under a door. Address, hours (handwritten: "だいたい 19:00〜 / 'around 7-ish'"), a single phone number. No form. No newsletter. No social icons. The seam of light is the only CTA: it implies you could open the door. Global rules: max content width is narrow (~720px) and **never horizontally centered** — it floats on an asymmetric column that shifts station to station. Vast vertical breathing room (`clamp(20vh, 30vh, 40vh)` of empty space framing each station). Section seams are never hard cuts — they cross-fade through black. A faint paper/clay grain overlay (SVG `feTurbulence`, 4–6% opacity, `mix-blend-mode: soft-light`) lies over everything. ## Typography and Palette **Fonts — Google Fonts only, three voices, never blended:** - **Display & the era-name "令和" / large Japanese:** ***Shippori Mincho*** (weights 500, 700) — a warm, slightly old-fashioned mincho with brush-derived terminals; set huge (`clamp(72px, 18vw, 280px)`), tight leading (0.88), often half-cropped by the viewport edge. This carries all the weight and gravity. - **Body, captions, hours, "about" copy:** ***Zen Kaku Gothic New*** (weights 300, 400, 500) — a quiet humanist Japanese sans that pairs cleanly with Latin; set generously (16–19px, line-height 1.9, ragged-right, never justified). For longer English passages, ***Zen Maru Gothic*** is the soft fallback sibling. - **Handwriting — bottle tags, playlist, "around 7-ish" hours:** ***Yuji Syuku*** (weight 400) — a brushy, irregular hand that reads like fude pen; used small, rotated a degree or two, slightly inconsistent in size from instance to instance. - **Mono accent — "reiwa.bar", coordinates, the tiny technical chrome:** ***DM Mono*** (weights 300, 400) — used sparingly, lowercase, letter-spaced `0.04em`, never for more than a line. **Palette — muted, warm, low-key, built for darkness:** - `#0E0B09` — *sumi black*: the stairwell, the void, the page ground. Not pure #000 — a black with a trace of soot-brown. - `#1A1512` — *cold ash*: secondary panels, the door slab, raised surfaces. - `#3A2E22` — *aged keyaki*: the counter wood, deep wood-grain shadow. - `#7A5C3C` — *whisky*: mid wood-grain, warm dividers, the resting tone of the bulb. - `#C9A24B` — *kintsugi gold*: the mended crack, the seam of light under the door, hover accents, the wordmark's faint inner glow. Used like real gold leaf — precious, almost never. - `#E8DCC8` — *unbleached washi*: primary text on dark, bottle-tag paper. - `#A89576` — *muted clay*: secondary text, captions, the 60%-opacity layer. - `#D96B4A` — *bulb-warm ember* (accent, rare): the hottest core of the Edison filament when fully lit; the only saturated thing on the site, and it appears for maybe two stations only. Contrast philosophy: this is a **dark, dim site on purpose** — text is `#E8DCC8` on `#0E0B09`, never brighter, with the gold reserved for moments, not paragraphs. ## Imagery and Motifs **No photography. No stock. No 3D renders. Everything is hand-built SVG, CSS gradient, and grain — the room is drawn, not shot.** - **Wood-grain (keyaki counter):** a hand-built SVG of long warm grain lines, three or four concentric ring-stains from glasses set down over decades, two dark knots, a single cigarette scorch. Rendered at a 2.5° tilt. The grain lines have slightly irregular spacing — never a repeating pattern. - **The chipped yunomi & kintsugi crack:** a single hand-drawn ceramic cup in muted clay tones with a visible chip on the rim and a lightning-fork crack down one side, the crack drawn as an SVG `` stroked in `#C9A24B` that *draws itself* on scroll (`stroke-dasharray` reveal) — gold flowing into the break. - **Bottle-keep tags:** paper rectangles (`#E8DCC8` washi with a torn-edge SVG mask and a faint coffee-ring), each pierced by a tiny pin, each carrying a handwritten name (Yuji Syuku) and a date, hung at 0–4° random rotations. They sway on hover. - **The Edison bulb:** pure CSS/SVG — a radial gradient core (`#D96B4A` → `#C9A24B` → transparent) with a thin hand-drawn filament `` inside a faint glass-bulb outline. A soft `drop-shadow` pool of `#7A5C3C` light beneath it on the counter. - **The cassette:** a flat, slightly-worn line illustration of a deck and a tape with a hand-labeled spine; the reels turn very slowly only while the (off-by-default) hiss loop is on. - **Light pools, not gradients-as-decoration:** every "lit" area is a soft radial pool — warm center, deep falloff — placed *off-center*, mimicking a single hanging bulb. Darkness is the default state of every pixel. - **The grain & the seam:** the `feTurbulence` paper grain everywhere; and the recurring motif of *a thin horizontal line of warm light* — under the door, along the counter's edge, at the bottom of the hero — the visual rhyme that ties the descent together. - **Hand-drawn arrows of light:** instead of chevrons or "scroll" icons, faint brushy arrows in `#7A5C3C`, low opacity, pointing down the stairwell. ## Prompts for Implementation Build reiwa.bar as **one HTML file, one CSS file, one small JS module — a ~70-second descent into a tiny dark room.** No framework. No router. No CTA buttons, no pricing, no stat-grid, no testimonial row, no email capture, no social icons, no cocktail-menu cards. The entire page is the seven stations described above, stacked vertically, scrolled through. **Storytelling structure (vertical scroll, fade-through-black transitions, ma-driven pacing):** 1. Land in near-total darkness — one warm pool of light, bottom-right, "令和" huge and half-cropped at the bottom edge. Hold. Let the emptiness sit. A brushy arrow of light flickers in after 2s, pointing down. 2. Scroll: the counter rises into frame — keyaki wood-grain at 2.5° tilt, ring-stains, a knot. A line of copy lands on the wood, nudged left of the rings: something like *"a small room. eight seats. it has been here since before the era was renamed."* Set in Zen Kaku Gothic New, ragged-right. 3. The bottle-keep wall: tags fade in one by one (stagger, 80ms), each at its own wrong angle. Hover = the tag swings on its pin (pendulum spring, slight overshoot, settles). No two tags the same size. 4. Near-black again — the Edison bulb alone, slightly-too-high-center. As you scroll *through* this station the bulb warms from `#7A5C3C` resting → `#C9A24B` → a brief `#D96B4A` ember at the midpoint, then cools again. One line of mono text below: `reiwa.bar — open when the bulb is on`. 5. The yunomi: the chipped cup, large, off to the right. As it enters, the kintsugi crack draws itself in gold (`stroke-dasharray` over ~1.2s, eased). The bar's small philosophy in a short paragraph, ragged-right, big leading — about imperfection, repair, keeping a bottle, coming back. This is the longest dwell; let it breathe. 6. The cassette still-life. A tiny `[ play tape hiss ]` toggle in mono, **off by default, optional**; when on, reels turn slowly and a soft hiss loops. Six song titles in Yuji Syuku handwriting — no links, no embeds, just titles and the year next to each in mono. 7. The door: everything cross-fades to true `#0E0B09` except a thin horizontal seam of `#C9A24B` light under an implied door. Address, hours handwritten (`だいたい 19:00〜 — "around 7-ish"`, `不定休 — "closed whenever"`), one phone number in mono. The seam of light brightens very slightly on hover — the only interactive promise on the page. No form. **Motion & interaction:** - Default state of every element: dim, low-opacity, still. Things *warm* and *settle* rather than pop or bounce. No elastic, no confetti, no parallax-for-its-own-sake. The one "parallax": the warm light pools drift a few pixels slower than the content, so the room feels lit from a fixed source while you move through it. - Scroll-triggered: counter-tilt reveal, tag stagger, bulb warm/cool curve, kintsugi path-draw, door-seam fade. All eased gently (`cubic-bezier(.16,1,.3,1)`), 600–1200ms, nothing snappy. - Cursor: in lit areas only, a barely-visible warm `#7A5C3C` glow follows the cursor at low opacity — like the bulb noticing you. In dark areas, nothing. - Hover: bottle tags sway on their pins; the door-seam brightens; song titles underline-draw in gold. That's it. - Respect `prefers-reduced-motion`: no path-draw animation (gold crack just appears), no reel spin, no light drift — but the dim, asymmetric, grainy composition is intact and still tells the story. - Texture is non-negotiable: the `feTurbulence` paper-clay grain overlays the whole document at 4–6% `soft-light`; the page should never look "clean." **Tone of copy:** sparse, lowercase-leaning, a little wistful, never salesy. Mix of Japanese and English short lines. Never explain too much. The bar does not pitch itself. ## Uniqueness Notes This design claims room the corpus mostly leaves empty: 1. **A bar/nightlife site with zero nightlife tropes.** No neon, no `dark-neon` palette, no glassmorphism, no cocktail photography, no "book now," no DJ grid, no Instagram embed. It is `wabi-sabi` (8% of corpus) + `zen-contemplative` (12%) + `mysterious-moody` (10%) applied to a *bar* — a combination essentially absent from 504 designs. 2. **Darkness and dimness as the default material, not an accent.** Where the corpus is 98% `warm` *bright* palettes and 95% gradients-as-decoration, here every pixel starts near-black `#0E0B09` and gold (`#C9A24B`) is rationed like real gold leaf — used for the kintsugi crack and the door-seam, almost nothing else. 3. **`ma` negative space + permanent asymmetry as the layout law.** `ma-negative-space` is 16% and rarely the *governing* principle; nothing on this site is ever horizontally centered (the one centered element, the bulb, is centered *wrong* on purpose). 80%+ of most stations is intentional emptiness. 4. **Kintsugi (gold-mended ceramic) as the central animated motif** — a chipped yunomi whose crack draws itself in gold via `stroke-dasharray`. `path-draw-svg` exists at 44% but pointed at this specific philosophy-bearing object is unique. 5. **The "seam of warm light under a door" as the only CTA**, and "hours" written as `だいたい 19:00〜 / around 7-ish` — an anti-conversion footer that refuses forms, newsletters, and social icons entirely. 6. **All-SVG hand-drawn room** (keyaki counter at 2.5° settle-tilt, swaying bottle-keep pins, Edison bulb that warms on scroll, cassette deck) — no photography (the corpus is 98% photography), no 3D, just drawn surfaces and grain. **Avoided overused patterns (per frequency analysis):** glassmorphism (82%), hand-drawn-as-cute-aesthetic (95% — this is hand-drawn but somber, not whimsical), card-grid (91%), mono-as-primary-typeface (94% — mono is a rare accent here, Japanese mincho/gothic carry the page), cursor-follow as a flashy effect (89% — ours is a near-invisible warm glow, bulb-noticing-you), parallax (90% — used minimally, only for fixed-light-source feel), photography (98% — none), warm *bright* gradient palettes (95%/98% — ours is warm but dim and matte), bento-box, dashboard, stat-grids, CTA-heavy layouts. **Chosen seed / style:** `wabi-sabi imperfect ceramic` — applied to an eight-seat Reiwa-era Tokyo counter bar, photographed the morning after the era changed names. (aesthetic: wabi-sabi · layout: ma-negative-space + asymmetric + immersive-scroll · typography: serif-revival [mincho] + humanist + handwritten · palette: muted / warm-earthy / sumi-black-dim · patterns: path-draw-svg + fade-reveal + spring + scroll-triggered · imagery: line-illustration + grain-overlay + generative-art [feTurbulence] · motifs: candle-atmospheric [bulb] + crystalline→ceramic + flowing-curves [wood-grain] · tone: mysterious-moody + zen-contemplative)