# Design Language for gabs.bar

## Aesthetics and Tone

gabs.bar is a quiet, dimly lit speakeasy rendered as a website -- the kind of place tucked behind an unmarked door in a city's older district, where the bartender remembers your name but never asks for it. The visual direction is **dark-mode immersive-scroll cinema** filtered through the warm chemical bath of a 1972 Ektachrome slide that has aged in a shoebox for fifty years. Every surface carries the patina of long evenings: the soft halation of incandescent bulbs, the sepia bloom in highlights, the cigar-smoke gray that pools in shadows, the way condensation on a copper mug catches the rim of a tungsten pendant.

The mood is **grounded-earthy** -- not rustic, not farmhouse, but the earthiness of a poured-concrete back-bar shelf, a slab of walnut worn smooth by elbows, the green oxidation on a brass tap handle. The site does not try to dazzle. It tries to invite. It is the difference between a nightclub and a back booth at midnight: where the latter trusts the visitor to lean in, lower their voice, and read carefully. There is no urgency, no gamification, no announcements. The cursor does not chase; it lingers.

Inspirations: the long takes of Wong Kar-wai's *In the Mood for Love* (jukebox light, slow translations, regrets in slow motion); the warm-grain photographs of Saul Leiter shot through rain-fogged windows; hand-lettered cocktail menus from Milk & Honey circa 2003; the sepia portraits in the back stairwell of Antoine's in New Orleans; Eric Rohmer's bistro scenes; the typography of mid-century jazz LP liner notes (Reid Miles for Blue Note, but darkened by an octave); the worn corduroy jacket on the regular who has been showing up at the same stool since 1989.

The tone is unhurried, literate, slightly conspiratorial. It speaks the way a good bartender speaks: rarely, well, and only when asked.

## Layout Motifs and Structure

The structural principle is **immersive-scroll as a long evening**: the visitor enters at dusk and the site progresses through the hours of a single night at the bar. There is no navigation bar in the conventional sense. Scrolling *is* the passage of time. The viewport behaves like a 35mm film frame -- always full-bleed, always a single tableau, never broken into card grids or bento boxes. Each "scene" occupies one or two viewport heights and dissolves into the next via long crossfades rather than abrupt cuts.

**Primary Structure (the seven hours):**

1. **The Threshold (6:47 PM, blue hour)** -- A single full-bleed frame, almost monochrome violet-gray, showing the bokeh-blurred suggestion of a doorway with a sodium streetlight behind. The wordmark **gabs.** sits in the lower-left third in a soft serif at 78pt, with a tiny period that is the only sharp focal point in the entire frame. As the visitor begins to scroll, the door slowly resolves into focus over 1200ms.

