# Design Language for bada.studio ## Aesthetics and Tone bada.studio is a creative studio imagined as a **Memphis-Milano rebellion staged inside a shipping container on a Busan pier** -- a collision between Ettore Sottsass's 1981 squiggle-and-grid revolution and the salt-spray visual language of a working Korean harbor. "Bada" means sea in Korean, and the studio positions itself as a place where ideas arrive the way flotsam arrives on a beach: sun-bleached, geometrically improbable, slightly sticky, and impossible to categorize. The aesthetic is unapologetically **anti-corporate, anti-minimalist, and anti-consensus** -- it is the visual equivalent of a synthesizer demo played too loud at a design school graduation. The mood is **confident dilettantism**: the studio is expert at many things and refuses to pretend otherwise. Pages feel like flipping through a photocopied zine from 1983 that has been run through a contemporary risograph. Every surface has a pattern; every pattern has an argument with its neighbor. The tone is **playful-confident with a subversive streak** -- it flirts with kitsch, commits to it briefly, then walks away before kitsch can claim it. There is deliberate imperfection in the registration of shapes, misaligned blocks of color that bleed 2-3 pixels past their containers, and hand-drawn squiggles that refuse to live inside their assigned cells. Think: **Nathalie du Pasquier's textile sketches**, **Masanori Umeda's Tawaraya ring**, the cover of **Peter Saville's earliest 12-inch sleeves**, the Seoul Olympic mascot Hodori rendered by someone who only had access to a protractor and three Pantone swatches. The studio feels lived-in, slightly chaotic, and ferociously intentional. Visitors should feel they have walked into a ceramics workshop where the radio is playing Yellow Magic Orchestra, someone is arguing about grotesque typefaces in the corner, and every wall is covered in test prints that refuse to be thrown away. ## Layout Motifs and Structure The layout is a **broken-grid magazine spread** that refuses to resolve -- content blocks sit on an underlying 12-column grid but only **63% of them** actually obey it. The remaining blocks tilt 1.5-4 degrees, bleed off the viewport edge, or collide with neighbors at obtuse angles. There is no hero section in the conventional sense; instead, the viewport opens on a **constructed chaos** where headline, navigation, studio mark, and a squiggle-border portrait-shaped block all compete for primacy. **Primary Structure:** - **The Marquee Plane (viewport 1):** A full-bleed composition of 7-11 overlapping geometric blocks on a cream canvas. The studio's name "bada.studio" is typeset as **oversized display lettering** broken across three baselines, with the period-studio chunk rotated -6 degrees. Surrounding it: a **squiggle of 14 vertices** drawn as an SVG path in Tangerine Shock, a checkerboard rectangle of 6x4 cells in alternating Mint Foam and Coral Jelly, a free-floating black triangle (Memphis's "Bacterio" shard), and a column of hand-set Korean characters (바다) drawn in marker-weight strokes. A tiny caption in mono type sits orphaned in the bottom-right: "est. since whenever, studio no. 7, port-side." - **The Patternline (viewport 2):** A full-width **horizontal scroll strip** -- 280vw of continuous Memphis pattern panels that the visitor scrubs through with wheel or trackpad. Each panel is a named **"specimen"** (a studio capability: identity, motion, print, web, publication, object) presented as a poster-sized composition with its own micro-palette pulled from the overall system. The scroll is not smooth; it **snaps** to each specimen with a satisfying deceleration curve. - **The Index Cabinet (viewport 3-4):** A **hexagonal-honeycomb arrangement** of 19 cells, irregularly sized, listing the studio's projects. Cells are not cards -- they are **pattern tiles**, each a miniature Memphis composition with the project name set in mono over the pattern. Hovering a cell causes adjacent cells to shift position by 3-6px, as if the cells themselves are being jostled. The grid breathes. - **The Manifesto Scroll (viewport 5):** A **timeline-vertical** narrative stacked as newspaper columns of varying widths (2-col, 1-col, 4-col, 1-col again). Large pull-quotes are typeset in elegant italic display, contradicted immediately by marginal annotations in mono that undercut the quote's seriousness. A meandering **squiggle line** runs down the left gutter, connecting manifesto points like a handmade metro map. - **The Workshop Plate (final viewport):** A single centered **bento-box** of small experiments -- sketches, unfinished logos, a rotating ceramic vase rendered in CSS, a sound-wave visualization of the studio's ambient recording of Busan rain on corrugated metal. It closes with no CTA, no email form -- just a handwritten "found us? send a postcard" with an address. The composition systematically avoids centered hero patterns, card-grid bodies, and symmetrical footers. Negative space exists but it is **occupied negative space** -- filled with wandering squiggles, single oversized period marks, and stray geometric confetti. ## Typography and Palette **Typography:** - **Display / Title:** "Bungee" (Google Fonts) -- a chunky, block-capital display face designed for urban signage. Used for the studio mark and specimen titles at clamp(3rem, 10vw, 8rem). Its rectangular geometry plays perfectly against the Memphis blocks. Letter-spacing: -0.03em to pack the letters into solid walls of color. - **Secondary Display / Expressive:** "Fraunces" (Google Fonts) at weight 900 with optical size 144 and SOFT axis maxed out. Used for manifesto pull-quotes and italic counter-statements. Its wedged serifs and exaggerated optical sizing feel both classical and weirdly bulbous -- a perfect foil to Bungee's hard edges. - **Body / Reading:** "Space Grotesk" (Google Fonts) at 400/500 weight. Chosen because its slight quirks (the two-storey 'a', the open terminals) feel hand-drawn within a geometric framework. Set at 16-18px with 1.55 line-height. The slight techno-whimsy of Space Grotesk bridges the gap between Memphis playfulness and studio professionalism. - **Mono / Captions:** "DM Mono" (Google Fonts) at 13px for all captions, annotations, label tags, grid coordinates, and "studio no. 7" style ephemera. Its rounded terminals feel friendlier than the typical developer mono. Used extensively as an undercurrent of labeling that treats every graphic element like a museum accession card. - **Accent / Korean:** "Gaegu" (Google Fonts) -- a handwritten Korean face for the 바다 character and occasional Korean phrases. Set at generous sizes with rotation variances of +/- 4 degrees to feel marker-scribbled. **Palette (8 colors, no gradient):** - **Cream Canvas** `#f4ece0` -- the primary background, a warm uncoated-paper cream that grounds the chaos. - **Squid Ink** `#161616` -- near-black for heavy blocks, typography, and the primary "Bacterio" shapes. - **Tangerine Shock** `#ff6b35` -- a saturated harbor-sunset orange for squiggles, accents, and attention-seeking marks. - **Mint Foam** `#a8e6cf` -- a soft sea-foam green for checkerboards and mid-range blocks. - **Coral Jelly** `#ff8fa3` -- a candy-pink for pattern alternates and body accents. - **Electric Citron** `#e8f44c` -- a chartreuse-yellow used sparingly for the highest-energy accents and hover states. - **Ultramarine Depth** `#2c3e8b` -- a deep saturated blue that anchors certain compositions and nods to Busan harbor water. - **Concrete Grey** `#c7c7c1` -- a cool warm-grey for secondary fills and the occasional asphalt-feeling block. The palette is deliberately **triadic-plus-accent** (Tangerine, Mint, Coral form the triad; Citron is the electric shock; Ultramarine is the anchor) and avoids gradients entirely -- every color exists as a **flat, unapologetic block**. High contrast is achieved through pure color-block adjacency, not through tonal shading. ## Imagery and Motifs **Core Visual Vocabulary:** - **The Squiggle Library:** A hand-drawn SVG library of 23 distinct squiggles, each with a specific personality: the "nervous line" (14 vertices, tight amplitude), the "lazy river" (6 vertices, wide amplitude), the "encoded message" (alternating straight-curve-straight), the "broken wave" (a sine wave with one vertex displaced). Squiggles are drawn with `stroke-linecap: round` and a 4-6px weight, always in Tangerine Shock or Squid Ink. They appear as dividers, underlines, decorative margins, and occasional full-viewport path-draw-svg animations triggered on scroll. - **The Checkerboard System:** Not a single checkerboard but a family of 12 checkerboard tiles at varying scales (4x3, 6x4, 8x8, 2x2-oversized). Checkerboards are two-color only, drawn from the palette, and rotated at angles that are always prime numbers of degrees (3, 7, 11, 13, 17). They act as texture, pattern, and occasional typographic backdrop. - **The Bacterio Shard:** A reference to Ettore Sottsass's 1978 "Bacterio" laminate pattern -- scattered black amoebic marks on cream. Used as a background texture for one specific viewport and as a micro-pattern inside certain geometric shapes. Rendered as SVG with 40-60 organic blobs per tile, randomized on every page load. - **The Ceramic Object:** A rotating 3D ceramic vase rendered entirely in CSS using stacked radial-gradient pseudo-elements (no WebGL). The vase has the proportions of a moon jar (Korean dalhangari) but is glazed in Memphis colors -- mint body, coral neck, squiggle pattern wrapping the shoulder. It rotates at 20s per revolution in the Workshop Plate. - **The Harbor Snapshot:** A single piece of photographic imagery appears on the site: a **duotone photo** of a Busan pier at sunset, processed in Squid Ink and Tangerine Shock. It is intentionally low-resolution (72dpi, slightly pixelated) and framed inside a 2px Squid Ink rule with a Mint Foam 8px drop-shadow offset. The photo anchors the whole aesthetic -- this studio exists in a real place. - **The Sketch Marginalia:** Throughout the site, tiny hand-drawn icons (kettle, boat, cassette, fish, radio tower, paper crane) appear in the margins at 24-32px. Drawn in marker-weight strokes, they are conversational doodles, not semantic icons. They shift position by 2-3px on scroll (parallax-light). - **Grid Coordinates:** Every major composition displays its grid coordinates in the bottom-right corner, mono type, as if the page is a museum specimen: "SPEC-003 / BADA.STUDIO / 2026.04.24 / PLATE II". This labeling treats the web page itself as a curated object. ## Prompts for Implementation **Immersive Storytelling Structure:** Build the site as a **five-act journey** (Marquee, Patternline, Index Cabinet, Manifesto, Workshop) where each viewport is a complete composition. Do not implement traditional navigation -- instead, a **fixed mini-map** in the top-right corner shows a Memphis-style legend of the five acts as small geometric glyphs; clicking smooth-scrolls. The map itself animates: the current act's glyph is rendered in Tangerine Shock while others remain in Squid Ink outline. **Horizontal Scroll Specimen Strip:** The Patternline (viewport 2) must use CSS `scroll-snap-type: x mandatory` on a flex container 280vw wide, with each specimen panel `scroll-snap-align: center`. Scrub with wheel event translated via `position: sticky` parent trick. Each panel reveals its composition with a stagger: the background color-block fades in first (0.3s), then the typographic title draws in via `path-draw-svg` on the letter-outlines (0.8s), then the pattern elements pop in sequence at 80ms intervals. No parallax here -- the snap itself is the rhythm. **Squiggle Path-Draw Animation:** Implement all squiggle decorations as inline SVG with `stroke-dasharray` and `stroke-dashoffset` animated via Intersection Observer. Draw duration 1.2s with `ease-in-out-sine` curve. On re-entry (scrolling back up then down), re-draw. Use a CSS custom property to control draw progress so animations can be chained. **Honeycomb Cell Jostle:** The Index Cabinet's 19 hexagonal cells should respond to hover with a **magnetic jostle** effect: when a cell is hovered, its 3-6 nearest neighbors translate away by 4-8px in the direction opposite the hovered cell, with spring physics (damping 0.7, stiffness 180). Implement with a simple JS loop tracking neighbor relationships, applying transforms. No library required -- raw `requestAnimationFrame`. **Ceramic Object in CSS:** Build the rotating moon-jar ceramic entirely in CSS. Use a `div` with aspect-ratio 1/1.08, border-radius 50% 50% 48% 52%, stacked radial-gradient backgrounds to simulate glaze highlights, and a `@keyframes` rotation on transform. Wrap a pseudo-element with a Tangerine Shock squiggle SVG as background-image at the shoulder position. Slow rotation (20s linear infinite). This should feel handmade, not photo-realistic. **Type-as-Object:** Treat the studio name "bada.studio" as a **typographic object** that lives in the composition, not as a header. Break the logotype across three baselines, rotate "bada" -6deg, keep "." baseline-aligned, rotate "studio" +3deg. Implement as three separate `` elements absolutely positioned within a grid cell. On viewport entry, each span flies in from its own direction with ease-out-back. **Rain Visualization:** In the Workshop Plate, include a **small waveform visualization** of ambient Busan harbor rain. Use Web Audio API to play a looped ambient field recording (licensed, or synthesized from pink noise + filter sweeps). Visualize with a `` element, drawing 128 vertical bars updated at 30fps, in Mint Foam with Tangerine Shock peaks. This is ambient -- it should feel like the studio's radio is on, not like a featured component. **Color-Block Bleed:** Every major color block should have a subtle 2-3px **bleed** past its ostensible container, rendered via `box-shadow: 3px 3px 0 var(--block-color)` or negative margins. This is the registration-error that makes the site feel printed, not screened. Apply inconsistently -- some blocks bleed, some are crisp. The visual inconsistency is intentional; it rewards close inspection. **AVOID:** No pricing tables, no "Our Services" CTA walls, no testimonial carousels, no team-member cards with round photos, no stat-grid counters, no footer link columns. The site's only conversion moment is the hand-scribbled "send a postcard" with a Busan address -- and it is not a conversion, it is a conclusion. **Typography Rhythm:** Never set two adjacent text elements at the same size. Always introduce scale variance of at least 1.4x between neighbors. Mix Bungee and Fraunces in a single headline if the content warrants it -- the typographic clash is the point. Use Gaegu's handwritten Korean as punctuation between English sections. **Cursor Treatment:** Replace the default cursor with a custom 24x24 SVG of a small Tangerine Shock squiggle that wiggles as the mouse moves (CSS keyframe 0.4s infinite). On hoverable elements, the cursor morphs into a Mint Foam circle with Squid Ink center dot. Low-pressure, playful, not demanding. ## Uniqueness Notes **Differentiators from other designs in the cohort:** 1. **Memphis-Milano as structural thesis:** No other design in the catalog commits to Memphis Group aesthetics as its organizing principle. The entire page is built around Sottsass-era color-blocking, squiggles, and geometric confetti rather than grids of cards, corporate gradients, or minimalist whitespace. The frequency analysis shows 90% of designs lean corporate and 94% use card-grids -- bada.studio refuses both entirely, opting for broken-grid (14%) and modular asymmetric compositions instead. 2. **Flat triadic-plus-accent palette with zero gradients:** Against a field where 98% of designs use gradients, bada.studio is uncompromisingly flat. Every color is a pure block: Tangerine Shock, Mint Foam, Coral Jelly, Electric Citron, Ultramarine Depth. The only tonal variation comes from color adjacency, not blending. This gives the site a printed-risograph feel entirely absent from the gradient-dominated catalog. 3. **Korean-Italian cultural fusion:** The site explicitly references Busan harbor (Korean 바다 = sea) layered over Memphis-Milano's 1980s Italian radical design movement. No other design in the catalog sites itself in a specific geographic/cultural context with this specificity -- and none combines Korean handwritten script (Gaegu) with chunky Western display type (Bungee) as a primary typographic system. 4. **Anti-CTA conclusion:** Where 94% of designs use scroll-triggered content reveals toward a conversion point, bada.studio ends with a handwritten "send a postcard" and a physical address. There is no email form, no newsletter signup, no "book a call" button. The site treats itself as an object to be looked at, not a funnel. 5. **Rotating CSS ceramic object:** The moon-jar ceramic rendered entirely in CSS (no WebGL, no images) is a specific implementation flourish not found elsewhere in the catalog. It is both a visual feature and a technical demonstration of the studio's sensibility: handcraft rendered through code. 6. **Registration-error intentionality:** The 2-3px color-block bleed that simulates print misregistration is a signature treatment absent from other designs. It requires specific implementation discipline and makes the site feel printed rather than pixel-perfect -- a deliberate rejection of screen-era precision in favor of Riso-era charm. **Chosen seed/style:** `memphis bold shapes portfolio` (from `tools/design/seeds.json`). This seed was selected because memphis (8% usage) and mid-century (4%) are deeply underused in the catalog, and the "portfolio" framing pairs naturally with the `.studio` TLD's implied creative-practice identity. **Avoided patterns referenced from frequency analysis:** - AVOIDED: `corporate` aesthetic (90% overuse) -- replaced with memphis/playful/avant-garde. - AVOIDED: `gradient` palette (98% overuse) -- replaced with flat triadic color-blocking. - AVOIDED: `warm` palette dominance (96% overuse) -- bada.studio uses a triadic-plus-accent scheme balancing warm (Tangerine, Coral) with cool (Mint, Ultramarine). - AVOIDED: `card-grid` layout (94% overuse) -- replaced with broken-grid + hexagonal-honeycomb + horizontal-scroll specimen strip. - AVOIDED: `centered` layout (88% overuse) -- every major composition is deliberately asymmetric. - AVOIDED: `photography` imagery (94% overuse) -- exactly one duotone photo appears; the rest is SVG pattern, CSS render, and hand-drawn marginalia. - AVOIDED: `mono` typography as dominant face (90% overuse) -- DM Mono is relegated to captions/annotations only. Display work is handled by Bungee and Fraunces. - AVOIDED: `scroll-triggered` as sole animation driver (94% overuse) -- bada.studio uses scroll-snap, magnetic hover, cursor-follow, and idle animations in roughly equal proportion. - PREFERRED: `horizontal-scroll` (24%), `broken-grid` (14%), `hexagonal-honeycomb` (12%), `triadic` (14%), `whimsical-creative` tone (12%), `handwritten` type (28%).