# Design Language for bada.coffee ## Aesthetics and Tone The domain `bada.coffee` is read literally and structurally — *bada* is the Korean word for **the sea** (바다), and *.coffee* is the small, dark, oily liquid that mirrors a night ocean in a porcelain cup. The site is therefore a **brutalist private members' club for the moment a single drop of espresso falls into a still surface** — the instant where black coffee, gold crema, and reflected marble all coexist, frozen and rendered in **8-bit pixels** against an **art-deco proscenium**. Imagine the lobby of the Chrysler Building in 1931 — but the elevator doors are made of voxels, the inlaid marble is a 16-color dithered palette, and the brass nameplate reads `BADA.COFFEE — EST. 8-BIT — VINTAGE FUTURE 2099`. The mood is **futuristic-cutting-edge** delivered as **deliberate retrocomputing nostalgia**: every modern technique (3D tilt, glassmorphism, scroll-linked SVG, view-transition API) is dressed in the costume of a 1930s ocean-liner first-class cocktail menu that has been screen-captured on a CGA monitor and pinned to a marble plinth. Tone is **luxury through deprivation, not abundance**. Nothing on the page bounces, glows for attention, or asks for the visitor's email. Instead the page behaves like the velvet rope outside a speakeasy: the visitor must *earn* the next motif by scrolling past a still tableau. Every animation is **slow**, **gilt-edged**, and **silent**, except for the optional sub-audible clink of a porcelain demitasse on a marble saucer (off by default, opt-in via a small brass switch in the lower right). The cumulative effect is **a private museum of one cup of coffee** — a tableau-vivant rendered in chunky pixels, sealed under glass, framed in gold leaf, lit from below by an unseen sodium lamp. The visitor is not a customer; the visitor is a guest at an after-hours viewing. ## Layout Motifs and Structure The macro structure is a **dashboard** — but it is **not** the SaaS dashboard that the frequency analysis flags at 17%. This is a **brass-and-marble grand-hotel concierge desk** rendered as a multi-pane dashboard, with the diegetic conceit that the visitor has walked up to the lobby of an art-deco hotel and the front-of-house panel is a single wall of brass tiles, marble inserts, and pixel-art window vitrines, each one a live readout of one facet of the cup of coffee in question. **Master grid:** 12 columns, 8 rows, **viewport-pinned** (no scroll past the dashboard — the dashboard is the page). Pixel-art ornaments and 3D-tilt panes occupy fixed cells; the central marble plinth occupies a 6×4 hero cell. The grid is laid out as **nine living vitrines** arranged around a central marble well: 1. **Northwest tile (3×3):** a **pixel-art demitasse** — 64×64-cel hand-keyed sprite of a porcelain cup, animated in a 12-frame loop, where the crema swirls in a deliberate art-deco sunburst pattern. Tilts 8° on parallax. 2. **North-center tile (6×4, hero):** the **central marble plinth** — a single block of veined Carrara rendered as an SVG with hand-traced gold inlay reading `bada.coffee` in art-deco display caps, suspended over a glass-floor aquarium where the *bada* (sea) is rendered as a pixel-art Hokusai wave loop. 3. **Northeast tile (3×3):** a **gilt-framed live readout** — current barometric pressure, lunar phase, and the station number of the nearest railway terminal, all set in a 1930s-train-departure split-flap pixel typeface. 4. **Mid-west tile (3×2):** a **glassmorphic card** showing a single tasting note ("notes of plum, wet stone, and a distant horn section") that crossfades every 7s. 5. **Mid-east tile (3×2):** a **glassmorphic card** showing a hand-keyed pixel-art portrait of a fictional roaster (changes daily — there are 31 portraits, one per day of the month). 6. **Southwest tile (3×3):** a **3D-tilt pixel-art freight elevator** that the visitor "rides" by hovering — the elevator descends one floor per 200ms of cursor dwell, revealing a different pixel-art bean-vault behind it. 7. **South-center tile (6×2, footer plinth):** a **classical marble entablature** with art-deco gold inlay listing the day's sourcing manifest in dense Roman numerals and pixel-glyph railway sigils. 8. **Southeast tile (3×3):** a **brass concierge bell** that the visitor can ring once per session (visual SVG, optional sub-audible ting) — the only call to action on the page, and it does nothing except print the visitor's IP-derived "table number" in pixel art on the marble plinth. **Tilt-3d** is the binding rhythm: every tile lives on its own z-plane (depths range from -120px to +60px) and every tile responds to cursor with a 6–14° tilt on the X and Y axes, parallaxed. Mobile uses devicemotion with a heavy low-pass filter so the dashboard breathes like a brass instrument panel on a slow ship — never seasick. There is **no scroll past the first viewport**. The dashboard is the page. There is no second screen. There is no footer. The dashboard is, in this sense, a **single tableau-dashboard hybrid** — a concierge wall that happens to also be the entire site. ## Typography and Palette **Typography pairs an art-deco-display face with a pixel-glyph mono and a single classical roman**, set in three deliberate weights so the page reads as a layered lobby plaque rather than a font-pairing exercise. - **Display:** [**Limelight**](https://fonts.google.com/specimen/Limelight) — single weight 400, used at clamp(3.6rem, 9vw, 9.2rem) for the wordmark `BADA.COFFEE` engraved on the marble plinth. Limelight is a dimensional 1930s display face inspired by hand-cut theater marquees; its uppercase carries the **art-deco-display** authority demanded by the seed. Letter-spaced at +0.08em with a gold inlay applied via SVG `feImage` so each glyph reads as inlaid brass. - **Sub-display:** [**Cinzel Decorative**](https://fonts.google.com/specimen/Cinzel+Decorative) — weight 700, used at 2.4rem for the entablature dedications and the south-center sourcing manifest. Cinzel Decorative carries Roman classical inscription forms — perfect for the **marble-classical** motif — without falling into the wedding-invitation cliche. - **UI mono (the pixel layer):** [**VT323**](https://fonts.google.com/specimen/VT323) — weight 400, used at 1rem for tasting notes, tile readouts, and the brass-departure-board glyphs. VT323 is the closest Google-hosted face to a 1980s CGA terminal pixel font, and it carries the **pixel-art** seed into the typography itself so the type and the imagery share a grain. - **Body classical (only used in 3 places — entablature, manifest, concierge ledger):** [**Cormorant Garamond**](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 400 italic, used at 0.94rem for the rare body sentence. Acts as the human voice in a room of pixels and brass. **Palette — `gold-black-luxury` rendered as a constrained 8-color CGA-on-velvet:** - `--obsidian: #06060A` — the void behind every tile; the sea floor; the after-hours lobby. - `--velvet: #14101A` — the velvet upholstery on the brass dashboard frame. - `--marble: #F2EBD8` — Carrara warm-cream; only used for the central plinth and the entablature. - `--marble-vein: #C9B98A` — the warm vein in the marble; SVG-traced. - `--gold-leaf: #D4AF37` — primary inlay; used at 18–22% surface coverage, never more. - `--gold-bright: #F4D27A` — highlight on the gold inlay where the cursor catches the light. - `--brass-dark: #6E5429` — the shadow inside the brass channels; the depth of the dashboard frame. - `--espresso: #2A1810` — the coffee itself; the pixel-art crema base; never `--obsidian`, always this warmer dark. - `--crema: #C8884E` — the surface of the espresso; the only orange on the site. - `--accent-pixel-cyan: #46A4A8` — a single cool note used **only** in the pixel-art Hokusai sea, never in chrome or UI. Anchors the *bada* meaning. The palette is locked at 10 swatches and **never extended**. All gradients are stepped (4–6 stops) so they read as **dithered**, not smooth — every gradient is a ladder, a deliberate retrocomputing tell against the smooth-gradient frequency at 89%. ## Imagery and Motifs The site has **no photography** (the corpus is at 92% photography — this is the deliberate counter-stance) and **no stock illustration**. Every image on the page belongs to one of four hand-built motif families: 1. **Pixel-art vitrines (16-color, 64×64 to 256×256 cels).** Hand-keyed sprites in the **espresso/crema/marble/gold** palette: a demitasse seen from three-quarter, a freight elevator with art-deco grille, a roaster portrait gallery (31 unique pixel portraits), a Hokusai wave (the *bada*), a brass concierge bell, an art-deco proscenium archway, a single coffee bean rotated through 24 frames. Pixel-art frequency is currently **2%** — this site claims that territory firmly. Sprites are stored as inline SVG `image` rects with `image-rendering: pixelated` and animated via CSS sprite-sheet `steps()` keyframes — never gif, never png-sequence. 2. **Art-deco SVG inlay.** Sunburst rays, ziggurat steps, chevroned brass channels, fluted columns, fan-arches — all hand-traced as flat SVG `` with `--gold-leaf` fills and `--brass-dark` 1.2px strokes. These are the *frames* around the pixel vitrines: every vitrine is set in a deco frame the way a Cartier window is set in stone. The inlay uses *only* art-deco geometric primitives: 30/60/90 angles, golden-ratio rectangles, and the iconic 1925 Paris Expo zig-zag. 3. **Marble-classical reliefs.** SVG-traced Carrara marble for the central plinth and the south entablature. The veining is hand-pathed (10–14 vein curves per surface), the gold inlay is added on top via SVG masks, and the surface carries a subtle 4–6% noise filter via `feTurbulence` to give the marble its grain. Marble-classical is at 2% in the corpus — a near-virgin motif on this corpus, and the perfect foil for pixel-art (the temporal contrast of 2,000-year-old stone meeting 8-bit voxels is the entire visual thesis). 4. **Glassmorphic cards (the inner readouts).** The mid-west and mid-east tiles are translucent panes — `backdrop-filter: blur(18px) saturate(1.4)` against the velvet ground, with a 1px gold-leaf border and a 2px inset highlight at the top edge. The cards are deliberately **not** the Dribbble-frosted glassmorphism; they are **lobby-display-case glassmorphism** — the kind of glass that sits over a museum plinth, slightly green-tinted at the edges, with a hairline gold bezel. The four families never blend without a frame. A pixel sprite always sits inside a deco frame; a glassmorphic card always sits on a marble surface; a marble surface is always inlaid with deco. The page is a **collage of clean transitions** — like a 1930s magazine cover where the photo-corner is always sharp. ## Prompts for Implementation Treat the site as **a single illuminated dashboard tableau** — a private, viewport-locked exhibit. The visitor arrives, the dashboard composes itself in nine staggered beats, the visitor explores by hover and tilt, and eventually the visitor leaves. There is **no scroll, no nav, no second screen, no email capture, no pricing block, no stat grid, no testimonials, no logo strip, no CTA** — the seed avoid-list is taken absolutely. **Macro arc (composition, not scroll):** 1. **The lobby is dark (0–600ms).** The viewport opens on `--obsidian` with a single pixel of `--gold-leaf` at the geometric center — a brass screw catching the last of the lamplight. 2. **The proscenium ignites (600–1400ms).** A deco sunburst SVG draws itself outward from that brass screw using `path-draw-svg` (33% in corpus — accept; it earns its place here as the only stroked motion). Rays unfurl in art-deco fan symmetry. 3. **The dashboard tiles arrive (1400–3200ms).** Nine vitrines stagger-fade-and-tilt-into-place at 200ms intervals, each one entering on its own z-axis and settling at its resting depth. The stagger uses a CSS `view-transition` group; no JS animation library required. 4. **The marble plinth resolves last (3200–4200ms).** The central 6×4 plinth fades in, the gold-inlay wordmark `BADA.COFFEE` etches itself letter-by-letter via `clip-path` mask sweep, and the Hokusai wave loops behind the plinth's glass floor. 5. **The dashboard breathes (4200ms onward, indefinitely).** Each tile carries an idle micro-loop: the demitasse swirls (12 frames, 4s), the elevator descends and ascends (8s loop), the roaster portrait crossfades to the next of 31 (24s per portrait), the wave loops (6s), the entablature sourcing-manifest tickers right-to-left (slow, 90s). **Interaction is *only* tilt-3d and hover.** Cursor movement tilts each tile on its own z-plane via `transform: perspective(1000px) rotateX() rotateY()`. Hovering a tile slows its idle loop by 60% (the visitor's attention literally slows the exhibit, like leaning close to a mechanical clock). Mobile uses devicemotion (low-pass filtered, no seasickness) and a one-finger drag to retilt the entire dashboard. No clicks, no taps, no forms — except the brass concierge bell in the southeast tile, which is the single click target on the page. **Storytelling is diegetic, not narrative.** There is no copy explaining what `bada.coffee` *is*. The visitor infers it: bada = sea, coffee = dark mirror, dashboard = concierge wall, marble = permanence, pixel = playfulness, gold = patience. The tasting note in the mid-west tile, the roaster portrait in the mid-east tile, the sourcing manifest in the entablature, and the daily IP-derived table number on the plinth are the only "content" — and together they imply a private coffee-club that exists somewhere between an art-deco ocean liner, a 1990s arcade cabinet, and a marble museum closed for the night. **Animation patterns to use:** `tilt-3d` (15% — load-bearing, the entire interaction model), `path-draw-svg` (33% — only for the deco sunburst ignition), `stagger` (64% — only for the tile-arrival composition; otherwise unused). **Animation patterns to avoid:** `parallax` scroll (89% — there is no scroll), `scroll-triggered` (64% — there is no scroll), `magnetic` cursor, `cursor-follow`, `ripple`. The goal is a **standing exhibit**, not a moving billboard. **Implementation specifics:** single `index.html`, single `style.css`, single `app.js` (≤180 lines, only for devicemotion tilt and the daily-portrait/IP-table-number derivations). All sprites inline SVG. All marble inline SVG. All deco inlay inline SVG. Total payload target ≤ 220 KB excluding fonts. Fonts subsetted to Latin-only and the wordmark glyphs. The single audio file (the optional demitasse clink) is a 1.2 KB Ogg, off by default, never autoplay. **Forbidden:** modal dialogs, cookie banners (legal copy lives in a single line of Cormorant italic in the south entablature), social-proof logo strips, pricing tiers, comparison tables, testimonial carousels, hero-CTA pairs, "trusted by" bands, stat-grids, FAQ accordions, blog teasers, newsletter signups, video backgrounds, hero photography, slider/carousel anything. The avoid-list from the seed is **absolute**; the dashboard tells its story without any of them. ## Uniqueness Notes Three or more deliberate differentiators from the other 39 sites in this corpus, with frequency-analysis citations. 1. **Pixel-art aesthetic at 2% corpus frequency, claimed in full.** The frequency report shows pixel-art at exactly **2%** — effectively unclaimed. No other site in the corpus is built around 8-bit hand-keyed sprites. `bada.coffee` makes pixel-art the *primary visual material* of every vitrine, every animated loop, and every roaster portrait. Combined with `image-rendering: pixelated` and CSS-`steps()` sprite-sheet animation, this delivers a tactile retrocomputing texture that is genuinely absent from the corpus. 2. **Pixel-art × marble-classical as a deliberate temporal collision.** Marble-classical motifs are at **2%** in the corpus; pixel-art aesthetics are at **2%**. The pairing — 2,000-year-old Carrara stone framing 8-bit voxel sprites — appears in **zero** other designs. This is the visual thesis: the oldest available material (marble) hosting the youngest available image format (pixel sprites), with art-deco brass as the temporal hinge between them. No other site in the corpus stages this collision. 3. **Dashboard layout (17%) without SaaS-dashboard semantics.** Dashboard layout is mid-rare (17%) and is almost universally used for analytics, fintech, or admin-panel sites. `bada.coffee` repurposes the dashboard grid as a **brass-and-marble grand-hotel concierge wall** — nine vitrines with no charts, no metrics, no KPIs, no funnel. It is the dashboard form drained of dashboard meaning and refilled with tableau-vivant content. Zero other sites use the dashboard grid this way. 4. **Tilt-3d as the *entire* interaction model.** Tilt-3d is at 15%; in every existing use it appears as a flourish on a hero card or a single product mockup. `bada.coffee` makes tilt-3d the **only** interaction on the page (alongside one click on the concierge bell). There is no scroll, no nav, no form, no hover-lift, no magnetic cursor — tilt is the verb that does all the work. This level of interaction-monoculture around tilt-3d does not exist elsewhere in the corpus. 5. **`gold-black-luxury` palette at 2% corpus frequency, paired with art-deco-display typography (5%).** The gold-black-luxury palette appears in exactly one other site (2%); art-deco-display typography appears in two others (5%). The intersection — **gold-black-luxury palette + art-deco-display type + pixel-art aesthetic** — is a three-way pairing that is **unique** in the corpus. 6. **No photography, no scroll, no CTA.** Photography is at 92% in the corpus; this site uses zero. Scroll-triggered animation is at 64%; this site has no scroll. The corpus is dominated by parallax/scroll/CTA-led storytelling; `bada.coffee` is a **viewport-pinned single-tableau dashboard** that subverts every dominant pattern at once. The avoided patterns are explicitly: parallax (89%), scroll-triggered (64%), photography (92%), centered layout as a hero device (92%), and the entire SaaS-dashboard register that the dashboard layout normally implies. 7. **Tone `futuristic-cutting-edge` (5%) achieved via retrocomputing and 1930s materials.** The corpus's small futuristic-cutting-edge cohort almost always uses dark-neon, sci-fi-hud, and chrome-metallic. `bada.coffee` claims the same tone using **pixel-art + marble + brass + art-deco** — the exact opposite material vocabulary — and arrives at futurism through a *vintage future* lens (the 1930s prediction of 2099) rather than through the standard cyberpunk register. This route to "futuristic-cutting-edge" is unique in the corpus. **Chosen seed (from assignment):** aesthetic: pixel-art, layout: dashboard, typography: art-deco-display, palette: gold-black-luxury, patterns: tilt-3d, imagery: glassmorphic-cards, motifs: marble-classical, tone: futuristic-cutting-edge. **Avoided patterns from frequency analysis:** photography (92%), centered (92%), warm palette (97%), vintage motifs (87%), full-bleed (87%), gradient palette (89%), parallax (89%), mono typography (94%), scroll-triggered (64%), stagger as decoration (64% — used here only for the single tile-arrival beat, not as a scroll device), hand-drawn aesthetic (84%), editorial aesthetic (51%), and the SaaS-dashboard semantic register that the dashboard layout normally carries.