# Design Language for yami.bar ## Aesthetics and Tone yami.bar is a retro neon-electric lounge rendered as a digital after-hours establishment — the kind of place where the jukebox glows hotter than the drinks. The site reads like a 1983 Tokyo basement bar that taught itself web design: chrome-edged signage, hand-cut acetate masks, and electric pink lettering pulsing against asphalt black. "Yami" (闇 — darkness) is treated not as horror but as ambience: low-lit, professional, confident. The voice is a deadpan host who has seen every type of patron walk in and remembers exactly what they drink. The mood is composed and slightly nocturnal. Restraint comes from the typography and grid; excitement comes from electric color crashes against deep ink. There is no party-mode glitter, no bouncy mascots, no drop-shadow whimsy. Instead: confident sans-grotesk slabs angled across dark plates, hairline diagonals slicing the screen like neon tubes, and the occasional spring-physics overshoot when an element settles — as if a heavy bar stool just got dragged into place. Inspirations: the typographic poster work of Tadanori Yokoo, Shinjuku Golden-gai signage at 2am, early arcade attract screens (Out Run, Hang-On), 1970s Japanese jazz LP sleeves on the Three Blind Mice label, and the stark angled compositions of Constructivist film posters. Reject anything cute, anything cartoon, anything skeuomorphic-glass. This is a serious bar in a serious city. ## Layout Motifs and Structure The page is organized on a strict Z-pattern reading flow — but the Z is literal, not implied. A 1px neon-cyan diagonal stroke is drawn across each landmark section, anchoring eye-travel from top-left, sweeping to top-right, cutting back across to bottom-left, and resolving at bottom-right. Content blocks are placed at the four Z-anchors: - Top-left: oversized wordmark plate, tilted -3deg, set in heavy sans-grotesk caps - Top-right: an angular signage block with the bar's hours and current "set list" (theme of the night) - Mid-diagonal: a horizontal track of geometric-abstract glyphs (pure shape compositions, no illustration) drifting slowly along the diagonal axis - Bottom-left: a long-form column — house manifesto, drink philosophy, sound policy - Bottom-right: a closing call (reservation, contact, address) shaped like a paper coaster with sharp clipped corners The grid is a 12-column structural grid, but content is permitted to break out diagonally at -7deg and +7deg shears at section transitions, creating a sawtooth rhythm down the page. Section dividers are sharp angular cuts (`clip-path: polygon`) — never soft curves, never soft fades. Negative space is generous; the bar is half-empty and that is the point. Viewport behavior: on desktop the Z is full-width and unmistakable. On tablet and below, the Z compresses into a vertical chevron — anchors stack but the diagonal stroke remains, now traversing each break as a connecting tick mark. ## Typography and Palette **Typography (Google Fonts only):** - Display + headlines: **Space Grotesk** (700, 500) — geometric sans-grotesk with just enough idiosyncrasy in the lowercase a/g to feel hand-cut. Tracked tight (-0.02em) on caps, set massive at the wordmark (clamp(64px, 12vw, 196px)). - Body + UI: **DM Sans** (400, 500) — neutral grotesque companion, set 17px/1.55, max-measure 62ch. - Numerals + small caps signage: **Space Mono** (400) — used only for hours, prices, set times, and the "track listing" panel; brings a faint arcade-monospace flavor without going full terminal. - No serif. No script. No display-display. The grotesk family is the entire voice. **Palette (asphalt + electric):** - `#08090C` Asphalt Ink — primary background, deeper than black with a 2-point cool bias - `#11131A` Stage Slate — section plates and card surfaces, one step up from background - `#FF2E88` Electric Magenta — primary neon, used for the wordmark stroke, key headlines, and the diagonal Z - `#00E5FF` Cathode Cyan — secondary neon, used for accent rules, hour signage, and hover states - `#F2EFE6` Bone Light — body text and primary copy on dark plates (warm off-white, never pure) - `#7A8090` Concrete Gray — supporting text, captions, divider weight - `#FFD23F` Sodium Amber — sparing accent, used only on the "open now" indicator and reservation CTA edge Color rules: the two neons (magenta and cyan) never share an element — they argue across the diagonal. Amber appears at most twice per viewport. All neon strokes are 1–2px hairlines, never broad fills; the brightness comes from contrast against asphalt, not from saturated blocks. ## Imagery and Motifs - **Geometric-abstract glyphs**: a small library of pure shape compositions — bisected circles, half-discs over bars, nested triangles, parallel-line stacks — rendered in flat single-color SVG. No human figures, no bottles, no glassware. These glyphs drift along the mid-page diagonal, scaling and re-spacing as the section enters viewport. - **Sharp-angle motifs**: every container that carries content has at least one corner clipped at a 15deg or 30deg bevel. Buttons are parallelograms, not rectangles. Section dividers are angled splits, not horizontal rules. The wordmark itself is enclosed in a sheared frame. - **Hairline neon strokes**: the 1px Z-diagonal, hour-block underlines, and the framing lines around the manifesto column. Strokes never bloom; they sit crisply against asphalt. - **Halftone gradient blocks**: small areas (behind the wordmark, behind the closing coaster) carry a coarse halftone of magenta or cyan dots over asphalt — a printed-poster texture, not a digital glow. Dot spacing 6px, dot diameter 1.5px. - **Set-list ticker**: a slow horizontal marquee of monospace text along one of the Z-arms, listing tonight's "menu" — drinks, sound, mood — in a continuous loop. - **No photography. No illustration of people, drinks, or interiors.** The bar is implied, not shown. ## Prompts for Implementation - Build the page as a single full-bleed dark canvas. The viewer should feel they walked in, not landed on a marketing page. No hero-with-CTA-stack, no pricing tier cards, no statistic grid, no logo wall. - Implement the Z-pattern as a real SVG diagonal path that animates in via path-draw on initial load (a single 1.2s reveal, no looping). After draw-in, the line is static; do not pulse it. - All settling motion uses **spring physics** (not easing curves). When a section enters viewport, its content block overshoots its target by ~8% then settles in 320ms with a damped oscillation. Keep stiffness moderate; this is a bar stool dragged across concrete, not a bouncy ball. Use a single shared spring config across the site for consistency. - The mid-page geometric-abstract glyphs drift along the diagonal at parallax depth, but slowly (0.15 of scroll speed). They never spin, never pulse — they translate only. - Treat each section as a "vignette" — a self-contained nocturnal scene with breathing room above and below. Long-form copy belongs in the manifesto column; everything else is tightened to single sentences or signage fragments. - Cursor behavior: on the wordmark, the cursor briefly drags a 1px magenta hairline that decays out over 600ms — like wiping a fingertip across condensation on a chrome counter. Subtle, single-line, no particles. - Copy register is professional and dry. No exclamation marks. No "let's", no "we believe". Sample sentence: "Open from 19:00. Last orders at 02:30. The sound is whatever the room asks for." - Accessibility: maintain AAA contrast for body copy (Bone Light on Asphalt Ink passes). Neons are reserved for ornament and large display type only. All animation respects `prefers-reduced-motion` — Z-stroke appears instantly, springs collapse to fade-in, marquee freezes. - Performance: ship as static HTML/CSS with a single small JS file for the SVG path-draw, the spring observer, and the marquee. No frameworks, no heavy libraries. Total weight under 80KB excluding fonts. ## Uniqueness Notes - **Literal Z-pattern with drawn diagonal stroke**: most z-pattern designs imply the eye flow but never render it; this one makes the diagonal a 1px neon line that physically stitches the four anchors together. Distinct from grid-cards, masonry, asymmetric-split, and centered-stack approaches used elsewhere in the corpus. - **Two-neon antagonism on asphalt**: Electric Magenta and Cathode Cyan are never co-located — they live on opposite Z-anchors and confront each other across the diagonal. Avoids the neon-soup look common to retro-futuristic and vaporwave palettes; closer to printed Constructivist poster than to glowy synthwave. - **Geometric-abstract glyph library, no photography or illustration**: the bar is evoked through pure shape composition, not imagery. Sits in the underused 1% imagery slot and contrasts hard against the corpus-dominant 82% photography baseline. - **Spring-physics-as-furniture**: spring motion (8% of corpus) is treated as the weight of bar furniture being placed — a single moderately damped spring shared across all settle animations. No elastic snaps, no overshoot competition between elements. - **Sans-grotesk-only voice**: typography (1% of corpus) is a single grotesque family at three weights, no serif rescue, no script flourish. The visual interest comes from scale, tracking, and shear, not from typeface variety. - **Chosen seed**: aesthetic: retro, layout: z-pattern, typography: sans-grotesk, palette: neon-electric, patterns: spring, imagery: geometric-abstract, motifs: sharp-angles, tone: professional. - **Avoided patterns from frequency analysis**: playful (71%), photography (82%), scroll-triggered (33%), parallax (28%), dark-mode-as-default-cyberpunk, glassmorphism cards, hand-drawn illustration, and CTA-stacked hero layouts. Retro at 7% and spring at 8% are intentionally pulled from the underused band; sans-grotesk and geometric-abstract from the 1% rare-air band.