# Design Language for xity.bar ## Aesthetics and Tone xity.bar should feel like stumbling into a bright illegal garden-bar hidden between blank towers in an imaginary city: half urban joke, half freshwater sanctuary. The name reads as “city” with one letter wrong, so lean into anti-design misregistration — labels slightly too large, rules that stop early, bubbles that interrupt typography, and menu fragments pinned in strange corners — while keeping the emotional weather optimistic, luminous, and inviting. This is not a polished cocktail lounge; it is a sunny, glitchy pond kiosk where the city exhales. The mood is optimistic-bright without becoming corporate cheer. Imagine white concrete, lime leaves, turquoise seltzer, red-orange plastic stools, and giant serif lettering reflected in shallow water. The page should treat negative space as a visible ingredient: wide quiet fields, abrupt tiny notes, and surprising zoomed details floating far apart. Make the silence feel like ma — a pause before carbonation rises. ## Layout Motifs and Structure Use a ma-negative-space composition built as a sequence of nearly empty full-screen “bar moments.” Avoid the normal centered hero and card grid. The opening viewport can place a huge cropped `xity.bar` wordmark partly off-screen, with a single tiny address-like phrase stranded in the opposite corner and bubble clusters drifting through the vacant middle. Content should appear as scattered artifacts rather than modules: a receipt strip near the left edge, a botanical garnish diagram low on the right, a large circular lens zooming into one letter, and short poetic menu lines separated by generous blank air. Structure the page like a walk through a wrong-but-wonderful city block: **street glare → water counter → leaf-shadow room → bubble close-up → night sign**. Each section should have one dominant spatial event, not many equal boxes. Use thin vertical rules, accidental-looking offsets, and oversized margins. Let some headings rotate 2–4 degrees or slip beyond the viewport, but keep enough order that the visual tension feels intentional rather than broken. ## Typography and Palette Use a serif-revival typographic system with one clean support face: - **Display Font:** "Cormorant Garamond" from Google Fonts, weights 600–700. Use at extreme sizes for `xity.bar`, cropped city fragments, and watery chapter titles. Tight tracking and dramatic ascenders should make the serif feel elegant but slightly unruly. - **Secondary Serif:** "Fraunces" from Google Fonts, weights 500–700. Use for menu-like phrases, magnified letter details, and bubble captions; its playful optical character supports the anti-design mood. - **Support Sans:** "Work Sans" from Google Fonts, weights 400–600. Use sparingly for tiny labels, coordinates, ingredient notes, and interface hints. Palette should be triadic, bright, and watery, anchored by generous white space: - **Seltzer Cyan:** `#20C7D9` for water surfaces, bubbles, and zoom lenses. - **Hibiscus Red-Orange:** `#FF5A3D` for bar stools, warning-like labels, and misregistered rules. - **Leaf-Lime Yellow:** `#D7F24A` for botanical highlights and optimistic flashes. - **Wet Ink:** `#172026` for primary type and thin structural lines. - **Foam White:** `#F8FFF6` for the main negative-space field. - **Pale Concrete:** `#DDE5DB` for quiet urban planes and subtle section shifts. Do not rely on warm gradients; use flat color, sharp overlaps, translucent cyan circles, and occasional hard-edged color collisions. ## Imagery and Motifs Imagery should be CSS/SVG-led rather than photographic. The signature motif is **water-bubble zoom focus**: transparent circles that enlarge tiny parts of the scene — a serif terminal, a lime vein, a street sign corner, a fizz line — as if the user is looking through carbonation. Bubbles should vary from tiny pinpricks to absurd plate-sized lenses, sometimes clipping text and sometimes drifting through empty space. Nature motifs should feel like plants invading a bar in the city: mint leaves shaped like map blocks, algae-green receipt marks, stem diagrams used as dividers, dew beads along letterforms, and leaf shadows falling across concrete rectangles. Add a few anti-design artifacts: barcode-like reeds, intentionally awkward arrows, mismatched punctuation, a tilted “open / maybe” sign, and one oversized botanical specimen that is mostly off-screen. Keep icons primitive and handmade-looking, not polished app symbols. ## Prompts for Implementation Build a full-screen narrative experience with large quiet sections and minimal conventional navigation. The first screen should be mostly Foam White with the wordmark cropped across the top-left or bottom-right, animated bubbles rising slowly through the empty center, and one tiny Work Sans line such as “a bright wrong city bar with leaves in the water.” Avoid CTA-heavy layouts, pricing blocks, testimonial rows, and stat-grids. Use `section.scene` panels with `min-height: 100vh`, CSS custom properties for the triadic palette, and SVG/CSS bubble elements using `backdrop-filter`, `mix-blend-mode`, and clipped magnifier effects. Implement the planned zoom-focus pattern by letting selected bubbles scale up on scroll or hover, revealing enlarged typography, leaf veins, or hidden microcopy beneath. Motion should be gentle but strange: bubbles drift vertically, text snaps a few pixels out of alignment, leaf shadows slide diagonally, and color tabs pop in like badly registered print layers. Favor storytelling over explanation: each viewport should feel like another table, sign, or puddle inside xity.bar. ## Uniqueness Notes - Uses anti-design as a bright botanical city-bar language rather than dark brutality, turning mistakes, cropped type, and awkward spacing into playful carbonation. - Centers ma-negative-space as the main layout engine: empty fields become the “air” in seltzer, avoiding the batch’s dominant card-grid and centered compositions. - Makes water-bubbles functional through zoom-focus magnification, not merely decorative circles. - Combines serif-revival typography with bar receipts, leaf diagrams, and wrong-city signage for a distinctive poetic hospitality atmosphere. - Documented chosen seed/style: aesthetic: anti-design, layout: ma-negative-space, typography: serif-revival, palette: triadic, patterns: zoom-focus, imagery: water-bubbles, motifs: nature, tone: optimistic-bright. - Avoided overused patterns from frequency analysis: corporate aesthetic, photography/minimal imagery defaults, card-grid and centered layouts, warm gradient palettes, parallax/scroll-triggered/stagger animation habits, mono typography, and authoritative tone.