# Design Language for miris.bar
## Aesthetics and Tone
miris.bar is an **olfactory bar** — a room where the menu is not drinks but *scents*, and "miris" is the South-Slavic word for *smell*. Imagine a wabi-sabi apothecary at dusk: low light, a long unvarnished oak counter worn pale by elbows, glass droppers, blotter strips fanned out like tarot, dried umbels and seed-heads hung from a beam. You don't *order* here — you *breathe*. The site is the digital equivalent of leaning over a perfumer's organ at 11pm and being handed a paper strip without a word.
The tone is **zen-contemplative**, almost monastic — unhurried, hushed, slightly melancholic. No urgency, no exclamation, no upsell. Copy speaks in short declaratives and fragmentary sense-notes ("cold stone. crushed fig leaf. the inside of a violin case."). The aesthetic register is **wabi-sabi** (7% in the registry, rarely the *dominant* mode): things are imperfect on purpose — asymmetric margins, a hairline that doesn't quite meet, paper that shows its deckle edge, a wordmark slightly off-baseline as if hand-set in lead. Nothing is glossy. Nothing glows. The only "animation" is the slow drift of a scent as it diffuses — soft blur resolving to focus, the way a smell arrives before you can name it.
Anti-references, stated plainly: not the warm-honey "artisanal cocktail bar" template; not dark-mode neon; not glassmorphism; not a hero with a "Reserve a Table" button. This is closer to a Japanese kō-dō (incense-listening) ceremony rendered as a quiet European still-life.
## Layout Motifs and Structure
The governing layout is **ma-negative-space** (11% in the registry, almost always used timidly) pushed to an extreme: roughly **62% of every viewport is empty**. Content sits in a narrow off-center column — never centered, always nudged left or right by an irrational amount (38.2% / 23.6% offsets, loose golden ratios) so the page feels *placed by hand* rather than gridded.
The page is a **single vertical scroll, organized as nine "blotter strips"** — long thin horizontal bands, each one a single scent on the bar's "list of the evening." Each strip is mostly whitespace with: a small index numeral (set as a fraction, `01 / 09`), the scent's name in large serif, three fragmentary sense-notes in a vertical stack down the left margin, and a single thin hand-drawn line illustration of the source material (a fig leaf, a flint shard, a thread of smoke, a piece of ambergris) floating at the strip's far edge, bleeding off the page.
Structural rules:
- **No nav bar, no hamburger, no logo-link, no sticky header.** A single fixed element only: a vertical "spine" of text down the left edge — the bar's name set rotated 90°, plus the nine index numerals as the world's quietest progress indicator. Clicking a numeral drifts you to that strip.
- **The fold is intentional.** The first viewport is *almost entirely empty* — just the wordmark low and left, one line of text ("a bar of nine smells. open from dusk."), and a vast pale field above it. You must scroll to find the bar.
- **Right margin is sacred** — illustrations and the occasional pull-quote live there, but body text never crosses into it.
- **Footer is a single line**, baseline-aligned to the very bottom edge: address, hours, nothing else. No social icons, no newsletter, no "made with."
Explicitly avoided from the frequency analysis: card-grid (88%), centered (86%), full-bleed (89%), hero-dominant, dashboard, bento-box. miris.bar uses *none* of the top-three layouts.
## Typography and Palette
**Fonts — Google Fonts only, two families:**
- **`Cormorant`** (Garamond-adjacent, variable-weight, with its italic) — the entire expressive voice of the site. Used for the wordmark "*miris.*" (lowercase, with the period, italic, ~96px, weight 400, sitting slightly below its own baseline), every scent name (regular 400, 56–72px, tight tracking), and pull-quotes (italic, 28px). Cormorant is chosen for its **thin, almost fragile high-contrast strokes** and unusually long, lyrical italic — it reads like a smell: present, but barely. `serif-revival` / `elegant-serif` are each only ~7% in the registry; `garamond-classic` ~3%.
- **`IBM Plex Mono`** (light 300, regular 400) — every functional/marginal character: the `01 / 09` index fractions, the three sense-notes per strip (set lowercase, 12px, letter-spacing 0.08em, like a chemist's label), the rotated spine text, the address line. The mono is a deliberate dissonance — clinical labels under romantic names — echoing how a perfumer writes "cis-3-hexenol" next to "the smell of cut grass." Mono is at 94%; here it is used *against type*, as the cold-print counterpoint, never the hero.
No third display face. The contrast *is* the system: fragile serif (the experience) vs. utilitarian mono (the documentation).
**Palette — `honeyed-neutral` (3%) shaded toward overcast, never warm-glow:**
- `#F2EEE6` — *blotter paper.* The page ground. A warm-grey off-white, like uncoated stock left on a windowsill.
- `#E4DDCF` — *aged label.* Slightly deeper paper, for the rare panel/strip-divider and the spine band.
- `#1C1A16` — *iron gall.* Near-black with a brown undertone — all serif headings, deep enough to read as ink, warm enough not to read as digital black.
- `#6E6A60` — *blotted ink.* Mid warm-grey — all mono body, sense-notes, index numerals.
- `#A8946B` — *amber tincture.* A single muted honey-gold — used only for the active index numeral, the hairline underline that draws under a scent name on hover, and the thin line illustrations. Never a fill, never a button.
- `#3B4A3E` — *crushed leaf.* A deep desaturated green, used *once per scent strip at most* — for a single underlined word in a sense-note ("__fig leaf__", "__moss__"), the only color that ever touches the type.
Everything is matte. There are no gradients except one: an extremely subtle vertical paper-grain noise (2–3% opacity) over the whole ground, so it never reads as flat CSS white.
## Imagery and Motifs
**Imagery is `line-illustration` only (7%) — no photography (98% of the registry; explicitly refused).** There are no photos of bottles, no people holding glasses, no bokeh bar interiors. Every image on the page is a single-stroke ink line drawing, ~1px (scaled), `#A8946B`, drawn in the manner of a botanical field-notebook or an 18th-century *materia medica* plate — confident, slightly wobbly, unshaded, no fill.
**The nine drawings (one per scent strip), each bleeding off the right or left edge:**
1. A fig leaf, three-lobed, with one curling tip — `leaf-organic` motif (7%).
2. A flint shard, struck, with two hairline fracture lines.
3. A single thread of smoke — one continuous curling line that thins to nothing.
4. A lump of ambergris, drawn as a contour map (concentric irregular rings).
5. A violin's f-hole, isolated, no instrument.
6. A pressed iris root (orris), gnarled.
7. A wet river stone, an oval with one off-center highlight notch.
8. A spent matchstick, the head a small charred blot.
9. A drop of resin, suspended mid-fall, teardrop with a faint trailing line.
**Other motifs:**
- **Blotter strips** — the literal paper test-strips fanned at the very top of the page (as a thin SVG of overlapping rectangles, deckle-edged), reused as the section-divider mark between strips.
- **The dropper** — a single tiny SVG glass pipette is the cursor companion on the experience strips: where the real cursor goes, a faint pipette outline trails one beat behind, and on hover over a scent name a single drop falls from it and dissolves into the page (a soft expanding blur, not a ripple).
- **Diffusion, not motion** — the recurring "animation language": elements arrive *out of focus* (`filter: blur(8px)`, opacity 0) and resolve to sharp as they enter the viewport, slowly, over ~1.2s, eased like a smell spreading through a room. Nothing slides, bounces, or springs.
- **Deckle edges** — every paper element (the strip dividers, the one panel, the footer rule) has a hand-torn edge, done with an SVG `feTurbulence` displacement mask, never a clean rectangle.
## Prompts for Implementation
Build miris.bar as **one HTML file, one CSS file, one small ES module (~4KB), and one `ink/` directory of nine SVG line drawings plus `strips.svg` (the blotter fan) and `pipette.svg`.** No framework, no bundler, no build step. No Lottie, no WebGL, no canvas. The Google Fonts `` is the only external dependency. Total page weight excluding fonts under 70KB.
**Document structure:**
```
miris.
a bar of nine smells. open from dusk.
01 / 09
Fig Leaf, Wet Pavement
cold stone after rain
green sap, just cut
the shaded side of a wall
…
```
**Storytelling / experience requirements:**
- The page is a **descent into a quiet room.** The threshold viewport must feel almost empty — resist filling it. The wordmark sits at roughly 64% down, 24% from the left. Above it: nothing but paper-grain.
- **Scroll is the only verb.** As each `.strip` enters the viewport, its contents un-blur and rise 12px into place, *staggered* — index first, then name, then each sense-note in sequence, then the ink drawing last (the slowest, ~1.4s). Use `IntersectionObserver`; if `prefers-reduced-motion`, just set everything sharp and visible (no blur, no transform).
- **The pipette cursor companion** trails the real cursor by ~120ms with a soft `transition`. On `:hover` of a `.scent`, an amber hairline draws left-to-right under the name (`underline-draw`, ~600ms), and one drop falls from the pipette and expands into a 60px soft blur that fades over 900ms. Disable the companion on touch devices and under reduced-motion.
- **The spine** is the only persistent UI: vertical text, left edge, the nine numerals as tiny links. The numeral of the currently-in-view strip turns `#A8946B` and gains a hairline above it. Clicking scrolls smoothly to that strip.
- **Type behavior:** scent names are large `Cormorant` 400 with `letter-spacing: -0.01em`; sense-notes are `IBM Plex Mono` 300, 12px, lowercase, `letter-spacing: 0.08em`, the single "source" word in `crushed leaf` green with a 1px underline. The wordmark italic sits ~6px below its own baseline (`transform: translateY(6px)`), deliberately "wrong."
- **Texture:** an always-present full-page SVG `feTurbulence` paper-grain at 2–3% opacity, `mix-blend-mode: multiply`. Every `` and the footer rule use an SVG displacement-masked edge, never `border`.
- **AVOID, hard:** no "Reserve" / "Book a table" / "Order online" CTA anywhere; no pricing block, no menu-with-prices, no stat-grid ("9 scents · 200 visitors · est. 2019"), no testimonial cards, no Instagram embed, no newsletter, no cookie-styled marketing modal, no parallax-z hero, no glass cards, no neon. The only "conversion" is the address line in the footer.
## Uniqueness Notes
Deliberate departures from the patterns in the frequency analysis and from the obvious "bar" cliché:
1. **The site is about *smell*, not drinks** — `miris` = "smell" in South-Slavic. No glassware, no cocktail photography, no menu of beverages. The "products" are nine scents, presented as a perfumer's blotter list. This re-frames a `.bar` domain entirely away from the warm-honey-cocktail-bar template that any other implementation would reach for first.
2. **`ma-negative-space` taken past timidity** — at 11% in the registry but nearly always used as a polite accent; here ~62% of every viewport is empty by rule, content is *never* centered, and the first viewport is intentionally almost blank. No card-grid, no full-bleed, no centered column — none of the top-three layouts (88–89%) appear.
3. **`wabi-sabi` as the *dominant* mode, not a texture** — 7% in the registry and usually a ceramics-shop accent. Here it is structural: irrational hand-placed margins, deckle-torn paper edges via `feTurbulence`, a wordmark deliberately off its baseline, hairlines that don't quite meet.
4. **"Diffusion" instead of standard motion** — the registry's animation patterns are dominated by `parallax` (93%), `cursor-follow` (89%), `spring` (86%), `magnetic` (79%), `stagger` (76%). miris.bar uses *none* of springy/magnetic/parallax; its single animation idea is **blur → focus**, things resolving the way a smell arrives. (It keeps `stagger` and a quiet `underline-draw` only, both serving the diffusion idea.)
5. **`line-illustration` only, zero photography** — refusing the registry's near-universal `photography` (98%). Every image is a single-stroke amber ink drawing in 18th-century *materia medica* style; nine of them, each bleeding off a page edge.
6. **Mono used *against* itself** — `mono` is 94% in the registry, almost always as the "tech/dev" voice. Here `IBM Plex Mono` is the cold chemist's-label counterpoint *underneath* a fragile `Cormorant` serif — the romantic name and its clinical sense-notes, side by side, the way a real perfumer writes.
Chosen seed/style: **aesthetic: wabi-sabi · layout: ma-negative-space · typography: elegant-serif (Cormorant) · palette: honeyed-neutral · patterns: blur-focus (+ stagger, underline-draw) · imagery: line-illustration · motifs: leaf-organic · tone: zen-contemplative**
Avoided per frequency analysis: card-grid (88%), centered (86%), full-bleed (89%), photography (98%), parallax (93%), cursor-follow's springy variants, magnetic (79%), spring (86%), glassmorphism (75%), hand-drawn-cute (96%), warm-glow gradient palettes (96%), CTA/pricing/stat-grid blocks.