# Design Language for manner.bar ## Aesthetics and Tone manner.bar is a sophisticated guide to cocktail bar etiquette, drinking culture manners, and the unwritten rules of the well-mannered bargoer. The site channels the Art Deco aesthetic of golden-age cocktail lounges -- the Savoy, the Ritz, the Ginza whisky bars -- where every detail from the angle of a tumbler to the timing of a tip communicates social fluency. The visual language is ornate, geometric, and dripping with the luxurious restraint of 1920s-1930s design: gold filigree, chevron patterns, and symmetrical compositions that whisper "class" without shouting. The tone is elegant-sophisticated with a warm-inviting undercurrent -- the voice of a seasoned bartender who has seen everything, judges nothing, and guides you toward being a better guest at the bar. Content is organized as a series of "house rules" presented with the visual gravity of an exclusive members' club charter. ## Layout Motifs and Structure **Primary layout: editorial-flow** with **stacked-sections** arranged as chapters of a cocktail etiquette handbook. The page is structured as a vertical sequence of richly-framed sections, each dedicated to one aspect of bar manner (entering, ordering, waiting, tipping, conversing, departing). Each section occupies 80-100vh and is framed by Art Deco border ornaments -- chevron corners, geometric filigree lines, and fan motifs drawn with CSS borders and pseudo-elements. **Spatial relationships**: Content within each section is centered in a narrow column (max-width: 600px) flanked by wide, decorative margins. The narrow content column evokes the proportions of a cocktail menu or a printed etiquette manual. Ornamental borders extend into the margins, creating a frame-within-frame visual depth. **Navigation**: A vertical row of small Art Deco diamond shapes (rotated squares with gold borders) sits fixed on the left edge, one per section. The active section's diamond fills solid gold. Hovering reveals the section title (the "house rule" name) in a tooltip styled as a gilded label with Deco lettering. The navigation is deliberately understated -- manners dictate discretion. ## Typography and Palette **Typography** - **Display / House Rule Titles:** "Poiret One" (Google Fonts) -- a purely geometric, Art Deco typeface with thin, elegant strokes that directly reference 1920s poster design. Used at 3rem-5rem, weight 400. Uppercase with letter-spacing: 0.15em. Its delicate geometry embodies sophistication. - **Body / Etiquette Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with roots in calligraphy. Weight 400 for body, 700 for emphasis. Line-height 1.8. 17px size. Its warmth and readability suit the conversational yet authoritative tone. - **Accent / Rule Numbers and Labels:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif inspired by 1920s typefaces. Weight 300 for labels, 600 for numbers. Used for rule numbering ("RULE I", "RULE II") and decorative labeling. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Mahogany Dark | Rich dark wood bar | #1b0e07 | | Champagne Gold | Primary metallic accent | #c9a84c | | Cream Ivory | Warm paper background | #f5f0e1 | | Cocktail Copper | Secondary warm metallic | #b87333 | | Midnight Velvet | Deep navy-black | #0f0f1a | | Ice White | Cool highlight accent | #e8edf2 | | Olive Bitter | Subtle green accent | #556b2f | The palette draws from the materials of a luxury bar: mahogany wood, brass fittings, cream linen napkins, copper cocktail shakers, and the deep navy of a bartender's vest. ## Imagery and Motifs **Core Visual Motifs** 1. **Art Deco Border Frames**: Each section is enclosed in an ornamental frame constructed entirely from CSS. The frame uses layered borders: an outer thin gold line (1px Champagne Gold), a gap (8px), a thick decorative line (3px with repeating linear-gradient creating a chevron pattern), another gap, and an inner thin line. Corners feature fan-shaped CSS pseudo-elements (quarter-circles with radiating lines created via conic-gradient) that evoke the sunrise/fan motif of Art Deco architecture. 2. **Cocktail Glass Dividers**: Section transitions feature a centered CSS-drawn cocktail glass silhouette (a triangle for the bowl, thin rectangle for the stem, small rectangle for the base) with a subtle gold glow (box-shadow: 0 0 15px rgba(201, 168, 76, 0.3)). The glass tilts slowly (2-degree oscillation over 4 seconds) as if being swirled. 3. **Gold Foil Text Shimmer**: Display headlines use a background-clip: text effect with a linear-gradient that animates left-to-right (8s infinite), creating a slow gold foil shimmer that catches light like embossed lettering on a leather-bound menu. 4. **Chevron Pattern Backgrounds**: Sections alternate between Mahogany Dark and Cream Ivory backgrounds. Dark sections use a subtle chevron pattern (repeating-linear-gradient creating V-shapes at 0.05 opacity in Champagne Gold) as a background texture, referencing Art Deco wallpaper and textile patterns. 5. **Brass Rule Lines**: Horizontal rules between content blocks are styled as thick (2px) gradient lines that fade from transparent to Champagne Gold to transparent, creating the appearance of a brass bar rail running across the page. ## Prompts for Implementation **Storytelling and Narrative Arc** The site opens on Midnight Velvet with a slow fade-in of a decorative Art Deco frame border building itself from the center outward (border-animate pattern: top and bottom lines extend first, then vertical lines descend/ascend, then corner fans appear). Inside the frame, the title "MANNER BAR" appears in Poiret One with the gold foil shimmer effect. Below, a subtitle in Josefin Sans: "A Gentleman's Guide to Drinking Well." Each section introduces a "House Rule" with theatrical presentation. The rule number (RULE I, RULE II, etc.) appears first in large Josefin Sans numerals at 0.1 opacity as a watermark behind the section. The rule title then fades in within its Deco frame. The body text appears with a subtle slide-reveal from below (translateY: 20px to 0, opacity 0 to 1, 0.6s ease-out). The rules progress through the arc of a bar visit: RULE I (The Entrance -- how to arrive), RULE II (The Approach -- how to get the bartender's attention), RULE III (The Order -- how to order with grace), RULE IV (The Wait -- the art of patience), RULE V (The Conversation -- what to say and not say), RULE VI (The Tab -- tipping and payment), RULE VII (The Exit -- departing well). The final section is darker, more intimate: "RULE VIII: The Return" -- on becoming a regular. The frame becomes more ornate. The gold becomes richer. The text suggests that true manner is not performance but habit. **Animation Priorities** - Art Deco frame border-animate build sequence (CSS keyframes on width/height of pseudo-element borders, staggered) - Gold foil shimmer on headlines (CSS linear-gradient background-position animation, 8s infinite) - Cocktail glass tilt oscillation (CSS keyframes rotateZ, 4s infinite alternate ease-in-out) - Section content slide-reveal (IntersectionObserver triggering translateY + opacity transition) - Rule number watermark fade (large numeral at 0.1 opacity, slight scale pulse) - Chevron pattern subtle drift (CSS background-position animation, 30s infinite, nearly imperceptible) **Full-screen Narrative Experience**: Each House Rule section uses min-height: 90vh with scroll-snap-align: start. The experience should feel like turning pages of an etiquette manual. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, card-grid layouts, neon colors, tech aesthetics, casual/playful typography. ## Uniqueness Notes **Differentiators:** 1. **Art Deco frame system as pure CSS**: Every ornamental frame, fan corner, chevron pattern, and brass rule line is constructed entirely from CSS borders, pseudo-elements, gradients, and clip-paths -- no images. This is a technical constraint that produces a uniquely crisp, scalable decorative system. 2. **Cocktail bar etiquette as narrative structure**: Organizing content as sequential "House Rules" of a bar creates a natural narrative arc (arrival to departure to return) that is unique in the batch. 3. **Material-referenced color palette**: Every color maps to a physical bar material (mahogany, brass, linen, copper, velvet), creating a synaesthetic design where colors evoke textures. 4. **Gold foil shimmer animation**: The animated metallic text gradient creates a luxury-premium feel that no other design in the batch employs, directly referencing embossed cocktail menus. **Chosen seed/style:** art-deco ornate luxury **Avoided overused patterns:** corporate aesthetic (89%), centered as sole layout (87%), minimal imagery (84%), counter-animate as sole pattern (90%), mysterious-moody as sole tone (96%), mono typography (92%). Instead used editorial-flow with stacked-sections layout, elegant-sophisticated + warm-inviting tone, art-deco-display + elegant-serif typography, and gold-black-luxury + burgundy-cream palette.