# Design Language for xity.bar ## Aesthetics and Tone xity.bar is **a vertical Art Deco speakeasy folded inside an elevator shaft** — a luxury cocktail bar that does not have a street entrance, only a brass cage that descends through twelve illuminated floors of a building that may not exist. The name reads as the gutted spine of "city": every vowel has been removed, leaving only the load-bearing consonants — and the site treats that as architecture, not branding. The whole experience is the ride down. You enter at the marquee level (street, neon-cold), and the page scrolls *downward* through floor after floor — Lobby, Cloakroom, The Long Bar, The Listening Room, The Vault — each one a horizontal stratum of warm gilt light, each transition marked by the soft chime of a floor indicator and a sweep of cage shadow across the type. The tone is **opulent-grand crossed with mysterious-moody**: the confidence of 1929 Manhattan lobby brass, but lit like 2 a.m. — low amber pools, deep shadow, the gleam of polished metal catching a single source. Nothing is bright. Nothing is flat. Every surface is either lacquered, brushed, fluted, or inlaid. The copy speaks in the clipped, slightly imperious voice of a maître d' who has decided you may stay: short declaratives, no exclamation points, no "discover," no "experience our." Just floor names, a cocktail or two named after geological strata, and the quiet implication that the bar has been here longer than the city it's missing the vowels of. This is deliberately the opposite of the photographic, warm-gradient, card-grid bar site. There are no photos of garnished glasses on slate. There is brass, lamplight, marble veining, and the slow vertical travel of an elevator that never quite reaches a basement. ## Layout Motifs and Structure The governing layout is **immersive-scroll** (15% in the frequency analysis) built as a **vertical elevator shaft** — and explicitly *not* card-grid (93%), *not* bento-box (17%), *not* dashboard. There is no row of three feature cards anywhere on this page. Content is stacked as **floors**: full-viewport horizontal bands, each one a complete little room, separated by thin brass "floor-line" rules and a numeral (12, 11, 10 …) that lives in a fluted shaft running down the left edge of the entire document like the indicator strip beside a real elevator door. **Structural rules:** - **The shaft (left rail, ~88px):** A fixed, fluted vertical band — alternating thin light/dark vertical flutes (CSS repeating-linear-gradient, brushed-metal feel) — carrying the current floor numeral in a small illuminated lozenge that *travels down* as you scroll. This rail is the navigation: clicking a floor numeral glides the cage to that stratum. - **The cage:** A semi-transparent SVG lattice of Deco chevrons and stepped diamonds, fixed over the viewport at very low opacity (~0.06), whose shadow lines sweep horizontally across content during each floor transition — as if a real cage gate passed in front of a lamp. - **Floors as strata:** Each section is a single tall band with one dominant idea, generous internal margins, asymmetric weighting (text mass low-left, a tall thin Deco illustration or a single radial lamp-glow upper-right). Floor names are set enormous, condensed, gilt, with a chevron-rule beneath drawn on scroll. - **The Vault (final floor):** The basement. Darkest band, near-black, where a single brass dial (a clock face / combination lock hybrid) is the only interactive object — turning it (drag) reveals the hidden detail line. No CTA. No newsletter. Just a closed door and a turned dial. - **No hero-dominant splash, no centered column of content:** the "hero" is the marquee floor, but it immediately yields to descent — the page wants you moving down, not lingering on a poster. ## Typography and Palette **Fonts — Google Fonts only, three families:** - **Poiret One** — the display face for floor names and the wordmark. A genuine geometric Art Deco display type: hairline strokes, elongated forms, perfect circles, the unmistakable 1920s elevator-plate elegance. Used very large (clamp ~3rem to 8rem), letter-spacing wide (~0.08em), uppercase for floor labels ("THE LONG BAR", "THE VAULT"), title case for the wordmark "xity" set with an exaggerated tracking so the four letters span like brass inlay across a marble lintel. - **Cormorant Garamond** — the editorial serif for cocktail names, descriptive lines, and any longer prose. High-contrast, refined, a little aristocratic; italic 500 for cocktail names, regular 400 (18–20px, line-height 1.7, warm cream on shadow) for body. It is the maître d's handwriting on the card. - **Jost** — the quiet structural sans for the floor numerals in the shaft, micro-labels, the dial readouts, and any UI lozenge text. Geometric, near-Futura, set small, 500, uppercase, letter-spacing 0.16em. It is the engraving on the elevator panel — functional, not decorative. **Palette — gilt + shadow + a single cold note:** - `#0E0B08` — **Shaft Black.** The deepest band (The Vault), the cage shadows, the negative space between flutes. Not pure black — a warm bituminous near-black. - `#1C1712` — **Lacquered Walnut.** The default page background; the wall of every floor. Deep brown-black with a faint warmth, like old varnished panelling. - `#C8A24A` — **Lobby Brass.** The primary metal: floor lines, chevron rules, the wordmark inlay, active numeral lozenge. Gradients run `#8A6B23 → #C8A24A → #EFD79A` for the polished-metal sheen. - `#EFD79A` — **Lamplight.** The highlight tint on brass, the glow core of the radial lamp pools, hover states on type. - `#F4ECDD` — **Cardstock Cream.** Body text and cocktail prose; the warm paper of the menu card laid against the walnut. - `#7C3B2E` — **Burgundy Velvet.** Secondary accent — the upholstery; section dividers' shadow side, the inside of the cage chevrons, the Listening Room band tint. - `#2C6E6A` — **Verdigris Cold.** The single non-warm note: the *street* level marquee (cold neon teal), used once at the top and once as the dial's resting indicator, so the descent visibly moves *away* from cold city light into warm interior gold. - `#9A8F7C` — **Patina Grey.** Muted micro-labels, disabled states, the brushed flutes' lighter stripe. ## Imagery and Motifs **No photography.** The imagery vocabulary is entirely **line-illustration + geometric-abstract + grain-overlay** — hand-built in SVG/CSS so it ships weightlessly: - **Stepped chevrons & ziggurat fans:** the core Deco motif — fanned rays, stepped pyramids, sunburst half-circles — used as section rules, the cage lattice, and oversized faint watermarks behind floor names. - **The fluted column / brushed-metal stripe:** vertical flute pattern in the shaft rail, on lozenges, and as a thin frame around the dial. - **The radial lamp pool:** each floor has exactly one warm light source — a soft elliptical radial gradient (`#EFD79A` → transparent) bleeding from one corner, giving every band its single-source 2 a.m. modelling. These pools drift slightly with the cursor (parallax), as if the lamp swings. - **Marble inlay strips:** thin horizontal bands of procedurally-suggested veining (layered low-opacity diagonal gradients) used as the "lintel" above major floor names. - **The brass dial:** an engraved combination-lock / clock hybrid SVG — concentric rings, fine tick marks, a single chevron pointer — the only "object" on the page, living in The Vault. - **Floor-indicator lozenge:** a small rounded-rect plaque with a glowing numeral, the moving "you are here." - **Grain & lamp-bloom:** a fine film-grain overlay (animated very subtly) plus a faint bloom around bright brass, so metal reads as *lit* rather than coloured. Iconography (cocktail markers, the dial pointer, the cage gate) is all drawn in the same hairline Deco stroke weight as Poiret One — consistent line, no filled icons, no emoji. ## Prompts for Implementation Build xity.bar as **one static page**: `index.html`, `style.css`, and a small JS module `cage.js` (~6–8KB) handling: scroll-position → floor numeral travel in the shaft, floor-transition cage-shadow sweep + chime, lamp-pool cursor parallax, and the draggable Vault dial. Google Fonts is the only external request. Everything must look complete with JS disabled — JS adds the *ride*, not the *room*. **Storytelling spine — the descent (top to bottom):** 1. **L / MARQUEE (street):** Cold verdigris-teal sliver at the very top — a thin neon-style line, the wordmark "xity" in cold light, one line: *"No street door. Take the cage."* A single chevron points down. This is the only cold band. 2. **12 / LOBBY:** First warm floor — brass floor-line draws across on entry, the lamp pool ignites, the shaft numeral clicks to 12. Wordmark re-renders in brass inlay against a marble lintel. Brief house line in Cormorant. 3. **11–8 / THE CLOAKROOM, THE LONG BAR, THE LISTENING ROOM, THE WINTER GARDEN:** Each its own stratum, each with one dominant Deco watermark, one lamp pool, and a couplet of cocktail names (Cormorant italic) named for strata/architecture — e.g. *Cornice*, *Plinth*, *Lintel*, *Bedrock*. No prices, no order buttons; cocktails are described in two refined lines like a museum label. 4. **B / THE VAULT:** Shaft Black. The cage shadow falls fully across, the chime drops an octave. Centre: the brass dial. Drag it (or arrow-keys) past the verdigris tick to the brass tick — the door-line opens a hairline crack, revealing the single hidden line (hours / a name / a coordinate). Nothing else. The page ends at a closed-then-cracked door. **Animation language:** - **Floor transitions:** as a section crosses the viewport midline, a horizontal cage-shadow sweep (a thin striped gradient translating across), the shaft lozenge eases to the new numeral with a slight overshoot (spring), a soft single-note chime (tiny inline audio, muted by default, toggle in the marquee). - **Brass lines & chevron rules:** `path-draw-svg` on scroll — they're scribed, not faded. - **Lamp pools:** continuous, very slow cursor-parallax drift (the swinging lamp); never abrupt. - **Type on entry:** floor names rise a few px with letter-spacing relaxing from tight to wide (`stagger` per character), as if settling into engraved positions. - **Grain:** a 2-frame stepped grain shimmer so the dark walnut never looks like dead flat colour. **AVOID:** card-grid / bento "feature" rows; pricing tables or "Reservations" CTA blocks; stat counters ("12 cocktails · 4.9 rating"); hero with centred headline + two buttons; photographic cocktail imagery; bright/light backgrounds anywhere except the one cold marquee sliver; glassmorphism panels; gradient-mesh blobs. ## Uniqueness Notes 1. **The page IS an elevator descending through floors.** Layout is vertical immersive-scroll-as-shaft with a moving floor-indicator rail — not the card-grid (93%) / full-bleed (84%) / centered (79%) stack nearly every site uses. There is no three-card row anywhere; sections are *rooms*, not cards. 2. **Genuine Art Deco brass-and-shadow, near-zero in the corpus.** The aesthetic frequency shows art-deco at ~5% and luxury-premium at ~1%; combined with a *dark* lacquered-walnut ground (most warm palettes here are light/creamy gradients at 93%), this is a rare register: opulent-grand + mysterious-moody, lit by a single swinging lamp per floor. 3. **No photography, no neon-glow web cliché — only hairline SVG Deco geometry + lamp pools + grain.** Imagery is line-illustration / geometric-abstract (chevrons, ziggurats, fluted metal, marble inlay), against the 98%-photography norm. The single interactive object is an engraved brass dial in a vault, replacing the universal CTA/newsletter block. 4. **The vowel-stripped name treated as architecture.** "xity" = "city" with the vowels load-bearing-removed; the wordmark is set as brass inlay on a marble lintel and the whole descent narrates a building that the city is missing the vowels of — concept-driven, not decorative. 5. **Cold-to-warm light arc as the narrative.** The only cool colour (verdigris-teal) appears exactly twice — the street marquee at the top and the dial's resting tick at the bottom — so scrolling down is visibly travelling away from cold city light into gilt interior gold. Chosen seed/style: **art-deco ornate luxury** (from seeds.json; not in use by referenced designs). Avoided patterns from frequency analysis: card-grid (93%), bento-box (17%), dashboard (35%), photography (98%), glassmorphism (85%), gradient-mesh (17%), hero-dominant centered layouts, warm-light creamy gradient palettes (93%), stat-grids and CTA/pricing blocks.