# Design Language for yamichika.bar ## Aesthetics and Tone yamichika.bar (v2) is a **Light-Academia Aurora Tap-Room** -- a playful study-bar imagined as a 1928 university common room visited at 4 a.m. on the night of a meteor shower, where chalkboards have been overwritten with futura-geometric specials lists and an aurora-gradient stains the wallpaper. The aesthetic is **light-academia**: warm chalk-on-cream blackboards, sun-bleached oak panelling, brass library lamps, but everything is set against a slow aurora-gradient field that drifts behind the tap-room walls like a campus seen through atmospheric haze. The .bar suffix is the friendly, lamplit kind -- a tap-room on the corner of a small college street. The tone is **playful**: serious light-academia (Latin maxims, brass bell-pulls, ink-stained ledgers) collides happily with futura-geometric type and noise-texture so the bar does not stiffen into pretension. The geometric type undercuts the academia; the academia anchors the geometric. Border-animate motion treats every panel as if a brass library nameplate were being engraved live before the visitor. Abstract-tech motifs hide quietly in the noise-texture -- tiny circuit-board hairlines visible only on close approach. The narrative spine: the page is the menu of a fictional study-bar called "Yamichika." It is laid out in five horizontally stacked sections, like five rooms of a college: the Front Bar, the Reading Room, the Brass Stair, the Aurora Window, the Last Call. Each section has its own chalk-cream wallpaper, brass nameplate, and a small futura-geometric list of drinks paired with study notes. The aurora-gradient washes behind everything like distant northern light on the windowpane. ## Layout Motifs and Structure The composition is a **stacked-sections** layout -- five generous vertical sections, each occupying 100-130vh, with each section reading as a separate "room" of the tap-room. Stacked-sections is rare (2%) and is used here to evoke the experience of walking from room to room in an old college pub, each room with its own light and chalkboard. **Macro structure:** - **Threshold (Section 0, 80vh):** A chalk-cream wall with the wordmark "YAMICHIKA" set in 180px futura-geometric across the top, beneath which a thin brass nameplate ("est. 1928 -- the corner of two streets") sits engraved. Behind the wall, a faint aurora gradient washes left-to-right at 0.5fps drift. A small noise-texture overlay gives every surface the grain of old plaster. - **Front Bar (Section 1, 110vh):** A horizontal arrangement of three brass-edged chalkboards listing the bar's signature drinks, each rendered in chalk-style futura-geometric type. The chalkboards have border-animate brass-light effects that draw themselves slowly when entered. A small abstract-tech motif (a tiny hand-drawn integrated-circuit pattern, 32px) sits in the lower-right corner of each chalkboard like an academic crest. - **Reading Room (Section 2, 130vh):** A wider section with a large block of futura-geometric paragraph text -- a tongue-in-cheek essay on "the geometry of the cocktail glass" -- centered on the page, with two narrow chalkboards in the gutters listing study-pairings ("Burgundy & Borges," "Mezcal & Mendelssohn"). The aurora-gradient intensifies here, drifting toward magenta. - **Brass Stair (Section 3, 100vh):** A vertical section featuring a single staircase illustration (rendered in noise-texture as if a charcoal sketch on cream paper) ascending diagonally across the section. Five small brass-plate "specials" attach to the steps, each a futura-geometric line. - **Aurora Window (Section 4, 120vh):** A massive single windowpane occupying 70% of the section, showing a full aurora-gradient field with a noise-texture overlay. A small chalkboard at the bottom-left reads "outside, the night moves." The aurora-gradient drifts strongly here -- the whole pane shifts color over 60-second loops. - **Last Call (Section 5, 90vh):** A final chalkboard wall, three thin brass nameplates ("we close at first light"), and the colophon in small caps. The aurora-gradient softens to a pale amber. **Spatial grammar:** Stacked-sections are clearly delineated by 4px brass rules at section boundaries. Within each section, the content is centered with generous 80-120px vertical padding. The aurora-gradient runs as a fixed-position background behind all sections, drifting independently of scroll. The noise-texture sits as a fixed 8% opacity overlay across the entire document. ## Typography and Palette **Fonts (all Google Fonts):** - **Display futura:** "Sora" weight 600 at clamp(64px, 9vw, 180px), letter-spacing -0.02em. A futura-geometric face used for the wordmark, the section headers, and the chalkboard menu items. - **Chalkboard items:** "Sora" weight 500 at 22-30px, letter-spacing 0.04em uppercase. - **Body text (Reading Room essay):** "Sora" weight 400 at 17px, line-height 1.7. - **Small caps and nameplates:** "Cormorant SC" (used sparingly for the brass-plate nameplates) at 12-14px, tracking 0.18em. The single classical typography contrast in an otherwise futura-geometric design -- like a Latin maxim on a 21st-century chalkboard. **Palette (aurora-gradient combined with chalk-academia neutrals):** - **Chalk-cream walls:** #F1E8D4 (chalk-cream), #E5DAC2 (oat-paper), #C9B997 (oak-paneling). - **Aurora-gradient stops:** #6FF2C7 (aurora-green), #4FD8FF (polar-cyan), #B58CF6 (heather-violet), #FF8FB4 (rose-aurora), #FFE066 (lamp-gold). - **Brass and nameplates:** #C9A66B (warm brass) and #8B6F3D (deep brass), used for nameplate borders and brass-stair details. - **Chalk-ink:** #2A2415 (chalk-charcoal) for text on chalkboards. - **Dim ink:** #4E4332 (faded ink) for body paragraphs. **Type-color rules:** Futura display in chalk-charcoal #2A2415 on cream/oat grounds, in chalk-cream #F1E8D4 on chalkboard grounds (the chalkboards are deep oak-paneling #C9B997). Small-caps nameplates in deep brass #8B6F3D. Body text in faded ink #4E4332. Aurora-gradient is reserved for backgrounds and the window pane -- never for type. ## Imagery and Motifs **Core visual motifs:** - **Noise-texture imagery (imagery mandate):** A noise-texture overlay sits at 8% opacity across the entire document, giving every surface the grain of old plaster, chalk, or cream-paper. The noise is a fine random monochrome dot pattern (1px dots, 30% density). On the chalkboards specifically, the noise is denser (12%) and slightly bluer, simulating chalk dust. The staircase illustration is rendered almost entirely in noise-texture as a charcoal sketch. - **Abstract-tech motifs (motif mandate):** Tiny abstract-tech motifs hide quietly in the design: each chalkboard has a small 32px integrated-circuit pattern in its lower-right corner, drawn as a thin chalk-line schematic (resistors, capacitors, traces). These are college pranks -- the tap-room owner has been doodling EE schematics on the chalkboards in tribute to local engineering students. The motifs are subtle, never the focal point. - **Aurora-gradient backgrounds:** The aurora-gradient is the page's persistent atmosphere -- a slowly-drifting multi-stop gradient (green-cyan-violet-rose-gold) that washes behind all sections. The gradient drift is 60-second loops, with each stop moving independently. In the Aurora Window section, the gradient takes over a 70% pane and intensifies its saturation. - **Border-animate brass nameplates:** Every chalkboard, brass nameplate, and section heading carries a border-animate effect: a thin brass-light line traces the rectangle's perimeter over 1.4 seconds when the element enters viewport. The brass-light is a 1.5px line in warm brass #C9A66B, with a faint 4px outer glow. - **Charcoal sketch illustrations:** Three illustrations carry the page -- the Threshold's plaster wall, the Brass Stair's staircase, and the Aurora Window's window frame -- all rendered as charcoal sketches in noise-texture, never as photographs. The sketches feel hand-drawn by a college student during a lecture. ## Prompts for Implementation **Opening narrative:** Page loads on chalk-cream #F1E8D4. The aurora-gradient ignites in the background over 2.4s, beginning as a pale wash and slowly intensifying. The wordmark "YAMICHIKA" types in via a chalk-stroke reveal (each letter draws itself in noise-textured chalk-charcoal over 90ms cascades). The brass nameplate "est. 1928" border-animates its rectangular outline in 1.6s. Noise-texture overlay fades in to 8% opacity over 1.2s. Nothing else happens for 1 second. **Scroll narrative:** As the visitor scrolls into each section, the section's brass rule at the top draws itself in 700ms left-to-right. Chalkboards within the section border-animate their brass-light outlines in cascades (300ms intervals). Menu items inside chalkboards type in via a chalk-stroke effect (40cps). Small abstract-tech motifs in chalkboard corners fade in last, at 30% opacity. **Reading Room essay:** The essay paragraph enters paragraph by paragraph with a 400ms fade-in cascade. The two gutter chalkboards border-animate their brass-light outlines simultaneously with the essay's first paragraph. **Brass Stair animation:** The staircase illustration (charcoal sketch in noise-texture) draws itself via SVG path stroke over 3.2 seconds as the visitor enters the section. The five brass-plate specials attached to the steps fade in one by one (180ms intervals) after the staircase completes its draw. **Aurora Window:** As the visitor enters the Aurora Window section, the window frame draws itself in 1.4s, and the aurora-gradient inside the pane intensifies its saturation by 40% over 2.4s. The gradient continues to drift through its 60-second loop. A small chalkboard at the bottom-left border-animates its brass-light over 1.6s. **Avoid:** No buttons, no nav, no menu navigation (the page is one long stack), no CTAs, no reservation forms, no pricing grids, no testimonials, no stat blocks. No video. No flat icons. No round buttons or pills. No drop shadows beyond the brass-light glow. No photography -- everything is charcoal-sketch or chalk. **Tone in motion:** Light-academia mischief. Chalk-strokes, brass border-traces, slow aurora drift, charcoal-sketch reveals. Curves are cubic-bezier(.4, 0, .2, 1). Nothing pops or bounces. The bar is playful but it does not jolt. ## Uniqueness Notes **Differentiators from other designs:** 1. **Light-academia tap-room:** Light-academia (1% aesthetic) used for a bar (a category usually rendered as dark-academia or luxe-cocktail). The pairing -- chalk-cream walls, brass nameplates, futura-geometric type, charcoal-sketch staircases -- is unique. 2. **Aurora-gradient as ambient atmosphere over academia:** Aurora-gradient (3% palette) used as a drifting wallpaper behind a light-academia tap-room. The chromatic contrast -- warm cream + cool aurora -- is the page's secret tension. 3. **Stacked-sections as five rooms:** Stacked-sections (2% layout) used as five distinct rooms of a fictional bar, each with its own light. No other site treats stacked-sections as a five-room architectural walk. 4. **Border-animate brass-light:** Border-animate (4% patterns) applied as a brass nameplate engraving effect. Every chalkboard, every nameplate, every section header has its rectangle traced in brass-light. The pattern is the page's signature motion. 5. **Abstract-tech as quiet college pranks:** Abstract-tech motifs (3%) hidden as tiny integrated-circuit doodles in chalkboard corners -- a tonal joke that you only see on close approach. 6. **Noise-texture as the only imagery:** Noise-texture (3% imagery) used not as a decorative grain on photos but as the substance of every illustration. Charcoal staircase, plaster wall, chalkboards -- all rendered in noise-texture. No photography (90% AVOIDED). **Chosen seed:** aesthetic: light-academia, layout: stacked-sections, typography: futura-geometric, palette: aurora-gradient, patterns: border-animate, imagery: noise-texture, motifs: abstract-tech, tone: playful. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%), photography (90%), mysterious-moody (71%), warm palette (92%) -- used here only as chalk-cream neutrals, not as warm dominant. Mono typography (82%) entirely AVOIDED.