# Design Language for xity.bar

## Aesthetics and Tone

xity.bar is a **Frutiger Aero fever dream pulled through a botanical greenhouse** — imagine a 2007-era Nokia N95 slideshow screensaver where instead of Alpine meadows and water droplets, the photos are luminous, dew-drenched orchids and translucent ferns backlit by a diffuse sky. The aesthetic is Frutiger Aero at full saturation: sky-blue gradients, organic forms that look squeezed from living light, glossy surfaces hovering over soft mist. But the *content* is not tech — it is a bartop botanical cocktail garden, somewhere between a greenhouse at dusk and the glass-smooth surface of a backlit drink.

The tone is **dreamy-ethereal**: every element breathes. Text floats rather than sits. Colors dissolve at edges. Even navigation elements have soft-glow halos and gradients that shift on hover. The site never sells anything directly — it invites. It is the feeling of lifting a glass toward a window and watching the light refract through the ice, through the gin, through the citrus slice, into pure color.

**Key mood words:** luminous, translucent, diffuse, hovering, organic-glass, botanical, aperture-wide.

## Layout Motifs and Structure

The composition is a **magazine-spread with a card-flip axis** — two-column at its widest (1280px max), but not a symmetric grid. The left column (45vw) is a deep-focus cinematic panel: one large flora image or gradient composition per section, always bleed-to-edge vertically. The right column (55vw) holds the editorial matter: headline, body, and a single card-flip interactive element per spread.

**Card-flip mechanics (the defining interaction):** Each "card" is an 800×480px panel rendered in perspective-3d space. Front face shows a full-bleed lens-flare botanical image (photographed or SVG-rendered in Frutiger Aero style); back face reveals text content — a cocktail description, a season note, a botanist's field observation. The flip is triggered on hover/tap with a smooth 600ms rotateY transform, ease-in-out cubic-bezier(0.25, 0.46, 0.45, 0.94). No click required — just dwell.

**Spatial relationships:**
- Left image panel: `position: sticky; top: 0; height: 100vh` — it stays fixed while text scrolls past on the right
- Right editorial column: standard scroll with generous leading
- Cards appear in the right column at rhythm: one card per 480px of vertical scroll
- Between cards: pure editorial prose with first-drop-cap styling and wide margins

**Breakpoints:**
- ≥1280px: full magazine two-column with sticky left panel
- 768–1279px: sticky panel collapses; cards go full-width
- <768px: single column, cards fill viewport width minus 32px margin each side

**Negative space:** Copious. Sections have 120px top/bottom padding at desktop. The grid never feels crowded. Frutiger Aero needs room to breathe — sky needs horizon.

## Typography and Palette

**Typography (Google Fonts only):**

