# Design Language for gabs.bar

## Aesthetics and Tone

gabs.bar is a **Scandinavian craft cocktail lounge** that exists at the intersection of Nordic restraint and amber nightfall — the kind of place where the bar top is pale ash wood, the ice is hand-carved, and the menu has three items and no explanations. The dominant feeling is **intimate alchemy**: something is being transformed in a glass, and you are allowed to watch, but not to rush it.

The visual world begins with **fading October daylight over a Scandinavian harbor**: the last three minutes before the sun disappears entirely, when every surface goes to burnt sienna and cobalt shadow simultaneously. This is not a warm-and-welcoming brand; it is a warm-and-withholding one. The light makes promises it does not intend to keep.

The 3D rendering aesthetic treats every cocktail component — a halved blood orange, a single ice sphere, a juniper branch, a coupe glass with a shallow amber pour — as a **museum specimen under directional studio light**. Objects float in negative space with sharp ambient occlusion shadows beneath them. Caustic light rays refract through ice and glass. The surface material language is: frosted borosilicate, wet citrus rind, matte concrete, hand-thrown ceramic, raw linen.

Tone-words: **austere, aromatic, dim, considered, honest**. The brand never shouts. Copy is short, deliberate, and uses pauses (em dashes, line breaks, silence) as punctuation.

## Layout Motifs and Structure

The page structure is a **broken-grid editorial composition** — a deliberate rejection of the 12-column symmetry that dominates bar websites. The grid uses a custom 7-column track system (`repeat(7, 1fr)`) where columns 1, 3, 5, and 7 are content columns and 2, 4, 6 are explicit gutter columns that elements are allowed to cross. This gives every section a slightly unstable, off-kilter quality that reads as curated disorder.

