# Design Language for quirk.bar

## Aesthetics and Tone

quirk.bar is a bar that doesn't apologize for itself. The name is the promise: something crooked, unexpected, slightly off-center in the best possible way. The visual language pulls from street-style editorial photography — the kind shot on a film camera, printed oversized, wheat-pasted to a graffiti wall, and lit by a single tungsten bulb. This is not a cocktail lounge with velvet ropes. It is a place where the drinks taste like someone's grandmother's recipe reinterpreted by a 28-year-old with a botany obsession and too many tattoos.

The aesthetic is **bold-confident street meets lush botanical overgrowth**. Imagine a zine photographer who spent three months documenting Tokyo's Golden Gai district, came home with a suitcase full of film rolls, and also has an elaborate pressed-flower collection. The walls of quirk.bar are covered in hand-illustrated botanical prints — but they're slightly too large, slightly too crowded, bleeding past their frames. The typography crashes into them without apology.

Mood: raw, alive, proud of its weirdness. Not ironic. Genuinely invested. The honeyed amber palette is warm without being cozy — the warmth of a back-lit bottle of aged spirits, not a fireplace.

Tone: bold declarations, short sentences, zero hedging. The site never asks whether you'll enjoy yourself. It tells you.

## Layout Motifs and Structure

The page is a **full-bleed vertical narrative** — five viewport-height panels, each one a different compositional rule broken on purpose. The grid is an 11-column asymmetric system (5-column text zone, 6-column image zone, no gutter) that deliberately shifts axis on each panel, so the reading direction rotates: left-heavy → right-heavy → center exploding outward → diagonal slash → full-bleed type.

**Panel 1 — Collision Entry.** The hero is a full-viewport photograph of botanical illustration detail (ink on paper, macro close-up of a stamens and petals rendered in honeyed amber and forest black). Over this, the wordmark "QUIRK" is set at 22vw, weight 900, anchored to the bottom-left margin, baseline just above the fold-line. The `.bar` suffix is set at 6vw, weight 400, sitting *on top of* the botanical illustration as if stamped there.

**Panel 2 — Offset Text Block.** A single column of body text begins at the 6-column mark (right of center), 480px wide, max. The left 5 columns are occupied by a single large custom illustration fragment — a botanically rendered bee landing on a thistle — with visible ink cross-hatching and no background. The text column and illustration overlap by exactly 40px, the illustration overlapping the text from the left.

**Panel 3 — Slash Divider.** A full-width diagonal rule — a 4px line at 15 degrees, `#B5732A` amber — cuts the panel in half. Above the diagonal: white type on black. Below: black type on `#F0E6C8` parchment. This is the "what we pour" panel, rendered as a list without prices, without bullets, with generous leading.

**Panel 4 — Botanical Bleed.** A custom botanical illustration — full-page, ink on a cream field — fills the entire viewport. Over it, in a stencil-cut negative space (CSS `mix-blend-mode: multiply`), the hours and address appear. The illustration breathes: slow parallax at 0.2× scroll ratio, the petals and leaves tracking upward as you scroll through.

**Panel 5 — Closing Type Storm.** Black ground. A single large typographic statement at 14vw — a one-line manifesto — set in Display weight, tracked at +0.04em. Below it, one more line at 4vw, weight 300. No button. No form. Just a location rendered in type and a map pin SVG drawn in the botanical illustration style.

**Micro-interactions woven throughout:**
- Botanical illustration elements react to cursor proximity: leaves tilt 3–5° toward the cursor via CSS `transform: rotate()` driven by `mousemove` distance calculation.
- Each panel transition has a 0.4s fade-in of the botanical overlay layer, triggered by IntersectionObserver at 30% threshold.
- The wordmark on Panel 1 has a letter-spacing animation on hover: letters expand from `0em` to `+0.08em` over 600ms, easing `cubic-bezier(0.16, 1, 0.3, 1)`.
- Scroll progress is tracked by a 2px amber line on the left edge of the viewport that fills from top to bottom.

