# Design Language for yamichika.bar ## Aesthetics and Tone yamichika.bar is built as **the inventory ledger of a blackout speakeasy that does not officially exist** — *yami* (闇, "darkness / the black market / the place outside the light") fused with *chika* (地下, "underground / sub-basement"), set under a `.bar` that we read literally: this is a *bar*, but a bar you reach by walking down a service stair, knocking on a steel door, and being handed a brass token. The whole site is the single sheet of paper that bartender keeps under the counter — a hand-ruled stock ledger of bottles, ice, citrus, and regulars — except the paper is being read at 3 a.m. by the only lamp still on: one amber bar-lamp throwing a tight pool of light, everything outside it sinking into warm coal-black. The mood is **after-hours, post-rush, lights-down stillness** — not glamour, not the crowded velvet-rope cliché of "luxury nightlife," but the quiet *afterward*: chairs up on tables, the till counted, one record still turning with the needle in the run-out groove. It is **art-deco that has been left in the dark for forty years** — the brass is tarnished, the chevron inlay is worn matte, the gilt edge has gone to ochre — so the geometry is still there in the bones (stepped fans, sunbursts, fluted columns, ziggurat margins) but the *shine* is gone, replaced by a low candle-amber glow and the grain of cheap ledger paper. Tone words: clandestine, ledger-precise, low-lit, tarnished-deco, nocturnal-ordinary, kept-secret. The visitor should feel like they were trusted with something — handed the book, told "don't lose my page." ## Layout Motifs and Structure The site is **a single continuous vertical column rendered as a bound ledger page** — `single-column` layout (16% in the registry — underused; almost everything is card-grid/full-bleed) with a hard **max-width of 720px**, centered, sitting on a coal-black field (`#0B0A08`) that represents the unlit room around the lamp's pool. The column itself is the lit paper: a warm off-cream sheet (`#E3D9C2`) with a faint horizontal rule every 28px (ledger ruling), a single vertical red margin line 64px from the left (`#7A1E1E`, like a real account book), and a double-rule masthead at the very top. **No hero section. No full-bleed photo band. No card grid. No bento boxes. No stat blocks. No pricing tiers. No CTA banners.** The page reads top-to-bottom like an actual handwritten register: 1. **Masthead** — double-ruled, "ya·mi·chi·ka — 闇地下" set in deco display caps, with a hand-drawn brass-token rosette to the left and, to the right, a tiny ruled box reading the (fictional) opening hours in mono: `OPEN 21:00 — UNTIL THE ICE RUNS OUT`. A "stamped" oval ink mark sits half over the rule, slightly skew. 2. **The Standing Order** — a short ledger-prose preamble (what this place is, in the bartender's voice), set as indented paragraphs against the red margin line, the first letter of the first line a tall fluted deco drop-cap. 3. **The Back-Bar** — the central ledger table: a hand-ruled list of "stock on hand," each row a bottle / ingredient / fixture with a name column, a tally column (drawn as hand-struck `||||` gate-marks, not numbers), and a margin note in a smaller mono italic. Rows are separated only by the 28px ruling — no card edges, no shadows. 4. **The Regulars** — a second ruled block: a few one-line entries for the people who have a tab here, each given a code-name and a single deadpan note (`"the one who only drinks the dregs"`). Crossed-out entries (a single ruled strike-through) for the ones who don't come anymore. 5. **The Last Pour** — a closing ledger note, time-stamped, signed with an inked initial-glyph; below it the lamp's light visibly falls off and the paper edge dissolves into the coal-black, where a single line of mono micro-text gives the (fake) address as a set of directions, not coordinates. Spatial logic: **everything obeys the 28px ruling and the 64px red margin** — headers sit *on* a rule, body text sits *between* rules, nothing floats free. Generous `ma`-style breathing room *vertically* (whole blank ruled passages between sections, like skipped lines in a real book) but the column itself stays narrow and dense. On scroll, the lamp-pool (a large soft radial-gradient vignette fixed behind the column) stays put while the paper slides under it — so different rows pass through the brightest part of the light as you read, and rows near the top/bottom of the viewport are dimmer, as if outside the lamp's throw. ## Typography and Palette **Typefaces — Google Fonts only, three families.** - **`Cinzel Decorative`** — masthead and section headers only. Cinzel Decorative is the most ornamental deco-adjacent display face on Google Fonts: high-waisted Roman caps with little flared serifs and, in its decorative weights, tiny carved flourishes between letters. Used at: 40px / 1.0 / letter-spacing 0.18em for the masthead `YA·MI·CHI·KA`; 22px / 1.1 / letter-spacing 0.22em for section headers (`THE BACK-BAR`, `THE REGULARS`, etc.), always in small-caps register, always sitting directly on a ledger rule, always in tarnished-brass `#A98B3C`. - **`Cormorant Garamond`** — all body / ledger-prose / row names / regulars' notes. A high-contrast Garamond with hairline thins and a beautiful bowed italic — it reads like fountain-pen copperplate slowed to a walk. Used at: 17px / 1.65 for the Standing Order and Last Pour prose (roman 400, with italic 400 for asides); 16px / 1.4 for back-bar row names (roman 500 small-caps); 14px / 1.4 italic for regulars' notes. The drop-cap is Cormorant 600 at ~62px, fluted, in tarnished brass. - **`Share Tech Mono`** — all "machine" marginalia: the opening-hours box, tally legend, time-stamps, the address-as-directions micro-text, row reference codes. A clean fixed-width face that reads like a cheap till-roll or a label-maker strip — the only thing in the building that *isn't* handwritten. Used at: 12px / 1.5 / letter-spacing 0.04em, in ink-faded `#5A4A2E` on the cream, and in lamp-amber `#C98A2E` for the address line that sits down in the dark. **Palette — warm, low-key, tarnished; never glossy.** - `#0B0A08` — coal-black. The unlit room; the page background outside the column. - `#E3D9C2` — ledger cream. The lit paper / column surface. - `#D8CBAE` — ledger cream, shadowed (the parts of the paper outside the lamp pool; also alternating-row tint at 20% mix). - `#7A1E1E` — account-book red. The single vertical margin rule, strike-throughs, and the "stamped" oval ink mark. - `#A98B3C` — tarnished brass. Section headers, the token rosette, the drop-cap, hairline deco rules. - `#C98A2E` — lamp amber. The radial light's warm core; glow on hover; the dark-zone address line. - `#5A4A2E` — faded ink brown. All mono marginalia and the finer ledger ruling. - `#2E2A22` — near-black walnut. Body text on the cream (a brown-black, never pure `#000`, so it reads as old ink). ## Imagery and Motifs No photography (98% in the registry — its absence is the single biggest deviation). No 3D renders. No icon sets. No Lottie. No video. No stock anything. Everything is drawn from CSS, inline SVG, and procedural texture. 1. **Hand-drawn deco ledger furniture (the imagery thesis: `hand-drawn` imagery, ~17% in registry — but here in a *ledger-clerk* register, not a doodle/sketchbook register).** The ruled lines, the double-rule masthead bar, the gate-mark tallies (`||||` struck through with a fifth diagonal), the strike-throughs over lapsed regulars, the indent brackets — all drawn as SVG strokes with a *very* slight hand-tremor (a 1–2px sine wobble baked into the path) and a touch of stroke-width variance, so they read as pen, not print. The tally legend itself is a tiny key in mono: `|||| ⃫ = one full case · ||| = part case`. 2. **The brass-token rosette.** A single repeated motif — a circular SVG "entry token" with a stepped-fan deco sunburst, a fluted rim, and a punched center hole — appears at the masthead (large, ~72px) and again, tiny (~14px), as the bullet before each regular's entry, as if every regular's name is stamped with the same token. It is matte tarnished brass with one thin specular arc, never a full shine. 3. **Deco margin ziggurats.** The left red margin line terminates, top and bottom of each ruled block, in a small 3-step ziggurat notch (a classic deco corner) drawn in faded ink — the only "decoration" the clerk allowed themselves. 4. **The "stamped" oval ink mark.** A slightly oval, slightly broken-edged ring stamp in account-book red, rotated ~ -7°, half-overlapping the masthead rule and the time-stamp at the foot — text inside reads `闇地下 · NOT FOR THE STREET` in tiny Cinzel caps following the oval. It looks pressed by a worn rubber stamp: uneven ink coverage (an SVG with a noisy mask). 5. **Paper + lamp texture.** The cream column carries a faint procedural paper grain (subtle `feTurbulence` overlay at ~4% opacity) and a barely-there foxing speckle near the edges. The lamp pool is a large fixed radial gradient (lamp-amber core fading to transparent) multiplied over the column, plus a soft drop of the same amber on the coal-black just past the paper's edge, so the page looks genuinely *lit by one source*. A faint flicker (±2% lightness, irregular ~6s interval) gives it a filament's unsteadiness — disabled under `prefers-reduced-motion`. ## Prompts for Implementation Build yamichika.bar as **one HTML document, one CSS file, one tiny ES module, and one inline SVG sprite block** (no external SVG file even — the deco furniture is small enough to live in a `` symbol bank at the top of ``). No framework. No build step beyond a single minify pass. No React. No SPA. No router. No canvas. No WebGL. No webfont self-hosting (link the three Google Fonts). Total weight target under 70kb. **Storytelling, not selling.** Write all copy as the bartender's ledger, in first person, terse and dry — "stock on hand," "who has a tab," "what we ran out of last night." Never write a tagline, a value prop, a feature list, a price, or the word "experience." The Standing Order preamble should explain *the rules of the room* (no photos, no names outside, the token gets you back in) — that *is* the about-page, in character. The Regulars section is the testimonials/community section, in character: code-names and one-line notes only. The Last Pour is the contact/footer, in character: a time-stamp, an inked initial, and the address rendered as walking directions down in the dark. **Motion — slow, kept, never bouncy.** Prefer `fade-reveal` (12% in registry — underused) over the registry-saturated spring/magnetic/cursor-follow trio: as you scroll, each ruled row fades up from `opacity:0` over ~700ms with a gentle `cubic-bezier(.2,.6,.2,1)` ease and a `stagger` of ~60ms down a block — like ink developing as the page slides into the light. The lamp-pool vignette is `position:fixed` and does **not** move (this is the one "parallax" — the *paper* parallaxes against the *light*). Hover on a back-bar row: the paper under it warms ~6% toward lamp-amber and the brass header glyph gets one slow `path-draw-svg` redraw of its fan rays over ~900ms; pointer leaves, it fades back. The drop-cap does a one-time `path-draw-svg` stroke-on of its fluted outline on first reveal. The "stamped" oval does a single ~400ms scale-from-1.04 + opacity press on load, as if just stamped — once, never again. Filament flicker as described. **No** cursor-following lamp, **no** tilt-3d, **no** elastic, **no** typewriter effect, **no** counters. Everything respects `prefers-reduced-motion: reduce` (kills flicker, fades, stamp-press; content all visible). **Layout discipline.** Hard 720px column, centered, on `#0B0A08`. Everything snaps to a 28px vertical rhythm and the 64px left red margin. Section headers sit *on* a rule. Body sits *between* rules. Use real blank ruled passages (skipped lines) for breathing room. Mobile (<560px): column goes to 100% width with 20px gutters, red margin moves to 28px, ledger ruling stays at 28px, mono marginalia drops to 11px, masthead Cinzel drops to 30px — but the structure is identical; it just gets narrower, like a smaller notebook. **AVOID:** hero sections, full-bleed photo bands, card grids, bento boxes, stat/number grids, pricing tables, CTA buttons or banners, testimonial cards, logo walls, glassmorphism, neon, gradients-as-decoration, dark-mode-toggle UI, cookie-style modals, anything that looks like a SaaS landing page. ## Uniqueness Notes Differentiators, chosen to avoid duplicating any other CMassC site and to lean on patterns the frequency analysis flags as scarce: 1. **The website *is* a handwritten stock ledger** — not "a site with a ledger aesthetic," but the literal under-the-counter inventory book of a bar that doesn't advertise: ruled lines, gate-mark tallies instead of numbers, a red margin rule, foxing, a worn rubber stamp, crossed-out lapsed regulars. The "about / community / contact" sections are reframed entirely as ledger entries in the bartender's voice. No CMassC site treats the page as a single bound paper register. 2. **One light source, and the paper moves under it.** Instead of the registry-ubiquitous cursor-follow / magnetic / spring interplay (76–89% each), the only "parallax" is a fixed lamp-pool vignette that the scrolling paper passes through, so rows literally brighten as they enter the lamp's throw and dim at the viewport edges, with a filament flicker on top. Motion vocabulary is restricted to slow `fade-reveal` + `path-draw-svg` + `stagger` — all underused — and explicitly bans spring/magnetic/cursor-follow/tilt-3d/typewriter/counters. 3. **Tarnished, dark art-deco — deco with the shine taken away.** Where art-deco appears at all (~5%) it's usually gilt-and-glamour luxury nightlife. Here the deco geometry survives only in the bones (stepped fans, ziggurat margins, fluted drop-cap, Cinzel Decorative caps) but rendered matte, low-lit, ochre-not-gold, on cheap cream ledger stock — "art-deco that's been left in the dark for forty years." 4. **Single 720px column on coal-black, zero photography, zero cards.** Against a registry where 98% use photography, 93% use card-grids, and 84% go full-bleed, this is one narrow ruled column floating in an unlit room, every visual element drawn from CSS/SVG/procedural texture — no images, no cards, no full-bleed bands, no hero. Chosen seed/style: **art-deco ornate luxury** — deliberately inverted into tarnished, blacked-out, ledger-clerk deco. Avoided patterns from frequency analysis: photography (98%), card-grid (93%), mono-overuse-as-primary, full-bleed (84%), cursor-follow (89%), parallax-as-background (87%), spring (83%), magnetic (76%), stagger-as-default, tilt-3d (32%), glassmorphism (85%), warm-gradient washes (92%), hero-dominant, bento-box, stat-grids, CTA-heavy layouts, pricing blocks.