# Design Language for miris.bar ## Aesthetics and Tone miris.bar is a bar in the literal sense — not the "cocktail experience" category, not a curated tasting menu. It is a place where someone sits down with a glass of burgundy and does not explain themselves. The aesthetic is **raw-authentic minimalism**: the kind of restraint that comes not from having nothing to say, but from choosing silence over performance. Think of a Cy Twombly canvas — mostly empty, the mark itself doing all the work. The mood is **late afternoon in an old European city**: warm cream plaster walls, the slight imperfection of a hand-lettered sign, the dark stain where a glass was set down too many times. Nothing is pristine. The cream has a memory. The burgundy is not decorative — it is the actual color of the thing you came here for. **Ma** (間) is the operative concept: the Japanese idea of negative space as active presence. The design does not fill the screen. It leaves deliberate absences that the eye reads as weight. Each piece of text floats in its own thermal of white space. Each decorative element — a thin ripple, a drifting fragment — exists because removing it would make the surrounding emptiness feel unintentional rather than chosen. The tone is **confessional without being confessional**: the bar does not announce itself. It does not say "we are warm and welcoming." It simply is a room, and the room speaks. Typography carries the entire emotional load. The serif letters have been through things. ## Layout Motifs and Structure The layout is **ma-negative-space** — structured around what is deliberately absent rather than what is present. **The core spatial logic:** - Viewport height is treated as sacred. No section ever rushes to fill it. The first screen shows one thing: the bar's name, in a serif at roughly `clamp(5rem, 10vw, 9rem)`, centered on the vertical axis but shifted slightly — 52% from the top, not 50% — so it sits with a faint gravitational pull downward, as if settling. - The page is one long vertical scroll, but the rhythm is extremely irregular: long empty stretches punctuated by a single line of text or a single visual fragment. The emptiness is not padding — it is content. - **No navigation bar.** A single minimalist anchor (`·`) at the lower-right corner of the first screen expands into a four-item list on hover: the only concession to navigation. It disappears when not needed. - Content lives in a single narrow column, `min(640px, 90vw)`, horizontally centered. But the column itself is not a container — elements occasionally break out of it: a thin horizontal rule bleeds to 100vw, a floating motif drifts into the margin. - **Section rhythm:** `[void] → [name] → [void] → [first fragment] → [long void] → [second fragment] → [floating element intrudes] → [third fragment] → [long void] → [fourth fragment] → [signature]`. Seven content beats across a page that reads as mostly air. - The **floating elements** — small torn-paper fragments, stray letterforms, a single ampersand that has wandered off — exist at `position: absolute` or fixed, at very low opacity (0.06–0.12), so they register subliminally. They are not decorations. They are the room's residue. **Desktop (≥ 1024px):** The narrow column + left/right voids give the sense of reading a letter someone left on a marble countertop. The floaters inhabit the void columns. **Mobile (< 768px):** Column expands to 92vw. The floaters pull back to 0.04 opacity. The ma is preserved but compressed. ## Typography and Palette **Typography (all verified Google Fonts):** - **Display / Wordmark:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300, italic. This is the primary voice of the site — a serif revival with extreme contrast between thick and thin strokes. The hairlines are almost invisible; the thick strokes are almost black. It looks like something printed in 1880 and left in a drawer. - `miris.bar` set at `clamp(4.5rem, 9vw, 8.5rem)`, tracked at `-0.03em`, italic. No punctuation cleaned up — the period in `.bar` is kept. - **Body / Fragment text:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond), weight 400, roman and italic. Set at `1.125rem` / `1.9` line-height. All body text is sparse — the longest block anywhere on the page is six lines. EB Garamond has a rawer texture than Cormorant at body sizes; it feels like a manuscript page, not a typeset book. - **Micro / Captions / Navigation:** [`Jost`](https://fonts.google.com/specimen/Jost), weight 300, all-caps, tracked at `0.18em`, `0.7rem`. Used only for the navigation anchor, the footer year, and any sub-labels. Its geometric neutrality disappears against the Garamond — which is exactly the point. **Palette — burgundy-cream with raw-authentic bias:** | Token | Hex | Usage | |---|---|---| | `--burgundy` | `#6B1A2A` | Primary accent: wordmark on hover, rule lines, the ripple origin point | | `--burgundy-deep` | `#4A0F1B` | Drop shadows, the floating letterform motifs | | `--burgundy-muted` | `#8D3B4C` | Secondary text, captions in Jost | | `--cream` | `#F5EFE0` | Page background — warm, not white. Has slight yellow aging | | `--cream-dark` | `#E8DFC9` | Subtle texture layer, the aged-paper feel behind text blocks | | `--ink` | `#1C1108` | Body text — not black. A very dark warm brown, the color of iron gall ink | | `--void` | `#FAF6EE` | The negative space sections — marginally lighter than cream, creating a barely perceptible zoning | **Color behavior:** No color is used decoratively. The burgundy appears only where something has been touched — the cursor hover state, the rule that marks a section break, the origin dot of a ripple. The cream-to-void difference is perceptible only when scrolling slowly, like the grain of paper becoming visible as the light changes. ## Imagery and Motifs **Imagery is mixed-media:** no single visual register. The site fuses three modes, each used once or twice: 1. **Grain-treated photographic texture** — not a photograph of a place, but a scanned patch of cream linen or aged paper, used as a very low-opacity background texture (`opacity: 0.06`, `mix-blend-mode: multiply`) beneath the body text sections. The texture is not decorative; it gives the cream background a material memory it would otherwise lack. 2. **Hand-drawn SVG fragments** — two or three irregular marks that look like someone traced the rim of a glass on paper, or drew a quick bracket around a thought. These are inline SVG, single stroke (`#6B1A2A` at 60% opacity, `stroke-width: 0.8px`), intentionally imperfect with slight path wobble. They float at fixed positions relative to the viewport, drifting very slowly (`transform: translateY` oscillating over 18s, amplitude 8px) — the floating-elements motif. 3. **A single typographic splash** — one moment in the scroll where a single letter (the `m` from `miris`, set in Cormorant Garamond at `28vw`, weight 300, italic, `color: #6B1A2A`, `opacity: 0.07`) bleeds behind the content column, completely non-interactive, as if a previous draft of the page is showing through. This is the mixed-media collision: type as image. **The ripple pattern:** The ripple is used exactly once, with restraint. When the page finishes loading (400ms delay), a single concentric ripple animates from a point at the lower-third of the first screen — three expanding circles, `stroke: #6B1A2A`, `stroke-width: 0.6px`, starting at `r: 4px` and expanding to `r: 80px`, each offset by 200ms, fading from `opacity: 0.5` to `opacity: 0`. Duration 1.8s, no repeat. The ripple does not return. It happened once, like a drop falling into still water before you arrived. **Floating elements:** Three elements at all times in the composition: - A stray italic lowercase `ı` (dotless i) in Cormorant Garamond, `4rem`, `opacity: 0.06`, positioned in the left margin at 30% viewport height, oscillating at 22s. - An irregular hand-drawn curve (SVG path), right margin, 60% viewport height, oscillating at 18s with a different phase. - A tiny `×` in Jost light, `1.2rem`, `opacity: 0.08`, positioned near the lower-left, oscillating at 26s. These are always visible but never consciously noticed on first pass. On second visit, they feel like the room remembers you. ## Prompts for Implementation **The story.** A visitor opens the site the way you open a door to a bar you've been meaning to visit. Nothing happens at first — the name is simply there, in old type, on a warm page. The room is mostly empty. Somewhere in the first few seconds a single ripple appears and disappears. You scroll. What you find scrolling is not a menu, not a schedule, not a price list. You find four fragments — each one a single sentence or two — that establish what this place is. They float in the page the way thoughts float in a quiet room: - **Fragment 1** (roughly 35vh into the scroll): a sentence about the bar — not a tagline, not a slogan. Something that sounds like it was written by someone who has been sitting at the bar for an hour. In italic EB Garamond. Six words maximum. - **Fragment 2** (roughly 70vh): a place, a time, something that locates the bar in a specific geography without naming the city. Eight words maximum. - **Fragment 3** (roughly 110vh): the hours, but rendered as a phrase, not a list. "Wednesday through Sunday. The door stays open past dark." Set in roman EB Garamond, slightly smaller (`1rem`). - **Fragment 4** (roughly 150vh): a single line that functions as an address — but it is written as a direction, not an address. Followed by a tiny Jost-light link that says nothing except `→`. **After the last fragment:** long void. Then the footer — a single line in Jost 300 all-caps: the domain, the year, and nothing else. Centered. The page is over. **Animation principles:** - **Scroll-triggered reveals:** Each fragment fades in and rises `12px` as it enters the viewport. `transition: opacity 0.9s ease, transform 0.9s ease`. No bounce, no spring — a slow resolution, like something becoming visible in low light. - **The ripple:** CSS/SVG animation only. No library. Three `` elements in an `` positioned absolute over the first screen, animated with `@keyframes`. Fires once on `DOMContentLoaded` after 400ms timeout. - **Floating elements:** CSS `@keyframes` with `transform: translateY(Npx)`, using `animation-timing-function: ease-in-out`, extremely long duration (18s–26s), `animation-direction: alternate`, `animation-iteration-count: infinite`. They breathe, they do not bounce. - **Hover states:** Only the navigation anchor and the `→` address link respond to hover. The nav anchor expands with `max-height` transition (0.3s ease). The `→` link shifts its color from `--burgundy-muted` to `--burgundy` and moves `3px` to the right. Nothing else in the page responds to hover. - **Cursor:** Default. No custom cursor. The visitor is a guest; the room does not perform for them. - **No hero CTA. No email capture. No pricing. No stat grid. No social proof section.** Those are other rooms. **Implementation bias:** The page weight must stay under 200KB uncompressed (no external images, SVG inlined, fonts loaded from Google via ``). The experience is the typography and the space. A slow connection should still deliver the full emotional content because the entire visual language is CSS and text. ## Uniqueness Notes **Differentiators from the existing corpus:** 1. **Ripple as a one-time event rather than an interactive trigger.** The frequency report shows `ripple` used at 3% and always as a hover/click response pattern — water ripples when you touch it. miris.bar inverts this: the ripple happens once, unprompted, before the visitor has touched anything. It is the room acknowledging your arrival, not your cursor prompting a response. After it fades, it does not return. This is the only site in the corpus where the primary interaction pattern fires exactly once and never repeats. 2. **Ma-negative-space used as the actual content medium, not as breathing room between content.** The frequency report shows `ma-negative-space` at 3%, and in those cases it is typically a design modifier ("the layout breathes"). Here, the negative space *is* the information — the proportion of emptiness to text communicates the character of the bar more precisely than any tagline could. A page that is 80% empty cream says something a full page cannot. 3. **Burgundy-cream palette deployed without warmth-cliché.** The frequency report shows `deep-burgundy` and `burgundy-cream` both at low frequency (5% and 3%), and the few uses lean into "rich, indulgent, premium." miris.bar uses the same colors to communicate something rawer: the burgundy is not luxury, it is the actual color of wine, and the cream is not elegant, it is aged. The emotional register is not "premium bar" — it is "bar that has been here longer than you have been alive." 4. **Mixed-media typography-as-image technique (the ghost letter).** The oversized, nearly-transparent letterform bleeding behind body content is not found in the current corpus. It is not a watermark, not a decorative initial, not a background element — it is a fragment of the page's own text surfacing as image, at a scale that makes it unreadable as text and readable only as texture. This is the specific form of mixed-media that this seed calls for. 5. **Zero interactive surface area except two elements.** The corpus uniformly features hover states, card lifts, button transforms, and micro-interactions throughout. miris.bar has exactly two interactive elements: the navigation anchor and the address link. The rest of the page is inert. This is not minimalism-as-restraint — it is a deliberate argument about what kind of place this is. **Planned seed:** aesthetic: minimalist, layout: ma-negative-space, typography: serif-revival, palette: burgundy-cream, patterns: ripple, imagery: mixed-media, motifs: floating-elements, tone: raw-authentic **Patterns avoided per frequency analysis:** - `editorial` (51% — overused; replaced by single-column ma-negative-space) - `asymmetric` (42% — overused; replaced by deceptively centered composition with intentional off-center displacement) - `monochrome` (13% — overused; replaced by burgundy-cream dualism) - `hover-lift` and card-based micro-interactions (corpus default; none used here)