## Typography and Palette

**Display / Wordmark:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue), weight 400 (the font is inherently display-weight), set at 18–22vw. All caps. Letter-spacing `+0.02em`. Used exclusively for the wordmark and the closing type storm. The condensed geometry gives it a street-signage authority.

**Headlines / Panel Titles:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weight 900 italic, set at 4–7vw. The contrast between Bebas Neue's geometric sans and Playfair Display's bracketed swash serifs is the core typographic tension — street meets botanical library.

**Body Text:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 400, size 18–20px, line-height 1.7. Used for all running copy. Clean, neutral, gets out of the way of the imagery and display type.

**Accent / Labels:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 600 uppercase, letter-spacing `+0.12em`, size 11–12px. Used for section markers, hours, address, tiny categorical labels.

**Palette — Honeyed Neutral:**
- `#1A1208` — Deep espresso black. Primary background for dark panels. Not pure black; carries a brown warmth.
- `#F0E6C8` — Parchment cream. Light panel background. The color of aged paper, pressed flowers, manuscript vellum.
- `#B5732A` — Amber spirit. The primary accent: the diagonal rule, the scroll progress bar, hover states, botanical ink accents.
- `#E8C97A` — Honeyed gold. Secondary accent, used for the illustration's warm areas, highlight glows on dark panels.
- `#3B2A14` — Bark brown. Text on light panels. Warmer than black, matches the botanical ink character.
- `#D4BF94` — Warm sand. Mid-tone used for muted text, background variation, the illustration's paper field color.
- `#7A4F1E` — Coppery mahogany. Used in botanical illustration linework details and in the address/hours text overlay on Panel 4.

## Imagery and Motifs

All imagery is **custom botanical illustration** — hand-drawn in pen and ink style (can be SVG or rasterized high-res), featuring:

1. **Thistle and Bee composition** — Panel 2's anchor illustration. Black ink crosshatching on a transparent background. No color fills; the amber palette bleeds through from behind.

