# Design Language for miko.bar ## Aesthetics and Tone miko.bar is a **moonlit shrine that has been quietly converted into a cocktail bar after midnight** — an Art Deco lacquer box opened under a paper lantern, where a shrine maiden (a *miko*) has set down her *gohei* wand and picked up a bar spoon. The aesthetic is **lacquer-and-moonlight Deco**: the geometric sunburst rigor of 1920s Japonisme — the kind of stepped fan motifs that appeared on Tokyo department-store elevators and ocean-liner smoking rooms — but cooled down to a temple's blue hour. Black urushi lacquer, hammered gold leaf, vermilion *torii* paint, and a wash of pale moon-jade. Nothing here is "minimal Japanese." It is **ornate, ceremonial, and faintly haunted** — closer to a Klimt frieze redrawn by a Nikko woodcarver than to a Muji catalog. The tone is **elegant-sophisticated with a thread of mysterious-moody underneath**. The copy speaks the way a head bartender speaks at 1 a.m. when the room has thinned out: low, precise, a little ritualistic. Drinks are not "menu items," they are **offerings** — each one named, numbered, and accompanied by a single line of liturgy ("for the hour the lanterns are lit," "served to those who arrived without a reservation and were forgiven"). The bar has no opening hours posted; it has a *first pour* and a *last bell*. The whole site should feel like you have wandered up stone steps in the dark, slid open a wooden door, and found warmth, gold, and someone expecting you. This is **not** a flat-design landing page, not a glassmorphic SaaS dashboard, not a hand-drawn cottagecore blog. It is a single ornamented vertical scroll that behaves like walking deeper into a shrine: *torii* gate, washing basin, lantern path, the offering hall, the inner sanctum. ## Layout Motifs and Structure The governing layout is **diagonal-sections** (4% in the frequency analysis — deliberately underused) crossed with a strict **Art Deco stepped grid**. Sections do not stack as flat horizontal slabs; they meet along **45° lacquer seams**, as if the page were assembled from folding-screen panels hinged at the corner. Each diagonal seam is drawn as a thin double rule — one hairline gold (#C9A24B), one hairline vermilion (#B7332B) — the way lacquerware is finished with a fine line of *makie* powder along an edge. **Spine + fan structure:** - A single vertical **lantern cord** runs down the exact center of the page from top to bottom — a 2px line of dull gold with small woven knots at each section boundary, like the cord of a hanging *chōchin* lantern. All section numerals (一 二 三 四 五) hang off this cord in circular lacquer medallions. - Content within each section is organized as a **stepped fan**: blocks are sized in a 1 : 1.6 : 2.6 ratio (the Deco "ziggurat" progression) and offset rightward or leftward in three steps, so the eye climbs the fan like temple stairs. Never a plain centered column; never an even card grid. - The drinks list is a **vertical scroll-board** — a tall black lacquer plank with gold-leaf entries, each entry indented one step further than the last so the whole list reads as a descending staircase rather than a table. No price grid, no "order" buttons, no stat tiles. - Negative space is treated as **lacquer black, not white**: the empty regions are the deep ground the gold sits on, generously sized, never busy. Roughly 55% of any viewport should be quiet black. **Section sequence (top to bottom):** 1. **一 — The Torii** — full-bleed dark hero; a colossal stepped-arch *torii* drawn in CSS borders frames the wordmark "miko.bar" rendered as a vertical lacquer plaque. 2. **二 — The Basin (temizuya)** — a short ablution interlude: one line of text about leaving the day at the door, set beside a slow ripple-ring animation (a ladle dipping water). 3. **三 — The Lantern Path** — the bar's story, told as five hanging lanterns down the cord, each lighting (fading up) as it enters view. 4. **四 — The Offerings** — the drinks scroll-board, the densest, most ornamented section. 5. **五 — The Inner Sanctum** — the closing panel: location written like a shrine address (district, slope, the building "behind the cedar"), first pour / last bell, and a single brass-bell glyph that rings (a soft chime + shimmer) on click. ## Typography and Palette **Fonts — Google Fonts only, three families:** - **Cormorant Garamond** — the ceremonial voice. Light 300 and Medium 500, with heavy use of the **Italic** for liturgical lines. Used for the wordmark (Medium 500, letter-spacing 0.22em, set vertically in the *torii* plaque), all section headings (Light 300, 40–64px), every drink name (Medium 500 Italic, 26px), and the one-line "liturgy" under each drink (Italic 300, 17px, opacity 0.72). Cormorant's high contrast and slightly nervous serifs read like brush-cut Deco lettering — sharp, tall, faintly Japonisme. - **Shippori Mincho** — the Japanese-text voice (a Mincho/Ming serif designed for screen, fully on Google Fonts). Used for the section numerals (一 二 三 四 五) in the lacquer medallions, for short Japanese phrases that appear as vertical *tategaki* marginalia along the right edge (玉響 / 灯ともし頃 / 仕舞鐘), and for the small "first pour 18:00 / last bell 02:00" line. Weight 500–600, occasionally vertical (writing-mode: vertical-rl). - **Jost** — the quiet utilitarian voice (a geometric sans modeled on Futura, the canonical Deco typeface, on Google Fonts). Used only for the smallest functional text: nav labels in the lantern cord, the address block in the Inner Sanctum, captions. Weight 300–400, letter-spacing 0.14em, uppercase for nav, sentence case for the address. It keeps the geometric Deco backbone honest without ever shouting. **Palette — lacquer, gold, vermilion, moon-jade, on a temple-night ground:** - `#0B0A0C` — **urushi black**: the dominant background, the lacquer ground everything floats on. - `#15131A` — **shadow plum**: a barely-warmer black for raised panels and the drinks plank. - `#C9A24B` — **hammered gold**: primary accent — rules, the lantern cord, the *torii* outline, drink numerals, the bell. - `#E7D8A8` — **moon gold (pale)**: heading text and the wordmark; gold gone soft and luminous, like leaf catching candlelight. - `#B7332B` — **torii vermilion**: the single saturated colour — the inner stripe of every diagonal seam, the lantern glow cores, hover states. Used sparingly, like a seal pressed in cinnabar ink. - `#7FA89B` — **moon jade**: the cool counter-tone — the ripple rings in the Basin, the faint glaze behind the Lantern Path, the chime shimmer. The blue-hour light coming through the shrine eaves. - `#8E8475` — **incense grey**: body copy on dark, captions, the *tategaki* marginalia at low opacity. - `#F4ECDD` — **rice-paper cream**: used only for the lantern-paper glows and the one near-white plane behind the Basin ripple — a single sheet of washi against all that black. Gradients are restrained: a soft radial of `#1A1620 → #0B0A0C` behind each section (lantern-light falloff), and a vertical `#C9A24B → #8A6E2F` on metallic strokes to fake hammered leaf. No purple-to-pink mesh, no warm sunset washes. ## Imagery and Motifs **Almost no photography.** miko.bar's visual texture is built from **CSS-drawn lacquer-Deco geometry plus SVG line art**, not stock images. There is at most **one** photographic element: a single, deeply dimmed, duotone close-up of condensation on a coupe glass, used as a faint texture behind the Offerings section at ~12% opacity, gold/black duotone — and even that is optional. Everything else is constructed. **Core motif vocabulary:** - **The stepped torii** — the signature shape. A *torii* gate drawn as nested CSS box-borders with the characteristic Deco "ziggurat" stepping at the lintel: three diminishing rectangles stacked on the crossbeam. It frames the hero, recurs at quarter-scale as the bullet glyph before each drink name, and appears once more, tiny, as the favicon-style mark in the footer. - **Sunburst / rising-fan rays** — thin gold rays fanning up from the bottom edge of the hero behind the *torii*, 9 rays at uneven Deco intervals, very low opacity (0.08–0.16). The Art Deco sunburst, re-read as dawn over a shrine. - **The lantern cord & knots** — the central spine; woven-knot SVGs at each junction (a simple over-under loop), with a hanging lacquer medallion bearing the kanji numeral. - **Hanging chōchin lanterns** — five oval lanterns down the Lantern Path, each a CSS shape with horizontal ribbing lines, a vermilion-cream radial glow inside, a gold cap and base. They light sequentially on scroll. - **The ladle & ripple** — concentric expanding rings (moon-jade, fading) animating in the Basin section, with a small SVG bamboo ladle (*hishaku*) tilted at the rim. - **Tategaki marginalia** — short vertical Japanese phrases set in Shippori Mincho along the right gutter, low opacity, like inscriptions carved into a stone lantern: 玉響 (tamayura — "a fleeting moment"), 灯ともし頃 (hi-tomoshi-goro — "lamp-lighting hour"), 仕舞鐘 (shimai-gane — "the closing bell"). - **Makie powder edges** — every panel edge and diagonal seam gets the double hairline (gold + vermilion) treatment; a few panels also get a sparse scatter of 1px gold dots near a corner, like *makie* gold flakes settled in lacquer. - **The brass bell** — a single SVG *suzu* (shrine bell) in the Inner Sanctum; clicking it triggers a shimmer ring and (optionally) a short chime. Decorative borders throughout use the **Greek-key-by-way-of-Japan** fret pattern — a squared key meander in 1px gold along the top of the Offerings plank and the bottom of the footer, the one place a repeated ornament is allowed to run. ## Prompts for Implementation Build miko.bar as **a single static HTML page** — one `index.html`, one `style.css`, one small JS module (`shrine.js`, target ≤ 6KB minified) for scroll-triggered lantern lighting, the Basin ripple loop, and the bell chime. The only external dependency is the Google Fonts stylesheet (Cormorant Garamond, Shippori Mincho, Jost). Target total page weight under ~90KB excluding fonts. No frameworks, no build step, no analytics, no cookie banner. **Storytelling is the structure.** The scroll *is* the walk up to the shrine: hush at the *torii*, a pause at the basin, the path lighting one lantern at a time, the offering hall, the inner room. Each section should feel entered, not "viewed." Use generous full-height (≥ 100vh for hero, ≥ 80vh for others) sections so the visitor commits to one room at a time. **Animation & interaction (purposeful, restrained):** - **scroll-triggered** lantern lighting along the path — each lantern's inner glow fades from 0 → full and gains a soft `box-shadow` bloom as it crosses 60% of viewport height; never all at once. - **path-draw-svg** for the *torii* outline in the hero: on load, the gold stroke draws itself from the base of each pillar up and across the stepped lintel (~1.4s, ease-out), like the gate being inked into being. - **ripple** rings in the Basin: a perpetual gentle loop (one ring every ~2.6s), moon-jade, easing outward and fading — the ladle "drips." - **fade-reveal** for headings and drink entries: each rises 16px and fades in on enter, staggered down the stepped fan (≈90ms between siblings). Subtle. - **underline-draw** on nav labels in the lantern cord and on hover over drink names — a 1px vermilion rule drawing left-to-right. - The **bell** in the Inner Sanctum: on click, a single expanding gold-then-jade shimmer ring + a tiny `transform: rotate` wobble of the bell SVG; if you wire audio, a soft single chime, muted by default, never autoplay. - Respect `prefers-reduced-motion`: lanterns appear already-lit, the *torii* renders fully drawn, ripples freeze to a single static ring, the bell just flashes once. **Hard constraints (these are the design):** - **No CTA stack.** No "Book a Table" button, no "Reserve Now," no email-capture field, no phone number rendered as a button. The Inner Sanctum gives the shrine-style address and the words *first pour 18:00 — last bell 02:00*; that is the entire call to action. If a link is truly required, it is a single thin-underlined line of Jost text, nothing more. - **No pricing block, no menu table, no stat grid, no testimonials carousel, no logo wall.** Drinks are an indented lacquer scroll-board with name + one liturgical line each; no numbers in yen, no "₂ for ₁." - **No glassmorphism, no neon glow, no gradient mesh, no hand-drawn doodles.** Surfaces are flat lacquer with crisp metallic line ornament; depth comes from soft warm shadow and layering, not blur. - **Black is the page.** Do not invert to a light theme. The cream plane appears exactly once (behind the Basin ripple). - **Vertical text where it counts:** the wordmark plaque and the right-gutter marginalia use `writing-mode: vertical-rl`; everything else stays horizontal for legibility. - Diagonal seams between sections are non-negotiable — flat horizontal joins between sections are forbidden; each join is a 45° double-hairline lacquer seam. ## Uniqueness Notes Differentiators, each a deliberate departure from patterns in the frequency analysis: 1. **Art Deco × Japanese shrine, not "Japanese minimalism."** Almost every Japan-flavoured design in the corpus reaches for zen / wabi-sabi / muji emptiness. miko.bar instead fuses 1920s **Japonisme Art Deco** (stepped sunbursts, lacquer-and-gold ornament, geometric fret borders) with shrine iconography. Art-deco sits at 6% in the aesthetic frequency; this design commits to it fully and weds it to a setting nobody else uses — a *miko*-tended bar. 2. **diagonal-sections as the spine.** Diagonal-sections is 4% in the layout analysis and, where it appears, is usually a single decorative slash. Here, **every section boundary** is a 45° lacquer seam with a gold+vermilion double hairline, turning the page into a hinged folding screen. Combined with the central lantern-cord spine and the 1:1.6:2.6 stepped-fan block ratios, the composition is unlike the dominant full-bleed / card-grid / centered trio (89% / 88% / 86%). 3. **Liturgical, ritual copy in place of marketing copy.** No CTAs, no pricing, no stats, no testimonials — the bar has a "first pour" and a "last bell" instead of opening hours, drinks are "offerings" with a one-line liturgy, the address reads like a shrine inscription. The interaction climax is *ringing a bell*, not clicking "Reserve." 4. **CSS-and-SVG construction, near-zero photography.** Photography sits at 98% in the imagery analysis; miko.bar uses at most one heavily-dimmed gold/black duotone texture and builds everything else — *torii*, lanterns, ladle, ripples, bell, fret borders, *makie* dots — from CSS borders and inline SVG line art. 5. **Vertical *tategaki* marginalia + kanji section numerals** (一–五) hung on a literal lantern cord — a structural use of vertical Japanese typography (Shippori Mincho) that none of the reference designs employ. Chosen seed / style: **art-deco ornate luxury** — aesthetic: art-deco, layout: diagonal-sections, typography: elegant-serif, palette: gold-black-luxury, patterns: scroll-triggered, imagery: line-illustration, motifs: cultural, tone: elegant-sophisticated. Avoided patterns from the frequency analysis: hand-drawn (96%), glassmorphism (74%), photography-led imagery (98%), warm/gradient palettes (98% / 96%), full-bleed + card-grid + centered layout trio (89% / 88% / 86%), cursor-follow / spring / magnetic motion defaults (89% / 86% / 80%), mono typography (94%), pastoral-romantic / warm-inviting tone (34% / 26%).