# Design Language for quirk.bar ## Aesthetics and Tone quirk.bar is a **Memphis-Group cocktail bar that someone built inside a 1985 jukebox** — squiggles, terrazzo confetti, lemon-wedge triangles and primary-color zigzags, all arranged with the deliberate, joyful wrongness of Ettore Sottsass and the Milan Memphis collective. This is not the soft pastel "memphis-lite" that floods Dribbble; it is the real thing — clashing saturated color, asymmetry used as a structural principle, decorative pattern applied to surfaces that "should" be plain, and a refusal to take grid alignment seriously. The bar is a place where the bar stools are shaped like commas, the menu is printed on a beach towel, the neon is bent into a treble clef, and nothing matches on purpose. The tone is **whimsical-creative**: playful without being childish, confident in its bad taste, a little bit sardonic. Copy should read like a witty bartender who has seen everything — short, dry, a wink in every line. No corporate cheer, no "elevate your evening." More like: "We have eleven gins and zero opinions about which one you should drink." The whole site should feel like walking into a party that started before you arrived and will keep going after you leave. This avoids the two patterns that dominate the frequency analysis — **hand-drawn (95%)** and **glassmorphism (81%)** — entirely. There is no soft sketch line, no frosted translucent card, no warm earthy gradient. Everything here is flat, hard-edged, loudly colored, and printed-feeling, like silkscreen on matte poster stock. ## Layout Motifs and Structure The structure is a **broken-grid** (10% in layout frequency) — but broken in the *Memphis* sense, not the brutalist sense. There is an underlying 12-column grid that the eye can almost feel, and then every block is deliberately shoved 1–3 columns off where it "wants" to sit, rotated 2–7 degrees, or allowed to bleed off one edge. Sections do not stack in tidy horizontal slabs; they overlap and shingle, a card from one section sliding under the headline of the next. Spatial logic: - **The squiggle spine.** A single thick black-and-yellow Memphis squiggle (the classic "Bacterio" worm) runs the full height of the page as a scroll guide, weaving left and right behind the content. As you scroll, content blocks attach to and detach from it like beads. - **Terrazzo plinths.** Major content blocks (the drinks list, the hours, the "find us") sit on flat colored rectangles speckled with confetti chips — these plinths are rotated slightly and cast a hard offset shadow (no blur), as if they are physical cards laid on a table. - **Collisions, not cards.** Where two blocks meet, they are allowed to physically overlap by 20–40px, with the upper one's hard shadow falling onto the lower one. - **No hero-dominant banner.** The first screen is a composition of floating Memphis primitives (triangle, half-circle, squiggle, dotted column, checkerboard swatch) with the wordmark "quirk." set in a huge condensed face wedged diagonally across the middle, partially hidden behind a lemon-yellow half-disc. - **The menu as a Memphis poster.** The cocktail list is not a price table — it is a single oversized typographic poster: drink names in giant condensed caps, ingredients in tiny mono underneath, each entry tilted a different couple of degrees, scattered across a terrazzo field rather than ruled into rows. Mobile collapses the broken grid into a single column but *keeps* the rotations and the squiggle (now a thinner vertical thread down the left margin) — it never becomes a neat stack. ## Typography and Palette **Fonts (Google Fonts only, three families):** - **Bebas Neue** — the loud voice. Used for the wordmark "quirk." (clamp 7rem–14rem, tracking tight, rotated -6deg), every section heading (3–6rem, all caps), and the giant drink names on the menu poster. Bebas Neue is a tall, narrow, all-caps sans that reads like vintage signage and screen-printed gig posters — exactly the "bebas-bold" register, which sits around 3% in typography frequency and pairs naturally with Memphis flatness. - **Space Mono** — the dry aside. Used for ingredient lists, opening hours, address, captions, footnotes, the squiggle's little numeric "bead" labels, and any time the bartender mutters something. Mono at small sizes (0.75–0.95rem), generous letter-spacing, often set in a contrasting colored box. The monospaced rhythm is the deadpan counterweight to Bebas's shouting. - **Fredoka** — the bouncy connective tissue. A rounded geometric sans used for short body paragraphs, the nav items, and button labels (medium/semibold, 1–1.25rem). It keeps the longer reading copy friendly and round-cornered so the page does not become all sharp angles and all caps. **Palette — candy-bright (around 4% in palette frequency), used at full saturation, no muting:** - `#FFE14D` — Memphis lemon yellow (primary background accent, half-discs, squiggle highlight) - `#FF4F79` — hot bubblegum pink (headline fills, terrazzo chips, hover states) - `#2BC4C9` — pool-tile turquoise (plinths, buttons, the secondary squiggle) - `#7A52FF` — electric grape (accent shapes, link underlines, the cocktail-poster background) - `#FF8A3D` — citrus tangerine (triangles, dot-grids, scrollbar) - `#111111` — true black (all type, hard shadows, the primary squiggle stroke, outlines) - `#FAF6EC` — warm paper off-white (the base canvas — everything floats on this matte-poster cream, not pure white) Color rule: every block uses at least three of the brights together, deliberately clashing — pink type on a turquoise plinth dropped on the cream page with a tangerine triangle behind it. Black is always present as outline and shadow to hold the chaos together. Hard offset shadows are `#111111`, always 6–10px, never blurred. ## Imagery and Motifs **Primary imagery: geometric-abstract / geometric-shapes (each around 3–5% in frequency).** There is *no photography* — no glamour shots of cocktails, no exposed-brick interiors, no people clinking glasses. Every visual is a flat vector Memphis primitive, all built in CSS/SVG: - **The squiggle ("Bacterio worm")** — the signature element. Thick black stroke with a yellow inner highlight, a freeform wave that snakes down the whole page. Animated to gently undulate on scroll. - **Terrazzo confetti fields** — flat colored rectangles speckled with 30–60 tiny irregular polygon "chips" in the five brights. Used as plinths and as the menu-poster background. Generated procedurally so each one is unique. - **Memphis swatch set** — half-discs, equilateral triangles, dotted columns, 3×3 checkerboard squares, concentric arcs, single fat zigzag bolts, the classic "grid of evenly spaced dots." These float in the hero and drift between sections at small parallax offsets. - **Squiggle-bead labels** — tiny circular tags clipped onto the spine squiggle, each holding a Space Mono number (a drink count, a year the bar opened, a turntable RPM joke). They rotate slowly. - **The cocktail glass as a logo glyph** — one and only one representational shape: a martini glass reduced to a single triangle on a stick, used as the favicon, the bullet before each menu entry, and the "scroll down" indicator (it tips over and pours when clicked). No icons from a generic set; no line illustration; no gradient mesh. The texture of the site is *printed flat color*. ## Prompts for Implementation Build quirk.bar as **a single static HTML page** — one `index.html`, one `style.css`, one small JS module (`memphis.js`, target under 6KB minified) for the squiggle undulation, the parallax drift of the shapes, and the elastic interactions. The Google Fonts link is the only external dependency. Aim for total page weight under 90KB excluding fonts. **Storytelling spine:** the page tells the story of *one night at quirk.bar*, top to bottom — arrive (hero), look at the menu (the Memphis poster), find a seat / the room (the floating-shapes interlude with the bar's voice), know when it's open (hours as squiggle beads), know where it is (a Memphis-shape "map" — turquoise grid lines, a pink dot, no real map tiles), and leave (footer that says something dry). The user scrolls *through the evening*. The squiggle spine is the through-line connecting every beat. **Animation (lean into "elastic", around 19% in patterns, but make it the dominant feel):** - Every shape and plinth that enters the viewport does so with an **overshoot/elastic spring** — it bounces past its resting position and settles, slightly rotated. - Buttons and the nav items **squash-and-stretch** on hover (scaleX up / scaleY down, then snap back), like rubber. - The squiggle continuously undulates with a slow sine wave; on fast scroll it "whips" with extra amplitude then damps. - The menu poster entries each **wobble** a degree or two on hover and the citrus-triangle bullet spins. - The "pour" interaction: clicking the martini-glass scroll indicator tips it 90 degrees and dribbles three turquoise dots downward, which become the start of the squiggle. - Respect a reduced-motion preference by freezing the squiggle and disabling the springs (keep the layout, drop the bounce). **AVOID (hard rules — these are the design):** - No "Reserve a Table" CTA button, no booking widget, no email-capture bar, no phone-number banner. If reservations are mentioned at all, it's one dry Space Mono line in the footer ("Walk in. We have stools shaped like commas."). - No pricing table, no "$$ / cocktails from $14" block — drink names and ingredients only, presented as a poster. - No stat grid ("est. 2019 · 11 gins · 4.9 stars"). Any numbers live as playful squiggle-beads, never as a metrics row. - No photography, no hero video, no exposed-brick mood board. - No glassmorphic frosted cards, no soft blurred drop-shadows, no hand-drawn sketch lines, no warm earthy gradient — those are the saturated frequency clichés this site exists to dodge. - No tidy aligned grid. If a block looks perfectly aligned, rotate it 2–5 degrees. ## Uniqueness Notes Differentiators, each a deliberate move against the frequency analysis: 1. **Genuine Memphis maximal-color, not "memphis-lite."** Memphis aesthetic sits around 4% in frequency and almost every instance softens it into pastel shapes on white. quirk.bar uses full-saturation clashing primaries, hard un-blurred offset shadows, applied decorative pattern (terrazzo) on surfaces — the actual 1981 Milan aesthetic, used for a bar, which nothing else in the corpus does. 2. **The squiggle spine as scroll architecture.** Instead of stacked sections or a card grid, the entire page hangs off one continuous animated Memphis "Bacterio" worm that weaves left-right behind the content, with content blocks beading onto it. Broken-grid (10%) is used in the Memphis sense — deliberate rotational/offset wrongness — not the brutalist sense. 3. **Zero photography, zero glassmorphism, zero hand-drawn.** The site sidesteps the three biggest frequency clichés (photography 98%, glassmorphism 81%, hand-drawn 95%) all at once. The only representational shape on the entire page is a martini glass reduced to a triangle-on-a-stick. 4. **The cocktail menu is a tilted silkscreen poster, not a price table.** Giant Bebas Neue drink names scattered at varying angles across a procedurally-generated terrazzo field, tiny Space Mono ingredients — explicitly not a CTA/pricing layout. 5. **Elastic squash-and-stretch as the universal motion language.** Everything bounces, overshoots, wobbles, and rubber-bands; reflecting the toy-like, jukebox energy rather than the smooth parallax-fade that dominates the corpus. Chosen seed/style: **memphis bold shapes portfolio** — aesthetic: memphis, layout: broken-grid, typography: bebas-bold, palette: candy-bright, patterns: elastic, imagery: geometric-abstract, motifs: geometric-shapes, tone: whimsical-creative. Avoided patterns from frequency analysis: hand-drawn (95%), glassmorphism (81%), photography (98%), card-grid (91%), full-bleed/centered hero, warm + gradient palette (98% / 95%), cursor-follow + parallax + spring-as-easing as the only motion, pastoral-romantic / warm-inviting tone.