# Design Language for yami.bar ## Aesthetics and Tone yami.bar is **a bar that exists only in the dark** — *yami* (闇) is the Japanese word for darkness, the unlit, the part of a room the eye cannot resolve. This site treats darkness not as a color choice ("dark mode") but as the **subject and the substance** of the design. The premise: you have walked down a stairwell with no handrail, pushed through a curtain, and found yourself in a room where the only light comes from a single low candle, the faint blue glow of ice in a glass, and the embers of someone's cigarette across the room. Your eyes have not adjusted yet. Most of the page is genuinely, deliberately black — not #121212 "soft black," but near-true #050506 — and the content **emerges from it slowly**, the way a stranger's face resolves when you stop looking directly at them. The tone is **surreal and mysterious-moody**: this is a *dreamscape* of a bar, not a real one. Bottles float without a shelf. A staircase descends into a pool of ink. The cocktail menu is written in pale smoke that drifts and re-forms. The reservation "button" is a doorbell you can't quite see but can hear ring. Nothing on this page is sold; nothing is pitched. The site behaves like a half-remembered place — generous with atmosphere, miserly with information, the way a good bar guards its address. Surreal sits at 8% in the aesthetic frequency analysis; dark-mode at 10%. yami.bar refuses the dark-mode crypto-dashboard cliché entirely — there are no neon accents, no glowing cyan grids, no electric purple. The darkness here is **warm and analog**: candle-amber, the green-blue of melting ice, the dull gold of brass fittings, the dusty rose of a low-watt bulb behind frosted glass. It is the dark of a *room*, not the dark of a *screen*. ## Layout Motifs and Structure The structure is **immersive-scroll** built as a **vertical descent** — you are walking down. The page is a single continuous fall through a building: street level (almost no light, just the domain name barely legible on what might be a door) → stairwell → the bar proper → the back room → and finally a dead-end that is just darkness with one line of text. Scrolling down is descending; the page literally darkens-then-warms as you go deeper, the way a basement bar gets *less* dark once you're inside it and your eyes adjust. **Spatial system:** - **The Eye-Adjustment Gradient.** The single most important layout property: a fixed full-viewport overlay that is *more opaque near the top of the page and less opaque deep in it*. Near the hero it sits at ~92% black; by the back-room section it has lifted to ~35%. Combined with section backgrounds that go from #050506 → #0C0A09 → #14100C → #1A140E, the cumulative effect is that **content is nearly invisible at first and gradually becomes legible**. This is intentional and is the design — if a section feels "too dark to read," that section is near the entrance, and reading it requires either scrolling deeper or hovering (hover acts like leaning in toward a candle). - **Pools of light, not a grid.** There is no card-grid (93% — avoided), no bento-box (avoided). Content sits in **soft elliptical pools of light** — a radial-gradient glow, roughly the size and shape of what a single candle or low bulb would actually illuminate on a tabletop. Each pool holds one thing: one cocktail, one sentence, one detail. The pools are scattered down the page asymmetrically (left, then far right, then center, then left again) the way lit objects are scattered around a dim room. Between the pools: nothing. Pure black. You scroll through darkness to find the next lit thing. - **The single-column-of-darkness backbone.** Threading the whole descent is one continuous vertical element — a thin, faintly luminous line down the center-left, like a handrail you can barely see, or the seam of light under a series of doors. It connects the pools. Scroll progress is shown as a small warm bead traveling down this line. - **No fold, no nav bar, no footer.** There is no sticky header. There is no menu. Navigation, if you want it, is a single faint "↓ deeper" prompt. The "footer" is just the bottom of the descent: black, with one line of text and nothing else — you've hit the bottom of the building. - **Reduced-motion / no-JS fallback:** the eye-adjustment overlay settles to a fixed mid-opacity (~55%) so every section is legible at once; pools become simple soft-edged dark boxes; the luminous handrail becomes a static thin line. ## Typography and Palette **Fonts (Google Fonts only — three families):** - **Cormorant Garamond** — the bar's voice. Light 300 and Medium 500, with Italic. Used for the wordmark "*yami*" set very large (clamp ~88px–168px) in Light Italic, lowercase, letter-spacing slightly loose; for every section heading (Medium, ~32–44px); and for the cocktail names (Italic 300, ~22px). Cormorant Garamond is chosen because it is high-contrast, almost fragile at light weights — its hairline strokes *physically disappear* against near-black until there's enough glow behind them, which makes it the perfect typeface for content that is meant to emerge slowly from the dark. The thick stems read first; the thin connecting strokes resolve last, exactly mimicking how the eye recovers detail in low light. - **EB Garamond** — the body. Regular 400 and Italic 400. All running text, all descriptions, the small print, the address-that-isn't-quite-given. ~16–18px, generous line-height (1.85), max line length ~58 characters, color a dim warm grey (#9A8E80) so it never quite reaches white — text in this bar is *spoken at low volume*. Italic is used for asides and for the names of spirits. - **Major Mono Display** — the ledger hand. Used sparingly and small (~11–13px, letter-spacing wide, uppercase): time stamps ("OPENS 21:00 — CLOSES WHEN IT CLOSES"), the pour list quantities, section indices ("i / vii"), and the one technical-feeling element on the page — a tiny "now serving" line that updates. Major Mono Display is skeletal and outline-like; it reads like something scratched faintly into a brass plate, and its airiness keeps it from feeling like a "tech" site despite being monospace. **Palette — the dark of a room, not a screen:** | Token | Hex | Role | |---|---|---| | Yami black | `#050506` | The base. The unlit. Most of the page. | | Cellar | `#0C0A09` | First section background — stairwell. | | Smoke-warm | `#14100C` | Mid-descent background — the bar floor. | | Back-room | `#1A140E` | Deepest, *warmest* dark — where eyes have adjusted. | | Candle amber | `#E0A24C` | The primary light source. Radial glows, the wordmark when illuminated, the scroll bead. | | Brass dim | `#8C6A3A` | Fittings, rules, the faint handrail line, hover underlines. | | Ice green | `#7FB8B0` | The only cool color — the glow of melting ice, used for one or two accents (the "now serving" line, link hover). Desaturated, never neon. | | Low-bulb rose | `#C98B7E` | Dusty rose from a frosted bulb — used in one pool of light near the back room. | | Spoken grey | `#9A8E80` | Body text. Warm, dim, never white. | | Ash | `#5C5550` | Captions, the mono ledger text, disabled-feeling marginalia. | There is **no pure white anywhere** and **no neon anything**. The brightest point on the entire page is candle-amber at ~80% lightness, and it only appears inside the pools of light. Everything else recedes. ## Imagery and Motifs **Primary "imagery": light itself.** No photographs. No illustrations of bottles or bartenders. The visual texture of yami.bar is built almost entirely from **light behaving in darkness** — radial gradients, soft glows, a faint volumetric haze — plus a single grain overlay. (Grain-overlay sits at 10% in imagery frequency; it is used here not for vintage flavor but because real darkness *is* grainy — the eye in low light produces visual noise, and a subtle animated film grain over the whole page reproduces that "my eyes haven't adjusted" sensation.) **Motif system (all CSS/SVG, no raster assets):** - **The candle.** One animated radial glow that flickers — irregular, organic flicker (not a smooth pulse): brightness jitters on a noise curve, and it casts the warm pool that the hero wordmark sits in. Everything bright on the page is conceptually "downstream" of this one candle. - **Ice in a glass.** A small motif near the menu: a cluster of translucent quadrilaterals (CSS `clip-path`), faintly outlined in ice-green, that very slowly drift and rotate — ice settling and melting in a tumbler. They cast a small cool pool. The only cool light in the bar. - **Smoke / drifting type.** Some short phrases (the tagline, one cocktail description) are rendered as text that has a slight blur and a slow drift transform, occasionally re-settling — a sentence written in cigarette smoke that almost disperses and then re-forms. SVG `feTurbulence` displacement on the text, animated very slowly. Used at most twice on the page. - **The descent line.** The thin luminous handrail down the center-left — an SVG path, ~1px, brass-dim, with a faint amber gradient bleeding from it, and the scroll-progress bead traveling down it. It's the only continuous element across the whole page; it represents the building's spine, the stairwell rail, the seam of light under successive doors. - **The doorbell.** In place of any "reserve" button: a tiny faintly-rendered circle, almost invisible against the back-room dark. Hovering it makes a soft glow bloom outward (ripple) and — if audio is enabled and the user has interacted — a single quiet bell tone. Clicking opens a `mailto:` to the bar. There is no form, no calendar widget, no "book a table" CTA. You ring; someone may answer. - **Cursor as a held match.** The custom cursor is a very small, soft, warm glow (~24px radial gradient, candle-amber, low opacity) that follows the pointer — as if you're holding a lit match and it illuminates a tiny patch of whatever's under your hand. Move it over a pool of light and the pool brightens slightly (the two lights add). This is the page's primary interaction: **you carry your own small light through the dark.** ## Prompts for Implementation Build yami.bar as **a single static HTML page** — one `index.html`, one `style.css`, one small JS module (`yami.js`, target ≤6KB minified) for the eye-adjustment scroll math, the cursor-match glow, the candle flicker noise curve, and the optional bell tone. The Google Fonts stylesheet is the only external dependency. Total page weight (excluding fonts) should land under ~70KB. No frameworks, no canvas/WebGL — everything is CSS gradients, CSS `clip-path`, one or two SVG filters, and `requestAnimationFrame` for the flicker. **Hard constraints — these *are* the design:** - **The page is genuinely dark and content emerges slowly.** Do not "fix" this for readability. The eye-adjustment overlay (fixed, full-viewport, `pointer-events:none`, `mix-blend-mode: multiply` or just black with variable opacity) must make the top of the page nearly unreadable and the bottom comfortable. Opacity is a function of scroll position. Hovering a pool of light, or moving the cursor-match over it, locally raises legibility — that's how the user "leans in." - **No CTA-driven layout.** No hero button. No pricing. No stat-grid ("500+ cocktails", "open since 1998" — forbidden). No testimonials. No newsletter signup. No sticky "Book Now" bar. The single interactive endpoint is the doorbell → `mailto:`. - **No card-grid, no bento-box, no dashboard.** Content lives in scattered elliptical pools of light against black. Each pool = one idea. - **Warm analog dark only.** No #00FFFF, no electric purple, no glassmorphism frost panels, no glowing borders. The brightest pixel is candle-amber. Ice-green is the *only* cool accent and it must be desaturated. - **No pure white. No #FFFFFF anywhere.** Brightest text is spoken-grey `#9A8E80` inside a pool of light. **Narrative / scroll structure (the descent):** 1. **Street (i / vii).** Almost pure black. The word "*yami*" in huge Cormorant Light Italic, barely lit by the candle glow — at first scroll it's almost invisible; the candle flicker occasionally reveals it. Beneath, tiny mono: "a bar in the dark — 闇". The "↓ deeper" prompt. One smoke-rendered line: *"you found the door."* 2. **Stairwell (ii / vii).** Background lifts to #0C0A09. The descent line begins. One pool of light, far left: a sentence about going down — *"there is no sign. there is no list of awards. there is a room, and in the room there is a light, and under the light there is a glass."* 3. **The bar (iii / vii).** #14100C. Three or four pools, scattered asymmetrically, each holding a single cocktail: name in Cormorant Italic, one line of EB Garamond description (one of them smoke-drifting), a mono pour-quantity. No prices. No "menu" header — just the drinks, appearing as you scroll past their pools. 4. **The ice (iv / vii).** The ice-in-a-glass motif: drifting translucent quads, the one cool pool, a line about temperature and patience — *"good ice is slow ice."* 5. **Hours (v / vii).** Mono line: "OPENS 21:00 — CLOSES WHEN IT CLOSES." A small "now serving: ___" line in ice-green that picks a drink based on the current hour (pure JS, no fetch). One pool only. 6. **The back room (vi / vii).** #1A140E — the *warmest* dark; the overlay is at its thinnest; this is where your eyes have finally adjusted, so this section is the most legible on the page. The low-bulb-rose pool appears here. A short paragraph — the closest thing to an "about" — about what *yami* means and why a bar would want to be hard to see. The doorbell sits here, faint, in the rose pool. 7. **Bottom (vii / vii).** Back to near-pure-black. One line, centered, small, spoken-grey: *"mind the last step."* Nothing else. The descent line ends in a small amber dot. No footer, no links, no copyright clutter — maybe just "闇" tiny in the corner. **Animation budget:** the candle flicker (continuous, cheap), the cursor-match glow (transform only), the eye-adjustment overlay opacity (on scroll), the descent bead (on scroll), the ice quads' slow drift (CSS animation), and at most two smoke-text displacement loops. Everything else is `prefers-reduced-motion`-gated: flicker freezes to a steady glow, smoke text settles sharp, ice stops drifting, overlay locks at ~55%. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **Darkness as substance, not theme.** This is not "dark mode" (10% — and always the crypto/dev-dashboard kind). The page is *near-true-black* and content is **engineered to be hard to read at the top and to resolve as you scroll** via a scroll-coupled eye-adjustment overlay. No other approach in the set makes legibility itself a narrative variable. The brightest pixel on the entire site is a single candle-amber glow; there is no white. 2. **Pools of light instead of a grid.** Card-grid is at 93%, bento-box and dashboard are common — yami.bar uses *none* of them. Content sits in scattered radial-gradient pools the size of real candlelight on a tabletop, with pure black between them. Layout is "lit objects in a dim room," not "modules on a canvas." 3. **The cursor is a held match, and lights add.** Cursor-follow is at 89%, but it's almost always a blob/dot/spotlight cosmetic. Here the cursor is a small warm glow that *locally increases content legibility* and *adds* to the pools it passes over — the central interaction is "carry your own small light through the dark," which is mechanically tied to the eye-adjustment system, not decoration. 4. **No CTA endpoint at all — a doorbell, not a button.** No reserve button, no booking widget, no pricing, no stat-grid, no testimonials, no newsletter. The only interactive output is a faint doorbell that glows and (optionally) chimes and opens a `mailto:`. A bar that guards its address. 5. **Warm analog dark with one cool accent.** Deliberately rejects every dark-mode signifier (neon cyan, electric purple, glowing borders, glass frost). The palette is candle-amber / brass / desaturated ice-green / dusty rose over warm near-blacks — the dark of a *room*, not a *screen*. 6. **Chosen seed/style:** *surreal dreamscape promo* — aesthetic: surreal (8%), layout: immersive-scroll (16%, here as a vertical descent), typography: garamond-classic / Cormorant Garamond at hairline weights (so glyphs literally resolve out of the dark), palette: warm + a single ethereal-blue accent, patterns: cursor-follow re-purposed as a light-carrying mechanic + ripple on the doorbell + scroll-triggered overlay opacity, imagery: grain-overlay (10%) as "low-light eye noise," motifs: candle-atmospheric (4%) as the page's single light source. Avoided patterns from the frequency analysis: card-grid (93%), bento-box, dashboard, full-bleed hero-CTA layouts, glassmorphism (85%), parallax-as-decoration, neon/dark-neon palettes, stat-grids, and pure-white type.