# Design Language for amamya.bar ## Aesthetics and Tone amamya.bar is a **submerged Edwardian salon under a chrome-plated tide-pool** — picture a maximalist mid-century cocktail lounge that has been dropped, fully furnished, into the deep end of a futuristic plunge pool, and then asked to keep serving drinks. The walls are still papered in damask, the glassware is still cut crystal, the bartender still wears a velvet jacket — but everything is now suspended in a column of cool, metallic water, and small silver bubbles drift up the page in long lazy chains, occasionally bumping against a baskerville italic ampersand and changing course. The tone is **playfully grand**. It is not solemn underwater (no shipwreck mood, no abyssal dread, no bioluminescent mystery), and it is not merely aquatic-decorative (no surfboards, no beach typography, no wave clichés). amamya.bar treats "bar" the TLD as both a literal bar — *the kind with a brass rail and a back-bar mirror* — and as a horizontal navigational element, the brass divider of a navy-and-mercury world. The site is the menu, the wine list, the room, the soundtrack, and the slightly tipsy host who keeps adjusting their pearl earring while talking about the house infusion. Specific visual cues that anchor the mood: - **A long mercury-thread pour.** A single hairline of liquid silver runs from the top of the page to the bottom, threading through every section like a slow waterfall of mercury — the "spine" of the bar. - **Damask under chrome.** A tightly woven baroque damask pattern sits beneath every section, then a layer of mirror-finish chrome sheen sits on top of it, and finally a sparse drift of bubbles floats above both layers. Three z-depths, always. - **Bubbles as punctuation.** Small spherical bubbles (1px–18px diameter) replace conventional decorative elements — instead of horizontal rules, three bubbles in a row. Instead of bullet points, a bubble preceded by a thin vertical mercury thread. - **Italic ampersands as artifact.** Large Libre Baskerville italic ampersands and italic numerals float in section margins like pieces of antique signage that have come loose and drifted. - **A futuristic playfulness, not a futuristic seriousness.** The interface borrows from sci-fi (HUD-style readouts, monospaced telemetry pills, slight scanline overlays on chrome surfaces) but renders all of it in a winking, slightly absurd tone — the bar's house cocktail is called "Mercury Telemetry №7" and its description is delivered with full Edwardian pomposity. The visitor should feel like they have walked into a salon where nothing is entirely possible — the wallpaper is too lush, the lighting is too cold, the gravity is slightly wrong, the bar is selling a pour that takes 4.2 seconds to fall — and where everyone present is pretending this is perfectly normal, while occasionally pausing to watch a bubble go past. ## Layout Motifs and Structure The structure is a **stacked-sections** vertical composition — full-width horizontal slabs stacked on top of each other like a layer cake of underwater rooms. Stacked-sections sits at 1% in the layout frequency analysis (almost unused). amamya.bar claims it as the dominant motif, and the implementations that exist tend to be either Bauhaus-flat or marketing-page generic. Here, every stacked section is a **fully decorated maximalist room** with its own damask, its own chrome trim, its own bubble drift, and its own typographic personality — but locked to the same width grid and stacked in strict vertical order, like floors of a sunken hotel. **The grid:** - 12-column underlying grid, 1440px max content width, 96px outer gutter. - Every section is exactly 100vh tall on first load, then scrolls into the next section with a slow parallax bubble drift between them. - A constant 1px mercury thread runs down the absolute center of the page (column 6/7 boundary), cutting every section in half. This thread is the visual spine. - Each section stack is built of three stacked z-layers: (z0) damask wallpaper, (z1) chrome plate with section content, (z2) bubble drift. **Section order (top → bottom), eight stacked rooms:** 1. **The Awning.** A black-mercury awning extends across the top of the page; the wordmark "*amamya & bar*" is cut into the awning in italic Libre Baskerville with the ampersand oversize. Beneath the awning, a short menu of anchor links (Salon · Cellar · Hours · Letter) styled as engraved brass plates. 2. **The Salon.** A wide, near-cinematic stage section with an oversized italic numeral "*I.*" in the left margin, a maximalist damask backdrop, and a single dense paragraph of italic-set copy describing the room. Three giant bubbles drift up from the bottom of the section over 14 seconds. 3. **The Pour.** A vertical mercury thread becomes the section content — it widens to 18px in the center of the section, then narrows back to 1px. Set against this widening pour, four cocktail entries are arranged as **engraved horizontal labels** stacked vertically (label → italic name → small caps subtitle → telemetry pill). 4. **The Cellar.** A maximalist grid of 24 small "bottle cards" with hover-lift behavior. Hover-lift is at 8% in the patterns frequency analysis (underused). Here, hover-lift is the *only* interaction — every card lifts 12px on hover with a chrome glow underneath and a faint bubble release, *and that is the entire interaction language of the site*. 5. **The Letter.** A long-form italic editorial paragraph from the proprietor, set ragged-right in 18px Libre Baskerville italic, with hand-set drop caps in mercury chrome and italic ampersands floating in the margins. 6. **The Hours.** A telemetry-style HUD readout — monospaced (Space Mono), set on a brushed-chrome plate, listing opening hours in a sci-fi format ("0900h–0200h · pressure 1.42 atm · dim. depth 14m"). A subtle scanline shimmer crosses the chrome every 6s. 7. **The Reservation.** A single italic-script line: "*we do not take reservations. we recognize you when you arrive.*" Set centered, in 36px italic, against a dark navy field with a slow rising column of bubbles directly behind the line. 8. **The Colophon.** A narrow brass rail across the bottom with the site's typographic credits in 11px small caps, the year "*MMXXVI.*" in italic, and a final mercury thread that drips off the bottom of the page into nothing. **Cross-section continuity:** - The mercury thread is unbroken across all 8 sections. - The bubble drift is *globally* simulated — bubbles are not per-section; a global bubble field rises continuously up the page, disappearing off the top. - Every section's chrome plate has identical edge treatment: 2px mercury bevel at top, 1px shadow at bottom, 24px inner padding before damask. - Section transitions are **rooms**, not slides — the visitor descends through floors, never a horizontal scroll. This is **not** a card-grid. It is **not** asymmetric. It is **not** full-bleed. It is deliberately, almost aggressively stacked — the most architecturally rigid layout in the frequency analysis, applied to the most ornate aesthetic. ## Typography and Palette **Fonts (Google Fonts only, three families):** - **Libre Baskerville** — Regular 400, Italic 400, Bold 700. The site's primary voice. Used for the wordmark "*amamya & bar*" (italic, 72px at hero, large oversize ampersand at 1.4em weight 400 italic), every section title (italic 36px), all body copy (regular 16px, line-height 1.7), all marginalia ampersands and numerals (italic 96px, opacity 0.18). Libre Baskerville is chosen because it is a faithful digital revival of John Baskerville's 1757 transitional serif — high-contrast strokes, narrow apertures, a slightly haughty italic — and its italic in particular reads as **engraved menu type from a high-Edwardian salon**. It is the perfect counterpoint to the cold metallic palette: warm-toned, ink-heavy, a little bit drunk. - **Space Mono** — Regular 400, Bold 700. Used *only* for the HUD telemetry pills, the cocktail telemetry subtitles ("0.42% abv variance · 14ml mercury garnish"), the section anchor IDs in the nav, and the colophon technical credits. Space Mono is the **futuristic** voice — flat, evenly-spaced, sci-fi instrument-panel — and it never appears at scale; it always appears in 11px–13px monospaced telemetry strips that feel like readouts from beneath a chrome bezel. - **Cormorant Garamond** — Italic 300, used *exclusively* for the Section 7 reservation line ("*we do not take reservations. we recognize you when you arrive.*"). One use, in one place, in one weight. This is the site's whisper voice — softer and more handwritten-feeling than Baskerville, almost a private aside. The deliberate restriction makes it land. Type rules: - Italic is the default voice. Roman/upright is used only for telemetry, navigation labels, and small caps. - Ampersands are **always** italic Libre Baskerville, **always** at least 1.4× the line height around them, and **always** in mercury silver (`#C8CDD3`) when oversized as marginalia. - Drop caps appear once, in The Letter (Section 5), set in 96px italic Libre Baskerville with a mercury chrome gradient fill. - Small caps appear in the colophon and in cocktail subtitles — set with `font-feature-settings: "smcp"` on Libre Baskerville. **Palette: navy-metallic** (chrome-metallic 11%, midnight-blue 10% — combining two underused-to-mid-frequency palettes into a deliberate pairing). - `#0A1628` — *deep abyssal navy.* Section backgrounds (z0 base before damask). The dominant field color. - `#142540` — *salon navy.* Damask base color where the pattern is rendered against the abyssal background. - `#1F3A5F` — *steel navy.* Mid-tone for damask highlights and drop shadows beneath chrome plates. - `#C8CDD3` — *mercury silver.* The mercury thread, the pour, the chrome bevels, the oversized italic ampersands. The single most "branded" color on the site. - `#9AA3AD` — *cool chrome.* Secondary metallic — used for chrome plate fills (gradient from #C8CDD3 at top to #9AA3AD at bottom). - `#5C6470` — *gunmetal.* Edge shadows beneath chrome, footer rail, scanline base. - `#E8B86E` — *brass tarnish.* The single warm accent in the entire palette — used for the awning brass rail (Section 1), the engraved cocktail labels (Section 3), the colophon brass strip (Section 8). Used sparingly, exactly four times on the page. - `#F4EFE6` — *ivory paper.* The body copy color, set against the navy background. Slightly warm-tinted to keep the Baskerville italic from looking icy. Color rules: - Body text is `#F4EFE6` (ivory) on `#0A1628` (abyssal navy). Never pure white. Never pure black. - Mercury (`#C8CDD3`) is reserved for **liquid metal motifs only** — the thread, the pour, the bubble outlines, the chrome bevel highlights, the oversized ampersand marginalia. - Brass (`#E8B86E`) is reserved for **physical bar fixtures only** — awning rail, engraved labels, footer rail, year. Four uses total. - Damask is rendered in `#142540` and `#1F3A5F` against `#0A1628`, at 6% opacity, with the entire damask layer kept faintly visible — present but not loud. - Chrome plates use a vertical linear gradient: 0% `#C8CDD3` → 50% `#9AA3AD` → 100% `#5C6470`, with a 1px `#F4EFE6` highlight at the top edge and a 1px `#0A1628` shadow at the bottom edge. ## Imagery and Motifs **Primary imagery: water-bubbles.** Water-bubbles sits at 6% in the imagery frequency analysis. amamya.bar makes water-bubbles the **only** imagery — there are no photographs, no illustrations, no icons, no photographic textures. The entire visual texture of the site is generated from three primitives: bubbles, mercury threads, and damask wallpaper. Every other "image" on the page is typographic. **Bubble system:** A globally simulated rising bubble field, generated entirely in CSS (with optional JS enhancement for cursor disturbance). Bubble specifications: - **Sizes:** 1px, 2px, 4px, 7px, 11px, 18px (Fibonacci-adjacent). Larger bubbles are rarer. - **Distribution:** ~120 bubbles in viewport at any moment, distributed across the full page width. - **Rendering:** Each bubble is a circle with: a `#C8CDD3` 1px stroke, a `radial-gradient` interior from `rgba(200,205,211,0.04)` at center to `rgba(200,205,211,0.18)` at edge, and a single 1px `#F4EFE6` highlight dot at the upper-left of the rim (the meniscus glint). - **Motion:** Vertical rise, 14–32 seconds bottom-to-top depending on size (smaller = faster, like real bubbles in water). Subtle horizontal sway via CSS `@keyframes` (±3px sine-wave drift). - **Interaction:** Cursor passing within 80px of a bubble nudges it sideways (cursor-follow at 58% — already overused; here it is *minimized*: cursor only nudges bubbles, no other element responds to cursor). - **Birth/death:** Bubbles spawn at random x positions just below the bottom edge and disappear by fading to 0 opacity over the top 80px of the viewport. Never abrupt. **Mercury thread system:** - One central vertical thread (1px wide, `#C8CDD3`, full page height, faint glow `box-shadow: 0 0 4px rgba(200,205,211,0.4)`). - The thread **widens** in Section 3 (The Pour) into an 18px liquid pour, narrows back to 1px below. - Where the thread crosses a section divider, it briefly **droops** by 4px before snapping back — a tiny gravity gag, repeated 7 times down the page. **Damask wallpaper system:** A single tiled SVG damask pattern, hand-drawn baroque (acanthus leaves, fleur-de-lys, tendril swags), tiled at 280×280px. Color: stroke `#1F3A5F`, fill `#142540`, both at 6% opacity over `#0A1628`. The damask is the **same pattern** across all 8 sections — only the section's content varies. This deliberate sameness makes the rooms feel like they belong to one bar. **Decorative typographic motifs (no images, just type):** - **Marginalia ampersands.** Each section's left or right margin holds a single oversized italic Libre Baskerville ampersand at 96–144px, color `#C8CDD3`, opacity 0.18. Eight ampersands total, alternating margins. - **Marginalia roman numerals.** Each section is numbered with an italic Libre Baskerville Roman numeral (I., II., III., …VIII.) in the opposite margin from the ampersand, same size and opacity. - **Engraved cocktail labels.** Section 3 cocktail names appear as **engraved brass plates** — 1px outset bevel of `#F4EFE6`, 1px inset bevel of `#5C6470`, brass fill `#E8B86E` at 22% opacity, italic Libre Baskerville centered. - **Telemetry pills.** Section 6 and the cocktail subtitles use Space Mono inside small chrome pill shapes — 24px tall, 12px horizontal padding, chrome gradient fill, 11px text. **No iconography.** No SVG icons. No glyph webfont icons. Where another site might use an icon, amamya.bar uses a typographic ampersand or a bubble. ## Prompts for Implementation Build amamya.bar as **a single static HTML page**, vertically stacked, every section a fully decorated maximalist room. One HTML file (`index.html`), one CSS file (`style.css`), one JS module (`bubbles.js`, ~5KB minified). The Google Fonts stylesheet link is the only external dependency. The full page weight (excluding fonts) should land under 80KB. **Hard constraints (these are the design):** - **No hero CTA.** No "Reserve Now" button. No email signup. No phone number. The reservation section is a single italic line and that is the entire conversion path. - **No pricing block.** Cocktails are listed with telemetry, not prices. - **No stat-grid.** No "served 4,000 customers since 2019." - **No testimonials.** No press logos. No "as seen in." - **Eight stacked sections.** No more, no less. If a piece of content does not fit in one of the eight rooms, cut it. - **One interaction.** Hover-lift on the Cellar bottle cards (Section 4). Bubbles drift but are not "interactive" in any user-controllable sense (cursor passively nudges). No click-to-expand, no modals, no carousels, no tabs. **Storytelling rhythm (top → bottom):** The visitor lands on Section 1 (The Awning). The wordmark fades in over 1.2s with a slow italic reveal. Two large bubbles are already drifting up. The visitor scrolls. Section 2 (The Salon) introduces the room — the damask is fully visible, the central mercury thread is established, the first oversized italic ampersand appears in the left margin. A single dense italic paragraph of copy. Three large bubbles drift up over 14s. Section 3 (The Pour) is the centerpiece. The mercury thread widens into an 18px vertical pour that takes 4.2 seconds to fall the full section height (deliberately slow, deliberately wrong gravity). Four cocktails are listed alongside the pour, each with engraved brass label, italic name, small caps subtitle, and a telemetry pill. Section 4 (The Cellar) is the maximalist climax — 24 bottle cards in a 6-column grid, each card hand-typeset with italic name, telemetry vintage, and a tiny bubble seal. Hovering any card lifts it 12px with a chrome glow underneath and releases 3 small bubbles upward over 0.8s. This is the entire interaction repertoire of the site. Section 5 (The Letter) is a long-form italic paragraph from the proprietor — ragged right, generous leading, a single mercury chrome drop cap. The reading rhythm slows here. Section 6 (The Hours) is the futuristic counterpoint — Space Mono telemetry on a brushed chrome plate, dim depth and pressure readings rendered as if from a submerged instrument panel. A 6-second scanline shimmer crosses the chrome. Section 7 (The Reservation) is the whisper — a single Cormorant Garamond italic line, centered, against a column of rising bubbles directly behind the line. The bubbles are denser here than anywhere else on the page — almost a curtain. Section 8 (The Colophon) is the brass rail closing the bar. Type credits in small caps, the year *MMXXVI.* in italic, and the mercury thread drips off the bottom of the page into nothing. **Animation philosophy:** - **Slow.** Nothing animates faster than 0.8s. The pour falls in 4.2s. The bubbles rise in 14–32s. The scanline crosses in 6s. - **Loop forever.** Bubbles, mercury thread shimmer, scanline — all infinite loops. The bar is always open underwater. - **No scroll-triggered choreography.** No fade-in-on-scroll. No counter-animate. No path-draw-svg. The site does not perform when the visitor arrives at a section — it has been performing the whole time, and the visitor is simply now in the room. - **Hover-lift is the only on-demand animation.** Section 4 bottle cards. Nothing else hovers, nothing else lifts. **CSS techniques to use:** - CSS `radial-gradient` for every bubble interior. - CSS `linear-gradient` for chrome plate vertical sheen. - CSS `@keyframes` for bubble rise and sway, mercury thread shimmer, scanline crossing. - SVG inline data-URI for damask tile, set as `background-image` with `background-repeat: repeat`. - `mix-blend-mode: screen` on the bubble layer to let bubble highlights pop against the navy field. - `font-feature-settings: "smcp", "lnum"` on Libre Baskerville small caps. **JS responsibilities (single module, ~5KB):** - Maintain the bubble pool (~120 instances, recycle on rise-completion). - Compute cursor proximity nudges (within 80px, decay over 0.4s). - Drive the mercury thread "droop" gag at section boundaries (one-line scroll listener, drops the thread 4px when a section divider crosses the viewport center). - Nothing else. No router, no state machine, no analytics. ## Uniqueness Notes This design's differentiators, each a deliberate departure from patterns documented in the frequency analysis: 1. **Maximalism inside a stacked-sections grid.** Maximalist sits at 1% in aesthetic frequency. Stacked-sections sits at 1% in layout frequency. The combination of *the most ornate aesthetic* with *the most rigidly architectural layout* is what defines this site — every room is dense and decorated, but the rooms are stacked like floors of a hotel, not scattered like a mood board. This collision of maximalist content inside minimalist structure is unused elsewhere in the corpus. 2. **Baskerville italic as the dominant voice.** Baskerville-refined sits at 3% in typography frequency. amamya.bar sets *almost everything* in Libre Baskerville italic — body, titles, marginalia, drop caps, the wordmark, the reservation line. Italic is the default, roman is the exception. This is rarer than serif-as-default, and pushes against the 95% of the corpus that uses mono or humanist sans as primary. 3. **Navy-metallic palette as a deliberate pairing.** Chrome-metallic at 11% and midnight-blue at 10% are both mid-frequency, but the corpus rarely combines them — chrome-metallic tends to ride with gradient/holographic palettes, midnight-blue tends to ride with corporate or starfield palettes. Pairing them as **mercury-on-navy** gives amamya.bar a cold, liquid-metallic identity that no other site in the corpus inhabits. 4. **Water-bubbles as the only imagery, generated entirely from CSS.** Water-bubbles sits at 6% in imagery frequency, and where it appears it tends to be photographic or particle-system illustrative. amamya.bar bans photography entirely and renders bubbles from CSS `radial-gradient` primitives. Combined with the mercury threads and damask wallpaper, the entire visual texture of the site is **typographic plus three CSS primitives** — no raster imagery anywhere. 5. **Hover-lift as the singular interaction.** Hover-lift sits at 8% in patterns frequency, where it usually appears as one of many micro-interactions on a card-grid. amamya.bar makes hover-lift the **only** user-controllable interaction on the entire page, scoped to one section (the Cellar). Cursor-follow (58%), magnetic (41%), spring (63%), parallax (93%) — all of these dominant patterns are deliberately absent. The site's restraint in interaction is the design. 6. **Futuristic-as-playful, not futuristic-as-serious.** Futuristic motifs sit at 1% in motif frequency, and where they appear they tend toward sci-fi-hud authority. amamya.bar reframes futuristic as *playful Edwardian salon-on-a-submarine* — telemetry pills label cocktail variance percentages, the hours are reported in atmospheres, the reservation line jokes that the bar "recognizes you when you arrive." The futurism is set decoration, not seriousness. 7. **Stacked-sections with a continuous mercury thread spine.** No site in the corpus uses a single continuous vertical thread that runs unbroken across all stacked sections, widens in one section into a pour, and droops at section boundaries. This thread is the site's structural mascot — geometric, animate, and continuously visible. 8. **Tone is playfully grand, not pastoral or warm.** Tone frequency is dominated by warm-inviting (18%) and pastoral-romantic (15%). amamya.bar's tone — *playful* (20% in aesthetic but 0% as a tone tag in the corpus) — sits halfway between Edwardian salon pomposity and underwater absurdity. The site's voice is a velvet-jacketed bartender straight-facedly explaining that the house pour takes 4.2 seconds because the gravity in the room is calibrated to dim. depth 14m. This is the unique tonal slot the site occupies. **Chosen seed:** aesthetic: maximalist, layout: stacked-sections, typography: baskerville-refined, palette: navy-metallic, patterns: hover-lift, imagery: water-bubbles, motifs: futuristic, tone: playful **Avoided patterns from frequency analysis:** - **Aesthetic avoided:** hand-drawn (93%), glassmorphism (65%), editorial (36%). - **Layout avoided:** full-bleed (85%), centered (78%), card-grid (60% — used only inside Section 4, not as the page-level layout), asymmetric (56%). - **Typography avoided:** mono (95% — used only for telemetry pills, never as primary), humanist (36%), handwritten (30%). - **Palette avoided:** gradient (93% — used only inside the chrome plate sheen, not as section backgrounds), warm (91%), muted (41%). - **Patterns avoided:** parallax (93% — explicitly not used), spring (63%), stagger (61%), cursor-follow (58% — minimized to bubble nudges only), magnetic (41%). - **Imagery avoided:** photography (96% — banned entirely), minimal (15%), gradient-mesh (13%). - **Motifs avoided:** vintage (23% — the Edwardian feel is not "vintage retro" but "decorative grand"), nature (20%), tech (13%). - **Tone avoided:** warm-inviting (18%), pastoral-romantic (15%), authoritative (8%).