# Design Language for bada.cafe

## Aesthetics and Tone

bada.cafe is a **seaside-cafe operations dashboard rendered in inflated-3d puffer-toy form** — the in-house tablet that the night shift at a small Korean coastal cafe keeps next to the espresso machine, where every metric (today's bean, current swell height, the candle that's still lit on table 4) is shown as a soft, pillowy, slightly squashy 3D object that looks like it was vacuum-formed out of warm matte vinyl and then placed on the counter.

"바다" (*bada*) means **sea** in Korean — the whole site is the cafe's evening view of that sea, after sunset, when the dining room is half-empty and the window glass is fogged from the inside. The dashboard is not a sterile B2B SaaS panel; it's the cafe's *living-room screen*, the thing the owner watches while the candles burn down. So inflated-3d (the most plasticky, hyper-real, Spline-rendered, claymation-soft trend of the late 2020s) gets re-pitched as **wax-soft, not bouncy-toy** — every puff has the surface micro-texture of a beeswax candle, not the latex gloss of a beach ball.

The tone is **approachable-casual**: the dashboard speaks in *banmal* (informal Korean) where Korean appears, and a quiet, lower-case English voice elsewhere. No exclamation marks. No "Welcome aboard!" No motivational copy. The voice is the off-shift barista half-explaining what each widget means while wiping down the milk wand. Captions read like overheard sentences: "오늘은 좀 짠 편이에요" (*it's a bit on the salty side today*) over the bean-of-the-day card. "촛불 네 개 살아있음" (*four candles still alive*) on the candle telemetry tile. English mirrors: "today's bean — slightly salty," "four candles still burning."

The mood is **dim, warm, slightly damp** — the colour temperature of a cafe at 9:47pm in late October when fog has rolled off the East Sea and the only steady light sources are: (a) two pendant bulbs at 2400K above the bar, (b) seven votive candles on tables, (c) the dashboard itself, glowing faintly cool against everything else. The inflated-3d objects look hand-shaped from cooled wax. Nothing is loud. Nothing is glossy. The sea outside the window is muted slate, not "ocean blue."

Inspirations layered (named explicitly so they bleed into implementation):
- The Apple Numbers 2007 dashboard widgets, but if they had been carved out of dripped paraffin instead of rendered in OS X Lucida glass.
- Korean cafe blackboard handwriting (the kind where the owner re-writes today's drip menu every morning in slightly wonky chalk Hangul).
- Lukas Renlund's inflated-3d glyph studies, dimmed to candle-light EV.
- The bridge of a small wooden trawler at night — instruments lit, sea outside black, helmsman's coffee mug warming the chart-table.
- Pre-iPhone weather-app skeuomorphism, pulled forward 18 years and softened.

## Layout Motifs and Structure

A **fixed 12-tile dashboard** that fills the viewport on first paint and never demands a vertical scroll on desktop (≥1280w). On smaller widths (<900w) the same 12 tiles re-stack into a single vertical column in narrative reading order — but the desktop story is the canonical one, because this is meant to be the cafe's wall-mounted tablet.

**Grid spec.** A 12-column × 8-row CSS grid, 1440 × 900 reference frame, 18px gutters, 22px outer margin. Tiles are unevenly sized — none are square — and they overlap by 6px at chosen seams so the inflated 3D shapes can *push into* each other like cushions on a too-small bench. The grid itself is invisible; what reads is twelve **candle-lit pillows** floating on a fogged-glass field.

**The 12 tiles, in screen-reading order (top-left → bottom-right):**

1. **TILE 01 — Sea State** (cols 1–5, rows 1–3). The hero. A continuously-animated SVG wave whose amplitude is bound to a fake `swell.height` value (current value: 1.2m). The wave is drawn with `path-draw-svg` — a single 1240-point path that re-draws itself once per minute over 4.2 seconds, like the cafe's barometer pencil-tracing itself anew. Behind the wave: the **inflated-3d wordmark** "바다" — two characters, each puffed out 32px in z-depth, surfaced in candlewax cream with a 0.5px conservator's shadow.

2. **TILE 02 — Today's Bean** (cols 6–9, rows 1–2). A pillowy 3D coffee bean (single bean, not a mound) tilted 14° on the y-axis. Beneath it, handwritten in chalk-Hangul: *"오늘 — 케냐 키암부 AA · 살짝 짭짤"* (today — Kenya Kiambu AA · slightly salty). English microcaption beneath in ink: *kenya kiambu AA — a touch of brine.*

3. **TILE 03 — Hours Until Close** (cols 10–12, rows 1–2). A **single inflated 3D digit** (currently `2`) ballooning from the tile's center, drawn in a hand-rounded display weight with deep-set candlewax shadow. Below it, in small handwriting: *"두 시간 남았어요"* (*two hours left*).

4. **TILE 04 — Candle Telemetry** (cols 6–8, row 3). A row of seven small 3D candles, four of them with tiny SVG flames; three already pinched out (waxy stubs only). The flames flicker via a 4-frame stagger animation. Microcaption: *"촛불 4 / 7"*.

5. **TILE 05 — Tonight's Tape** (cols 9–12, row 3). A single 3D vinyl record half-extended from a sleeve, with a hand-written label: *"side B — slowdive · souvlaki"*. The record very slowly rotates (one rev per 38 seconds — slower than real, dreamier).

6. **TILE 06 — Tide Clock** (cols 1–3, rows 4–5). An inflated-3d circular tide dial. The dial face is matte parchment; the hand is a soft 3D arrow puffed out 6px. Geometric-abstract glyphs at twelve positions instead of numerals — twelve different abstract sigils for the twelve tide stations along the East Sea coast.

7. **TILE 07 — Drips Pulled Today** (cols 4–7, rows 4–5). A horizontal **path-draw-svg** line graph with 14 data points, hand-traced as if drawn with a slightly-too-soft pencil. The line redraws on a 6.4-second loop. Beneath: *"오늘 47잔 — 어제보다 3잔 적음"* (47 cups today — 3 fewer than yesterday).

8. **TILE 08 — Window Fog** (cols 8–10, row 4). A square tile that *is* the window. Inside it, a procedurally-generated SVG fog patch slowly accumulates and clears, traced live with `path-draw-svg`. A fingertip has drawn a small heart on it; the heart never fully fades.

9. **TILE 09 — Last Order** (cols 11–12, row 4). A receipt-strip rendered as a soft 3D scroll. Currently: *"3번 테이블 — 핸드드립 · 카눌레"*. Updates every ~90 seconds in ambient demo mode.

10. **TILE 10 — Playlist Skip** (cols 8–10, row 5). A single inflated 3D forward-skip glyph (▶▶) acting as a button — soft to push, no border, no label. The hover springs it 4px outward.

11. **TILE 11 — Bird Outside** (cols 1–4, rows 6–8). A wide low tile holding a single inflated-3d **gull silhouette** fixed mid-glide, plus a one-line caption that rotates between three bird states: *"갈매기 — 아직 거기 있음" / "갈매기 — 사라짐" / "다른 새가 왔음"* (gull — still there / gull — gone / a different bird came). Updates every 14 seconds.

12. **TILE 12 — Owner's Note** (cols 5–12, rows 6–8). The widest tile. A handwritten chalkboard slate, dim-lit, with the owner's note for the night: *"오늘은 안개가 깊어서 산책하지 마세요. 촛불만 보고 계세요."* (the fog is thick tonight — don't walk out. just watch the candles). English transliteration in lower-margin pencil. This tile is intentionally enormous because it carries the **only narrative line** on the page.

**Z-axis layering.** All 12 tiles sit on a single fogged-glass plane. Behind that plane: a soft, unfocused, near-monochrome photograph of the actual sea at night (a dark slate gradient with a single specular highlight where a buoy might be). In front of the tiles: nothing — no overlay nav, no toaster, no cookie strip, no chat bubble. The dashboard is *the entire site*. There is no second page.

**Navigation.** None. There is no menu, no scroll-jacking story, no second route. The site is a single live tableau. The only persistent affordance is **TILE 10**, which actually does something (advances the audio of TILE 05 if it's been clicked once to enable). Everything else is observational.

**Mobile re-flow (<900w).** The 12 tiles re-stack as a vertical column in this exact order: 01 → 12 → 02 → 04 → 06 → 07 → 03 → 05 → 09 → 08 → 11 → 10. (TILE 12 jumps to second on mobile because the owner's note is the most important sentence on the site, and on mobile the user may not see the full grid.)

## Typography and Palette

**Type stack — Google Fonts only.**

- **Caveat** (variable weight 400–700) — primary handwriting face, used for all Hangul-friendly captions, owner's notes, chalkboard handwriting, and the lower-margin English glosses. Caveat is a Google-fonts handwritten roman that holds up at 14px on glass and feels like a felt-tipped marker on damp paper. We push it 0.02em letter-spacing at body sizes, 0.00em at 28px+.
- **Gaegu** (weights 300, 400, 700) — Korean handwriting companion. Gaegu is a Google-fonts Hangul face explicitly designed to feel like a Korean elementary-school teacher's chalk-handwriting. All Hangul on the site is set in Gaegu. Caveat handles the Latin; Gaegu handles the Hangul; neither is forced to ape the other. The pairing is intentional: each language gets its native handwriting, no romanisation gymnastics.
- **Fraunces** (variable, opsz 9–144, soft + variable) — used **exclusively** for the inflated-3d display glyphs (the wordmark "바다" only as a rendered SVG fallback in Latin contexts, the single "2" in TILE 03, and the section sigils in TILE 06's tide dial). Fraunces is set at its softest opsz axis with maximum SOFT axis to read as bulged, doughy, candle-poured. We never use Fraunces below 48px and never for body — it is a *display-only* face on this site.
- **JetBrains Mono** (weight 400) — a quiet utility face, used only for the receipt-strip in TILE 09 and the timestamp at the bottom of the screen. 11px, 80% opacity. Almost invisible. Lends the page just enough cafe-POS-printer texture to balance the handwritten warmth.

The hierarchy is therefore: **Fraunces** at 144px (display only, 4 places) → **Gaegu/Caveat** at 22–28px (tile titles + captions) → **Gaegu/Caveat** at 14–16px (microcaptions) → **JetBrains Mono** at 11px (receipt + timestamp). No size between 28 and 48 is ever used. This forces the page into a clear two-tier voice: *display object* and *handwritten note*, with nothing transactional or middle-weight in between.

**Palette (muted — eight colours, all named and all used).**

- `#1F2630` — **Slate Sea** (background plate behind everything; the after-sunset sea outside the window).
- `#2B3340` — **Slate Sea Lifted** (the fogged-glass dashboard plane that sits 6px above the sea; the tiles float on this).
- `#E8DCC4` — **Candlewax Cream** (the body fill of every inflated-3d object — the wordmark, the bean, the digit, the candles, the gull). The single most-used colour on the site.
- `#C4A878` — **Candle-flame Gold** (used only for the tiny SVG flames on TILE 04, the specular highlight on the wordmark, and the rotating-record label edge — never as a fill, only as a 1.4px stroke or a 12px radial bloom).
- `#8E9AA0` — **Fog Grey** (used for the path-draw-svg lines in TILE 01 and TILE 07, and for the half-erased fog in TILE 08 — a desaturated cool grey that reads as "pencil on damp glass").
- `#A07060` — **Brewed Brown** (used for the bean in TILE 02, the receipt-strip ink in TILE 09, and all chalk-handwriting on darker tiles — a deep coffee-stain brown with green undertone, never pure brown).
- `#3C5560` — **Tide Slate** (used for the tide-clock face in TILE 06 and the vinyl record in TILE 05 — slightly bluer than the body slate, so the dial reads as "deeper water").
- `#F2EAD6` — **Lit Page** (used only inside the owner's note in TILE 12 — a single warmer cream that says "this slate is the only one with a real candle next to it").

**Palette discipline.** No tile is allowed to use more than four of these eight colours. The wordmark tile uses only Slate Sea Lifted + Candlewax Cream + Candle-flame Gold. TILE 11 (the gull) uses only Slate Sea Lifted + Candlewax Cream. The owner's note uses Lit Page + Brewed Brown + a 1px Tide Slate underline. This restraint is what keeps the inflated-3d objects from looking like a candy-store rendering.

**No gradients in fills.** All depth on the inflated objects comes from layered SVG filters (Gaussian + offset specular bloom), never from CSS linear-gradients. This is a deliberate departure from the 94% of the corpus that leans on gradients. The page has *zero* `linear-gradient()` and `radial-gradient()` rules; depth is earned through filter, shadow, and noise.

## Imagery and Motifs

**Geometric-abstract is the structural imagery system** — this site does not use a single photograph, vector illustration set, icon font, or rendered 3D file. Every visual element on the page is built from primitive geometric forms (circles, soft-cornered rectangles, beziers, paths) and then *inflated* via SVG `feMorphology` + `feGaussianBlur` + `feSpecularLighting` to read as a wax-soft 3D object. The "geometric-abstract" choice is doing real work: in a corpus where 97% of designs use photography, this site uses zero, and that is its visual signature.

**Inflated-3d construction recipe (used 12 times across the site):**

Every "3D object" on the dashboard is a single SVG with this filter stack:

1. `feMorphology operator="dilate" radius="2"` — pillows the silhouette outward.
2. `feGaussianBlur stdDeviation="1.4"` — softens the edge to wax-not-plastic.
3. `feSpecularLighting surfaceScale="6"` with a single `fePointLight` placed at `(x=22%, y=18%)` — a low-left highlight that consistently reads as "candle on the bar to the left."
4. `feComposite` with the original to overlay the spec-light.
5. A second outer `feDropShadow` with `dx=0 dy=14 stdDeviation=18 flood-color=#0F1216 flood-opacity=0.55` — the soft drop-shadow on the fogged-glass plane.

The point-light placement is **identical for every inflated object** (always upper-left, always 22%/18%). This single shared light source is what makes the twelve tiles read as one room with one candle, not twelve unrelated 3D widgets.

**Object inventory (one row per object, all geometric-abstract primitives):**

01. **The wordmark "바다"** — drawn as two custom SVG paths approximating Hangul ㅂ + ㅏ + ㄷ + ㅏ, but with all corners radius-clamped to 28px and all stroke-thicknesses fattened to 84px so the characters read as inflated cushions, not type.
02. **The bean** — a single soft ellipse with one inset bezier "seam" path running diagonally; nothing else. The seam is what tells you it's a bean and not a pebble.
03. **The digit "2"** — a Fraunces glyph re-drawn as a single SVG path, then run through the inflation filter. We do NOT use the actual font glyph here — we trace it once at 480px and ship the path so the silhouette can be exactly inflated.
04. **The candles** — seven copies of one SVG: a tall vertical pill with a tiny tear-drop flame on top, four with the flame visible, three with only a tiny black wick stub.
05. **The vinyl record** — a flat black disc with a single off-centred cream label circle and three concentric grooves drawn as 0.4px strokes.
06. **The tide dial** — a soft-cornered circle with twelve abstract sigil glyphs at 30° intervals. Each sigil is a 14×14 pure geometric primitive (triangle / arc / cross / dot-cluster / diamond / etc) — no two are alike, none represent any real-world script.
07. **The drips graph** — 14 dots + a single hand-drawn polyline through them, drawn live via `path-draw-svg` over 6.4s.
08. **The window fog** — a procedurally-generated SVG path that morphs every 9 seconds between three pre-stored fog-shapes via `<animate>` on `d`.
09. **The receipt scroll** — a long thin rectangle with a slight perspective-warp (single CSS `transform: perspective(800px) rotateX(8deg)`), text inside.
10. **The skip-glyph** — two filled triangles, both inflated, the right one offset 6px.
11. **The gull** — a single bezier path for the silhouette; one breath of inflation.
12. **The slate (owner's note)** — a soft-cornered rectangle, lit with a stronger point-light (because of the implied second candle), filled in Lit Page cream.

**Candle-atmospheric motif as binding agent.** Every object on the dashboard is lit by the same imagined off-screen candle. In addition, the **literal** candles (TILE 04) are the site's narrative pulse — when one candle pinches out (every ~6 minutes in demo mode), a single Candle-flame Gold pixel-bloom briefly haloes the whole dashboard from below before fading over 1.8s. This is the closest the site gets to a "page event," and it is the only event the site ever announces.

**Path-draw-svg as breathing.** Three tiles are continuously self-redrawing (TILE 01 wave, TILE 07 drips graph, TILE 08 fog), each on a different period (4.2s / 6.4s / 9.0s). The periods are deliberately co-prime so they never align — this makes the page feel "alive" without ever syncing into a single beat, the way a quiet cafe at night never syncs.

**Negative-space rule.** No object touches another object's bounding box. The 6px overlap mentioned in the layout section is *visual overlap of inflated puffiness*, not bounding-box overlap. Every tile retains a 14px breathing margin on all sides.

## Prompts for Implementation

Build bada.cafe as **one HTML file, one CSS file, one ES module** — no framework, no router, no service worker, no build step, no fetch (the dashboard is "live" only in the sense that it has its own internal demo timers). Total uncompressed bundle target: under 80KB.

**Page event timeline (from first paint to steady state):**

- **0.00s — first paint.** The Slate Sea background renders. Nothing else.
- **0.18s — fogged-glass plane fades up** over 320ms. Now there is a faint dashboard surface but no tiles.
- **0.50s — TILE 12 (owner's note) appears first**, not last, because the owner's note is the only narrative line. Springs in over 540ms with a slight overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)). The handwriting then **path-draw-svg** writes itself onto the slate over 2.8 seconds, character by character, in Brewed Brown.
- **0.92s — the wordmark "바다" inflates into TILE 01.** Specifically: the silhouette appears at 60% scale and inflates to 100% over 880ms with the candlewax-cream fill animating in via opacity 0→1 in the same window. The point-light highlight bloom appears 220ms after fill-complete.
- **1.30s — the eleven remaining tiles spring in in a stagger.** Order: 02, 03, 04, 05, 06, 07, 08, 09, 10, 11 (TILE 12 already arrived). Stagger interval 90ms. Each tile springs from `scale(0.94) translateY(8px)` to `scale(1) translateY(0)` with a 520ms spring (overshoot ~6%). The inflated-3d object inside each tile renders 180ms after the tile arrives.
- **3.20s — steady state.** All breathing animations have started. The wave is drawing. The drips graph is drawing. The vinyl is rotating. The candles are flickering. The fog is morphing. The gull caption is on its first 14s cycle.

**Steady-state animation budget (per minute):**

- Wave path-draw-svg: 1 redraw every 60s, 4.2s draw, then dwell 55.8s (the static wave still subtly translates 0.4px y-axis to suggest swell).
- Drips graph path-draw-svg: 1 redraw every 24s, 6.4s draw, then dwell 17.6s.
- Fog morph: continuous, 9.0s per morph, three-state cycle.
- Candle flames: 4-frame stagger flicker, 0.16s per frame, infinite loop, but each candle's flicker is offset by 40ms so they never sync.
- Vinyl record: continuous rotation, 38s per revolution.
- Gull caption: rotates state every 14s.
- Last-order receipt: updates content every 90s.

**Cursor and hover behaviour.** The cursor on the dashboard is a custom SVG: a small candle-flame, 12×16 pixels, flickering. The flame's wick is the actual click-point. On hover over any tile, the tile lifts 4px on z (via transform translateY(-4px) + drop-shadow grow), and the inflated object inside the tile responds to cursor proximity by tilting up to 6° on x/y as a tilt-3d effect — but slowly, with a 240ms ease-out, so it reads as "wax responding to warmth from your hand," not "interactive 3D button." There is no click-target other than TILE 10. Hovering changes nothing about the data.

**Audio (optional, off by default).** TILE 10 is the only interactive control. On first click, it asks (in Caveat handwriting): *"do you want the cafe sounds?"* A single click confirms. The audio is one 4-minute loop of: muffled wave outside + faint dishwasher + the same 38s vinyl rev rotating with surface-noise crackle. Volume 0.18 max. There is no autoplay. The cafe is silent unless the user invites the sound.

**Accessibility note.** Ignored per project rules — but the handwritten text is set in real font glyphs (not images), the wordmark has an `<title>` element reading "바다 (bada / sea)", and all motion respects `prefers-reduced-motion: reduce` by collapsing all path-draw and rotation animations to single-frame static states. (This last point is ergonomic, not accessibility — the dashboard is meant to be calmer, not louder, when motion is unwelcome.)

**HARD AVOIDS:**

- **No pricing block.** This is not a SaaS dashboard.
- **No CTA.** There is nothing to click except TILE 10.
- **No stat grid.** "47 cups today" is one tile, not a stat-grid.
- **No testimonials, no logo wall, no email capture, no newsletter, no contact form, no FAQ, no team page, no footer, no cookie banner, no chatbot, no top nav, no hamburger, no breadcrumb.**
- **No gradients** (per palette discipline).
- **No photography** (per imagery discipline).
- **No dark/light toggle** — the cafe is at 9:47pm. It is dim. That is the only mode.
- **No skeleton loaders.** Tiles either spring in or do not exist.
- **No exclamation marks anywhere on the page.**

**HARD KEEPS:**

- The owner's note (TILE 12) is the largest tile and arrives first.
- Every inflated-3d object shares one virtual point-light at 22%/18%.
- Hangul gets Gaegu; Latin gets Caveat; neither replaces the other.
- The page never demands a vertical scroll on desktop.
- The candle-pinch-out event is the only "notification" the site emits.

**Storytelling spine in one sentence.** *bada.cafe is the live tablet of a small Korean coastal cafe at 9:47pm on a foggy October night, where every datapoint is a softly inflated wax object lit by the same imagined candle, and the only sentence that matters is the owner's handwritten note telling you not to walk out into the fog.*

## Uniqueness Notes

This design's distinct departures from the 70 designs already in the registry, and from the seed's defaults:

1. **Inflated-3d as wax, not vinyl.** Inflated-3d (1% of the corpus) is the trend's first appearance against a non-bouncy, non-plastic, non-Y2K reference. Every other contemporary inflated-3d treatment in the wild reads as a Spline-rendered toy or a Pinterest "blob aesthetic" exercise. bada.cafe specifically swaps the latex/PVC surface of mainstream inflated-3d for the surface of cooled beeswax, and binds every "3D" object to a single off-screen candle as the implied light source. This collapses the trend's loud, gummy energy into something closer to wabi-sabi candle-light — but executed in inflated-3d form, not in genuinely-imperfect-clay form. No other site in the corpus does this.

2. **Geometric-abstract as the only imagery, with zero photography, in a 97%-photography corpus.** The dashboard contains no photographs, no stock imagery, no illustration packs, no icon fonts. Every visual is composed from circles, beziers, and rounded rectangles run through one shared SVG inflation filter. In a corpus where 97% of designs include photography, bada.cafe ships zero raster pixels.

3. **Dashboard layout used for atmosphere, not metrics.** Dashboard layout (24% of the corpus) is almost universally deployed for SaaS analytics, fintech, or admin panels. bada.cafe takes the dashboard primitive and uses it for *vibe-as-data*: tide height, candle count, fog density, gull-still-out-there. The form is dashboard, the content is mood. This is the only "dashboard" in the registry where the most important tile is a handwritten note from the owner telling you not to go outside.

4. **Approachable-casual tone (1% of the corpus) executed in informal Korean (banmal) plus quiet lower-case English, with zero exclamation marks anywhere on the page.** Most "casual" designs in the corpus default to chipper exclamation copy, hand-thrown emoji, or "let's get started!" CTAs. bada.cafe's approachable-casual is the off-shift barista voice — low, dry, observational, never selling you anything.

5. **Hangul + Latin handwriting parity (Gaegu + Caveat), each language in its own native handwriting face, neither romanised, both first-class.** Most bilingual sites in the corpus either pick one script as primary and the other as gloss, or use a single multi-script font that compromises both. bada.cafe uses two native-feel handwriting faces side-by-side, with the rule that Hangul lives in Gaegu and Latin lives in Caveat, full stop. The owner's note in TILE 12 is the clearest demonstration: Korean line in Gaegu, English transliteration *not* in Caveat-trying-to-match-Gaegu but as its own quieter pencil layer in Caveat at lower size, lower opacity.

6. **Path-draw-svg used as ambient breathing on three different co-prime periods (4.2s / 6.4s / 9.0s) so the page never syncs into a single rhythm.** In a corpus where 21% of designs use path-draw-svg, the technique is overwhelmingly deployed as a one-shot reveal animation on first scroll into view. bada.cafe uses it as a perpetual, multi-track, intentionally desynchronised heartbeat — the closest analogue is a quiet room with three slightly out-of-tune metronomes that never collide.

7. **Candle-atmospheric (8% of corpus) bound to a single shared virtual point-light at fixed (22%, 18%) coordinates across all twelve 3D objects.** Other candle-themed designs use candles as decorative motif. bada.cafe makes the candle the *only* light source and enforces the lighting consistency at the SVG-filter level, so the entire page reads as one dimly-lit room rather than a collage of candles.

8. **No gradients, no photography, no exclamation marks, no CTAs, no scroll, no second page, no hover-click target other than the one music-skip button.** The negation list is unusually severe; the page is a fixed, single-screen, single-room observation.

9. **Owner's note arrives first in the load sequence, not last, and is the largest tile.** This inverts the standard dashboard loading pattern (chrome first, content last) and treats the most-narrative tile as the page's primary load priority. The dashboard data is all secondary.

10. **The candle-pinch-out event is the entire event vocabulary of the site.** No toasts, no banners, no popovers, no modals. The only thing the site ever does on its own is dim slightly when one of the seven candles burns out. This is the most restrained event vocabulary in the registry.

**Chosen seed:** *aesthetic: inflated-3d, layout: dashboard, typography: handwritten, palette: muted, patterns: path-draw-svg, imagery: geometric-abstract, motifs: candle-atmospheric, tone: approachable-casual.*

**Avoided patterns from frequency analysis:**
- Avoided **photography** (97%) — zero raster images on this site.
- Avoided **gradient** fills (94%) — depth comes from SVG filters, never `linear-gradient()` or `radial-gradient()`.
- Avoided **hand-drawn** aesthetic (94%) — hand-feel is delivered via handwritten *typography* and path-draw-svg, never via hand-drawn vector illustrations.
- Avoided **mono** typography (95%) as the primary face — JetBrains Mono appears only in the receipt and timestamp, at 11px, 80% opacity, as a quiet accent.
- Avoided **full-bleed** (87%) and **centered** (81%) layouts — the dashboard is asymmetric-grid-on-fogged-plane.
- Avoided **parallax** (92%), **spring** (67%), and **stagger** (65%) as load-bearing devices — spring + stagger appear once on first paint and then never again; the page does not parallax at all (no scroll exists).
- Avoided **cursor-follow** (62%) as a motion device — cursor proximity tilts inflated objects, but nothing chases the cursor.
- Avoided **warm** palette (92%) as primary — the dominant tone is cool slate, with warm candlewax cream as accent against it. The page reads cool-leading, not warm-leading.

The result is a small, dim, single-screen seaside-cafe dashboard that uses a maximalist trend (inflated-3d) at minimalist temperature, in a layout family (dashboard) that the corpus reserves for SaaS, with a tone (approachable-casual) and an imagery system (geometric-abstract) that are each below 2% of the registry. It is its own room.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T10:58:19
  seed: seed:
  aesthetic: bada.cafe is a **seaside-cafe operations dashboard rendered in inflated-3d puffe...
  content_hash: 9b0114ba26f9
-->