**Hero section:** The wordmark `gabs.bar` sits at column 3–6, vertically centered in the upper 40% of the viewport, in very light type on a near-black background (#0d0b09). To its right (column 6–8, bleeding to viewport edge) is a 3D-rendered blood orange half floating at a 12° tilt, its cut face catching a hard key light from upper-left, its shadow pooling at the bottom-right of the composition. These two elements — text and object — do not align to any shared baseline.

**Navigation:** A single horizontal strip of five items (`Menu`, `Reserve`, `Events`, `About`, `Find Us`) set in 11px uppercase tracked at 0.18em, pinned to the very top of the viewport, left-aligned to column 2. No background. No border. Just text floating on darkness.

**Content sections use deliberate asymmetry:**
- Section 1 (The Pour): Full-width cinematic 3D still of a coupe glass being filled, text block confined to columns 1–3, set in a large display weight, overlapping the image by 20px at the left edge.
- Section 2 (Seasonal Menu): A 3-column card grid that breaks the grid — cards at 38rem, 28rem, and 44rem widths respectively, none of them flush with the column grid. Each card floats slightly (transform: translate with unique X/Y offsets).
- Section 3 (The Space): Split — a vertical sliver of a 3D-rendered interior (columns 5–7) paired with a tall text block (columns 1–4) that is taller than the image, causing the text to extend below the image's base and sit in empty space.
- Section 4 (Reserve): A single centered form in a column-spanning container, but the form fields themselves are left-ragged and do not share left edges.

**Scrolling behavior:** Sections do not snap. Transitions between sections use a faint scroll-triggered spring animation where the next section's primary 3D object enters from 20px below its rest position and settles with a spring easing (stiffness 200, damping 28). This creates a physical, weighted quality for every render as it arrives.

**Spacing language:** Sections use asymmetric vertical padding — always more top than bottom, or vice versa, never equal. This gives the page a slight lean, as though it is perpetually mid-breath.

## Typography and Palette

**Typography (Google Fonts only):**

- **Wordmark / Display**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 200 (ExtraLight). The ultra-thin rounded sans at very large scale (clamp(4.5rem, 10vw, 11rem)) reads as delicate and architectural simultaneously. The lowercase `g` in `gabs` has a double-story softness that pairs perfectly with the `.bar` TLD reading as a sentence fragment. Tracking: −0.03em at display sizes.

- **Section Headlines**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 300, at clamp(1.8rem, 3.5vw, 3.2rem). Slightly heavier than the wordmark but still in the whisper register. Used for section openers like "The Pour" and "What's in Season."

- **Body / Menu Copy**: [`Jost`](https://fonts.google.com/specimen/Jost), weight 300, size 15px/1.75 leading. Jost's geometric-but-rounded character spacing gives it a Scandinavian product-brochure quality. Used for ingredient lists, descriptions, and all prose.

- **Labels / Metadata**: [`Jost`](https://fonts.google.com/specimen/Jost), weight 400, uppercase, 10.5px, tracking 0.2em. Used for `RESERVE A TABLE`, `SEASONAL MENU`, `EST. 2019` callouts.

- **Price / Accent Numbers**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 600, size 1.1rem. The slight weight jump for numerals in a menu context creates hierarchy without breaking the typographic family.

**Palette (Sunset-Warm, Scandinavian adaptation):**

| Name | Hex | Use |
|------|-----|-----|
| `Cinder` | `#0d0b09` | Page background, deepest darkness |
| `Char` | `#1c1612` | Card backgrounds, secondary surfaces |
| `Ember` | `#c4601a` | Primary accent — the amber of a highland whisky held to candlelight |
| `Sienna-Smoke` | `#7a3e20` | Secondary warm accent, hover states, gradient midpoints |
| `Ash-Linen` | `#e8e0d4` | Primary text, wordmark, light elements |
| `Dusk-Blush` | `#d4866a` | Soft highlight, 3D render rim-light color, decorative accents |
| `Nordic-Frost` | `#a8b5c2` | Counterpoint cool — ice, glass reflection, frosted elements |
| `Void` | `#06050d` | True black for full-bleed sections, behind hero |

The palette intentionally pairs warm amber-sienna tones with a single cool grey-blue (`Nordic-Frost`) to create the Scandinavian sunset tension — the warmth of fire inside a cold glass.

## Imagery and Motifs

**All primary imagery is 3D-rendered.** No photography. No lifestyle images. No people. The visual world is entirely composed of isolated objects floating in darkness or minimal negative-space environments.

**The 3D render roster (objects that recur across the site):**

1. **Blood Orange Half** — cut face up, hovering at 8–15° tilt, hard key light from upper-left, caustic light ring where the citrus oils refract. Rendered on a near-black backdrop with a soft diffuse shadow directly below.

2. **Coupe Glass with Pour** — a thin-stemmed coupe, 40% filled with an amber-copper liquid with micro-bubble texture at the meniscus. Glass is borosilicate-clear with a faint caustic web cast onto the surface below. The liquid surface has a faint dimple from a recent stir.

3. **Ice Sphere** — a 60mm hand-carved ice sphere with internal cracking planes visible as blue-white refraction lines. Sitting on a matte concrete disc. A single droplet on the surface catches a specular highlight.

4. **Juniper Sprig** — three short branches with dusty blue-grey berries, rendered with fine subsurface scattering on the needles. Laid horizontally, casting a delicate shadow grid.

5. **Hand-thrown Ceramic Coaster** — top-down view, rough rim, glaze break in amber-rust where the clay shows through. Used as a compositional anchor in menu section.

**Layered-depth motif:** All 3D objects use a consistent depth-staging technique. The background is `#0d0b09` with a very subtle radial gradient (center slightly lighter at `#141008`). Objects sit on a virtual surface whose shadow defines the "floor." A thin `box-shadow` inset glow in `Ember` at 4% opacity creates a temperature halo around each render card. Z-axis layering is used for the hero: the wordmark exists on CSS `z-index: 10`, the blood orange render on `z-index: 5`, and a faint gradient overlay fog layer between them at `z-index: 7` with `mix-blend-mode: multiply` and 30% opacity in `#1c1612` creates the sense that the object exists in the same atmospheric space as the text.

**Spring-pattern micro-interactions:**
- On hover, each 3D render card springs to `scale(1.04)` and `translateY(-6px)` with `transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)` (the spring overshoot is built into the cubic-bezier).
- Navigation items underline with a spring-driven line that grows from 0% to 100% width using CSS custom property animation with a slight overshoot timing.
- The reservation form fields have a spring-expand focus state: `outline` transitions from `0px` to `2px` with a brief 105% overshoot at 70ms.

## Prompts for Implementation

**Overall atmosphere:** Build the page as a 3D-staged theatrical environment. The background should never be pure black — always `#0d0b09` with a very faint atmospheric gradient (radial, center 5% lighter). Every section should feel like a different angle of the same candlelit room.

**Hero implementation:** Use CSS Grid with `grid-template-columns: repeat(7, 1fr)` and `column-gap: clamp(12px, 2vw, 24px)`. Place the wordmark at `grid-column: 3 / 6`, vertically at `grid-row: 2 / 3`, with `align-self: end`. Place the blood orange render at `grid-column: 5 / 8`, `grid-row: 1 / 4`, `align-self: center`, with `transform: rotate(12deg)` and `z-index: 5`. The render should overflow the grid container on the right edge (`overflow: visible`).

**3D renders as `<img>` elements:** Each render is a PNG with transparency, sized using `object-fit: contain`, and placed against the dark background. Use `filter: drop-shadow(0 20px 40px rgba(196, 96, 26, 0.15))` — an ember-tinted shadow — to ground objects without using box-shadow on the container.

**Scroll-triggered spring arrivals:** Use `IntersectionObserver` with a threshold of 0.15. When an element enters view, apply `animation: springArrive 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards`. The keyframe goes from `opacity: 0; transform: translateY(18px)` to `opacity: 1; transform: translateY(0)`. Each 3D object in a section staggers by 80ms.

**Menu card broken-grid placement:** Use `position: relative` on the menu section with `overflow: visible`. Place the three menu cards using absolute positioning with fractional column positions that do not align: card-1 at `left: 0`, card-2 at `left: calc(33% + 28px)`, card-3 at `left: calc(58% - 12px)`. Card heights vary: 460px, 390px, 510px. The unequal heights and non-grid-aligned lefts create the broken-grid feel within a single section.

**Color application:** Dark surfaces (`Cinder`, `Char`) dominate at 75% of the visual field. `Ember` appears in small quantities — hover states, active form fields, the liquid in the coupe render, a thin horizontal rule between sections. `Ash-Linen` is the sole text color; never use white (#ffffff). `Nordic-Frost` appears only in the ice sphere render and as the color of the glass edges in the coupe render — it is kept rare so it reads as genuinely cold.

**Typography implementation:** Load `Nunito:wght@200;300;600` and `Jost:wght@300;400` from Google Fonts. Set the base font to Jost 300. Display sizes use Nunito 200 with negative tracking; never use Nunito at weights above 600 or sizes below 1.4rem (it loses its character at small sizes).

**Avoid:** CTA-heavy layouts, pricing blocks with stripe grids, hamburger menus, hero carousels, full-bleed photography, white backgrounds, centered hero stacks with a single button, stat counters, testimonial carousels, chat widgets.

## Uniqueness Notes

**Seed:** aesthetic: scandinavian, layout: broken-grid, typography: rounded-sans, palette: sunset-warm, patterns: spring, imagery: 3d-render, motifs: layered-depth, tone: mysterious-moody

**3 differentiators from other designs in this corpus:**

1. **Sunset-warm palette applied to near-darkness** — `sunset-warm` (0% in corpus) is used here not as a bright warm colorway but as ember-in-darkness: the warm tones (`Ember #c4601a`, `Dusk-Blush #d4866a`) exist at very low luminance ratios against the deep `Cinder #0d0b09` background. This is the opposite of how warm palettes typically manifest (light backgrounds, warm foregrounds). The effect is candlelight-in-a-cellar, not Californian-sunset.

2. **Broken-grid without diagonal slices** — `broken-grid` (5% in corpus) is typically implemented as diagonal section cuts or overlapping cards on a visible 12-column grid. Here, the broken-grid is invisible-track-based: a 7-column grid where the rule is broken by intentional column-span overflow and non-integer column positioning. The disorder is structural, not decorative.

3. **3D renders replacing photography entirely** — unlike the 85% of corpus sites that use photography, gabs.bar uses exclusively isolated 3D renders of cocktail components (no people, no environments, no lifestyle). The renders are treated as museum specimens — floating objects under controlled studio light — rather than product photography. This creates an alchemical, scientific detachment that contradicts the warmth of the bar setting and heightens the mysterious-moody tone.

**Patterns avoided due to frequency:**
- `centered` (91% corpus) — avoided; asymmetric broken-grid used instead
- `asymmetric` (48% corpus) — used as structural logic, not as a headline differentiator
- `spring` (42% corpus) — used with restraint; spring animations are micro-scale only (hover transforms, focus states), not page-level transitions
<!-- DESIGN STAMP
  timestamp: 2026-05-07T17:36:00
  domain: gabs.bar
  seed: unspecified
  aesthetic: gabs.bar is a **Scandinavian craft cocktail lounge** that exists at the intersec...
  content_hash: de18b7a24d23
-->