# Design Language for bunnygirl.bar
## Aesthetics and Tone
bunnygirl.bar is **a candle-lit terracotta grotto where glass votives drift as memory cards** — a small evening room imagined as the interior of a hand-thrown clay vessel that has been hollowed and lined with translucent panes of warm-amber glass, each pane holding a single still life from the evening shift of a "bunny-girl" cabaret bar reframed as **dignified, grounded, blue-collar work**. The site refuses the two registry clichés that surround its subject: it is not a *kawaii cabaret splash page* and it is not a *nightlife club promo*. It is the after-shift room — 02:14, the last patron has left, the kettle is on, the floor has been swept, and seven glass votives sit in a clay alcove holding the fragments of the evening: a folded apron with two safety pins, a glass tip jar half-full of paper notes, a worn rabbit-ear hairband on a folded towel, a ceramic ashtray of pistachio shells, a polaroid of the staff turned face-down, a half-glass of barley tea, and a small handwritten ledger of who tipped what.
The aesthetic is **glassmorphism** but pulled out of its default San-Francisco-SaaS habitat — at 72% in the registry, glassmorphism almost always reads as *cool blue-gray translucent panels floating on photo-gradient backdrops*. bunnygirl.bar relocates glassmorphism into a **candle-lit clay interior**: every "glass" surface is the front face of a real votive cup, slightly thicker at the rim, smudged with thumbprints, warmed from within by a single tea-light flame whose flicker is the only animation on the page. The frosted-blur rules of glassmorphism are kept (backdrop-filter, semi-transparent fills, soft inner highlights), but the chromatic substrate underneath the glass is **terracotta clay, not photography**: hand-mixed flat fills of #C7714A, #A85A3D, #8E3F2A, with grain-noise textures painted into the clay walls so the blur reveals not blue light but the warm grit of fired earth.
The tone is **grounded-earthy** — at the very bottom of the registry's tone column, alongside *raw-authentic* and *zen-contemplative*, and chosen deliberately against the *playful* / *whimsical-creative* / *energetic* tones a domain like bunnygirl.bar would normally invite. The voice is the voice of a barkeep who has worked the same shift for nine years: short sentences, no exclamation marks, no neon, no "welcome" — just the inventory of what is on the counter tonight and a quiet acknowledgement that the work is real work. The room speaks in the past tense of the just-finished shift. There is no music. There is the sound of a kettle, implied, never played. The hand that wrote the ledger is the same hand that sweeps the floor.
The closest cinematic reference is the closing five minutes of an unhurried Edward Yang interior — the camera holding on a kitchen long after the conversation has ended — re-lit with the warm clay-and-tea-light palette of a Korean *jumak* tavern at the end of service. The closest material reference is **earthenware fired in a wood kiln, glazed only on the inside, paired with thick votive glass pulled from a 1960s diner**. The closest typographic reference is the **inside cover of a worker's notebook** where the day's takings have been written in pencil by someone who has done it ten thousand times and no longer underlines the totals.
## Layout Motifs and Structure
The structural commitment is **card-grid** (70% in the registry — reclaimed by inversion) executed as a **seven-votive alcove**: a single 100vh shrine-room, viewed head-on, with seven glass-fronted memory cards arranged in an asymmetric *jeong-mul* (still-altar) shelf composition rather than the default 3×N rectangular grid. The cards do not march in rows. They are placed on three uneven stone shelves carved into the back wall of the clay grotto: a tall left shelf holding two cards stacked vertically, a low central shelf holding a single hero votive at viewer eye-line, a wide right shelf holding three cards staggered like jars on a kitchen rack, and a single small shelf below the central hero holding the seventh card — the *closed ledger*. The composition reads as a still life, not a product grid.
The page is one screen. There is no scroll for the first 12 seconds — the visitor is dropped into the room and held there. After 12 seconds (or on first interaction), the room **breathes**: the seven votives glow once in sequence, slowly, like flames catching in order, taking 11 seconds end-to-end. After the breath the room is silent again until the visitor moves their cursor toward a votive.
The primary interaction is **zoom-focus** (4% in the registry, deliberately chosen against the 70%-cursor-follow / 73%-spring / 73%-stagger triad). Hovering over a votive does not lift it, does not magnetic-snap it, does not fire a tooltip. Instead, the entire room **dollies in** toward that single votive over 900ms with a quiet `cubic-bezier(0.16, 1, 0.3, 1)` ease, while the other six votives recede into shallow defocus (a `filter: blur(6px) brightness(0.78)` painted on the rest of the alcove). At full zoom, the chosen votive fills 62% of the viewport height; the visitor reads the inventory of that single object — what it is, who carried it, what it cost in a worker's hour — written by hand on the *back* of the votive in pencil-grade Caveat, revealed because the dolly has rotated the votive 6° and the back-side ledger swings into view.
The secondary interaction is **press-and-hold to read the ledger**: only the seventh, lowest, smallest card — the closed ledger — is interactive on press rather than on hover. Holding the mouse on the ledger for 600ms causes the cover to lift along its bottom edge, revealing two facing pages of the night's takings: left page is a hand-tallied list of drinks served, right page is a list of names (initials only) and tip amounts. This is the only place on the page where the word "tip" appears, and it appears as part of the ledger's own diction, never as a CTA.
There is **no navigation bar**. There is no header logo. There is no footer except a single line of pencil-grade Caveat at the very bottom-left of the alcove floor, set at 11px, reading the address line in Korean: *문 닫고 갑니다 — 02:14*. There are no buttons, no forms, no email captures, no social links. The site has one page, one room, seven objects, and one moment in time.
The page is sized to the viewport with a maximum width of 1480px; on portrait mobile the seven votives re-stack into a **single vertical column of glass jars on a single deep shelf**, photographed (rendered) from a slightly higher angle so the line of jars recedes toward the back wall in one-point perspective. The mobile layout never reverts to a default card-grid stack — it stays a still life.
This structure is a deliberate refusal of the **full-bleed (88%) + centered (82%) + asymmetric (54%)** triad that dominates the registry. It is *centered* in the sense that the camera sits dead-center to the alcove, but the *contents* of the alcove are asymmetric in a way that follows altar logic, not editorial logic — the heaviest object (the hero votive) is at human eye-line, the most fragile (the polaroid) is on the highest shelf, and the smallest (the ledger) is on the lowest, in the position a worker would instinctively reach for when wiping down at end of shift.
## Typography and Palette
**Typefaces — Google Fonts only, all confirmed available:**
- **`Caveat`** (variable, wght 400–700) — the principal hand of the page, serving the **handwritten** mandate (31% in the registry, but rarely used as the *body* face — almost always reduced to a heading flourish). Here Caveat is the body, the heading, the captions, the ledger numerals, and the bottom-left address line. Caveat is the slightly looped, unhurried italic-leaning hand of someone who has written the same words every night for years; it is not the *barista-blackboard* hand of typical handwritten use, it is the *worker's notebook* hand. Set the variable axis to wght 480 for body (16.5px, line-height 1.55) and wght 580 for the names of the seven votives (clamp 1.4rem → 1.9rem). Tracking is left at 0 — this is a hand, not a wordmark; it does not need to be opened up.
- **`Inria Serif`** (regular 400, italic 400) — the **secondary** typeface, used only twice on the entire page: once for the single Latin word *bunnygirl.bar* set in Inria Serif Italic at 22px in the bottom-left address line, and once for the small dimensional labels on the back of each votive (e.g. *"4.2cm × 6.1cm"*, *"glass, soda-lime"*, *"weight 184g"*) which appear at 11px Inria Serif Regular when zoomed in. Inria Serif is chosen because it is the calmest, least decorative serif on Google Fonts — a serif that reads as *museum tag*, not *editorial display*. Inria Serif is at 0% in the registry.
- **`Noto Sans KR`** (wght 400) — used for the single Korean line on the alcove floor and for the two-character glyphs (*달*, *밤*, *주*, *모*, *글*, *정*, *책*) carved into the underside of each ceramic shelf. Set at 13px wght 400, tracking +0.04em. No Latin characters are ever set in Noto.
There are exactly **three** type styles on the page: Caveat (the hand), Inria Serif (the museum tag), Noto Sans KR (the carved character). No fourth typeface. No fallback weights. No oversized display. No `mono` (refusing the registry's 95% mono rate).
**Palette — terracotta-warm, hand-mixed, no gradients on the substrate:**
- `#C7714A` — *terracotta* — the principal clay-wall fill of the alcove. Painted as a flat fill, not a gradient, with a 4% grain-noise texture composited at multiply.
- `#A85A3D` — *deeper terracotta* — the inside of the shelf carvings and the shadow side of every ceramic edge. Used to model depth without ever using a `box-shadow` blur.
- `#8E3F2A` — *fired earth* — the deepest recesses (the back wall behind the ledger, the underside of the lowest shelf). Reads almost black at low light but holds its red.
- `#F2C994` — *candle bloom* — the warm halo of light that each tea-light throws onto the inside face of its votive. Painted as a radial fill *inside* the glass, not behind it.
- `#F4E1BE` — *barley-paper cream* — the writing surface of the ledger pages and the polaroid border. The only near-white on the page. Never used for body type.
- `#3E2418` — *kiln-soot* — the hand of Caveat ink, the carved Korean glyphs, the pencil-grade ledger numerals. Reads as warm black against the clay.
- `#7E4A2E` — *aged-bronze* — the safety pins on the apron, the hairband wire of the rabbit-ears, the rim of the ashtray. The only metallic note.
- `#F8B96A` — *flame-core* — used in exactly one place: the inner 4px of the tea-light flame on the hero votive. Never used elsewhere. It is the brightest point on the page.
The total palette is eight colors, all warm, all hand-mixed within a 30°-arc of the warm side of the wheel, with **no gradient fills on any substrate**. Glassmorphism's translucency is achieved by stacking semi-transparent flat fills with backdrop-filter blur — never by gradient-painting a surface. This refuses the registry's 95% gradient rate while keeping the glass effect intact.
## Imagery and Motifs
The visual world is built from three motif families, all hand-composed from CSS, SVG, and a small amount of grain-noise PNG. **Zero photography. Zero 3D. Zero stock.** Photography is at 97% in the registry — its exclusion here is the largest single deviation.
**1. Geometric-abstract still life (imagery: geometric-abstract, 2% in the registry).** The seven votives and their contents are rendered as **flat geometric SVG compositions** in the visual idiom of Giorgio Morandi's late ceramic still lifes filtered through Korean *minhwa* folk-painting flatness. Every object is reduced to its silhouette and one or two interior planes. The glass votive is a tall rounded rectangle with a slightly thicker rim, filled with three stacked flat fills: candle-bloom inside, terracotta showing through, and a single 1px Caveat-ink hairline marking the water-line where the wax sits. The folded apron is a trapezoidal envelope of barley-paper cream with two aged-bronze dots for safety pins. The polaroid is a 4:5 rectangle with a thick border, face-down, showing only the back where someone has written *"shift 09 — full house"* in Caveat. The ashtray is a low ellipse with seven small ovoid pistachio shells inside. The rabbit-ear hairband is two long ovals sitting on a folded towel — the towel rendered as three offset rectangles to suggest folds, no shadow. The tip jar is a cylinder with paper notes inside drawn as overlapping ivory rectangles. The ledger is a small closed rectangle with two aged-bronze rivets at its spine. **None of these objects is illustrated with line-and-fill cartooning.** They are reduced to color planes and silhouettes — closer to *Gerhard Richter's color-chart logic* than to hand-drawn editorial illustration.
**2. Candle-atmospheric motif (motifs: candle-atmospheric, 8% in the registry).** Each of the seven votives holds a single tea-light. The flame is the only animated element on the page — a 9-frame SVG path-morph, looped at 1.4s, easing along a custom `cubic-bezier(0.45, 0, 0.55, 1)` curve, scaled differently per votive so the seven flames flicker out of phase. The flame is two stacked teardrops: outer #F2C994 candle-bloom at 70% opacity, inner #F8B96A flame-core at 100% opacity, sitting on a 1px wick of kiln-soot. Below each flame, a soft warm halo (#F2C994 at 22% opacity, radius 38px) is painted onto the inside of the glass; the halo respires with the flame at the same 1.4s cadence but at half amplitude, so the room appears to breathe. **The candle motif is the only place on the page where animation occurs by default** — everything else is still until the visitor moves.
**3. Clay-wall and shelf motif (motifs: cultural / earth, hand-composed).** The alcove walls are rendered as flat terracotta fills overlaid with a hand-painted **30dpi grain-noise PNG** at 4% opacity, multiply blend, to give the clay its kiln-fired grit. The three stone shelves are three rounded rectangles in deeper terracotta with a single 1px highlight on the front edge in candle-bloom, no soft shadow, no gradient — depth is communicated by color planes only. Carved into the underside of each shelf is a single Noto Sans KR glyph (*달*, *밤*, *주*, *모*, *글*, *정*, *책*) at 13px in kiln-soot, reading right-to-left across the alcove like a worker's mnemonic for the seven objects on the shelf above. The carving is suggested with a 1px inset of fired-earth, no bevel, no emboss.
**Decorative grammar:**
- No icons. No emoji. No social glyphs. No arrows.
- No SVG line-illustration with stroke. Every shape is a fill.
- No drop shadows. Depth is communicated by stacked flat planes only.
- No gradients on any surface — including the glass. The glass is a stack of three flat translucent layers, not a gradient.
- The only exception to "no gradients" is the radial candle-halo painted *inside* each votive, which is technically a radial-gradient but is read as light, not as decoration.
## Prompts for Implementation
Build bunnygirl.bar as **one HTML document, one CSS file, one ES module, and a single `still-life/` directory of seven SVG files plus one `clay-wall.png` (grain texture, 30dpi, ~12kb)**. No framework. No bundler. No Lottie. No WebGL. No canvas. No external images beyond the one grain-noise PNG. The whole experience is static SVG composition + one CSS-driven flame loop + one JS-driven zoom-focus interaction. Bias every implementation decision toward **stillness, warmth, and the physical fact of glass over clay**.
**AVOID, absolutely:**
- Hero CTAs, primary buttons, "book a table" links, age-gate modals.
- Newsletter capture, email forms, contact forms.
- Pricing tables, drink menus presented as tables, stat grids.
- Carousels, slideshows, autoplay video, autoplay audio.
- Social-share buttons, Instagram embeds, footer link rosters.
- Cursor-follow effects (70% in the registry), magnetic hover (57%), spring physics (73%), staggered list animations (73%), parallax sections (93%).
- Gradient backgrounds (95% in the registry), gradient text, gradient buttons.
- Drop shadows on cards. Glow effects. Neon. Glass-blur over photographic backgrounds.
- Mono-spaced fonts of any kind (95% in the registry — refused outright here).
- Photography of any kind, including hero photos behind the glass cards.
**DO, structurally:**
```
……
…
………
…
문 닫고 갑니다 — 02:14
bunnygirl.bar
```
Each `.votive` is a `` containing one inline `