# Design Language for amamya.bar ## Aesthetics and Tone amamya.bar is a luxury speakeasy dessert bar -- the imagined sweets shop ("甘味屋 / amamya" with the playful 甘味ゃ spelling) reframed as a high-end after-dark destination, set in a candlelit, mahogany-and-gold dessert lounge where wagashi-inspired confections are presented like cocktails. The .bar TLD specifically motivates the framing: this is a bar, not a shop, where the menu is short, the lighting is low, and the presentation is reverent. The site treats each confection as a curated experience, with cinematic vertical tableaux, slow-zoom presentation, and the unhurried theatricality of an Aman Tokyo lobby at midnight. The aesthetic is **cinematic** -- vertical full-bleed compositions that feel like still frames from a slow art-house film, with deliberate lighting setups (warm key light from upper-left, deep shadows in the lower-right corners), depth-of-field blur on background elements, and the visual grammar of festival-quality cinematography. Every section is composed as a "shot" rather than as a layout: one focal point, deep negative space around it, and the suggestion that this image could exist in a film about the dessert bar itself. The tone is **opulent-grand** -- formal, restrained, slightly hushed, the voice of a maitre d' announcing the evening's service. Headlines are short and ceremonial: "tonight we serve seven," "the aged kingyokuto, 2024 reserve." Body copy describes each confection with the precision and slight reverence of a wine tasting note. Numerical references abound -- bean origin, year of azuki harvest, hours of preparation, temperature of presentation. The voice is confident in the value of what's being served. The site is bilingual where appropriate: each headline appears in both Japanese (amamya / 甘味ゃ) and English, with the Japanese set in tech-mono for an unexpected typographic juxtaposition that contributes to the modern-luxury register. ## Layout Motifs and Structure **Bento-Box Composition (luxury-grid restraint):** The page uses a bento-box grid as its structural device, but executed in a luxury-restraint register: cells are larger than typical bento (often 6-12 columns wide), gutters are wider (40-56px), and the grid never feels packed. Most viewports show only 2-4 cells. Each cell is a single ceremonial element: one confection presented at scale, one quote, one menu listing, one image-shaped void. The grid uses 12 columns, 320px row units, 56px gutters. Cells span: - Cover cell: 12 col, 4 row (the opening cinematic still) - Confection cells: 6 col, 4 row (one confection per cell, presented like a single film shot) - Menu cell: 4 col, 3 row (tonight's seven items, listed like a wine flight) - Quote cell: 8 col, 2 row (a tasting-note pull-quote) - Footer: 12 col, 2 row (closing tableau) Cells have generous internal padding (88px top/bottom, 64px left/right) so that each contained element sits with breathing room. No cell is crowded. **Cinematic Composition Principles per Cell:** Each cell is composed as a single cinematic shot: - One primary subject, anchored to a precise focal point (rule of thirds, golden ratio, or center) - A specific simulated lighting setup: warm key light from upper-left, ambient fill, deep shadow lower-right - A suggested camera depth: foreground subject sharp, mid-ground softly defocused, background heavily defocused - A deliberate aspect ratio: most cells are 3:4 or 4:5 vertical, suggesting cinema-screen formats - A single "lens dust" or grain texture overlay suggesting filmstock authenticity **Flowing-Curves Motif Vocabulary:** The decorative ornament vocabulary centers on **flowing-curves** -- elegant SVG bezier curves that flow across cell boundaries, suggesting the slow pour of a sauce, the curl of warm caramel, or the trail of a confectioner's brush. The curves are: - 1px-2px stroke width in muted gold (#c5a572) - Slightly hand-drawn imperfection (CSS or SVG variation in stroke width) - Long, sweeping, never short or harsh - Often spanning two or three adjacent cells, providing a unifying visual rhythm - Animated subtly: stroke-dashoffset animation revealing the curve over 2-3 seconds when its parent cell enters viewport These curves suggest the calligraphy of a confectioner's signature line or the trace of sauce pulled across a plate. **Scale-Hover Pattern:** The interaction vocabulary centers on **scale-hover** -- hovering any cell causes a smooth scale transformation: - Cell scales from 1.0 to 1.04 over 600ms with cubic-bezier(0.65, 0, 0.35, 1) - Adjacent cells gently scale to 0.98 simultaneously, creating a subtle "lifting from the page" effect - The hovered cell's gold accent border opacity steps from 0.15 to 0.55 - Internal contents of the hovered cell shift slightly: the headline lifts 4px, the body copy translates 2px, suggesting a parallax depth response - A subtle gold inner glow (box-shadow inset) blooms around the cell border The scale-hover is the site's primary interaction. It is restrained but consistently rewarding -- every cell responds to attention with a small, dignified gesture. **Section Architecture:** The site is presented as the evening's menu, with these sections: 1. **Cover tableau** (12-col cell): A single dark frame with the brand name "amamya.bar" centered, soft warm key light from upper-left, deep shadow elsewhere. 2. **Tonight's service** (6+6 col cells): Two confection cells side-by-side, each presenting one item in detail. 3. **The flight** (4-col cell + 8-col cell): A menu listing of all seven items + a tasting note pull-quote. 4. **Featured pairing** (12-col cell): A single full-width tableau presenting the night's featured pairing. 5. **The room** (6+6 col cells): Two cells describing the room/setting/lineage of the bar. 6. **Reservation note** (12-col cell): A closing message about the evening's seating. ## Typography and Palette **Primary Display Font:** "JetBrains Mono" (Google Fonts) -- chosen as the tech-mono anchor of this site. Weight 400 used for headlines, weight 700 for occasional emphasis. The mono treatment of luxury display headlines is the site's central typographic risk: it transforms what could be a generic luxury site (serif-flourish headlines on dark) into something modern, slightly subversive, and unexpectedly compelling. Letter-spacing 0.06em at headline sizes, opening to 0.12em at small label sizes. **Secondary Display Font:** "Cormorant Garamond" (Google Fonts) -- italic weight 400 used for tasting-note pull-quotes and ceremonial language. Italic Garamond provides the only "traditional luxury" typographic gesture, used sparingly to anchor the otherwise unconventional mono-display register. **Body Font:** "Inter" (Google Fonts) -- weight 300 (very light) for body copy, line-height 1.7. The light weight creates an airy, refined feel. **Japanese Display Font:** "M PLUS 1 Code" (Google Fonts) -- a Japanese mono font used for the Japanese-language headline parings. Weight 400. Used in conjunction with JetBrains Mono so that both Latin and Japanese headlines share the mono register. **Type Scale:** - Cover brand: clamp(72px, 9vw, 144px) -- JetBrains Mono weight 400, with letter-spacing 0.18em - Section H1: clamp(48px, 5.5vw, 80px) -- JetBrains Mono weight 400 - Confection name (Japanese): clamp(36px, 4vw, 56px) -- M PLUS 1 Code weight 400 - Confection name (English/Romaji): clamp(20px, 1.8vw, 24px) -- JetBrains Mono weight 400, uppercase - Pull-quote / tasting note: clamp(32px, 3.5vw, 48px) -- Cormorant Garamond italic weight 400 - Body: clamp(15px, 1.05vw, 17px) -- Inter weight 300 - Menu line: 14px JetBrains Mono weight 400 - Caption: 11px JetBrains Mono weight 400, letter-spacing 0.18em uppercase **Palette (Gold-Black-Luxury):** - Velvet black: `#0a0808` (the deepest darkness, near-black with subtle warm shift) - Mahogany shadow: `#16110d` (slightly elevated, the wood-paneled shadow) - Espresso: `#231a14` (cell backgrounds at slight elevation) - Aged gold: `#c5a572` (the primary accent -- borders, ornament curves, key text highlights) - Bright gold: `#e6c485` (used very sparingly for the brightest accents -- the brand wordmark, key initial caps) - Champagne: `#f0d8a8` (pale warm cream, used for body text on dark) - Body text: `#d8c8a8` (warm parchment, slightly muted from champagne for long-form readability) - Single cool counterpoint: `#3a4f6b` (deep midnight blue, used for ONE accent -- the night-sky element in the cover tableau, suggesting the bar's after-hours framing) The palette is rigorously dark and warm-toned. Gold is the only saturated color, used sparingly as accent. There are no bright/light backgrounds anywhere on the site. ## Imagery and Motifs **Confection Tableaux (the dominant imagery):** Each confection cell features a single hand-drawn SVG illustration of one wagashi-inspired creation, rendered in the style of a high-end pastry photograph but composed as line-and-fill SVG. The illustrations: - Approximately 320-480px in size - 1.5px outline strokes in aged gold + selective fills in champagne and warm tones - Composed with deliberate cinematic lighting (gold gradient highlights from upper-left, deep shadows elsewhere) - Show the confection on a small plate or pedestal, often partially eaten or with a deliberate brushstroke of sauce - Each illustration includes a tiny gold flake accent (a small SVG circle with bright-gold fill and 60% opacity glow) Specific confections to feature: - "Aged Kingyokuto, 2024 reserve" (translucent jelly with a small fish silhouette suspended inside) - "Smoked Mochi" (a single dark-glazed mochi sphere with subtle steam) - "Yuzu Yokan with Gold Leaf" (rectangular yokan with a gold-leaf accent) - "Sweetened Azuki, twice-cooked" (a small clay bowl of azuki with gold detailing) - "Crystallized Plum" (a translucent sphere on a black plate) - "Pressed Hanabira-mochi" (folded mochi with subtle pink fill) - "Final Course: Caramelized Anko Tarte" (a small tart with caramelized top) **Flowing-Curves Decorative Ornaments:** Long sweeping bezier curves in aged gold trace across cells, suggesting calligraphic flourishes or sauce-pour traces. Specifications: - 1.5-2px stroke width - Single sweeping curves, never busy webs - Often span 2-3 adjacent cells - Animated stroke-dashoffset reveal on viewport entry (2-3 second draw) - Slight breathing animation after reveal: subtle stroke-width oscillation between 1.5px and 1.8px **Noise-Texture Overlay:** A persistent **noise-texture** overlay covers every cell at 6-9% opacity, providing a filmstock-like grain texture that anchors the digital cells in the imagined cinematic register. The noise is generated via SVG `feTurbulence` filter (or equivalent PNG) and is fixed-position, not animated. **Cinematic Lighting Effects:** Each cell has a simulated cinematic lighting overlay -- a soft radial gradient from the upper-left corner (warm gold at 8% opacity) to the lower-right corner (transparent), suggesting a single key light. The result is that every cell has a subtle "depth" suggesting it was lit by a real source. **Photography:** Forbidden. All imagery is illustrated SVG. **Iconography:** No formal icons. The flowing-curves motif and the gold flake accents serve as decorative ornament where icons would conventionally be used. ## Prompts for Implementation **Storytelling Frame:** The visitor is a guest arriving at the dessert bar at the start of evening service. They are seated, the lights are low, the room is hushed, and the menu of seven confections is presented with ceremony. Each confection is a small chapter, given its own cinematic frame, its own tasting note, its own gold-leaf detail. The visitor is invited to scroll through the evening as if reading a tasting menu, with no urgency to choose -- there is only the quiet pleasure of consideration. **Cinematic Cell Composition:** Each cell is composed with intentional cinematic discipline: - Generous internal padding (88px top, 64px left/right) - One primary subject anchored to a focal point (varies by cell) - Cinematic lighting overlay (warm gold radial gradient from upper-left) - Noise-texture overlay (6-9% opacity, fixed) - 1px aged-gold border (opacity 0.15) bounding the cell with a slightly hand-drawn imperfection - Generous use of negative space around the subject **Scale-Hover Implementation:** ```css .cell { transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1), border-color 400ms ease; border: 1px solid rgba(197, 165, 114, 0.15); } .grid:hover .cell { transform: scale(0.98); } .grid:hover .cell:hover { transform: scale(1.04); border-color: rgba(197, 165, 114, 0.55); box-shadow: inset 0 0 60px rgba(197, 165, 114, 0.06); } .cell:hover .cell-headline { transform: translateY(-4px); } .cell:hover .cell-body { transform: translateY(-2px); } ``` **Flowing-Curve Reveal Animation:** SVG curves use stroke-dasharray + stroke-dashoffset technique. On viewport entry (IntersectionObserver, threshold 0.3), the curve animates over 2400ms with a subtle ease-out curve. After reveal, the curve has a 4-second slow oscillation in stroke-width (1.5px → 1.8px → 1.5px) infinite. **Cinematic Lighting Implementation:** ```css .cell::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at 20% 20%, rgba(229, 196, 133, 0.08), transparent 60% ); pointer-events: none; } ``` **Noise-Texture Implementation:** A fixed-position pseudo-element on the body, with a tiled high-resolution noise PNG (or inline SVG turbulence) at 6-9% opacity, using `mix-blend-mode: overlay`. Fixed, not scrolling. **Cursor Treatment:** The cursor is replaced with a small gold dot (10px) with a subtle outer glow. Hovering interactive elements expands the dot to 14px with a slightly stronger glow. **Reading Affordances:** - Pull-quotes (Cormorant italic) appear in 8-col cells with extreme padding, set as ceremonial highlights. - Body copy is light-weight Inter (300) for an airy reading experience. - Menu listings (the seven confections) are set in tabular JetBrains Mono with right-aligned price columns and gold-tinted separator lines. **Avoid Absolutely:** - Bright/light backgrounds. The luxury-dark register is non-negotiable. - Photography of any kind. - Hero CTAs of the corporate variety. The closing reservation note is the only "action" affordance. - Carousels, sliders, accordions. - Clean corporate luxury aesthetics. The mono-display headline + flowing-curves combination should feel slightly off-axis from typical luxury restaurant sites. - Saturated colors other than gold. Even the deep midnight blue cool counterpoint is heavily desaturated. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Tech-mono headlines on a luxury-bar context** -- using JetBrains Mono and M PLUS 1 Code for ceremonial luxury display headlines is genuinely unusual. The corpus rarely combines mono-display with luxury-dark palettes. 2. **Cinematic-shot-per-cell composition** -- treating each bento cell as a cinematographic still rather than a content panel. Cinematic aesthetic at 6% in corpus, but rarely executed at this level of compositional discipline. 3. **Flowing-curves as primary decorative vocabulary** -- long sweeping gold bezier curves animated via stroke-dashoffset are uncommon in the corpus. 4. **Gold-black-luxury palette executed with restraint** -- typical "gold luxury" sites overuse gold; this design uses it as precious accent only. The palette is rigorously dark with rare gold incidence. 5. **Scale-hover as system-wide interaction vocabulary** -- consistently applied across all cells, with adjacent cells responding (scaling down) when one is hovered. The "lifting from the page" effect. 6. **Distinct from this batch's other amamiya/amamya domains** -- amamiya-hompo is moody flagship glass, amamiya-honpo is museum archive, amamiya.monster is back-alley shop, amamiya.xyz is editorial zine, this amamya.bar is luxury after-hours dessert bar. Five different framings of the same imagined institution, distinguished by TLD. **Chosen seed/style (from Batch_003 Planned Seeds):** aesthetic: cinematic, layout: bento-box, typography: tech-mono, palette: gold-black-luxury, patterns: scale-hover, imagery: noise-texture, motifs: flowing-curves, tone: opulent-grand **Frequency-analysis avoidance notes:** - Avoiding the corpus-overused "botanical" aesthetic (66%), "photography" imagery (99%), "warm" palette (broad 99%), "muted" palette (50%), "gradient" palette (70%). - Embracing under-used patterns: cinematic aesthetic (6%, but rarely executed at this compositional discipline), tech-mono typography for luxury display, gold-black-luxury palette, flowing-curves motif, noise-texture imagery (2%), scale-hover pattern. - The bento-box layout is increasingly common, but its application here as cinematic-shot-per-cell rather than dashboard differentiates the implementation.