# Design Language for bada.casa ## Aesthetics and Tone The domain is bilingual taxidermy. **`bada`** is the Korean word 바다 — "sea" — pronounced flat, two short open vowels, the kind of word a child says before they have ever seen one. **`.casa`** is Italian-Spanish for "house." Together: **the sea-house**, the cottage at the end of the dock, the fishbowl on the kitchen counter, the tide pool that has decided to live indoors. The site is a 1962 Florida motel postcard that someone has run through a Risograph six times: hand-tinted, off-register, vibrating with the saturated half-tones of cheap mid-century print and the deliberate, slightly-too-much swagger of pop art at its most domestic. The tone is **raw-authentic** in the way a hand-painted seafood-restaurant sign is authentic. Nothing is slick. The 3D-rendered tropical fish are *over-rendered* — Subsurface scattering at 11, specular highlights at 110%, a single point light from the upper-left throwing hard cyan rim-lights across each scale. They look like they were modeled in 1998 by someone who had just discovered Bryce 4 and was *thrilled* about it. The serif headlines are set on a slight angle, as if the offset litho plate was loaded crooked. There is grain. There is bleed. There is a small, persistent **shake-error** tic on the navigation that makes the whole page feel like a fishbowl that has just been knocked against a kitchen wall. This is **pop-art** as it was practiced by Sister Mary Corita Kent rather than Andy Warhol — joyful, homemade, secular-religious, with a faith in the redeemability of the supermarket palette. It is **muted-vintage** in the sense that the colors *were* lurid in 1962 and are now sun-bleached on a wall. It is **raw** because the fish are not selling anything; they are simply present, in the room, looking back. The mood I want the visitor to feel is the moment in a Wes Anderson aquarium scene when the music drops out and a single damselfish drifts across the camera. Quiet. Saturated. Slightly off. Beautifully embarrassing. A seafood-themed prayer card for a holiday no one celebrates anymore. ## Layout Motifs and Structure The composition is a **strict masonry grid** — and masonry only registers at 5% in the corpus, so this is a deliberate departure from the centered (92%) / full-bleed (87%) consensus. The page is a single long vertical stream of stacked tiles of varying heights, exactly the way a tropical-fish wall calendar from 1971 stacks photographs above their captions, or the way a Florida postcard rack at a 7-Eleven stacks postcards in metal slots: not a grid of identical cells, but a **gravity-fed Pinterest column** with seven columns at desktop, three at tablet, one at mobile. **The seven columns are not equal.** Their widths run **89, 144, 89, 233, 89, 144, 89** in CSS `fr` units — six consecutive Fibonacci numbers, plus a doubling — because masonry-grids look most alive when the column widths are asymmetric and the eye has to *find* its rhythm rather than be handed it. The gutters are **8px**. The tiles inside each column have variable heights (180px–820px) and are filled in column-greedy order: the next tile drops into whichever column is currently shortest, the way a Tetris piece would fall into a tide pool. **Tile types — the eight kinds of postcard:** 1. **Specimen card.** A single 3D-rendered tropical fish on a flat sun-bleached pastel ground. Caption below in italic serif. Aspect 3:4. 2. **Headline card.** Oversized serif type, two or three words, set diagonally, occupying the full tile. Aspect 1:1. 3. **Color-field card.** A single muted-vintage hex value, full-bleed, with the color name lettered tiny in the corner like a Pantone chip. Aspect 2:3. 4. **Pop-comma card.** A single comic-book Ben-Day dot pattern in cyan over cream, no content, pure rhythm. Aspect 1:1. 5. **Pull-quote card.** A short proverb about water, in 18pt italic serif, hung over a half-tone wash. Aspect 4:3. 6. **Reef-snippet card.** A miniature tableau: two or three fish, a coral-frond, a piece of wreck-tile. Aspect 1:1. 7. **Sun-faded photo card.** A "vintage photograph" that is actually a 3D render duotoned to look like a 1972 Kodachrome that has lived in a window for 50 years. Aspect 4:5. 8. **Telegram card.** A tiny tile, just two lines of typewriter mono on cream, like a fishmonger's price-tag pinned to the calendar. Aspect 1:1. **Macro structure.** The page is **one infinite-scroll masonry stream** with no traditional sections. There is no hero. There is no nav-bar (it's a tiny floating fish-shaped button in the corner that, when clicked, swims along a path-draw-svg trail to the top of the stream). There is no footer (the stream simply ends with a tile that says "you have reached the end of the reef" in tiny mono, with three small fish swimming away to the right). **Scroll direction is downward only,** but every fifth viewport the masonry tiles **shake-error** for 600ms — a 4px translateX horizontal jitter, as if a wave just hit the side of the aquarium. The shake is gentle, on a soft sine ease, and tiles do not lose their grid position. It is the load-bearing motion vocabulary of the whole site, used here as **delight** rather than as the validation-error feedback the pattern was named for. This re-purposing is the central interaction joke. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display (the wordmark and headline-cards):** [`DM Serif Display`](https://fonts.google.com/specimen/DM+Serif+Display), 400 regular, 400 italic. DM Serif Display is the contemporary serif-revival pick — high-contrast didone bones, generous bracketed serifs, an italic that swings 12° rather than 8°. Set the wordmark `bada.casa` at clamp(7rem, 16vw, 18rem), italic, with the period set in upright roman so the dot interrupts the swung type like a buoy. Tracked at `-0.02em`. Headlines on Headline-cards are 400 regular, set rotated by `transform: rotate(-3deg)` and given a 1px hard `text-shadow` in `--cyan-print` offset by 2px right and 2px down — the misregistration shadow of a two-color offset press. - **Body (Pull-quote and Reef-snippet captions):** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), 400 italic and 500 upright. Body sizes: pull-quotes at 22/30, captions at 13/18. Old-style figures via `font-feature-settings: 'onum'`. Cormorant carries the secular-religious cadence I want — the typeface of small holy cards and Italian municipal documents, perfect for captions on tropical-fish postcards. - **Telegram (Telegram-cards, color-name labels, footer-fish trail):** [`IBM Plex Mono`](https://fonts.google.com/specimen/IBM+Plex+Mono), 400 regular, 11px–13px, tracked `+0.04em`. Used like a fishmonger's chalkboard mono — short messages, pricetag energy, the only sans-serif voice in the system. The corpus uses mono at 94% but always for tech-tutorial or terminal aesthetics; here mono is **a price-tag**, not a developer affordance. **Palette — Muted-Vintage Reef.** Six colors, exact hex, four pigments and two papers: - `--cream` `#F2E7D2` — the paper of a 1962 postcard rack that has lived in a Florida vestibule for sixty years. The default page background. - `--vellum` `#E6D7B8` — a warmer paper for color-field cards and grain-overlays. Slightly more sun-cooked than `--cream`. - `--ink` `#231C18` — the body-copy ink. Not black. A warm sepia-saturated near-black, the color of 1972 offset litho when the press was running cold. - `--coral-faded` `#D9756A` — the muted-vintage coral. The first pigment, used for headline misregistration shadows and one-of-eight 3D fish tints. - `--cyan-print` `#5FA9B3` — the muted-vintage process cyan, sun-bleached, the second pigment. Used for shake-error halos, Ben-Day dots, water-fields. - `--mustard` `#C9A03A` — the third pigment, used sparingly: the tiny floating fish-button, the color-chip frames, a single hand-lettered diacritic on the wordmark. The palette is `muted-vintage` (currently at 2% in the corpus — claimed). It avoids the warm/gradient duopoly (97%/89%). There is **no gradient anywhere on the site**. Every fill is flat. Every transition between colors is achieved by **half-tone dot pattern**, never by a CSS gradient. This is a strict rule. ## Imagery and Motifs **All imagery is 3D-render** (corpus: 0% — the seed claims a wholly empty category) **of a strictly bounded bestiary of tropical fish** (motif: tropical-fish, currently 2% — also a near-empty category). No photography. No stock. No icon fonts. No SVG illustration except for the floating fish-button and the shake-error halo. **The bestiary — twelve fish, modeled in cinema-4D-circa-1998 style:** 1. **Banggai cardinalfish** (*Pterapogon kauderni*) — silver body, vertical black stripes, a startled expression. Tile-1's anchor. 2. **Mandarin dragonet** (*Synchiropus splendidus*) — psychedelic blue-orange swirls. Used wherever the masonry needs a kick of color. The single fish that is permitted full saturation. 3. **Lookdown** (*Selene vomer*) — flat, pewter, oddly geometric. Looks like a trapezoid that learned to swim. Pop-art's geometric darling. 4. **Royal gramma** (*Gramma loreto*) — bisected purple-and-yellow, a fish that is two fish in a trenchcoat. The wordmark's mascot. 5. **Pajama cardinalfish** (*Sphaeramia nematoptera*) — yellow head, polka-dot body, red eye. Pure pajama-party energy. 6. **Banded butterflyfish** — for the pinstripe motif on Headline-cards. 7. **Powder-blue tang** (*Acanthurus leucosternon*) — for the cyan-print tile fields. 8. **Yellow longnose butterflyfish** (*Forcipiger flavissimus*) — for the mustard accent moments. 9. **Achilles tang** (*Acanthurus achilles*) — black with a single coral tear-drop on the flank. Holds `--coral-faded` for the palette. 10. **Spotted boxfish** (*Ostracion meleagris*) — the cube-fish, a polyhedron with fins. The 3D-render joke, fully literal: *the fish is a cube.* 11. **Pyramid butterflyfish** (*Hemitaurichnys polylepis*) — yes, a triangle-fish exists. Of course it does. It lives here. 12. **Garden eel** (*Heteroconger hassi*) — appears only in the Pop-comma cards as a vertical bobbing column emerging from sand, a single eye visible. Each fish has been **rendered three times**: at full muted-vintage tint (used in Specimen-cards), as a duotone in cream/cyan (for Sun-faded-photo-cards), and as a Ben-Day-dot pop-art version (for Headline-cards). All three versions live on the site as static WebPs at 2x density; there is no real-time WebGL. The 3D vibe is **"a printed postcard photograph of a 3D render"**, not a live model. **Recurring motifs (non-fish):** - **Ben-Day dots** at three sizes: 4px, 8px, 12px. Cyan dots over cream, coral dots over vellum. Always at 33° rotation (the standard cyan-screen angle in real CMYK). - **Half-tone gradient washes** as the only "gradient" in the system — gradients faked by dot-density, never by alpha. - **Misregistration shadows** on every headline: the headline word is set twice, once in `--ink` and once in `--cyan-print` offset 2px down/right. - **Fishbowl glass arcs** at the top of every fifth tile: a single 1.5px hairline arc in `--cyan-print` suggesting a curved aquarium wall. - **Corner price-tags** on every Specimen-card: a tiny 6mm price-tag-shaped corner with the fish's Latin name in 9pt mono, like a museum specimen label that doubled as a deli sticker. ## Prompts for Implementation **The story to tell.** A visitor opens a screen door at the back of a 1962 Florida motel and finds the lobby has been replaced by a 30-foot-tall masonry wall of tropical-fish postcards. The postcards are out of register, sun-bleached, joyful, and they tremble — once every few seconds — as if a small wave has just slapped the side of the building. The visitor walks down the wall (scrolls the page). They are not being sold anything. They are being *visited*. Every fifth tile, the wall shakes; every twelfth tile, a Mandarin dragonet swims slowly across a tile-divider and into the next column. At the end of the wall, three fish swim away to the right and the story ends. **Build instructions for the AI implementing the HTML/CSS/JS:** - **Single-page, single-stream.** No routes, no anchors, no nav. The whole experience is one long masonry column. Total scroll length is intentionally generous — aim for ~14 viewports of content. The visitor finishes the page when they finish the page. There is no CTA. There is no pricing. There is no stat-grid. There is no "Get started." There is a sea-house, and they are in it. - **Masonry implementation.** Use **CSS Grid with `grid-template-columns: 89fr 144fr 89fr 233fr 89fr 144fr 89fr;`** at desktop. For true masonry packing (where shorter tiles fill gaps under taller ones), use the **`grid-template-rows: masonry;`** native CSS property with a JS fallback that does column-greedy packing for browsers that don't yet support masonry. **Do not use any external library** (no Masonry.js, no Isotope). Roll the fallback in 60 lines of vanilla JS. - **The shake-error rhythm.** Every 4500ms (with ±400ms jitter so it is not metronomic), call a `shakeWave()` function that adds the class `.shake` to all visible tiles. The class applies `animation: shakeWave 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);` where `shakeWave` is a keyframe that translates X by `-4px, 5px, -3px, 4px, -2px, 3px, -1px, 2px, 0`. Tiles must NOT lose their grid position — only the tile content shakes, not the tile cell. This is delightful, not annoying. The shake-error pattern (currently 0% in the corpus) is being re-claimed as **shake-as-affection**. - **The Mandarin dragonet path.** A single inline SVG `` of length ~2400px is laid out as a meandering reef-current behind the tiles. A 3D-rendered Mandarin dragonet sprite (96×96 WebP) is animated along this path using `offset-path: path('M0,0 C50,200...')` and `offset-distance: 0% → 100%` over 88 seconds, looping. The fish appears between tiles, occluded by them at random z-indices, so it weaves *behind and in front of* the masonry. It is the only inhabited motion in the otherwise still postcard wall. - **The half-tone everything.** No CSS gradients. Anywhere a tonal transition is needed, use a **CSS Ben-Day dot pattern** generated by `background: radial-gradient(circle at center, var(--cyan-print) 1.2px, transparent 1.4px); background-size: 8px 8px; transform: rotate(33deg);` Layer two pattern sizes for visual richness. This is the *only* form of "gradient" in the system. - **Typography that is slightly drunk.** Every Headline-card has its h2 rotated between -4° and -2° (random per card, set on page load). Every wordmark has its period in upright roman while the rest is italic — never edit this rule. Every caption uses `font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;` for old-style figures and proper ligatures. - **The 3D fish are static.** All twelve fish are exported once as 2x-density WebP files (~80KB each) at three tints. No real-time rendering. Lazy-load below the fold using `loading="lazy"` and `decoding="async"`. The "3D-ness" must be visible: hard cyan rim-light from upper-left, deep coral shadow under the belly, glossy specular blob on the dorsal fin, ambient occlusion under the gills. **Render them slightly over-shaded — 1998 enthusiasm, not 2025 restraint.** - **The grain layer.** A 200×200 pre-baked noise PNG, opacity 0.06, `mix-blend-mode: multiply`, fixed-positioned at the page-level, covering everything. This is the paper grain of the postcard rack. - **The fish-button nav.** Bottom-right corner. A single 32×32 SVG of a Royal gramma facing left. On click: the fish flips to face right, swims along an SVG path back to the top of the page (scrolling the page in sync), then settles back into the corner facing left. Implementation: `scrollTo` with smooth behavior, paired with a path-draw-svg fish animation that runs in parallel. - **The end-of-reef tile.** Last tile in the stream: a single line of mono, "you have reached the end of the reef." Beneath it, three SVG fish silhouettes that, on entering the viewport, animate-out to the right with stagger and a soft fade. After they exit, the page is silent. No "back to top" button. The visitor must use the fish-button or the browser. This is intentional — it preserves the postcard-rack feeling. - **Performance is irrelevant. Aesthetic completeness is everything.** Ship the WebPs uncompressed-looking. Ship the grain layer. Ship all twelve fish even if only six render above the fold. ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Masonry as the load-bearing layout.** The corpus is 92% centered and 87% full-bleed; masonry sits at 5%. This site uses asymmetric Fibonacci-width masonry (89/144/89/233/89/144/89 fr) as the *only* compositional system — no hero, no centered axis, no bento-box. Every tile is a postcard in a metal rack. 2. **3D-render as the exclusive imagery mode.** The corpus is 92% photography and 0% pure 3D-render. This site uses zero photographs and zero photo-textures. All twelve subjects are 3D-rendered tropical fish, deliberately over-shaded in 1998-Bryce-4 style and then printed-onto-postcards via half-tone dot patterns. The "3D-ness" is filtered through a deliberately analog post-process. 3. **Shake-error re-purposed as affection.** The shake-error animation pattern (currently 0% in the corpus) is named for form-validation feedback — when a user submits an invalid email, the field shakes red. Here, every tile in the masonry shakes 4px every ~4.5s — a soft, sinusoidal aquarium-wall-tap. The pattern is re-framed from "you did something wrong" to "you are inside a fishbowl." This re-claiming is the central interaction joke. 4. **Tropical-fish motif (currently 2%) used encyclopedically.** Twelve named species (Banggai cardinalfish, Mandarin dragonet, Lookdown, Royal gramma, Pajama cardinalfish, banded butterflyfish, powder-blue tang, yellow longnose butterflyfish, Achilles tang, spotted boxfish, pyramid butterflyfish, garden eel) — each rendered three ways (full tint, duotone, Ben-Day pop-art). This is the only design in the registry that treats fish as a structured taxonomy rather than as ambient decoration. 5. **Pop-art aesthetic via Sister Mary Corita Kent, not Warhol.** Pop-art doesn't appear in the corpus's tracked aesthetic frequencies (it's outside the top 47), so this is fresh territory. Within pop-art, the design rejects the Warhol-soup-can lineage in favor of Corita Kent's joyful, secular-religious, supermarket-mystic homemade pop — closer to a hand-lettered seafood-restaurant sign than to MoMA's pop wing. 6. **Muted-vintage palette (2%) with no gradients at all.** The corpus is 89% gradient-driven. This site uses zero CSS gradients. Every tonal transition is achieved by Ben-Day dot density at 33° screen angle — strict CMYK-print-process simulation. The four pigments (`--coral-faded`, `--cyan-print`, `--mustard`, `--ink`) are sun-bleached versions of their 1962 originals, sitting on two paper grounds (`--cream`, `--vellum`). 7. **Serif-revival typography (2%) set deliberately crooked.** DM Serif Display in italic at 12° swing, with every Headline-card rotated -2° to -4° on render. Misregistration text-shadows in `--cyan-print` offset 2px on every h2. The corpus's mono dominance (94%) is reduced here to **price-tag-mono** — IBM Plex Mono used as fishmonger's chalkboard, never as terminal. 8. **No CTAs, no pricing, no stat-grids, no hero, no footer-with-links.** The page does not sell anything. There is no "Get started," no "Sign up," no "Learn more." There is a wall of postcards, twelve fish, a Mandarin dragonet that swims behind the tiles for 88 seconds on a loop, and an end-tile that says "you have reached the end of the reef." This is content-as-presence rather than content-as-conversion. **Avoided patterns from frequency analysis (corpus saturation > 30%):** - Centered (92%) — replaced by 7-column asymmetric Fibonacci masonry. - Full-bleed (87%) — replaced by tile-stack with 8px gutters. - Vintage motif (87%) — used only as half-tone *process* citation, not as decorative pattern. - Photography imagery (92%) — replaced wholesale by 3D-render. - Mono typography (94%) — demoted to price-tag/telegram-only role. - Warm palette (97%) — replaced by sun-bleached muted-vintage four-pigment system. - Gradient palette (89%) — replaced by half-tone Ben-Day dot density. - Parallax pattern (89%) — entirely absent. - Hand-drawn aesthetic (84%) — replaced by 3D-render-printed-via-halftone. **Chosen seed:** aesthetic: pop-art, layout: masonry, typography: serif-revival, palette: muted-vintage, patterns: shake-error, imagery: 3d-render, motifs: tropical-fish, tone: raw-authentic.