# Design Language for tsundere.bar ## Aesthetics and Tone Neomorphism upholstered in muted velvet — an opulent, hushed speakeasy where the bar-top is a soft-shadowed monolith and the circuit-board chandelier glows behind smoked glass. The page reads like the entrance of a midnight library-bar tended by an old-world maître d', with bespoke custom-illustration menu cards. Inspiration: the Ace Hotel London library bar, Wes Anderson's "The French Dispatch" production design, the muted patinas of vintage Olivetti showrooms, and the deep-burgundy elegance of Penguin Modern Classics jacket spines. The tone is opulent-grand — slow doors, hush-velvet entrance, restrained smile. Tsundere here is grand-stand restraint: appears cool, glints warm. ## Layout Motifs and Structure Hud-overlay composition layered atop a muted velvet stage. The lowest plane is a velvet-burgundy background with a faint thread texture. The middle plane is a thin amber HUD framework (1px hairline rules forming a maître d' menu border around the viewport edge with corner cartouches). The top plane is the content: pillow-soft neomorphic plates that look like upholstered bar-cards holding ornate copy. Sections enter via slide-reveal pattern: each plate slides up from below the velvet by 28px while a thin amber hairline draws across the top of the plate. Circuit-board chandelier motifs hang from the upper-canvas of each section, drawn as elegant SVG circuit traces in muted brass — they're the only "tech" tells in an otherwise upholstered space. Menu-style typography on every plate: a serif headline, a small mono code, then narrative copy in restrained italic. The page never raises its voice. ## Typography and Palette - **Display:** "Playfair Display" (Google Fonts) — elegant-serif, weight 400 italic, for menu headlines at 56–72px - **Body:** "Cormorant Garamond" (Google Fonts) — for descriptive narrative copy at 18px line-height 1.65, weight 400 - **Maître d' code / caption:** "IBM Plex Mono" (Google Fonts) — for menu codes (e.g., "N° 014") and brass-plate labels - **Micro engraving:** "Source Serif Pro" (Google Fonts) — for small italic engraved-feel sub-captions Palette — Muted velvet speakeasy: - `#1A0F12` Velvet Black — primary backdrop, the unlit bar - `#3A1F22` Burgundy Stage — main panel surface - `#C8A36A` Brass Filament — primary HUD accent, hairline rules - `#E2D4B4` Aged Vellum — body text on dark surface - `#5C4338` Smoke Patina — neomorphic shadow tint - `#0E0608` Ink Shadow — deep neomorphic shadow under plates ## Imagery and Motifs - **Custom-illustration**: hand-drawn ornate menu cards — bottles, etched glasses, plumed pens, embossed brass tags — each rendered in 1.5px Brass Filament outlines on Burgundy Stage backgrounds with subtle Vellum highlights - **Circuit motifs**: elegant SVG circuit-board paths drawn in Brass Filament, hanging like decorative chandelier traces from the upper canvas. Circuits are designed as ornamental, not functional — they curve gracefully, with small "node" diamonds and faux capacitor glyphs - Speakeasy ornaments: brass corner cartouches, smoke-patina hairline dividers, vellum-paper menu-card edges with subtle deckle softening - Recurring "decanter" still-life: a small custom-illustration decanter and tumbler arranged on a marble-coaster appears at section closes - Engraved sub-captions: small italic Source Serif Pro phrases (e.g., "served quietly, after midnight") appear beneath each plate's headline ## Prompts for Implementation - Section plates rendered as neomorphic upholstered cards: 16px border-radius, Burgundy Stage fill at 0.92 alpha over the velvet base, with a dual shadow (-2px -2px Aged Vellum at 0.05, +6px +8px Ink Shadow at 0.55) - HUD overlay: a 1px Brass Filament hairline tracing the viewport edge, with corner cartouches built from 14px SVG flourishes - Slide-reveal pattern: each plate enters via `translateY(28px → 0)` + opacity(0 → 1) over 720ms cubic-bezier(.2,.7,.2,1), with the top-edge hairline drawing left-to-right over 600ms via stroke-dashoffset - Circuit chandeliers: inline SVG positioned 0–80px down from each section's top, drawn with 1.5px Brass Filament paths, gently animating stroke-dashoffset at 18s cycles - AVOID: CTA buttons, pricing tiers, sign-up modules, social proof, testimonial blocks. Plates carry narrative copy or menu-style descriptions only - Display type breathes: italic Playfair at 56–72px, generous letter-spacing 0.005em, paired with mono "N° 014" codes in IBM Plex Mono 11px - Velvet base: SVG turbulence + soft burgundy radial gradient, opacity 0.6, multiplied over Velvet Black; a faint thread-grain via 2px diagonal stripe pattern - All animations should be slow, hushed, no bounces; opulence here means deliberate timing ## Uniqueness Notes - Differentiator 1: neomorphism + circuit motifs + muted velvet is an unusual collision — soft upholstery with ornamental circuitry as chandelier - Differentiator 2: hud-overlay used as maître d' menu framework, not as gaming dashboard - Differentiator 3: muted palette anchored by burgundy velvet rather than the corpus's typical gray-tan muted register - Differentiator 4: elegant-serif typography + custom-illustration imagery, opposite of the corpus's mono+photography dominance - Differentiator 5: opulent-grand tone executed with restraint, not bombast — opulence as hush, not glitter - Chosen seed: aesthetic: neomorphism, layout: hud-overlay, typography: elegant-serif, palette: muted, patterns: slide-reveal, imagery: custom-illustration, motifs: circuit, tone: opulent-grand - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography (90%), warm palette (93%) — burgundy is dark cool-warm, not generic warm; mysterious-moody (70%) — opulent-grand reframes the dark palette; mono typography (81%)