# Design Language for yamichika.bar ## Aesthetics and Tone Yamichika.bar is **The Subterranean Apothecary's Ledger** — a goblin-curator's authoritative dossier on a hidden basement bar where botanical tinctures are dispensed through brass-and-bakelite sci-fi instrumentation. "Yami" (dark) + "chika" (basement) + ".bar" reads as an underground room reached by a creaking spiral stair, lit by terracotta lamps and lined with mason jars of dried lichen, fennel, and mugwort. The proprietor is a goblin who speaks like a 1970s naturalist publishing in a peer-reviewed journal: precise, unsmiling, slightly imperious. Every detail is documented as if for an institutional archive. The mood is **damp clay warmth meets analog control panel**. Imagine the Whole Earth Catalog's typography, the page furniture of an old pharmacopoeia, and the readout panels of a 1968 NASA telemetry rack — all stained with rosehip syrup and pressed between herbarium sheets. Tilted 3D book-page perspective gives the whole site the feeling of a leather-bound ledger held at a slight angle on the bar's wooden counter, casting a long shadow across hand-pressed paper. Tonal anchors: **goblin-as-archivist** (hoarder of small specific things, indignant about misclassification), **terracotta as ground truth** (the color of fired earth, of clay vessels, of the bar's tiled floor), **the bar as laboratory** (every drink is a tincture with a Latin binomial), **authority through specificity** (no marketing language; only catalog numbers, vintage years, foraging coordinates, and proprietor's notes signed in iron-gall ink). ## Layout Motifs and Structure **Single-column ledger spine** — the entire site is one tall column, max-width 720px, centered, with massive vertical breathing room. Each section is a numbered "Folio" (Folio I, Folio II, ...) like pages in a bound naturalist's journal. The column itself sits inside a tilted 3D plane: a `transform: perspective(2400px) rotateY(-7deg) rotateX(2deg)` that makes the page feel like an open book viewed from the bar stool, with a subtle paper-curl shadow falling to the right. **Folio composition rules:** - Each Folio opens with a hand-drawn rule (1px terracotta line with hairline serifs at each end) - Section number in oversize retro-display type (180px+) with a small Latin caption below ("FOLIO I — DE ORIGINE") - Body text in two indented stanzas with **drop-cap initials** drawn from botanical illustration (a vine curling around the letter) - Margin annotations in the right gutter at -3deg rotation, written in a typewriter face, simulating proprietor's pencil notes - Bottom of each Folio: a "HUD readout" strip — a thin horizontal sci-fi panel with monospace telemetry (`PH: 4.2 | TEMP: 11°C | LOT: AS-2024-117`) running across the page edge **The Spiral Stair Header (top of page):** a vertical illustration of a wrought-iron spiral staircase descending into the page, drawn in botanical-illustration ink-line style. Numbers count down each step (`B1, B2, B3...`) like floor indicators. The site title `YAMICHIKA.BAR` appears at the bottom step in retro-display caps, slightly tilted. **The Specimen Cabinet (mid-page):** a vertically stacked grid of jar illustrations — six tall apothecary jars rendered in line-drawing style, each containing a different botanical (yarrow, juniper, woodruff, angelica, hyssop, rue). Hover each jar and a HUD overlay slides up showing extraction parameters in monospace. **The Ledger Footer:** the column terminates in a hand-stamped rectangular cartouche with the proprietor's mark — a goblin silhouette inside a Linnaean classification box, with `NOMEN: Goblinus subterraneus var. mixologicus` set beneath in italic small-caps. Spatial logic: everything cascades downward like turning the pages of a slowly-read journal. **No horizontal layout. No grid columns. No cards.** Just the spine of the ledger, top to bottom, with botanical and instrumental ornament pressed into the margins. ## Typography and Palette **Type system (Google Fonts only):** - **Display:** `Rozha One` — a high-contrast retro display face with sharp didone bones and a slightly theatrical apothecary-shop-sign feel. Used for Folio numerals, the site title, and Latin captions. Set at 180–240px for Folio openers. - **Body:** `Spectral` — a contemporary serif with literary calm and excellent italic, for the long-form ledger entries. 19/32 leading, justified, with old-style figures. - **Margin notes / annotations:** `Special Elite` — a typewriter face with ink-bleed character. Set at 13px, color-shifted toward pencil-graphite, rotated -3deg in the right gutter. - **HUD telemetry:** `Share Tech Mono` — a clean, slightly square monospace with a control-panel readout flavor. ALL CAPS, letter-spacing 0.18em, used only in the bottom-of-Folio instrument strips. - **Drop caps:** `IM Fell DW Pica` — a 17th-century revival with rough-pressed letterforms, paired with a hand-drawn vine illustration entwining the glyph. **Palette — Terracotta Warm, Cellar-Aged:** - `#3a2418` — **Cellar Loam** — deep umbral background base, the color of damp basement earth at midnight - `#c2562a` — **Fired Terracotta** — primary warm accent, the color of a hand-thrown clay tile glazed and kiln-finished - `#e8b07a` — **Lamp-Glow Bisque** — soft secondary, the warm halo cast by a low-watt filament bulb on terracotta plaster - `#f4ead5` — **Pressed Vellum** — body paper color, slightly yellowed cream like a hundred-year-old herbarium sheet - `#5e7c3e` — **Foraged Sage** — botanical illustration green, dusty and slightly desaturated, for vine ornament and leaf forms - `#2a4d3a` — **Apothecary Bottle** — deep bottle-green for HUD frames and Linnaean classification boxes - `#8b1e1e` — **Iron-Gall Mark** — oxidized red-brown for the proprietor's stamps and seals - `#0d1b14` — **Specimen Shadow** — near-black with a green tint, for tilted 3D drop shadows The palette logic: **all warmth is fired or aged.** No fresh oranges, no clean reds. Every color reads as if it has been kilned, oxidized, pressed, or aged in oak. The terracotta is the protagonist; the sage and bottle-green are botanical accents that root the bar in the apothecary tradition; the iron-gall red appears only in stamps and signatures. ## Imagery and Motifs **Botanical illustration vocabulary (line-drawn, 1820s herbarium style):** - Six apothecary specimen jars with hand-lettered labels (`Achillea millefolium — yarrow, foraged 2024.iv.11, Lot AS-117`) - A spiral wrought-iron staircase descending the entire header, rendered in 0.5px ink hatching - Vine drop-caps: ivy, hop bine, and bittersweet curling around each Folio's initial letter - A pressed-flower border running down the left edge of the column at 30% opacity — overlapping silhouettes of fern, foxglove, woodruff - Three "field sketch" inserts at 240×180px: a mortar-and-pestle, a copper still, and a goblin's hand holding a cordial glass — all in single-weight ink line **Sci-fi HUD vocabulary (analog 1968-era control panel, not digital glass):** - Bottom-of-Folio telemetry strips: monospace readouts in `Share Tech Mono`, framed by a 1px terracotta line with cornered brackets `[` `]` - Six "specimen status" indicators per HUD strip — `PH | TEMP | ABV | INFUSION | LOT | VINTAGE` — each with an old-school analog needle-gauge SVG (drawn in line, no gradients) - Crosshair reticle in the top-right corner of each Folio: thin terracotta circle with four tick marks and a centered `°` glyph - An animated typewriter-tape readout that scrolls slowly across the top of the page: `>> SPEC.AS-117 LOGGED · PH 4.2 · LOT VERIFIED · PROPRIETOR PRESENT <<` - "Calibration ribbon" footer: a horizontal scale of tick marks (every 8px) running 1200px long, with three labeled values along its length **Goblin-curator motifs (tone-setting ornament):** - A small goblin silhouette stamp in iron-gall red at the foot of every Folio — different pose each time (holding a jar, peering through a loupe, writing in the ledger, climbing a ladder, sniffing a cordial, asleep on a stack of books) - Linnaean classification cartouches: rectangular bottle-green boxes with italic small-caps inside, used to "name" each section (`Folio II · NOMEN: De Vegetationibus Foraneis`) - Hand-stamped paragraph marks (`¶`) in iron-gall red at the start of important paragraphs - A wax-seal SVG in deep terracotta at the bottom of the page: an embossed circle with `Y · B` initials and a sprig of rosemary **Tilt-3D motion language:** - The entire ledger column rests on a tilted plane (`-7deg Y, 2deg X`) that subtly rotates ±0.6deg in response to mouse position (very slow, easing 600ms) - Margin annotations float at a counter-tilt, simulating sticky-note depth - The spiral staircase header has parallax depth: each step shifts in opposite Y direction on scroll, creating a "descending into the page" effect - HUD strips at the bottom of each Folio appear to recess slightly (`translateZ(-12px)`) like inset metal panels - Specimen jars in the cabinet section tilt independently on hover (`rotateY(8deg) translateZ(20px)`) revealing their HUD readout ## Prompts for Implementation **Single-page narrative experience.** No CTAs, no pricing tables, no stat grids, no testimonial blocks, no feature lists. The page reads like a hand-bound naturalist's journal that has been opened on the bar. Visitor scrolls down through Folios as if turning pages. Total length: 6 Folios + spiral-stair header + specimen cabinet + ledger footer. **HTML structure:** `
` is the ledger column. Each `
` is a numbered page with `
`, `
`, `