# Design Language for yami.bar ## Aesthetics and Tone yami.bar (v2) is a **Frutiger-Aero Cocktail Atrium** -- a darkly opulent vapor-bar imagined as the rooftop lounge of a 2007 promo CD pressed into the year 2098. The .bar suffix is read as a literal glass bar, but suspended inside a translucent aero-glass column, lit from within by twin neon arteries of magenta and electric cyan. The whole interface reads as a **portfolio-grid** of bottled "yami" cocktails, each one a glass card suspended in space, photographed under a neon-glow Plexiglas dome and labelled with art-deco display typography pulled from the era of Chrysler Building elevators. The tone is **opulent-grand**: this is not a casual cocktail menu, it is a chrome-and-glass cathedral. Every grid cell hums with the wet, optimistic gloss of frutiger-aero -- water droplets clinging to chrome bezels, lens flares pinned to glass corners, soft white starbursts skating across the cyan-magenta duotone fields. Yet the framing is dignified, even ceremonial: art-deco capitals tower above each card like the engraved lintels of a 1930s hotel bar, set in two solid colors only. The result is **luxe digital-2007-meets-1929**: the chrome lounge of a transatlantic dirigible, rendered as a glossy aero portfolio. The narrative spine: yami means "darkness," and this bar serves darkness in seven colored glasses. Each portfolio cell is one glass, one mood, one neon-glow recipe. The visitor walks the colonnade as if browsing a vintage liquor catalog stamped in foil. The grid is the room, the cells are the bottles, the deco letters are the ceiling moulding. There are no prices, no reservations, no CTAs -- only the silent procession of seven luminous portraits and the slow, ceremonial breath of the room itself. ## Layout Motifs and Structure The composition is a **portfolio-grid** -- a strict 4-column desktop grid (2-col tablet, 1-col mobile) of seven glass-card portraits, framed top and bottom by deco lintels and bottom-rule colophons. The grid is dignified, never playful: every cell is the same size (aspect 3:4), every gutter is the same 36px, every card carries the same engraved-deco label. It is a **stagger** pattern -- cards arrive in cascading diagonal waves of 90ms steps, never all at once. **Macro structure:** - **Lintel (Section 0, 80vh):** A full-width art-deco header reading "YAMI.BAR / SEVEN GLASSES OF DARK" in tall deco capitals, framed by two thin neon arteries (one magenta, one cyan) running floor to ceiling at the left and right edges. A small foil-stamped chrome rosette sits dead center beneath the wordmark. Background: deep duotone field, magenta-into-cyan gradient sweep, 0.5fps slow drift. - **The Colonnade (Section 1, scrolls):** The seven glass-card portraits in a 4-3 stagger. Each card: a 3:4 portrait of one cocktail rendered as a glossy aero glass, with a neon-glow halo behind the liquid (the halo is the card's signature color drawn from the duotone wheel). Beneath each glass: a deco label ("NO. I -- BLACKOUT," "NO. II -- AMETHYST HUSH," etc.) and a one-line recipe set in deco small caps. - **The Bar Rail (Section 2, 30vh):** A horizontal chrome bar running edge to edge, with three small sci-fi-hud rosettes pinned along it (a clock at 03:47, a temperature reading 4 deg C, an occupancy "VII / VII"). This is the only "hud" element in the design; it sits like an engraved brass plaque on the front of the bar. - **Colophon (Section 3, 40vh):** A single deco line of credits in pale cyan, followed by a thin magenta rule and the duotone gradient fading to black. **Spatial grammar:** Generous 96px outer gutters frame every section as if matted in a velvet portfolio sleeve. Each glass-card sits inside a 2px chrome bezel with a 6px inner aero-glass blur. The 36px inter-card gutter is filled with a faint neon-arterial dotted rule, magenta on the left edge of each card and cyan on the right. The hierarchy is always: deco label, glass portrait, recipe line. Never break that order. ## Typography and Palette **Fonts (all Google Fonts):** - **Display lintels:** "Limelight" at clamp(40px, 6.5vw, 110px), letter-spacing 0.06em. Used only for the top wordmark and the section numerals (NO. I-VII). Limelight is the closest Google Fonts art-deco display face to the 1929 Chrysler aesthetic and carries the perfect engraved-rosette feel. - **Sub-labels and recipe lines:** "Poiret One" at 13-15px, letter-spacing 0.18em uppercase, weight 400. Used for the cocktail names beneath each glass and the small-caps recipe lines. - **Body and colophon:** "Cormorant Garamond" italic weight 400 at 15px, line-height 1.7. Used sparingly for the single colophon paragraph at the very bottom. No body copy elsewhere -- the design refuses paragraphs. **Palette (strict duotone wheel, only two colors per card; seven card recolors total):** - **Master duotone hues:** #FF2F8A (electric magenta) and #4FE9FF (aero cyan). These two anchor every card; each of the seven portraits is rendered as a duotone of magenta-and-cyan with a third tertiary "glass color" tinting the liquid. - **Tertiary glass tints (one per card):** #2A0E45 (Blackout indigo), #B58CF6 (Amethyst Hush), #FF8E3C (Sunset Smolder), #1AC79F (Verdigris Veil), #FFE066 (Brass Hour), #FF5C5C (Ember Coral), #8FF7E1 (Mint Cloud). - **Ground and chrome:** #050414 (deep night ground), #E8F4FF (chrome-white highlight), #1B1530 (velvet shadow). - **Engraved-rosette gold:** #C9A66B used only for the foil rosette on the lintel and the colophon rule -- nowhere else. **Type-color rules:** Deco lintels always render in chrome-white #E8F4FF over the duotone ground. Recipe lines and sub-labels render in the card's tertiary glass tint at 80% opacity. The italic colophon paragraph renders in aero cyan #4FE9FF. Never tint the deco display in any other color. ## Imagery and Motifs **Core visual motifs:** - **Neon-glow imagery (imagery mandate):** Each glass-card carries a neon-glow halo behind the liquid: a 60% opacity radial bloom in the card's tertiary tint, blurred at 80px and overlaid by a thin chrome rim-light. The glow pulses on hover at 4.2s loop, but only on the card under cursor; all other cards remain still. The glow never crosses the chrome bezel -- it is contained, like a captive aurora inside a perfume bottle. - **Sci-fi-hud motifs (motif mandate):** Only three hud rosettes appear in the design, all on the Bar Rail (Section 2): a chronograph clock dial, a tiny "TEMP 4 deg C" rectangular readout, and a "VII / VII" occupancy gauge with seven small filled dots. Each rosette is drawn in monoline cyan #4FE9FF at 1px stroke, no fill, with a 2px aero-glass inner glow. These are the only hud elements -- they live on the Bar Rail and nowhere else. Tone: ceremonial, not technical. - **Duotone aero-glass cards:** Each portrait is an aero-glass card with a 4-stop glossy gradient: top highlight (chrome-white 24% opacity), upper mid (cyan 40%), lower mid (magenta 35%), bottom shadow (velvet 70%). A 1px chrome bezel, a 6px inner blur, a single specular highlight running diagonal from upper-left corner. The glass holds the liquid inside as a 60% opaque tint of the tertiary glass color, with a small chrome meniscus crescent at the liquid's top edge. - **Deco lintel ornaments:** Above the top wordmark, a single deco rosette in foil-gold #C9A66B (8-petal sunburst, 48px). Below it, a hairline 1px chrome rule that extends edge to edge. The rosette is the only decorative ornament in the entire design -- it appears exactly once. - **Neon arteries:** Two vertical 2px neon lines (magenta left, cyan right) run the full document height as soft architectural framing. They are not borders -- they are pillars. They glow at 30% bloom and pulse imperceptibly at 8s loop. ## Prompts for Implementation **Opening narrative:** Page loads on velvet shadow #1B1530. Over 1.6s, the deep-night ground sweeps in from below as a duotone magenta-cyan gradient curtain. The deco lintel "YAMI.BAR / SEVEN GLASSES OF DARK" types out via a 1.2s deco-engrave reveal (each letter chrome-shimmers in from beneath, 90ms stagger). The foil rosette ignites last, with a 600ms gold bloom. The two neon arteries draw down from the top edge over 1.4s. Nothing else happens for 800ms. **Scroll narrative:** As the visitor scrolls past the Lintel, the seven portfolio cards enter on a strict diagonal stagger -- NO. I top-left first, then NO. II 90ms later one column right, then NO. III, etc., cascading down and right across the 4x2 grid. Each card animates as a chrome bezel that draws itself in a 360deg sweep (700ms), then the aero-glass fills, then the neon-glow halo blooms behind it, then the liquid pours up from the bottom of the glass (a clip-path animation, 800ms ease-out cubic-bezier(.2,.7,.2,1)). The deco label fades in last. **Hover and idle:** On hover, the focused card's neon-glow halo intensifies (60% to 92% opacity over 350ms) and a pulse-attention shimmer crawls once across its chrome bezel. The card itself does not lift, tilt, or scale -- it remains as dignified as a museum vitrine. The deco label switches from 80% to 100% opacity. All other cards dim to 70%. On idle (no cursor for 6s), one random card pulses a single slow halo breath every 9s -- as if the bar itself is breathing. **Bar Rail and Colophon:** The Bar Rail enters at scroll 70%. The chrome bar slides in horizontally as a 1.2s reveal; the three hud rosettes ignite at 200ms intervals after the bar settles. The colophon appears last as a single italic line in aero cyan, with a thin foil-gold rule above. **Avoid:** No CTAs, no reservation buttons, no price grids, no menu lists, no testimonials, no stat blocks. The design is a colonnade, not a menu. No video. No icons outside the three hud rosettes. No round buttons -- nothing pill-shaped exists in the universe of this design. **Tone in motion:** Every animation must read as ceremonial, opulent, slow. Curves are cubic-bezier(.2,.7,.2,1) or slower. Nothing pops. Nothing bounces. The bar breathes; it does not gesture. ## Uniqueness Notes **Differentiators from other designs:** 1. **Frutiger-aero in art-deco clothing:** A collision of two genres -- 2007 wet-gloss aero and 1929 engraved deco -- that no other site in the corpus attempts. The chrome bezels and lens flares of frutiger-aero are framed by Limelight deco capitals and foil-gold rosettes. The result is neither pure aero nor pure deco; it is "the rooftop bar of a dirigible promo CD." 2. **Strict duotone discipline:** While 8% of designs use duotone, none constrain the whole interface to a magenta-cyan duotone with one tertiary tint per portfolio card. Every glass is a duotone portrait; every recipe line tints to a single secondary color. This is a chromatic monastic vow. 3. **Portfolio-grid for a cocktail bar:** Layout 3% (portfolio-grid) used for a bar is a category collision -- bars use bento-box or card-grid, never portfolio-grid. This treats cocktails as gallery objects, not menu items. 4. **Stagger as the only animation pattern:** Patterns category 36% favors stagger but rarely uses it as the only entry mechanic. Here every grid cell arrives via a single diagonal stagger wave -- no parallax (94% overused, AVOIDED), no scroll-triggered (33% overused, AVOIDED), only the cascade. 5. **Three sci-fi-hud elements, exactly:** The hud motif is restrained to three rosettes on a single horizontal chrome bar. Sci-fi-hud (3% category use) is here a single architectural detail -- a bar plaque -- not a UI vocabulary. 6. **Opulent-grand tone (3% category):** The whole design speaks at the pitch of a hotel concierge under crystal chandeliers. Mysterious-moody (71% overused) is AVOIDED; the bar is not gloomy, it is grand. **Chosen seed:** aesthetic: frutiger-aero, layout: portfolio-grid, typography: art-deco-display, palette: duotone, patterns: stagger, imagery: neon-glow, motifs: sci-fi-hud, tone: opulent-grand. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%), photography (90%), mysterious-moody (71%), warm palette (92%), gradient palette (75% -- used here only as a single duotone, not as the standard rainbow gradient), mono typography (82%).