2. **The Walk-In (7:14 PM)** -- Camera moves "through" the door via a parallax push. The viewport darkens by ~12%, contrast lowers slightly, and the warm interior color cast (#3a2618 amber pooling at edges) seeps in from the corners as the scene transitions.

3. **The Bar Top (8:32 PM)** -- The longest scene. A horizontal slab fills the lower 38% of the viewport, rendered as a CSS-painted walnut grain (procedural, no images). On this slab, copy appears in serif paragraphs, set in narrow column widths (44ch maximum) with very loose leading (1.85). Behind, in the upper 62%, a deep bokeh field of out-of-focus warm lights drifts at 0.22x parallax. This is where the bar's "story" or "philosophy" lives -- one or two paragraphs of long-form prose, hand-set, no headings.

4. **The Counter (9:48 PM)** -- A vertical, single-column listing of the menu (or whatever the bar offers -- cocktails, hours, the regulars' birthdays) presented as a typewritten ledger in a slim serif italic. Numbers (vintages, ABV, prices) are **counter-animated**: when the section enters the viewport, every numeric digit rapidly cycles through 0-9 like a manual flip-counter on an old cash register, settling on its true value after 1.4 seconds. This is the only "motion" pattern in the site that draws attention to itself, and it is deliberately mechanical, not slick.

5. **The Back Booth (11:11 PM)** -- An asymmetric tableau where the page narrows to a single off-center column on the right third, with the left two-thirds given over to a soft sepia-gradient field with a single drifting bokeh disc that crosses the viewport over 22 seconds. The text in the right column is set in a smaller, more intimate size (15px) -- a personal note, an "about" passage, a half-confession.

6. **The Last Round (12:54 AM)** -- The viewport reaches its darkest point. Color saturation drops to 40%. A single line of text, centered, very small (13px), italicized: a closing quote or the bar's hours. Below it, a tarnished brass divider (drawn in SVG with hand-irregular path commands, never a clean line).

7. **The Walk Home (1:38 AM)** -- The viewport fades almost entirely to a near-black sepia. Bokeh dots float upward and out of frame slowly, like the afterimage of streetlights once the visitor has left. Contact information (an email, a street address) appears in tiny mono-italic type at the very bottom, almost a footnote, never a CTA button.

**Spatial Rules:**
- No card grids, no bento boxes, no stat-counters as decoration, no pricing tables, no "Hero / Features / Testimonials / Pricing / Footer" rhythm.
- All sections are full-bleed and tall (≥100vh, often 140vh).
- Whitespace within scenes is asymmetric and generous -- text never centers on the optical axis; it always sits one-third or two-thirds across, creating cinematic off-balance.
- Vertical rhythm uses a 24px baseline, but with deliberate "off-grid" breaks where copy is allowed to fall on the half-line for visual breath.
- The page itself feels deeper than wide: total scroll depth ~9 viewports, so the experience runs 18-22 seconds of slow scrolling minimum.

## Typography and Palette

**Typography (Google Fonts, all):**

- **Display / Wordmark**: **"Fraunces"** (variable) at SOFT 100 / WONK 0 / weight 400, optical size 144. Set at clamp(4rem, 11vw, 9rem) with letter-spacing -0.022em. Used exclusively for the **gabs.** wordmark and the chapter timestamps ("6:47 PM", "8:32 PM"). The variable axes are tuned for warmth -- soft terminals, slightly humanist -- giving the wordmark a hand-cut feel like a sign painted on a tavern window.

- **Headings (rare)**: **"DM Serif Display"** weight 400, italic. Used only for the seven scene titles ("The Threshold", "The Bar Top", etc.) at 28-32px with letter-spacing 0.04em and the ampersand stylized via `font-feature-settings: "ss01"`. These titles sit in the upper-left of each scene as quiet chapter marks, never as billboard headers.

- **Body Prose**: **"Lora"** (variable) weight 420, italic optional, at 17px / line-height 1.85. This is the workhorse for all paragraph copy. Lora's slight calligraphic stress reads like a well-worn paperback in low light. Optical size 144 at larger sizes; 16 at smaller.

- **Ledger / Menu**: **"IBM Plex Serif"** weight 400 italic, at 15px with tabular-nums enabled (`font-variant-numeric: tabular-nums`) so the counter-animated digits do not jitter their layout during animation. Used for the menu/hours/dates section.

- **Footnote / Address**: **"IBM Plex Mono"** weight 400 italic at 12px, letter-spacing 0.02em. Used only for the closing footer credentials -- email, street, copyright year. Serves as the only sans-relative typographic accent and provides quiet contrast to the pervasive serif-revival voice.

**No sans-serif body type anywhere.** The entire site is set in serifs, deliberately, to evoke the **serif-revival** seed -- specifically the warm humanist-old-style end of revival, not the geometric or transitional. This is unusual on the modern web, and that is the point.

**Palette (sepia-nostalgic, dark-mode):**

- `#15100b` -- **Velvet Midnight**. The deepest base. Used for the page background after the threshold. Not pure black -- always with a brown undertone, as if a black-painted wall has yellowed.
- `#231811` -- **Leather Booth**. Slightly elevated surfaces, the bar slab, footer.
- `#3a2618` -- **Amber Pool**. Halation glow at corners, the warm wash of incandescent light bleeding into the frame.
- `#7a4f2d` -- **Burnished Copper**. The accent for chapter timestamps and the brass divider in scene 6.
- `#b8895a` -- **Tobacco Highlight**. Counter-animated number color and italic emphasis.
- `#d9b88c` -- **Aged Vellum**. Primary body text color (NOT white) -- gives a sepia-paper warmth to all reading surfaces.
- `#e8d5b0` -- **Candlelight**. The wordmark color and the brightest highlights only.
- `#5a3e2b` -- **Walnut Grain**. The procedural wood color of the bar slab.
- `#8a6b4a` -- **Faded Photograph**. Used in low-opacity gradients and bokeh disc fills.

The contrast ratio of body text (#d9b88c on #15100b) is intentionally lower than typical -- around 6.7:1 -- because perfect contrast would betray the dim-bar metaphor. The site is meant to feel like reading by candlelight: legible, but requiring you to lean in.

## Imagery and Motifs

**No photographs. No stock imagery. No illustrations of objects.** The entire visual content of the site is built from three motif primitives that compound:

**1. Bokeh Background (the signature element):**
A field of out-of-focus circular light sources, rendered entirely in CSS using `radial-gradient` and `box-shadow` on absolutely-positioned div particles. Each "bokeh disc" is 60-180px in diameter, with a soft `radial-gradient(circle, rgba(232,213,176,0.42) 0%, rgba(184,137,90,0.22) 35%, transparent 72%)`. Discs are layered at three depth planes:

- **Far plane (0.18x parallax, 6-8 discs)**: largest, most blurred (CSS `filter: blur(28px)`), warm amber tones. These drift horizontally over 30-60 seconds via `@keyframes drift`.
- **Mid plane (0.42x parallax, 12-16 discs)**: medium size, blur 14px, mixed amber and pale candlelight. These pulse gently in opacity (0.6 → 0.85 → 0.6 over 8s).
- **Near plane (0.78x parallax, 4-6 discs)**: smallest but sharpest (blur 4px), brightest, suggesting closer light sources or the rim of a glass catching light. These have very subtle scale wobble (1.0 → 1.04 → 1.0).

The bokeh field is the constant background presence throughout the site; it is the visual equivalent of a continuous warm hum.

**2. Vintage Patina Overlays:**
- **Film grain**: An SVG `<feTurbulence>` filter generating a fine monochrome noise (baseFrequency 0.9), composited at `mix-blend-mode: overlay` and 11% opacity, animated by shifting the seed every 80ms to produce a 12fps "running grain" reminiscent of projected celluloid. This grain layer sits above all content.
- **Chromatic aberration on type**: Headings receive a 1.5px horizontal split into cyan (-1.5px, opacity 0.18) and red (+1.5px, opacity 0.18) ghost layers. This is the ghost of a misregistered offset-printed menu card.
- **Light leaks**: At three points in the scroll (scenes 2, 4, 7), a soft warm gradient sweep travels across the viewport from one corner -- a `linear-gradient` overlay with `mix-blend-mode: screen` at low opacity, animated to translate diagonally over 3.2s. This evokes the orange flare on a piece of expired film.
- **Vignette**: All scenes have a soft radial vignette darkening the corners by ~22%, applied via a fixed-position pseudo-element. It is heavier in scenes 1, 6, 7.

**3. Hand-Drawn Brass Filigree (sparingly):**
A single decorative motif -- a small ornamental fleuron in the style of a Victorian printer's mark, drawn as inline SVG with deliberately irregular path commands (each curve has slight asymmetry, as if hand-cut). It appears exactly **three** times in the entire site: once at the threshold under the wordmark, once as the divider in scene 6, once at the very bottom of the footer. This scarcity makes each appearance meaningful. The fleuron animates on scroll-into-view via SVG `stroke-dasharray` path-draw, but slowly (1.8s, ease-out-quart), as if being drawn by a hand inking a menu card.

**Cursor treatment:**
The cursor leaves a trail of three small bokeh discs that fade out over 800ms, suggesting the visitor's own light moving through the dim room. The discs are very small (8-14px) and very low-opacity (max 0.45). This is the only "interactive" embellishment.

## Prompts for Implementation

**Narrative scaffolding (HTML structure):**
Each of the seven scenes is a `<section class="scene scene--N">` with a fixed minimum height of 100vh (140vh for scenes 3 and 5). Use semantic `<article>` for the bar's prose, `<dl>` for the ledger/menu (definition lists pair beautifully with bar items), `<figure>` only for the SVG fleuron with `<figcaption>` providing the timestamp. No `<button>` elements anywhere except the email link, which should be a styled `<a>` not a button.

**Scroll choreography:**
- Use `IntersectionObserver` (rootMargin: '-15% 0px -15% 0px', threshold: [0, 0.25, 0.5, 0.75, 1]) to drive scene transitions. Do NOT use `scroll-snap` -- the user must control the pace.
- Crossfades between scenes: as scene N reaches 75% visibility, scene N+1 begins to fade in over the next viewport. Both scenes are visible simultaneously for ~25vh of overlap, creating a dissolve rather than a cut.
- Parallax: drive bokeh planes via `transform: translateY(calc(var(--scroll) * var(--depth)))` updated in a `requestAnimationFrame` loop, throttled to 60fps. Use `will-change: transform` on parallax layers and remove it once they leave the viewport.

**Counter-animate (the only attention-drawing motion):**
When the menu/ledger section enters the viewport, every digit in the prices, vintages, and ABV percentages animates from a random 0-9 sequence to its target value. Implementation: each digit is wrapped in a `<span class="digit" data-target="7">` and on `IntersectionObserver` entry, JS replaces the textContent every 60ms with `Math.floor(Math.random()*10)` for a duration of 1100-1500ms (vary per digit ±15% so they don't settle in unison -- they settle in a soft cascade left-to-right), then locks to the target. The digits' baseline never shifts because of `font-variant-numeric: tabular-nums`.

**Bokeh implementation:**
Generate the bokeh field procedurally in JS at page load: 24-32 div elements, randomly positioned within each plane's bounds, with random size jitter (±25%), random hue shift (±8 degrees within the warm range), random animation delay (0-4s) so the breathing is desynchronized. Each disc receives `position: absolute; border-radius: 50%; pointer-events: none; filter: blur(Xpx);`. The container is `position: fixed; inset: 0; z-index: -1;` so the bokeh field is permanent across all scrolls.

**Long-form prose prompts:**
The prose is the heart of the site. It must be written like a journal entry, not marketing copy. Phrases should be specific and physical (the temperature of a glass, the weight of a particular vintage book on the shelf, the way the regular at stool 4 always orders the same Old Fashioned without speaking). Avoid: superlatives, "we believe", "our mission", any verb of conversion ("sign up", "join", "subscribe"), exclamation points. Prefer: long sentences with clauses that turn back on themselves, occasional sentence fragments, and the present tense.

**What this site is NOT:**
- Not a CTA-heavy landing page. There is no "Reserve a Table" button, no "Subscribe to our Newsletter" form, no "Visit Our Other Locations" carousel.
- Not a stat-grid. No "Established 1987 / 200+ Spirits / 12 Awards" number block.
- Not a pricing block. The menu items have prices because that is what menus do, but there is no comparison table, no tier selector, no "most popular" badge.
- Not a testimonials section. No customer quotes, no five-star ratings, no logo wall of "as featured in".
- Not a feature grid. No "What We Offer" with three icons in three columns.

**Background process during slow scroll:**
After 12 seconds of inactivity at any scene, the bokeh discs slowly intensify their drift by 1.4x and a single low cello note (250Hz sine wave at -48dB, optional, only with explicit user gesture) plays for 3 seconds. This is a "the bar is still here, take your time" cue.

## Uniqueness Notes

**Differentiators from other designs in the collection:**

1. **Time-of-night as scroll spine.** No other design in the corpus uses the literal hours of an evening as its structural progression. The seven timestamps (6:47 PM through 1:38 AM) are not decorative chapter labels -- they are the load-bearing skeleton. The visitor scrolls through a night the way one lives through it: gradually, with the light dimming, the prose softening, the bokeh thickening. The aesthetic is dictated by *time of day*, not by section type. This grounds the immersive-scroll seed in a specific narrative metaphor (a single evening) rather than the more common abstractions (a journey, a story, a deep-dive).

2. **Serif-only typographic discipline.** With sans-serif body type used in roughly 62% of the existing 200 designs (geometric-sans + humanist + condensed combined), gabs.bar takes the contrarian position of using *only* serifs -- including the monospace footer, which is a serif-mono (IBM Plex Mono Italic). The serif-revival seed is at 2% in the corpus, and even those rarely commit to serif-only across all type roles. This produces a typographic atmosphere that feels like reading a leather-bound journal at a candlelit table.

3. **Bokeh-background as constant ambient layer (0% in corpus).** The bokeh-background imagery seed registers at 0% in the existing 200 designs. gabs.bar makes it the *defining* visual element -- not a decorative accent in one section, but a continuous fixed-position field that breathes through the entire scroll. The three-plane parallax bokeh system is rendered procedurally in CSS/JS with no images, which is rare in itself for a "photographic-feeling" site.

4. **Counter-animate used ONLY on a vintage cash-register metaphor.** Counter-animate appears in 6% of corpus designs, almost always for "stat counters" (years, customers, projects). gabs.bar deliberately rejects this usage: there are no stat-grids. The only counter-animation is on menu prices and vintages, framed as the mechanical flip of a 1950s cash register. This re-contextualizes a common pattern as a specifically vintage motif rather than a generic motion technique.

5. **Lower contrast as deliberate atmospheric choice.** Where most dark-mode designs maximize contrast for legibility, gabs.bar uses a body-on-background ratio of ~6.7:1 (still readable, but lower than the pristine 14-21:1 of typical dark themes). This is intentional: the dim-bar metaphor requires a slight visual effort, the way reading a menu by candlelight requires leaning in. Contrast is treated as an atmospheric variable, not a maximization target.

6. **No CTA, no conversion, no funnel.** The site has zero conversion mechanics. No "reserve" button, no email capture form, no "get directions" map widget, no booking integration. The only interactive element besides scrolling is a quietly-styled email link in the footer footnote. This is unusual even among editorial/immersive designs in the corpus, most of which include at least one conversion entry point.

**Chosen seed (from assignment):** aesthetic: dark-mode, layout: immersive-scroll, typography: serif-revival, palette: sepia-nostalgic, patterns: counter-animate, imagery: bokeh-background, motifs: vintage, tone: grounded-earthy

**Avoided patterns (from frequency analysis):**
- Avoided **card-grid (38%)** -- replaced with single-column full-bleed scenes.
- Avoided **photography (38%)** -- replaced with procedural bokeh and CSS-painted walnut.
- Avoided **mono typography (37%)** -- used only in a 12px footnote, never as primary type.
- Avoided **corporate aesthetic (37%)** and **gradient palette (39%)** -- replaced with grounded-earthy sepia and discrete color stops.
- Avoided **scroll-triggered (37%)** in its overused form -- transitions are crossfade dissolves, not snap-reveals.
- Avoided **mysterious-moody tone (21%)** despite the dark setting -- the tone is *grounded-earthy*, warm and lived-in, not gothic or enigmatic.
- Avoided **parallax (26%)** as a section reveal -- used only as the slow drift of background bokeh planes, never to reveal foreground content dramatically.
<!-- DESIGN STAMP
  timestamp: 2026-05-01T15:43:20
  domain: gabs.bar
  seed: in a specific narrative metaphor
  aesthetic: gabs.bar is a quiet, dimly lit speakeasy rendered as a website -- the kind of pl...
  content_hash: a6729b8dbd7f
-->