2. **Full-page Botanical Spread** — Panel 4. A tightly packed composition of: two varieties of hops (referencing beer's raw ingredient), a stem of lavender, a single large Fritillaria flower drooping center-left, and three sprigs of rosemary. The composition is dense but not claustrophobic — it has the quality of a Victorian botanical plate that has been cropped too tightly on purpose.

3. **Fragment Details** — Scattered throughout: a single petal (Panel 1 background), a bee wing (Panel 3 floating above the diagonal rule), a leaf half-visible behind the body text column (Panel 2). These fragments are positioned so they appear to be growing *through* the layout itself.

4. **Custom Botanical Map Pin SVG** — Panel 5 footer. The location marker is a stylized Fritillaria blossom with the map-pin needle replaced by a stem. Rendered in `#B5732A` amber. Animates on page load: the stem draws upward via `stroke-dashoffset` animation over 1.2s.

**Motif logic:** The botanicals are never decorative. Each one is a literal or metaphorical reference to bar ingredients — hops, lavender (used in cocktails), rosemary (in gin), the bee (pollinator = fermentation metaphor). The illustrations function as a visual ingredient list without naming them as such.

**No stock photography.** No lifestyle photographs. No faces. The only "images" are the botanical illustrations and one close-up texture photograph of paper grain used as an overlay at 12% opacity across light panels.

## Prompts for Implementation

Build this as a **single full-scroll page with five full-viewport panels**. No navigation sidebar. No sticky header (only a very thin 1px amber line at the very top that fades in after 400px scroll). No footer in the traditional sense — Panel 5 IS the footer, styled as a closing statement.

**Technical emphasis:**
- All botanical illustration elements should be inline SVG so they can be manipulated via CSS and JS (fill colors changing on scroll, stroke-dashoffset animations, transform on mousemove).
- The 11-column asymmetric grid is implemented as CSS Grid with `grid-template-columns: repeat(11, 1fr)` — no Bootstrap, no utility-first framework columns. Pure grid.
- Panel transitions use `IntersectionObserver` with `rootMargin: "-20% 0px"` to trigger class additions. Panels animate in via `opacity: 0 → 1` and `transform: translateY(20px) → translateY(0)` over 600ms.
- The diagonal slash in Panel 3 is a CSS `clip-path: polygon()` split — not an `<hr>` element, not an SVG. Two absolutely positioned `<div>` elements clipped against each other with the amber line `<div>` absolutely positioned between them, rotated 15deg.
- Micro-interaction: cursor proximity effect on botanical SVG leaves — calculate `Math.hypot(cursorX - leafCX, cursorY - leafCY)` and apply `rotate(${intensity * 4}deg)` via inline style. Max intensity at 120px radius.
- The scroll progress bar is a CSS custom property updated by scroll event: `document.documentElement.style.setProperty('--scroll', scrollY / maxScroll)`, rendered as `height: calc(var(--scroll) * 100vh)` on a fixed 2px left-edge element.

**Avoid entirely:** navigation menus, hero CTAs, "Book a Table" call-to-action buttons above the fold, testimonial quotes with star ratings, price lists formatted as tables, Instagram feed grids, any grid of cards, any modal.

**Bias toward:** the feeling that the page is itself a printed object — a zine, a broadside, a botanical illustration portfolio — that happens to be interactive. The interactivity should feel like touching the paper and having it respond, not like clicking a UI element.

## Uniqueness Notes

1. **Street-style aesthetic crossed with botanical-illustration imagery at near-zero frequency.** The frequency report shows `street-style` at 2% and `custom-illustration` at 1% — the rarest imagery category in the corpus. Pairing graffiti-adjacent street typographic authority (Bebas Neue at 22vw) with Victorian botanical pen-and-ink illustration is a combination present in zero other designs in the registry. The tension is the point: the site is *about* unexpectedness.

2. **Asymmetric 11-column grid that rotates composition axis on each panel.** Most designs in the corpus use symmetric grids (6-column, 12-column) with consistent left-right alignment. quirk.bar's grid deliberately shifts its visual gravity — left-heavy to right-heavy to center-exploding — within a single scroll. The panel-to-panel compositional rotation is not found in any reference design examined.

3. **Botanical illustrations as a literal ingredient-reference system, not decoration.** The imagery is semantically linked to bar ingredients (hops → beer, lavender → cocktail, rosemary → gin, bee → fermentation). This narrative layer embedded in the visual motifs — where the decoration *is* the content — distinguishes this from every other site using `botanical` as a pattern (28% frequency), where botanicals are purely ornamental.

4. **Cursor-proximity leaf rotation micro-interaction.** The `mousemove` distance-based rotation of SVG botanical elements (not hover-based toggle, but continuous analog response to cursor distance) is an unusually specific interaction pattern. Combined with the scroll-progress amber left-edge bar, the interactivity is physically metaphorical — the page feels alive and plant-like in response to presence. No other design in the corpus documents this specific interaction.

5. **Seed:** aesthetic: street-style, layout: full-bleed, typography: display-bold, palette: honeyed-neutral, patterns: micro-interactions, imagery: custom-illustration, motifs: floral-botanical, tone: bold-confident. Avoided overused patterns: `full-bleed` (65%) is used but subverted — each panel is full-bleed in a different compositional direction rather than a single monolithic hero image. `botanical` (28%) is present but recontextualized as a semantic ingredient system rather than decorative wallpaper.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T13:09:04
  domain: quirk.bar
  seed: aesthetic crossed with botanical-illustration imagery at near-zero frequency
  aesthetic: quirk.bar is a bar that doesn't apologize for itself. The name is the promise: s...
  content_hash: c6a86cfc4bd3
-->