- **Display / wordmark:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 700, italic for the "xity.bar" wordmark set at `clamp(4rem, 9vw, 9rem)`. The high contrast of Playfair's thick-thin strokes echoes the lens flare — thin hairlines catch light the way serifs catch the gradient.
- **Subheads / card fronts:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans), weight 500, tracking 0.04em, uppercase, 14–18px. Clean humanist geometry anchors the airy display type.
- **Body / editorial prose:** [`Lora`](https://fonts.google.com/specimen/Lora), weight 400, 18/30px line-height. Lora's brushed serifs have the organic softness the aesthetic demands — it reads like handwriting on vellum.
- **Card-back labels / metadata:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 400, 12px, letter-spacing 0.08em. Small, precise, like a botanist's annotation on a specimen card.

**Kinetic typography rules:**
- Wordmark entrance: each letter slides in from 12px below with stagger 40ms per glyph, opacity 0→1, ease-out cubic. Total duration: ~320ms.
- Section headlines: `@keyframes shimmer-text` — a 3-second looping linear-gradient clip-path animation that runs light across the headline text from left to right, like sunlight crossing a leaf.
- Card-back text fades in with blur: `filter: blur(8px) → blur(0)` over 400ms after the flip completes, giving the sense of coming into focus.

**Palette:**

| Role | Hex | Description |
|---|---|---|
| Sky Void | `#0a1628` | Deep midnight-blue; base background for hero |
| Aero Blue | `#4db8e8` | Signature Frutiger sky — not corporate, atmospheric |
| Aqua Glow | `#7ee8d3` | Cyan-teal gradient stop; bokeh halos |
| Petal Blush | `#f0c8e0` | Soft pink; floral card accent; hover glow fill |
| Glass White | `#eef6fb` | Near-white with blue cast; card surface, body bg |
| Dew Green | `#a8e6b4` | Botanical secondary; leaf veins, prose drop-caps |
| Lens Gold | `#f5d67a` | Lens-flare spike highlight; sparingly applied |
| Fog Base | `#c8ddf0` | Mid-tone blue-grey; section dividers, muted backgrounds |

**Gradient recipes:**
- Hero gradient: `linear-gradient(135deg, #0a1628 0%, #1a3a5c 40%, #4db8e8 100%)`
- Card hover glow: `radial-gradient(ellipse at 60% 30%, rgba(126,232,211,0.35) 0%, transparent 65%)`
- Body section bg: `linear-gradient(180deg, #eef6fb 0%, #c8ddf0 100%)`

## Imagery and Motifs

**Lens flare as structural motif:** Every sticky left panel contains exactly one lens-flare overlay — rendered as a multi-layer SVG stack:
1. A central point-source `<circle r="3">` in Lens Gold at the top-left third of the panel
2. Six `<ellipse>` bokeh circles at varying radii (12–80px), Aero Blue to Aqua Glow, opacity 0.08–0.35, staggered along the flare axis
3. A diagonal `<line>` starburst of 6 thin rays (1px stroke, Lens Gold, 0.6 opacity) emanating from the source
4. The entire flare group animates on a slow 8s loop: `translateX(-5px)→(+5px)` with `scale(0.97)→(1.03)` — a barely perceptible pulse, as if the light is breathing

**Botanical card-front imagery:**
- Full-bleed photography is the standard — macro shots of: orchid petals catching dew, citrus cross-sections on a white marble slab, a spray of baby's breath against sky, fern fronds with spore patterns visible
- Each photo is color-graded with a CSS `backdrop-filter: saturate(1.4) hue-rotate(-5deg)` to shift into the Aero palette
- On sites without real photography access, SVG botanical compositions replace them: each is a precise 1200×800 SVG with gradient fills, translucent overlapping petal forms, and a fog-base background

**Floral-botanical motifs woven throughout:**
- Section dividers: a horizontal `<path>` trace of a single fern frond in Dew Green, drawn via SVG path animation on scroll entry (path-draw-svg pattern)
- Prose drop-caps: first letter of each editorial section is set 4× size in Playfair italic and colored with the Lens Gold / Petal Blush gradient
- Card-back decorative: a single small botanical linework icon (8-petal poppy or sprig of rosemary) in Aero Blue, 24px, anchors the top-right corner

**Water / glass / light metaphors (Frutiger Aero vocabulary):**
- The wordmark has a soft `drop-shadow(0 4px 24px rgba(77,184,232,0.55))` glow halo at rest, intensifying to `rgba(126,232,211,0.75)` on hover
- Navigation links use an `::after` pseudo-element that expands a glass-panel underline: `height: 2px`, `background: linear-gradient(90deg, #4db8e8, #7ee8d3)`, width animates from 0 to 100% on hover in 250ms

## Prompts for Implementation

**The story this page tells:** A visitor arrives at a bar that exists somewhere between a botanical greenhouse and a dream — the kind of place where the drink list is printed on translucent vellum backlit by afternoon sky. The page opens with the xity.bar wordmark floating over deep midnight blue, then scrolls through five botanical "spreads," each one a flip-card conversation between an image and its story.

**Implementation guidance for full-screen narrative experience:**

1. **Hero panel (full viewport):** Sky Void background. Wordmark in Playfair italic with kinetic letter-entrance stagger. Below it: one short lyric line (12px DM Sans, letter-spaced, Aero Blue) — "a bar that grows in light." No navigation visible until scroll begins. A single lens-flare SVG pulses at top-right. Scroll indicator: a single vertical line (Fog Base, 60px) with a slow-moving dot in Aqua Glow.

2. **Five magazine spreads (sticky-left panel + scrolling right column):**
   - **Spread 1 — Orchid Season:** Left: orchid macro with Aero-grade color treatment. Right: editorial on the use of orchid extract in the current menu, with one card-flip: front=orchid photo, back=tasting note in Lora italic.
   - **Spread 2 — The Citrus Study:** Left: cross-sectioned grapefruit on fog-base marble. Right: botanical note on citrus perfumers. Card-flip: front=citrus stained-glass light pattern, back=a fragrance description with DM Mono accents.
   - **Spread 3 — Fern Vault:** Left: fern frond extreme closeup — spore dots visible. Right: the provenance of the botanicals. Fern-frond SVG path draws in over 2 seconds on section entry.
   - **Spread 4 — Baby's Breath Fog:** Left: full pale-sky panorama of baby's breath, heavy lens flare centered. Right: the dreamy-ethereal manifesto of the bar. Card-flip front: misty field. Card-flip back: handwritten-style Lora italic quote.
   - **Spread 5 — Dew at Closing:** Left: gradient composition (no photo) — Glass White to Fog Base with Aqua Glow bokeh circles as SVG. Right: closing prose. Drop-cap "D" in Lens Gold fills first paragraph.

3. **No pricing blocks, no CTA grids, no testimonial carousels.** The only "action" element is one minimal contact line (DM Mono, 12px) in the footer: an email address set in Aero Blue with glow-underline hover.

4. **Motion rules:** All animations respect `prefers-reduced-motion`. Under reduced-motion: kinetic text is static, card-flips become instant opacity crossfades, fern path-draw is skipped. All other content reads cleanly without motion.

5. **Card-flip depth illusion enhancement:** Add `transform-style: preserve-3d` and `perspective: 1200px` on the card container. Back-face uses `backface-visibility: hidden`. On the front face, overlay a subtle `radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%)` glass-shine layer so the card reads as a physical glass object.

## Uniqueness Notes

**Differentiators from the broader registry:**

1. **First design to use the card-flip pattern as the primary editorial mechanic, not a UI widget.** The registry uses card-flip at near-0% and when it appears it is a testimonial or product card pattern. Here, card-flip is the *narrative engine*: each flip is the difference between seeing a botanical and understanding it — a visual argument that depth lives behind surfaces.

2. **Frutiger Aero applied to a hospitality/cocktail domain rather than tech.** The frequency data shows frutiger-aero at 2% in the corpus and exclusively in tech/SaaS contexts. xity.bar claims Frutiger Aero for the culinary-atmospheric register: the glossy-organic vocabulary (light through water, dew, translucent materials) maps perfectly onto cocktail aesthetics but no existing design makes this connection.

3. **Lens-flare as a recurring structural SVG element, not photo decoration.** The corpus uses imagery:lens-flare near-0% and when present it is a photo filter or decorative overlay. Here, lens-flares are hand-constructed SVG components with named layers and slow breathing animation — they are first-class design elements with consistent placement rules and a palette.

4. **Kinetic typography constrained to a single shimmer animation.** The corpus uses kinetic-animated at 2%, almost always as typewriter-effect or scroll-triggered fade. xity.bar uses a single repeating shimmer-text animation as the only kinetic typographic element — restrained but continuous. This is closer to Frutiger Aero's ambient animation language than to UI feedback patterns.

5. **Magazine-spread layout with a sticky left panel at 45vw** is used at 3% in the registry and typically as a text-left/photo-right split without the sticky mechanism. The sticky left panel here creates a cinematic "diorama" effect where the image acts as a stage and the text scrolls through it — a structural choice with no close analogue in the existing corpus.

**Planned seed:** aesthetic: frutiger-aero, layout: magazine-spread, typography: kinetic-animated, palette: gradient, patterns: card-flip, imagery: lens-flare, motifs: floral-botanical, tone: dreamy-ethereal

**Avoided overused patterns (per frequency analysis):**
- AVOIDED: photography as passive background (87% in corpus) — here photography is either primary card content or replaced by SVG botanical compositions
- AVOIDED: single-column layout (21%) — magazine-spread with sticky panel
- AVOIDED: dashboard layout (18%) — no metrics, no grid panels, no stat blocks
- AVOIDED: warm/earth palette (88%/4%) — palette is cool: blues, cyans, glass whites
- AVOIDED: vintage motif (33%) — motif is explicitly Frutiger Aero contemporary, not retro
<!-- DESIGN STAMP
  timestamp: 2026-05-12T08:10:01
  domain: xity.bar
  seed: unspecified
  aesthetic: xity.bar is a **Frutiger Aero fever dream pulled through a botanical greenhouse*...
  content_hash: cbfb9f4108dc
-->