# Design Language for bada.casa ## Aesthetics and Tone bada.casa is a **terminal-emulator beach house at golden hour** — a one-screen monolith where a 1981 monochrome CRT has been pulled out onto a sun-warmed veranda, the phosphor recalibrated from amber-on-black to *burnt-orange-on-warm-cream*, and the prompt is now blowing soap bubbles instead of ASCII. The Korean root *bada* means "sea" and *casa* means "house": the design literalises this — a TTY shell that thinks it lives in a beach house. Every command echoed to the screen returns not a stack trace but a buoyant, optimistic answer, often punctuated by a Lottie-animated bubble that drifts up through the type. The aesthetic vocabulary is **terminal** — currently at 27% in the registry and almost always rendered as cold green-on-black hacker noir or icy CRT cyberpunk. bada.casa rejects both. This is **terminal at 16:00 on a salt-bleached patio**: the monitor is a heavy beige plastic box, the keys click softly under a hand still warm from the sea, and the only sound is the hush of an offshore breeze and the *plip* of a bubble bursting against the glass. The tone is **optimistic-bright** (a category sitting at only 2% in the registry — bada.casa is the first terminal-aesthetic site in the corpus to claim it). Optimism here is *literal*: every line of terminal output is grammatically affirmative, every error message is a gentle suggestion, every loading state is a bubble that pops into a smiley. There is no dread, no glitch, no green-screen paranoia — only a kindly old machine that learned to be happy. Inspirations are specific: the warm beige bezel of an *Apple IIc* sitting in afternoon light; the soap-soft edges of *Toshio Iwai's Electroplankton*; the burnt-clay kitchen tiles of a Cádiz seaside *casita*; the way a child blows bubbles toward a window screen on a hot afternoon and the sun catches each bubble for half a second. The mood is *post-cynical* — a terminal that has read all the dystopian sci-fi and decided to make tea instead. ## Layout Motifs and Structure The site is a **hero-dominant** monolith — one viewport, one screen, one terminal window that consumes 92vh on desktop and 88vh on mobile, surrounded by a generous warm-cream frame. Hero-dominant sits at only 4% in the layout frequency, and the few examples in the corpus tend toward photographic mastheads or oversized type slabs. bada.casa's hero is **a single living terminal window** — no hero image, no headline-and-subhead pair, no CTA stack underneath. Just the terminal, breathing, and a thin marginal gutter where bubbles drift upward at the edges of the screen. **The terminal window** is rendered as a **64rem-wide skeuomorphic CRT casing** — a beige bezel (2.5rem thick on top and sides, 4rem at the bottom where the speaker grille and brand-plate live), a slightly inward-curved phosphor surface (achieved with `border-radius: 0.5rem 0.5rem 1rem 1rem` and a subtle `radial-gradient` vignette darkening the four corners by 8%), and a pixel-honest 1.25rem inner padding that matches the column rhythm of an 80×24 character grid. The CRT is centered in the viewport with `display: grid; place-items: center` and the surrounding margin is filled with a barely-perceptible *bubble drift field*: 12 small Lottie bubbles, each between 16px and 48px in diameter, ascending at 0.3–1.2 px/frame on independent vertical paths, with `mix-blend-mode: multiply` against the warm-cream backdrop. **Inside the terminal**, the composition is strictly columnar — an 80-character monospace grid with a single visible cursor block. The content unfolds as a **scripted shell session** that begins on page load: 1. `> bada whoami` — the terminal answers `i am bada.casa, a small house by the sea, who likes you.` (typewriter cadence, 32 chars/sec) 2. `> bada bubbles --on` — a Lottie bubble emitter activates and bubbles begin rising *inside* the terminal as well as outside, drifting up through the prompt 3. `> bada describe self` — three short paragraphs print, each one accompanied by a different bubble that pops into a tiny SVG glyph (a wave, a roof, a sun) 4. `> bada offer help` — the prompt offers three soft commands: `tell me a story`, `show me the weather`, `play a sound` — these are the only interactive elements on the page 5. After 90 seconds of inactivity, the terminal types `> bada rest` and the cursor slows its blink to once every 3 seconds, while the surrounding bubble drift field intensifies The hero is **load-bearing for the entire site** — there is no second section, no footer beyond a single 8pt monospace line `bada.casa — gentle terminal, salt air, 2026` flush-bottom. No CTA-heavy stacks, no pricing tier, no stat grid, no logo wall, no testimonial carousel. The single screen is the entire narrative. **The 80×24 inner grid** is the only structural commitment. All terminal content respects the character grid; bubbles ignore it entirely and float *over* it with `position: absolute` and `pointer-events: none`. The contrast between the rigid type grid and the freeform bubble drift is the central compositional tension of the design. ## Typography and Palette **Fonts (Google Fonts only):** - **JetBrains Mono Variable (wght 100–800, italic)** — The terminal voice. Used for every character inside the CRT bezel: prompts, command echoes, output paragraphs, the cursor, and the small brand-plate text on the bezel itself. Set at 1.0625rem (17px) on desktop, 0.875rem (14px) on mobile, `line-height: 1.55`, `letter-spacing: 0.01em`. Weight ramps via the variable axis: prompts at wght 600, output paragraphs at wght 380, the cursor block at wght 800. JetBrains Mono is preferred over IBM Plex Mono because of its rounder lowercase `o` and `g`, which read as friendlier and more bubble-adjacent at body sizes — the friendliness of the type is part of the optimistic-bright tone. - **Recursive Variable (MONO 0–1, CASL 0–1, wght 300–1000)** — Used for the *typography-and-palette* category-defining trick of this design: **variable-fluid** type that morphs from monospace to proportional sans on hover or scroll. Variable-fluid typography sits at only 5% in the registry. bada.casa uses Recursive on the three soft commands (`tell me a story`, `show me the weather`, `play a sound`) — at rest they render at MONO 1 / CASL 0 / wght 500 (rigid monospace), and on hover they fluidly animate to MONO 0 / CASL 1 / wght 700 (warm rounded sans) over 600ms with `cubic-bezier(0.4, 0.0, 0.2, 1)`. This is the only place on the page where the monospace grid breaks, and the breakage *is* the interactive affordance — the hover converts a command into an offer. - **Fraunces (opsz 9–144, SOFT 0–100, wght 100–900)** — Used exclusively for the small wordmark `bada.casa` engraved on the CRT bezel's lower brand-plate. Set at 0.75rem, opsz 9, SOFT 100, wght 600, color Burnt Sienna. Fraunces at SOFT 100 has the molten quality of a warm enamel logo on vintage hardware — it makes the terminal feel like a beloved object rather than a piece of office equipment. **Palette — burnt-orange anchored, warm-cream surfaced. Hex values are absolute.** - `#F2EAD9` **Salt-Cream** — The page background. The color of unbleached linen on a sun-faded clothesline, slightly warmer than ivory, slightly cooler than parchment. Covers ~58% of pixel area on first paint. - `#E8DCC4` **Sun-Bezel** — The CRT casing. The exact hue of an Apple IIc bezel after 40 years of patio sun. Covers ~24% of pixel area. - `#3A2418` **Roast-Hull** — The phosphor-screen background inside the bezel. A burnt umber so deep it almost reads black, but with enough red warmth to never feel cold. ~10% pixel area. - `#C24A1F` **Burnt-Orange Phosphor** — The primary typeface color inside the terminal. The defining hue of the entire site. Used for prompts, command echoes, and the cursor block. This is the burnt-orange palette token (1% in the registry — bada.casa is among the first to claim it). `text-shadow: 0 0 6px rgba(194, 74, 31, 0.45)` simulates phosphor glow without crossing into hacker-noir territory. - `#E37A3A` **Bubble-Apricot** — The Lottie bubble outlines and the highlights on bursting bubbles. A softer, lighter sibling of Burnt-Orange Phosphor. - `#F4B97A` **Bubble-Sun** — The interior fill of bubbles, with `opacity: 0.35`. Reads as the sun catching a soap bubble at an oblique angle. - `#1F4A4F` **Sea-Ink** — A single accent: the only non-orange color on the page. Used exclusively for the cursor block when it idles, and for the `--on` flag in `bada bubbles --on`. Sea-Ink is the deep teal of the Mediterranean at 4pm. ~0.4% pixel area — it must be *rare* to remain meaningful. The palette is intentionally **burnt-orange-dominant** with a single Sea-Ink note — this is the chromatic embodiment of the *bada* (sea) inside the *casa* (house): the house is warm, the sea peeks through one window only. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration. The entire imagery system is two things and only two things: water-bubbles (Lottie) and bubble-playful (SVG/CSS).** Both categories are radically underused — water-bubbles at 7% in imagery, bubble-playful at 1% in motifs. bada.casa weds them as the entire visual atomic structure of the site. **The Bubble System (Lottie-animation, the central pattern — at 1% in the registry):** - All bubbles are authored as Lottie JSON files (`bubble-small.json`, `bubble-medium.json`, `bubble-large.json`, `bubble-burst.json`) and embedded with `lottie-web`'s lightweight player. Lottie-animation is at 1% in the patterns frequency — bada.casa is the first site in the corpus to make Lottie its dominant motion paradigm. - **bubble-small (16–24px)**: a single thin Bubble-Apricot circle outline, 0.75px stroke, with a Bubble-Sun interior at 35% opacity and a single white specular highlight at the 10-o'clock position. Drifts upward at 0.4 px/frame, wobbling laterally with a sine wave of amplitude 8px and period 1.4s. 8 instances visible at any time. - **bubble-medium (32–48px)**: same construction with a faint inner reflection (a second smaller circle at 70% scale, 15% opacity). Drifts at 0.6 px/frame. 4 instances. - **bubble-large (56–96px)**: a single hero bubble that crosses the terminal screen once every 12 seconds, large enough to refract a tiny inverted reflection of the prompt text inside it (achieved with `backdrop-filter: invert(0.05) hue-rotate(-12deg)`). 1 instance. - **bubble-burst**: every bubble that touches the top edge of its container plays a 280ms burst animation — six radial droplets, each fading to 0 opacity over 220ms, with a single 4-frame Bubble-Apricot starburst at the center. **Bubble-playful motifs (the secondary motif system):** - The cursor block is itself a bubble at rest — a 0.6em × 1.1em rounded rectangle with the same Bubble-Apricot stroke and Bubble-Sun fill as the small Lottie bubbles. When the prompt waits for input, the cursor doesn't blink; it *inflates and deflates* over 1.6 seconds, like a bubble being held at the end of a wand. - Three SVG glyphs that bubbles pop into during the `> bada describe self` paragraphs: 1. **Wave glyph** — a single sine curve, 24px wide, 8px amplitude, drawn in Burnt-Orange Phosphor with `path-draw-svg` over 400ms. 2. **Roof glyph** — two diagonal strokes meeting at an apex, like the roof of a child's-drawing house, drawn over 360ms. 3. **Sun glyph** — a small circle with eight short rays, each ray drawn in 60ms staggered sequence, total 480ms. - The CRT brand-plate carries a 14px engraved SVG of three rising bubbles in profile — the only static decorative element on the page, etched in Roast-Hull at 60% opacity into the Sun-Bezel. **No water photography, no aquarium shots, no slow-motion droplet stock — the water-bubbles imagery in this design is *abstracted to its geometric essence* and rendered exclusively as vector animation.** This is the chromatic and motivic discipline that keeps the site from collapsing into a stock-imagery cliché. ## Prompts for Implementation Build bada.casa as **one HTML file, one CSS file, one JS module, and a `lottie/` directory of four JSON files**. There is no SPA, no router, no framework. The page is one screen, one CRT, one shell session, infinite gentle bubbles. **Document structure:** ```
    ``` **Animation choreography (the spine of the experience):** 1. **0.0s — First paint.** Salt-Cream background. The CRT casing fades up over 600ms with `opacity: 0 → 1` and `transform: scale(0.97) → scale(1)`. The phosphor screen is initially black (Roast-Hull). No bubbles yet. 2. **0.6s — Power-on.** The phosphor screen flashes Burnt-Orange Phosphor for 60ms, then settles to its idle Roast-Hull. A single tone (a soft 440Hz sine wave, 180ms, optional via Web Audio API) plays only if the user has interacted with the page. The cursor appears in the upper-left of the inner screen, inflating-deflating. 3. **0.9s — First prompt types.** `> bada whoami` types out at 32 chars/sec using a typewriter-effect with per-character `aria-hidden` toggling (no real ARIA needed for this exercise). The prompt's `>` is wght 800, the command body is wght 600. 4. **1.8s — First answer.** The reply `i am bada.casa, a small house by the sea, who likes you.` types at 48 chars/sec, wght 380, with a small wave-glyph drawn after the period. 5. **3.4s — Bubble emitter activates.** `> bada bubbles --on` types out. The `--on` flag is rendered in Sea-Ink (the only Sea-Ink moment of the session). On the final period, the `bubble-field` Lottie containers begin spawning bubbles outside the CRT, *and* a parallel inner bubble-field begins spawning small bubbles that drift up through the phosphor screen (using `mix-blend-mode: screen` to brighten the orange phosphor where they pass). 6. **5.0s — Self description.** Three short paragraphs (1.5s each), each ending with a bubble that drifts up to the right margin, bursts, and morphs into the wave / roof / sun glyph respectively. 7. **9.5s — Soft commands appear.** Three lines fade in below the description, each with a `>` prompt and a Recursive-typed command. The user can hover any command to see the variable-fluid morph from monospace-rigid to humanist-warm. Clicking a command triggers a sub-session (a story prints, a small ASCII-bubble weather report, or a soft 3-tone melody). 8. **90s of inactivity — Rest mode.** The terminal types `> bada rest` and the cursor blink slows to 0.33Hz. The outer bubble drift field intensifies from 12 to 18 bubbles. The CRT phosphor dims by 6%. This state is a gentle screensaver, not a logout. **Pattern primitives:** - **lottie-animation** is the dominant motion pattern. Use `lottie-web` ESM build, lazy-loaded after first paint. Each bubble JSON is under 4KB. - **typewriter-effect** for all terminal text, with three speed settings (prompt 24 cps, command 32 cps, output 48 cps). - **path-draw-svg** for the three glyphs, using `stroke-dasharray` / `stroke-dashoffset` with `requestAnimationFrame`. - **morph** for the bubble-to-glyph transitions — each bubble's burst frame is a Lottie keyframe whose final frame is `display: none`, immediately replaced by the SVG glyph at the same position with `path-draw-svg` activating. - **No parallax. No cursor-follow. No magnetic. No 3D tilt. No scroll-triggered anything (because there is no scroll — the entire site is one viewport).** This is a deliberate departure from the corpus: bada.casa is a *still room with breathing inside it*, not a kinetic landing page. **Storytelling discipline:** - **No CTAs.** No "Get Started," no "Sign Up," no "Learn More." The three soft commands are explorations, not conversions. - **No pricing block, no stat grid, no testimonial row, no logo wall, no FAQ accordion, no email capture.** - **No second section.** The footer is a single line of 8pt monospace flush to the bottom of the patio surround, outside the CRT. - The narrative arc is internal to the terminal session: an old, kind machine wakes up, says hello, blows some bubbles, describes itself, offers to play, and rests. That is the entire story, and that is the entire site. **Responsive behavior:** On widths under 720px, the CRT becomes 92vw, the bubble drift field is reduced to 6 outer bubbles, the inner phosphor maintains 80×24 character grid via `font-size: clamp(11px, 2.4vw, 14px)`. The variable-fluid Recursive morph remains intact on hover (or `:active` for touch). The CRT bezel keeps its skeuomorphic depth at every breakpoint — the warm beige plastic is non-negotiable. ## Uniqueness Notes This design's deliberate departures from the 70 designs already in the registry, and from the seed's defaults: 1. **Terminal as warm patio object, not cold hacker tool.** Terminal-aesthetic in the registry (27%) is overwhelmingly cold green-on-black or icy CRT cyberpunk. bada.casa renders terminal as a *beige plastic, sun-warmed, optimistic kitchen radio* — burnt-orange phosphor on roast-umber, with the chromatic palette of a Cádiz veranda rather than a server room. No glitch, no scanlines, no green text, no cyberpunk dread. The terminal is a friendly old appliance, not a portal to a network. 2. **Lottie-animation at 1% — fully claimed.** Lottie-animation sits at the lowest end of the patterns frequency (1%, tied with shake-error). bada.casa makes Lottie *the dominant motion paradigm of the entire site*, with four authored JSON files driving every animated element from the cursor to the bubble drift field. No site in the corpus uses Lottie this dominantly. By making Lottie the spine rather than a garnish, bada.casa claims this empty room outright. 3. **Hero-dominant as a single CRT, no second section.** Hero-dominant (4%) in the corpus is usually a photographic masthead with conventional sub-sections. bada.casa makes the hero *the entire site* — there is no second section, no scroll, no parallax, no progressive disclosure. The single 92vh CRT IS the page. This radical commitment to one-screen narrative has no precedent in the registry. 4. **Burnt-orange palette (1%) inside terminal aesthetic.** The burnt-orange palette token sits at 1% in the registry. Pairing it with a terminal aesthetic — historically rendered in green or amber — is a chromatic re-skinning unique to this site. The Sun-Bezel + Roast-Hull + Burnt-Orange Phosphor triad reframes terminal as a *warm domestic object* rather than a cool industrial one. 5. **Optimistic-bright tone (2%) inside terminal aesthetic.** Terminal sites in the corpus skew toward energetic, futuristic-cutting-edge, or mysterious-moody. bada.casa is the first terminal site in the corpus to adopt **optimistic-bright** — the literal grammar of every output line is affirmative and gentle. There are no error messages, no warning glyphs, no red text. Even the `> bada rest` state is a kindly screensaver, not an idle timeout. 6. **Variable-fluid typography (5%) deployed as interactive affordance.** Variable-fluid type in the corpus tends to be ambient (headlines that breathe at viewport-width changes). bada.casa uses Recursive's MONO/CASL axes as the *one moment of UI tension* in the site — three commands are monospace at rest, humanist on hover, and the morph IS the invitation to click. The variable axis becomes a verb. 7. **Bubble-playful motif (1%) wedded to water-bubbles imagery (7%).** The corpus has either water-bubbles (rendered photographically) or bubble-playful (rendered as cartoon decoration), but no design has fused them as a single Lottie-driven vector system that doubles as cursor, decoration, transition, and screensaver. bada.casa makes the bubble the only repeating visual element on the entire site. 8. **No CTA, no pricing, no stats — radical absence.** Most landing pages in the corpus carry at least a hero CTA. bada.casa removes the entire commercial vocabulary and replaces it with three exploratory commands that lead nowhere except deeper into the same screen. This refusal of conversion architecture is part of the optimistic-bright thesis: the site does not want anything from you. 9. **Sea-Ink as <0.5% pixel area accent.** Most palettes in the corpus distribute their accent color across ~5–10% of pixel area. bada.casa restricts Sea-Ink to a single flag (`--on`) and the idle cursor — under half a percent of pixels. This *chromatic asceticism* makes the single teal note read as the only window in the warm house through which the sea is visible. **Chosen seed (from assignment):** *aesthetic: terminal, layout: hero-dominant, typography: variable-fluid, palette: burnt-orange, patterns: lottie-animation, imagery: water-bubbles, motifs: bubble-playful, tone: optimistic-bright.* **Avoided patterns from frequency analysis:** - AVOIDED hand-drawn aesthetic (94%), photography imagery (97%), full-bleed layout (87%), gradient palette (94%), parallax pattern (92%), warm palette (92%), spring (67%), stagger (65%), cursor-follow (62%), magnetic (50%), card-grid (65%), centered (81%), asymmetric (58%), mono typography (95%) — bada.casa uses mono *only* inside the CRT and uses variable-fluid as its category-defining typography choice. - CLAIMED underused tokens: terminal (27%, but recontextualized warm), hero-dominant (4%), variable-fluid (5%), burnt-orange (1%), lottie-animation (1%), water-bubbles (7%), bubble-playful (1%), optimistic-bright (2%).