# Design Language for bada.cafe ## Aesthetics and Tone `bada` is the Korean word for *sea*, and `bada.cafe` is the imaginary cafe that sits where the sea meets a mountain — except this cafe was designed by a Scandinavian punk who finished art school in Malmö, moved to a fishing village on the East Sea of Korea, and decided the standard hygge-beige palette was a lie. The aesthetic is **Scandinavian Brat** — a clean, disciplined, almost ascetic Nordic structural backbone wrapped in **candy-bright** rebellion. Imagine a Marimekko shop, a Carl Larsson watercolour, and a Riot Grrrl zine collaged into a single laminated coffee menu, then handed to you on a fjord that turns out to be a Korean ria coast. The mood is **edgy-rebellious quietness**: a girl in a hand-knit Sætre sweater drinking a hot drip-brew at minus-three-degrees while flipping through a punk magazine she pasted together herself. The site does not whisper "lifestyle"; it does not coo "artisanal"; it bristles. Headlines are set in elegant high-contrast serif but the kerning is shoved tight enough to draw blood; bright bubblegum pink and acid lemon land on cold seafoam glass and refuse to apologise. Crisp Nordic restraint at the bones — defiant hot-pink mountain peaks at the surface. Tonally the writing voice is **dry, wry, slightly mean about the wellness industry**, fond of the sea, fond of dogs, indifferent to influencers. Coffee is described in coordinates and hand-drawn diagrams, not adjectives. Think *Apartamento* magazine if it were edited by a Scandinavian zinester who kept cracked iPhones in a tin biscuit box. ## Layout Motifs and Structure The site is built as **eight stacked translucent strata** — a literal *layered-depth* construction where every full-viewport scene is a transparent vellum sheet pinned over the one below it. Scrolling does not pan; it **lifts the topmost sheet up and away** while the layer below comes forward, like a child peeling cling-wrap off a window. Each sheet carries one fragment of the cafe — a printed receipt, a tide chart, a candy wrapper, a mountain elevation profile, a Polaroid of the bay — and they overlap in registration marks at the corners. **The macro grid is the Swedish Square (8×8 modulus, 24px base)**, but every fourth row is **deliberately offset by 12px to the right**, so the page feels architecturally rigorous *and* visibly canted, like a wood-clad coffee shed that has settled toward the water over thirty winters. The horizon line of every section sits exactly on a fixed 38vh from the top — this is the **shared sea-line** every layer respects, so when scrolling occurs the candy-pink peaks of the upper layer slide off above and the dark-water shapes of the next layer rise from the same horizon. **Eight strata, top-to-bottom:** 1. **Stratum I — *door bell.*** Full-bleed seafoam #C9F2E9 over white, with a single off-centre Playfair Display word `bada` set at clamp(8rem, 20vw, 22rem) in shock-pink #FF3D7F, the descender of the `b` cut by the sea-line. To the right at 62%×38%, a hand-drawn 1.6px ink doorbell rings (CSS shake on entry). 2. **Stratum II — *mountain-landscape menu.*** A horizontal collaged ridgeline made from torn-paper triangles in eight different patterned scraps (Marimekko-poppies, ripped graph paper, taped-down receipts). Each peak is also a menu item — hover over a peak, the elevation pops up, the price becomes the elevation in metres. 3. **Stratum III — *tide-chart hours.*** A full-width tide ribbon plotted in candy-yellow #FFE15D against deep ink #1B1F2A, where opening hours rise and fall like an actual tide curve. Tuesdays the tide goes out and the cafe is closed; the curve dives below the axis. 4. **Stratum IV — *the drinks zine.*** A pasted three-column zine spread, each column an asymmetric collage card with a single drink. Captions are typewritten on torn masking-tape across photographs. 5. **Stratum V — *playlist tape.*** A horizontally scrolling cassette where the spool turns under cursor velocity. Track listings collaged from 1990s K-indie and Swedish post-punk. 6. **Stratum VI — *guestbook ripple.*** The page becomes a still pool. Cursor presses send concentric **ripple rings** outward, and the rings carry visitor signatures (Hangul + Latin) outward until they fade at the edges. 7. **Stratum VII — *map of the bay.*** A hand-drawn cartographic plate: the cafe at 38°10′N, the ferry pier, the fish market, three favourite beaches, and a dotted line marked `dog walk, 4.2km`. 8. **Stratum VIII — *receipt out.*** A long perforated thermal-printer receipt scrolling upward as the user reaches the bottom, listing nothing but the page they just read in itemised form. Final line: `total: free / paid in salt`. There is **no traditional navigation bar**. Navigation is a single fixed candy-pink **paper-tag at the top-left corner** that says `tab #` and updates to the current stratum number; clicking it expands into a vertical list of the eight collaged tabs. There is **no hero CTA**, **no pricing block**, **no testimonials grid**, **no team-photos row**, **no newsletter capture popup**. The user is offered a cafe, not a funnel. ## Typography and Palette **Typography (Google Fonts only):** - **Display — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)**, italic 700–900, letter-spacing -2.4%, optical-size variable. The headline voice. Set very large (12–22vw), kerned aggressively tight on display lines so that bowls of `b`, `d`, and `a` collide at their counters. The italic axis is the "rebellious" register; upright is the "polite" register, and the site uses italic for all headlines except Stratum VIII (the receipt), which is the only place Playfair Display appears upright. - **Body & UI — [Work Sans](https://fonts.google.com/specimen/Work+Sans)**, weights 300 / 400 / 600. Clean Scandinavian humanist sans for running paragraphs at 18px / 30px line-height, letter-spacing +0.6%. Stays out of Playfair's way; provides Nordic discipline at the foot of every collage. - **Annotation & captions — [Caveat](https://fonts.google.com/specimen/Caveat)**, weight 500. Hand-written ink for tape-captions, marginalia, ripple-pool guestbook entries, and the dog's name on the map. Used sparingly — never for paragraphs longer than 8 words. - **Receipts & coordinates — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 400. Tide values, latitudes, prices, and Stratum VIII's full receipt. The only monospace voice on site; treats numbers as artefacts. Type pairs are deliberately **maximally distant** in voice (Playfair display ↔ Work Sans body ↔ Caveat hand ↔ JetBrains Mono receipt) so each layer carries its own register and the collage reads as four hands working at one table. **Palette — Candy Bright on Nordic Cool (eight colours, fixed as design tokens):** | Token | Hex | Role | |---|---|---| | `--ink-tar` | `#1B1F2A` | Deep ink. Tide curves, headline counter-strokes, body type. | | `--paper-frost` | `#F4F1EA` | Warm Nordic cream. Default page background under all strata. | | `--seafoam` | `#C9F2E9` | Stratum I. The cold-water glass. | | `--shock-pink` | `#FF3D7F` | Bubblegum punk. Wordmark, peaks, primary "rebel" accent. | | `--candy-lemon` | `#FFE15D` | Tide-chart fill, ripple highlight, sun on map. | | `--lilac-sour` | `#C7B6FF` | Cassette spool, secondary tape labels. | | `--cobalt-deep` | `#1F4FB8` | Sea-water mass, map ocean fill, dotted-line ink. | | `--ember-coral` | `#F26B4A` | Coffee bean, receipt printer ink, Stratum VIII. | The palette refuses the Scandinavian beige cliché. Cream is the canvas, cobalt is the deep, and the four candy accents (pink, lemon, lilac, coral) are deployed in **declining frequency by stratum** — Stratum I is 60% pink, Stratum VIII is only 8% coral — so the site cools as the visitor descends through the layers, ending in near-monochrome ink-on-cream. ## Imagery and Motifs **No stock photography. No 3D. No flat icons.** Imagery is exclusively a **collage of hand-cut paper, hand-drawn ink, and torn ephemera**, all rendered as inline SVG plus six 800×800 PNG paper-textures (recycled pulp, kraft brown, graph paper, masking tape, thermal receipt, watercolour bleed) that are referenced as `` patterns inside SVG. **Six recurring motif families:** 1. **Mountain-landscape ridgelines (the cardinal motif).** Every stratum carries a ridgeline silhouette across its 38vh sea-line — but each ridge is collaged from torn-paper triangles in different printed patterns: Marimekko poppies on Stratum I, ledger-paper graph on Stratum III, postage stamps on Stratum V, sea-chart fathom contours on Stratum VII. The ridgeline is **the membership card** of every layer. Peaks crucially have **shock-pink edges**, drawn as single-stroke 2px lines that protrude 4px past the paper edge, like glitter pen on a magazine cut-out. 2. **Ripple rings (the principal interaction motif).** Every cursor click anywhere on the page emits four concentric SVG circles that expand from 0 → 240px in 1.4s with ease-out-cubic, opacities (0.9, 0.6, 0.35, 0.15), stroke-width 1.2px, colour `--candy-lemon`. They never repaint — they live and die. On Stratum VI (the guestbook pool) the rings carry a tiny Caveat fragment of a visitor sentence. 3. **Torn-paper edges.** Every collage card is bounded by a hand-drawn torn-paper edge: a ragged SVG path with 28–40 segments per side, jitter ±2px, reading as if the paper was hand-torn against a metal ruler. Edges cast a 0.5px ink-shadow at 4° offset (drop-shadow filter). 4. **Masking-tape strips.** Two-tone candy-lemon-with-shadow rectangles, 5° random rotation per instance, used to "tape" annotations and Polaroids onto the page. Tape strips are SVG with semi-transparent inner gradient (alpha 0.7→0.4) so the layer behind reads through. 5. **Hand-drawn marginalia (the "punk" voice).** Manicule fingers, asterisks, scribbled corrections (single red-coral strikethrough across menu items the cafe has run out of), arrows that loop back onto themselves twice, and the recurring tag `xx` written in Caveat after sentences the writer agrees with. Marginalia appear at a density of 1 per 220 words of body copy, never more. 6. **Coastal cartography fragments.** Compass rose (north arrow only, no full compass), bathymetry contour rings, dotted-line ferry routes, a single hand-drawn `bada.cafe` pin — all on Stratum VII and only there. Fathom numbers are JetBrains Mono on the cobalt sea. **Tooth and texture:** A persistent 6% film-grain noise overlay (CSS `mix-blend-mode: multiply` on a tiled SVG `` with `feTurbulence baseFrequency=0.9`) sits above all eight strata, anchoring the candy palette into a print-feel paper world. Without the grain the colours glare; with it they sit on the page. ## Prompts for Implementation Treat bada.cafe as a **single eight-act peeling-vellum scroll experience**, not a marketing site. The user descends through eight transparent overlays of one cafe; each overlay reveals more of the same room from a slightly lower altitude. The page tells one continuous story: *you walked into a cafe by the sea, and you stayed long enough to read the receipt.* **Macro narrative structure (eight full-screen strata, peel transition between each):** 1. **Stratum I — *door bell.*** The page opens with the seafoam glass layer and the wordmark `bada` in shock-pink Playfair italic. After 600ms the doorbell SVG rings (rotation -8° → +8° → 0° over 480ms with elastic ease). After 1.4s, the line `the cafe by the sea, run by people who do not believe in pumpkin spice` types itself in Work Sans 18px, one character per 22ms. No buttons. The user must scroll to enter. 2. **Stratum II — *mountain menu.*** As Stratum I peels up, the collaged ridgeline of menu peaks rises. Each peak is interactive: hover scales the peak by 1.04 with spring-physics (stiffness 220, damping 18), reveals the elevation tag, swaps the price into the elevation. Drinks: drip coffee 410m, pour-over 820m, hot chocolate 1240m, oat-milk latte 660m, sea-salt mocha 1885m, hojicha 950m, tap water 0m. 3. **Stratum III — *tide-chart hours.*** SVG path of a sine curve modulated with a Korean tide table for the East Sea, animates `stroke-dasharray` from 0 → length over 2.2s as the stratum enters viewport. Days of the week sit on the x-axis. Tuesday's amplitude is inverted, the curve goes underwater, and the masking-tape note `closed Tuesdays. We need a day off too` is taped at 5° rotation across the dive. 4. **Stratum IV — *drinks zine.*** Three asymmetric collage cards stagger-enter (40ms apart) with elastic spring. Each card is a torn-paper rectangle 32–44vw wide, slightly rotated (-2°, +1°, -3°). Captions on masking tape. Hover sends a candy-lemon ripple across the card surface and lifts the card 6px in z-axis with a 1px drop-shadow. 5. **Stratum V — *playlist tape.*** A horizontal-scroll inside the section. Cursor velocity drives the cassette spools (rotateZ tied to scrollX delta with rate-limit). The active track row glows shock-pink. Hovering a track plays a 4-second fragment via the WebAudio API — no player UI, just the sound. 6. **Stratum VI — *guestbook ripple.*** The full viewport becomes the cobalt sea pool. Cursor click anywhere fires a four-ring ripple plus a tiny Caveat fragment of a stored visitor sentence. After 1.4s the ring fades. Persistence is purely visual — the pool resets each visit. A single small Work Sans line at the foot reads `12,408 ripples sent into the bay`. 7. **Stratum VII — *map of the bay.*** A 1.4× scale map fills the viewport. The user can drag-pan within ±12vw / ±12vh. A dotted line marked `dog walk, 4.2km` animates `stroke-dashoffset` from full → zero over 4 seconds, drawing the path from the cafe pin to a hand-drawn dog at the headland. The dog wags (rotation -4° → +4° on 600ms loop) when the path completes. 8. **Stratum VIII — *receipt out.*** The eighth and final stratum is a thermal-printer receipt that **scrolls upward against the page scroll** (parallax inversion factor -0.6). The receipt itemises the previous seven strata (`door bell ............ 0`, `mountain menu ........ 0`, ...). At the foot, the line `total: free / paid in salt` types itself, then a single masking-tape strip slaps down at 5° to seal the page. **Animation grammar (use sparingly, intentionally):** - **Peel transition between strata.** Use `transform: perspective(2000px) rotateX(-12deg) translateY(-100vh)` with opacity 1 → 0 over 700ms ease-out-cubic. The peeling layer must show its torn-paper bottom edge as it lifts. - **Ripple primitive.** A single reusable component — every interactive surface (menu peak click, card click, guestbook click, receipt taping) emits the same four-ring ripple in candy-lemon. This is the site's heartbeat motif and must be globally consistent. - **Spring physics for hover states.** All hover lifts/scales use a configured spring (stiffness 220, damping 18, mass 1). No linear or ease-in-out tweens on hover. - **Stagger reveal on enter.** All stratum content enters with a 40ms stagger between siblings, max 9 elements per cascade. Use IntersectionObserver, threshold 0.4, fire once per visit. - **Cursor-paced scroll velocity.** Scroll velocity drives subtle parallax on each layer's collaged ridgeline (rate 0.12) and the cassette spool rotation (Stratum V only). - **Reduced-motion mode.** Disable peel; replace with crossfade. Disable ripples; replace with single 200ms colour pulse. Keep all content readable in static form. **Voice and microcopy guidelines.** Never write "welcome." Never write "discover." Never write "experience." The cafe does not court the visitor. Sentences are short, declarative, occasionally rude. Examples: *we open at six. tide permitting.* / *the espresso is fine. it is not transcendent. it is fine.* / *no laptops on Sundays. read a book or leave.* All Hangul phrases sit alongside their Latin transliteration in 80% size: `바다 (bada) — sea`. **Implementation stack constraints.** Vanilla HTML + CSS custom properties + lightweight ES modules. SVG inline (no external icon set). No CSS framework. No web-font preloader theatre. No CTA, no pricing block, no stat-grid, no testimonials carousel, no team-photos row, no newsletter modal, no chat widget. The cafe is the cafe. ## Uniqueness Notes **Differentiators relative to the existing 39-design corpus (informed by frequency analysis):** 1. **Scandinavian aesthetic in the candy-bright register.** The `scandinavian` aesthetic appears at 5% of the corpus — and every existing instance defaults to muted neutrals, hygge beige, and pastoral calm. bada.cafe is the **first loud Scandinavian** design: full Marimekko-collage candy palette (#FF3D7F, #FFE15D, #C7B6FF, #F26B4A) on a Nordic structural grid, paired with an explicitly **edgy-rebellious** tone. The collision — disciplined Swedish Square 8×8 modulus carrying riot-grrrl bubblegum — does not exist anywhere else in the registry. 2. **Eight-stratum peeling-vellum architecture.** The corpus uses `layered-depth` at only 7% and `parallax-sections` at 10%, but every existing instance is a Z-axis parallax stack where layers move at different rates inside one continuous scroll. bada.cafe's strata are **discrete vellum overlays that peel up and away**, with a fixed 38vh shared sea-line that all eight layers register against. Scroll does not pan — it lifts. This is a peel mechanic, not a parallax mechanic, and is structurally absent from the registry. 3. **Mountain-landscape collage as the cardinal motif, not as a backdrop.** No existing design in the corpus uses `mountain-landscape` as the principal recurring motif. Where ridgelines or peaks appear at all (5% of designs), they are decorative hero backdrops. bada.cafe makes mountains **load-bearing**: every stratum carries a ridgeline collage at the same horizon, every peak is a menu item, and the candy-pink edge of every triangle is the site's signature 2px protruding-stroke ornament. 4. **Ripple as a globally enforced interaction primitive.** `ripple` patterns appear in 17% of the corpus, but always as a one-shot decorative effect on a hero or a button. bada.cafe makes the four-ring candy-lemon ripple the **only** click-feedback primitive on the entire site — menu peaks, drinks zine cards, guestbook pool, receipt tape — so the visitor learns one gesture and the gesture means *the cafe acknowledges you.* 5. **Collage imagery as the entire visual register.** `collage` appears at only 5% of the corpus, and `imagery: photography` dominates at 92%. bada.cafe contains zero photography — every visual is hand-cut paper, ink stroke, masking-tape, or thermal-printer receipt, rendered in inline SVG plus six referenced paper textures. The whole site is one extended zine spread, not a website with photos in it. 6. **No funnel architecture.** The frequency analysis shows the corpus skews toward `corporate` (20%), `centered` (92%), `full-bleed` (87%), with persistent CTAs, pricing blocks, and testimonial grids implied. bada.cafe deliberately omits all of these. There is **no hero CTA, no pricing block, no testimonial row, no team grid, no newsletter capture, no contact form**. Stratum VIII closes with `total: free / paid in salt` — the cafe is offered, not sold. 7. **Playfair italic as the rebellious register.** Playfair Display appears in display roles across the corpus, almost always in upright weights to project elegance. bada.cafe uses Playfair Display **italic 700–900 with -2.4% letter-spacing as default**, switching to upright only on the receipt (Stratum VIII). The italic-as-default flips Playfair from "luxury hotel" into "punk fanzine cover-line" — a typographic register that does not appear elsewhere in the registry. **Documented chosen seed (from assignment):** `aesthetic: scandinavian, layout: layered-depth, typography: playfair-elegant, palette: candy-bright, patterns: ripple, imagery: collage, motifs: mountain-landscape, tone: edgy-rebellious` **Avoided patterns (per frequency analysis):** rejected `aesthetic: hand-drawn` (84% — overused), `aesthetic: editorial` (51%), `aesthetic: glassmorphism` (33%), `imagery: photography` (92% — refused entirely), `layout: centered` (92% — bada uses asymmetric stratified layers with offset rows), `palette: warm-gradient` (89% / 97% combined — bada uses hard-edged candy flats, no warm gradient mesh anywhere), `motifs: vintage` (87% — bada has no vintage register; the magazine-zine voice is contemporary punk, not nostalgic), `typography: mono-default` (94% — bada uses JetBrains Mono only for receipts and coordinates, never for body), `patterns: parallax` (89% — bada uses peel transitions instead), `tone: professional` (33% — bada is wry-rebellious), `tone: friendly` (28% — bada is dry, slightly mean, and fond of dogs).