# Design Language for miko.bar ## Aesthetics and Tone miko.bar is the digital antechamber of an imagined invitation-only sake bar — minimalist to the point of near-emptiness, hero-dominant in the way a wine list at Eleven Madison Park is hero-dominant: one item, one phrase, one breath. The aesthetic strips away all decoration but one — a single Art Deco display piece that anchors the page like an engraved brass nameplate on a frosted glass door. The tone is **bold-confident** in the manner of true minimalism: confident enough not to fill space, sure enough to leave 78% of every viewport empty and trust the visitor to lean in. Inspiration draws from the silent first pages of *Apartamento* magazine, the chilled translucency of Olafur Eliasson's *Your Glacial Perspectives*, and the kerned restraint of Massimo Vignelli's later work — but warmed by the gold-leaf optimism of Cassandre's 1927 *L'Atlantique* poster. Visiting feels like stepping inside on a snowy night and standing very still while your eyes adjust. ## Layout Motifs and Structure The architecture is unapologetically **hero-dominant**: a single 100vh / 100vw opening canvas holds the entire identity statement, and every subsequent panel is also a full-viewport hero, scrolled-through rather than stacked. There are exactly six panels: *Threshold*, *Pour*, *Roster*, *Hours*, *Address*, *Reservation Cipher*. Each panel is composed on a strict 12-column grid with content occupying only columns 5–9 in most cases — never the full width — leaving wide cold gutters of frosted air on either side. A thin 0.5px hairline runs across the top of every panel, broken by a single 12mm gap where a panel-number numeral is set (I, II, III, IV, V, VI). The Art Deco display word "miko.bar" anchors panel I dead-center; in subsequent panels it migrates to the top-left corner at 30% scale, becoming a quiet header. There is no scroll progress bar, no breadcrumb, no menu — only the page itself, paced by user gesture. **Tilt-3d** transitions between panels rotate the incoming hero on its X-axis from -8° to 0° as it enters, suggesting a heavy glass door easing open. ## Typography and Palette **Typography** is led by Limelight (the **art-deco-display** brief) used at exactly two sizes — 96px tracked to +120 for the panel I lockup, and 22px tracked to +260 for panel numerals and the bar name in subsequent headers. All Limelight is set in `#0F1418`, never any accent color, to keep the display piece monolithic. Body and microcopy use Inter Variable at 14px/1.7, weight 320, optical-size axis set to 14 — extremely lightweight, almost a whisper. Reservation cipher characters use IBM Plex Mono at 11px to feel like a stamped admission code rather than a typeface. **Palette** is **translucent-frost**, treated as a layered glass system: - `#F4F6F7` — primary frost ground (the page itself) - `#E8ECEE` — secondary frost (panel separators, sublayer) - `#0F1418` — anchor ink (typography, hairlines) - `#C8B273` — patinaed brass (single accent — used only for hairline panel numerals and the Limelight underline) - `#9FB6BD` — winter glass blue (hover state on links, soft glow) - `rgba(15,20,24,0.04)` — noise-texture overlay applied to every panel - `rgba(232,236,238,0.6)` — translucent overlay for tilt-3d hero pages The brass accent appears on no more than three elements per panel; the page must feel restrained. ## Imagery and Motifs Imagery is built almost entirely from **noise-texture** — a single 240×240px tiled SVG noise (turbulence baseFrequency=0.82, displacementScale=2) overlaid at 4% opacity on the frost ground, giving every surface the cold tooth of museum glass. There are no photographs. The only true "imagery" elements are six **abstract-tech** vector compositions, one per panel: thin precision linework suggesting (I) a ring of distillation glassware in plan view, (II) a 5-arc sake-pour trajectory, (III) a barcode-like roster of unnamed bottles, (IV) a 24-hour radial clock, (V) a single-line topographic spiral standing in for the address, and (VI) a 7-segment cipher field. All vector linework is 0.5px hairline in `#0F1418`, no fills. The Art Deco display piece is the only ornamental element — a thin scrollwork underline beneath the Limelight wordmark, drawn from Cassandre's vocabulary but reduced to three concentric arcs. ## Prompts for Implementation Build a hero-dominant, scroll-paced minimalist experience. Each panel is `min-height: 100vh; display: grid;` with content tightly clamped. The signature interaction is the **tilt-3d** transition: as a panel enters the viewport, apply `transform: perspective(1800px) rotateX(var(--tilt)) translateZ(var(--z))` where `--tilt` interpolates from -8deg to 0deg and `--z` from -120px to 0px, driven by IntersectionObserver entry ratio. The Limelight wordmark on panel I scales from 1.0 down to 0.30 and migrates from center to top-left as the user scrolls past 50vh of panel II, using a custom scroll-linked CSS animation. Hairlines (0.5px) must be drawn with `box-shadow: inset 0 0 0 0.5px #0F1418` to render true sub-pixel on retina. Noise-texture is a single SVG filter referenced on the body. Cursor is replaced by a 1px brass crosshair (12px wide) that snaps to the nearest panel anchor with a 180ms ease, a quiet but distinct tactile detail. Avoid CTA stacks, pricing menus, stat grids, social proof rows, signup forms, and any blocky card patterns — this is a frosted glass door, not a product page. The footer is a single line of IBM Plex Mono at 11px reading "miko.bar — 御幸町, 2F — ring once." ## Uniqueness Notes - **Differentiator 1:** Every panel is a full 100vh hero — almost no design in the registry commits to hero-dominant beyond the first fold; this site is six heroes in a row. - **Differentiator 2:** Translucent-frost palette built on `#F4F6F7` / `#E8ECEE` with a single brass `#C8B273` accent — a register entirely absent from the registry's typical color directions. - **Differentiator 3:** Limelight used as the sole display face, paired with Inter at weight 320 — an Art Deco / hyper-minimal pairing that does not appear elsewhere. - **Differentiator 4:** Tilt-3d implemented as a "door easing open" rather than the typical card-tilt-on-hover novelty — narrative-driven, not decorative. - **Differentiator 5:** Cursor replaced with a brass crosshair that snaps to anchors, a calibrated instrument metaphor — not the standard dot-follower. - Planned seed: aesthetic=minimalist, layout=hero-dominant, typography=art-deco-display, palette=translucent-frost, patterns=tilt-3d, imagery=noise-texture, motifs=abstract-tech, tone=bold-confident. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.