# Design Language for tsundere.bar
## Aesthetics and Tone
tsundere.bar is the front-of-house for a single, very specific kind of place — a late-night cyberpunk cocktail laboratory in a port city, run by a head bartender whose public persona is the textbook tsundere: clipped, unsmiling, faintly hostile at the door, but whose service is unmistakably tender once you are seated. Everything customer-facing on the site reflects that tension. The aesthetic is **cyberpunk filtered through frosted glass** — instead of the genre's usual hot magenta-on-black, the surface is cold and translucent: chilled cocktail glass, condensation, rime on a steel shaker, the bluish ghost of neon read through a layer of ice. The signage is neon, but the neon is *behind* a pane of frost; you read the glow, not the tubes. The tone is **professional** in the bartender sense — measured, exact, no upsell, no exclamation points. Reservations are confirmed in two sentences. The drinks list reads like a lab report. The "About" page is six lines. Warmth is delivered structurally (a single sprig of mint, a single curl of citrus peel, a single line of plain text that says "We are open tonight.") rather than rhetorically. The site never tells the reader it is cool; it lets the reader notice the leaf in the glass and conclude that on their own. Visitors should feel as if they are looking at the bar through the pane of the window from the wet street: the place is open, the glass is fogged, a leaf is suspended inside one of the drinks, and a single ripple is still spreading from where someone just stirred.
## Layout Motifs and Structure
**Layout pattern: centered, single narrow column over a full-bleed translucent-frost field.** The composition deliberately rejects the dashboard / bento / split-screen vocabulary that dominates cyberpunk on the web. Instead, the entire page is one tall vertical strip — `max-width: 560px`, `margin-inline: auto` — set against a full-viewport backdrop that behaves like a frosted window onto a dim cyberpunk room behind. The narrow column is what the visitor reads; the room behind is atmosphere.
The vertical rhythm has six fixed stops, each occupying roughly one viewport height so the page reads as a deliberate stack of frames rather than a scrollable continuum:
1. **Vestibule (100vh).** A single line of text centered horizontally and vertically: the wordmark `tsundere.bar` set in lowercase humanist letters at clamp(3rem, 8vw, 5.5rem), and beneath it, in 0.7rem tracked caps, the words `OPEN · 19:00 — 02:00 · NO STANDING`. Behind, the frost layer; behind the frost, a single faintly visible neon hairline (a horizontal `#7CC8FF` rule at 12% opacity) suggesting the bar's own signage seen through the window.
2. **Tonight (100vh).** A two-line statement of what is being served tonight, e.g. `Tonight we are pouring / a Negroni cut with shiso and frozen pear water.` No image. The leaf-organic motif — a single SVG shiso leaf, 60px, drawn in #BFE6E1 outline only — drifts slowly at 8s ease-in-out from left margin to right margin behind the text, and at the moment it crosses the center it triggers a single ripple (see §Imagery).
3. **The Bar (100vh).** Three sentences about the room. No staff photos. Below the prose, a thin centered strip (height: 56px, width: 100%) shows a *plan view* of the bar counter as 1px stroke vector — eight stools, the rail, the well — drawn in #1F2A36 over the frost. This is the only place the room is depicted.
4. **Drinks (100vh, scroll-snaps).** A vertically stacked list of exactly seven drinks. Each entry is one row: drink name (humanist serif, 1.5rem), a 1px hairline rule, three lines of ingredients in monospaced caps at 0.72rem tracked. No prices on the page; prices are on the printed menu only. A 4px translucent-frost square sits at the right end of each rule and pulses opacity (0.4 → 0.9 → 0.4 over 4s) only on the drink the cursor is hovering — the only "interactive feedback" in the site.
5. **Reserve (100vh).** A reservation form rendered as a single sentence with inline form fields: `On ___ at ___ for ___ people, under the name ___.` Fields have no boxes, only a 1px underline. A submit affordance reading `Send` sits flush right beneath. After submit, the entire viewport fades to a single line: `Confirmed. The door is at 4-12-3 Minato-ku; ring once.`
6. **Footer (50vh).** Address, phone, last-pour time, and a single line: `If we are full, we will say so plainly.` Nothing else — no socials, no newsletter.
The grid is intentionally generic (centered single column appears in 66% of designs); the *uncommonness* is the refusal to put anything else next to the column. The space outside the column is never used for content, only for atmosphere.
## Typography and Palette
**Typography (Google Fonts only):**
- **Display & body — humanist sans:** `Inter` at weight 400 for body and 500 for the wordmark. Inter is chosen for its humanist proportions (open apertures, two-storey `a` and `g`, true italics) which read warm against the cold field — the typographic equivalent of the tsundere's hidden softness. Body size 1rem / line-height 1.7 / tracking 0; wordmark `tsundere.bar` set lowercase at clamp(3rem, 8vw, 5.5rem), weight 500, tracking -0.015em, color `#0E1A24`.
- **Editorial accents — humanist serif:** `Cormorant Garamond` at weight 400 italic, used *only* for drink names in the Drinks section and for the single line `We are open tonight.` Size 1.5rem in the menu, 2.25rem for the open-status line. Italic only — never roman — so the serif always reads as a quiet aside, not a headline.
- **Operational labels — monospace:** `JetBrains Mono` at weight 400, 0.72rem, tracked +0.18em, uppercase, color `#5A6B7A`. Used for ingredient lists, the hours strip, the address block, and form labels. The monospace is the "lab report" voice — it is what the bartender writes on the back of the order pad.
The three voices map cleanly: humanist sans = the bar speaking to you, humanist serif (italic only) = the drink whispering its own name, monospace = the inventory.
**Palette — translucent-frost (0% in current corpus):**
- `#E8F1F4` — frosted glass primary (the page field; not pure white, has a 4° hue shift toward cyan).
- `#BFE6E1` — rime green (used for the leaf outlines and the ripple rings; the "warm" color of the design is a cold mint).
- `#7CC8FF` — neon-through-frost (used at 12–35% opacity *only*, never solid; this is the cyberpunk signal).
- `#0E1A24` — deep harbor (text, hairlines, plan-view strokes; chosen over pure black so the contrast against the frost is *cold blue-black*, not lithographic black).
- `#1F2A36` — slate (secondary strokes, the bar plan view, form underlines).
- `#5A6B7A` — operational gray (monospace labels, tertiary text).
- Accent — `#C44545` — used in exactly *one* place across the entire site: the period in `tsundere.bar` wordmark, rendered as a 6px solid square. It is the only warm color, and it is the size of a maraschino cherry on a cocktail pick.
## Imagery and Motifs
- **The leaf (leaf-organic, 0%).** Exactly one SVG element across the page is a leaf: a stylized shiso leaf rendered as a 1.25px stroke in `#BFE6E1`, no fill, with a single asymmetric notch on the lower-right edge so it is clearly *a* leaf, not generic foliage. It floats horizontally across the Tonight frame at 8s ease-in-out, infinite, and at exactly 50% of its journey it dispatches a custom event that triggers the ripple (below). Outside that animation it appears nowhere. The leaf is the warmth of the design — the garnish.
- **The ripple (ripple, 2%).** A radial expansion, originating from the centerpoint where the leaf crosses, drawn as three concentric SVG circles with stroke `#BFE6E1`, stroke-opacity animated 0.55 → 0 over 2.4s, radius animated 0 → 220px, stroke-width 1px. The three rings are staggered by 200ms so the effect is a slow, deliberate stir rather than a splash. After it completes, the page is silent again until the next leaf pass.
- **Abstract shapes (abstract-shapes, 1%).** Behind the frost field, four large geometric forms drift at extremely low opacity (4–8%) with 60–90s loops — a long thin rectangle (cocktail rail), a tall narrow rectangle (a bottle silhouette), a perfect circle (a coupe seen from above), and a chamfered square (an ice cube). They are rendered in `#7CC8FF` and never come fully into focus. They are the cyberpunk signal seen through the window: the room is there, but you cannot make out the patrons.
- **The frost.** Implemented as `backdrop-filter: blur(28px) saturate(1.1)` on a `::before` pseudo-element covering the entire viewport, layered above the abstract shapes and below the text column. On browsers without `backdrop-filter`, fall back to a noise SVG with `feTurbulence baseFrequency=0.9 numOctaves=2` at opacity 0.06 plus a flat `#E8F1F4` field — the page must still feel cold and slightly grained without the blur.
- **The bar plan view.** A single SVG, 1px stroke, 100% width × 56px height, drawn precisely once in the The Bar frame. Eight tiny circles for stools, two parallel lines for the counter, a small rectangle for the well. Color `#1F2A36`. No labels.
- **The cherry-period.** The `.` in the `tsundere.bar` wordmark is replaced by a 6×6px solid square in `#C44545`, vertically aligned to the baseline — the only warm pixel on the page.
The imagery rule is severe: **one leaf, one ripple per cycle, one plan view, one red square. Everything else is field.**
## Prompts for Implementation
Build as a single static HTML page. `body { background: #E8F1F4; color: #0E1A24; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; line-height: 1.7; min-height: 100vh; overflow-x: hidden; }`. Set `html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }` and apply `scroll-snap-align: start` to each of the six full-viewport sections so the page advances frame-by-frame. Disable scroll-snap at `prefers-reduced-motion: reduce`.
**Stacking order, back to front:** (1) flat field `#E8F1F4`; (2) the four abstract shapes as absolutely positioned SVGs at opacity 0.04–0.08 with `@keyframes` translate loops of 60–90s; (3) a fixed full-viewport `::before` with `backdrop-filter: blur(28px) saturate(1.1); background: rgba(232, 241, 244, 0.35);` — this is the frost; (4) the centered text column at `max-width: 560px; margin-inline: auto; padding-inline: 24px;` set in Inter; (5) the leaf SVG, fixed-positioned within the Tonight frame only.
**Wordmark.** `
tsunderebar
` with `.dot { display: inline-block; width: 6px; height: 6px; background: #C44545; vertical-align: baseline; margin-inline: 1px 2px; }`. No text decoration. Weight 500. Tracking -0.015em.
**Hours strip.** `OPEN · 19:00 — 02:00 · NO STANDING` in JetBrains Mono 0.72rem, tracking +0.18em, color `#5A6B7A`, 24px below the wordmark.
**Leaf animation.** Inline SVG `