# Design Language for bada.studio ## Aesthetics and Tone bada.studio exists in the visual territory of a decommissioned analog television broadcasting station discovered at 3 AM -- a place where test patterns bleed into static, where cathode rays trace dying arcs across phosphor screens, and where the hum of dormant equipment fills every room with a low, resonant presence. The aesthetic is **muji-glitch**: the austere, material-honest restraint of Muji design philosophy -- clean surfaces, unbleached textures, functional humility -- systematically corrupted by controlled data degradation. Imagine a beautifully typeset Muji catalog printed on uncoated stock, then fed through a malfunctioning photocopier that introduces scan-line tears, color-channel displacement, and periodic horizontal hold failures. The tone is **mysterious-moody**: not dark in the gothic sense, but unsettling in the way a perfectly clean room with one light flickering is unsettling. There is a deliberate withholding of information -- content reveals itself reluctantly, as if the interface itself is deciding what to show you and when. The mood draws from the liminal spaces of Tarkovsky's "Stalker," the quiet dread of a signal that almost resolves into meaning but never quite does, and the meditative emptiness of a Muji showroom after closing time where the lights run on timers and switch off section by section. Every surface carries two competing impulses: the desire for order (clean grids, restrained typography, functional layouts) and the entropy of signal decay (glitch artifacts, pixel displacement, temporal distortion). The tension between these forces is the engine of the entire visual language. ## Layout Motifs and Structure The layout employs an **editorial-flow** architecture -- content is organized as a flowing editorial narrative, but one that has been subjected to electromagnetic interference. The flow moves vertically through distinct editorial "chapters," each occupying roughly 85-120vh, with transitions that feel like channel changes on a dying television set. **Grid Foundation:** The underlying grid is a 12-column system at max-width 1140px, but columns are not evenly spaced. Columns 1-4 carry a 24px gutter, columns 5-8 carry a 32px gutter, and columns 9-12 carry a 16px gutter. This asymmetric gutter rhythm creates a subtle visual tension -- the grid is orderly but something is imperceptibly wrong, like a musical phrase with one note a quarter-tone flat. On viewports below 768px, the grid collapses to a 4-column system that maintains the same gutter inconsistency proportionally. **Editorial Chapter Structure:** - **Chapter 0 (Signal Acquisition):** A full-viewport opening that resembles a television warming up. The screen is entirely filled with the background color (#E8E2D6 -- unbleached linen), and over 2.5 seconds, content fades in through horizontal scan lines: first the domain name, then a single subtitle line, then -- 800ms later -- a thin horizontal rule that stretches from column 2 to column 11. Nothing else. No navigation, no menu. The user must scroll to proceed, and the act of scrolling is the act of "tuning in." - **Chapters 1-N (Editorial Flow):** Each chapter is a self-contained editorial composition. Text blocks span columns 2-7 (left-biased, never centered), with **flowing-curves** SVG illustrations bleeding from columns 8-12 into the gutters and sometimes overlapping text by 10-20px. Headlines sit in columns 1-8. Pull quotes occupy columns 9-12 in a smaller size, rotated -2deg, with a vertical rule on their left edge. - **Inter-Chapter Transitions:** Between chapters, a 100vh "interference zone" appears: the background shifts to #1A1A1E (near-black), horizontal lines of static (CSS repeating-linear-gradient at 2px height, alternating transparent and #3A3A4E at 40% opacity) fill the viewport, and a single line of text in the center reads a cryptic phrase in 0.75rem monospace. This is the "channel change" -- the moment between signals. **Spatial Relationships:** Generous vertical whitespace (120px-200px between elements within chapters) creates the Muji-like breathing room, but this whitespace is not empty -- it is subtly populated with ultra-faint noise textures (2-3% opacity) that suggest the static between transmissions. Content never touches the viewport edges; a minimum 5vw margin on all sides creates the sense of content floating within a screen-within-a-screen. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- weight 400, the only available weight. This ultra-condensed, all-uppercase display face carries the authoritative gravity of broadcast typography -- the kind of lettering used for emergency alert systems and late-night TV station IDs. Used at 4rem-7.5rem for chapter titles and primary headings. Letter-spacing is set to 0.08em to let each character breathe, and line-height is 0.92 (tighter than default) for a compressed, monumental feel. Text is rendered with a subtle `text-shadow: 2px 0 #C85A4A, -2px 0 #4A6A8C` -- a permanent RGB split that gives every headline the chromatic aberration of a misaligned CRT display. - **Body / Editorial Text:** "Source Serif 4" (Google Fonts) -- weight 300 (Light) for body copy, weight 600 (SemiBold) for emphasis. A humanist serif with a warmth and readability that recalls quality print editorial work. Set at 1.05rem/1.72 (generous line-height for editorial readability). The font's optical sizing feature is active, ensuring proper stroke modulation at every size. Body text color is #2E2A24 on light backgrounds (warm near-black, never pure black) and #D4CFC6 on dark backgrounds. - **Accent / Monospace:** "IBM Plex Mono" (Google Fonts) -- weight 300 (Light) for captions, metadata, timestamps, and the cryptic inter-chapter phrases. Set at 0.8rem/1.5. Color alternates between #8A8478 (muted stone) on light backgrounds and #6B6760 on dark. This font carries the technical, utilitarian quality of broadcast engineering -- the kind of text you see on a mixing board or oscilloscope readout. - **Pull Quotes / Display Accent:** "Cormorant Garamond" (Google Fonts) -- weight 300 Italic. An elegant, high-contrast serif used exclusively for pull quotes and accent text. Set at 1.8rem/1.35 with letter-spacing 0.02em. The italic forms have a flowing, calligraphic quality that provides a counterpoint to the rigid Bebas Neue headlines. **Palette:** The palette is **muted-vintage** -- colors that feel like they've been through several generations of analog reproduction, each pass draining a little more saturation and shifting hues slightly toward yellow. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (Primary) | Unbleached Linen | #E8E2D6 | The dominant surface -- warm, paper-like, never white | | Background (Dark) | Broadcast Black | #1A1A1E | Near-black with a faint blue cast, like a CRT powered off | | Text (Primary) | Warm Charcoal | #2E2A24 | Body text -- dark but never harsh | | Text (Secondary) | Muted Stone | #8A8478 | Captions, metadata, secondary information | | Accent (Warm) | Faded Vermillion | #C85A4A | A terracotta-red that has lost its urgency -- used for CRT glow effects, horizontal rules, and the warm channel of chromatic aberration | | Accent (Cool) | Slate Signal | #4A6A8C | A dusty steel-blue -- the cool channel of chromatic aberration, used for links and interactive states | | Accent (Tertiary) | Phosphor Amber | #D4A84B | The amber of a monochrome CRT monitor -- used sparingly for hover states and highlighted text | | Interference | Static Grey | #3A3A4E | The color of television static -- used in interference zones and noise overlays | **Color Usage Rules:** - Backgrounds alternate between #E8E2D6 and #1A1A1E at chapter boundaries -- never gradient, always hard-cut - Accent colors appear only in functional roles (links, rules, glitch effects) -- never as background fills - The chromatic aberration palette (#C85A4A warm, #4A6A8C cool) is applied to all display text as opposing text-shadows - #D4A84B is reserved exclusively for interactive hover states and appears nowhere in the static design ## Imagery and Motifs **Glitch-Art as Material:** The primary imagery mode is **glitch-art** -- but not the trendy, clean-edged datamoshing of social media filters. This is the glitch of analog signal decay: horizontal hold failures that shift portions of the image leftward by 20-60px, scan-line interference that replaces image rows with solid bars of #3A3A4E, and color-channel displacement where the red, green, and blue layers of an image are offset by 3-8px in different directions. In CSS, this is achieved through: 1. **Channel Displacement:** Three copies of each image element (or pseudo-elements), each with a CSS filter extracting one color channel (`filter: url(#red-channel)` via an SVG filter), positioned with slight `transform: translate()` offsets and composited using `mix-blend-mode: screen` on a dark background or `mix-blend-mode: multiply` on a light background. 2. **Scan-Line Overlay:** A repeating-linear-gradient overlay: `repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(58,58,78,0.07) 2px, rgba(58,58,78,0.07) 4px)` applied as a pseudo-element over all imagery and occasionally over text sections during scroll. 3. **Horizontal Displacement:** JavaScript-driven CSS clip-path animations that periodically (every 4-8 seconds, randomized) displace a horizontal band of an image by 15-40px to the left or right for 120-300ms, then snap back. This is the "horizontal hold failure" -- brief, unsettling, then resolved. **Flowing-Curves SVG Motifs:** Throughout the editorial flow, hand-crafted SVG curves serve as the dominant decorative element. These are not geometric or mechanical -- they are **flowing-curves**: sinusoidal paths with varying amplitude and frequency, reminiscent of oscilloscope waveforms or the path of a radio signal being visualized. Each SVG curve is drawn with a stroke of 1.5px in #C85A4A or #4A6A8C (alternating), with no fill, and is animated using SVG `` or CSS `stroke-dasharray` / `stroke-dashoffset` to draw itself into view as the user scrolls into each chapter. Specific curve patterns: - **Signal Wave:** A sine wave that increases in frequency from left to right, suggesting a signal being compressed. Spans the full width of columns 8-12 and repeats vertically every 400px. - **Decay Spiral:** A logarithmic spiral that starts tight and expands outward, placed at chapter transitions to suggest signal dissipation. Rendered in #D4A84B at 30% opacity. - **Interference Mesh:** Two overlapping sine waves at slightly different frequencies, creating a moire-like beat pattern. Used as background texture in the interference zones between chapters. **Magnetic Cursor Interactions:** Interactive elements exhibit **magnetic** behavior -- when the cursor approaches within 80px of a link, button, or interactive element, the element subtly shifts toward the cursor (maximum displacement: 8px), as if drawn by a weak magnetic field. When the cursor enters the element's bounding box, the displacement locks and a micro-animation occurs: the element's text gains a 1px additional chromatic aberration offset, and the Phosphor Amber (#D4A84B) accent bleeds in as an underline or border. On cursor exit, the element springs back to its original position with a 300ms ease-out curve. **Noise and Grain:** All surfaces carry a subtle CSS noise texture at 2-4% opacity -- generated via an SVG `` filter (baseFrequency="0.65" numOctaves="4" type="fractal") applied as a background. This simulates the grain of analog film stock or the visual noise floor of a CRT display, and prevents any surface from feeling digitally "clean." ## Prompts for Implementation **Full-Screen Narrative Architecture:** The entire site must be experienced as a single, continuous vertical scroll through an editorial narrative that feels like tuning into a pirate broadcast on an old television. There is no traditional navigation -- no hamburger menu, no sticky header, no footer links. The only way forward is down. The only way back is up. The interface itself is the story. **The Opening Sequence (Chapter 0):** On page load, the viewport is filled with #1A1A1E (broadcast black). After 400ms, horizontal scan lines begin drawing across the screen from top to bottom (CSS animation of a 2px-tall #3A3A4E bar moving downward at 60px/frame). After the scan completes (approximately 1.5 seconds), the background cross-fades to #E8E2D6 over 600ms, and the domain name "bada.studio" fades in -- but with each letter arriving 80ms after the previous one, each with a brief 40ms horizontal displacement glitch before settling into position. The subtitle text appears 800ms after the last letter, and the horizontal rule draws itself left-to-right over 1 second using CSS width transition. **Scroll-Driven Glitch Intensity:** As the user scrolls, the frequency and severity of glitch effects increases. In the first 20% of the page, glitches are rare and subtle (a slight scan-line flicker every 8 seconds). By 50%, they occur every 4-5 seconds with moderate displacement. By 80%, the interference is constant and aggressive -- channel displacement on body text reaches 4px, horizontal hold failures affect full-width bands of content, and the noise texture opacity increases to 8%. This progressive degradation tells a story: the signal is being lost, the broadcast is failing, the content is fighting to remain coherent against entropy. **Chapter Transition Animation:** When scrolling past a chapter boundary (detected via IntersectionObserver at 0.15 threshold), the outgoing chapter slides upward while a brief 300ms "static burst" fills the viewport -- a full-screen overlay of animated noise (CSS animation cycling through 4 pre-rendered noise background positions at 20fps). The incoming chapter then fades in from #1A1A1E, simulating a channel change. **Typography Animation:** Headlines in each chapter animate on entry using a "signal lock" effect: the text initially appears with heavy chromatic aberration (8px offset) and horizontal displacement (the text is split into 3-4 horizontal bands, each offset 10-30px left or right). Over 600ms, these bands slide into alignment and the chromatic aberration reduces to its resting 2px state, simulating a television finding its signal lock. **Flowing-Curve Path Animation:** SVG flowing curves are animated with `stroke-dasharray` equal to their total path length and `stroke-dashoffset` transitioning from full length to 0 over 1.5 seconds as they scroll into view. The animation uses a custom cubic-bezier(0.25, 0.1, 0.25, 1.0) easing that gives the line-drawing a natural, breathing quality -- not mechanical, but organic. **Magnetic Elements:** All interactive elements (links within body text, any clickable region) implement magnetic attraction using a mousemove event listener that calculates the vector between cursor position and element center, then applies a `transform: translate()` proportional to the inverse of distance (capped at 8px displacement). The spring-back on mouse-leave uses `transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)` -- a slightly overshooting ease that gives the snap-back a physical, elastic quality. **Sound Design Consideration:** While not implementable in pure HTML/CSS, the design language suggests an optional Web Audio API layer: a low, continuous 60Hz hum (the frequency of CRT electrical interference) at barely audible volume, with brief bursts of white noise coinciding with glitch events. This is entirely optional and should require user opt-in, but the visual design should feel as if this sound exists even when it doesn't. **AVOID:** CTA-heavy layouts (no "Sign Up Now" buttons, no pricing blocks, no conversion funnels), stat-grids (no "1000+ clients served" counters), testimonial carousels, stock photography, gradient backgrounds, rounded-corner card UI, cookie consent overlays as design elements, parallax scrolling (use scroll-triggered glitch instead), centered-text hero sections with background video. ## Uniqueness Notes **Differentiators from other designs:** 1. **Muji-Glitch Collision:** No other design in the portfolio combines the material austerity of Muji aesthetic (4% frequency -- deeply underused) with glitch-art imagery (not present in frequency data at all). This creates a visual language where functional minimalism is systematically corrupted by signal decay -- a combination that produces genuine visual tension rather than mere stylistic novelty. The Muji half provides structure and restraint; the glitch half provides entropy and mystery. Neither dominates; they coexist in permanent, productive conflict. 2. **Progressive Signal Degradation Narrative:** No other design uses scroll position as a narrative device for visual degradation. The concept of a broadcast signal that deteriorates as you scroll deeper creates a unique temporal dimension -- the site literally decays as you consume it, making the act of reading feel like a race against entropy. This is storytelling through interface decay, not through content alone. 3. **Magnetic Interaction as Physical Metaphor:** While magnetic cursor effects exist at 6% frequency, no other design in the portfolio contextualizes them as part of a coherent physical metaphor (electromagnetic fields, CRT displays, analog signal equipment). Here, the magnetic attraction of interactive elements is not a decoration -- it is the interface expressing the same electromagnetic physics that govern the glitch effects, the scan lines, and the signal degradation. The interaction model and the visual language share the same metaphorical universe. 4. **Analog Television Broadcast Framing:** The entire site is framed as a broadcast being received -- from the opening scan-line boot sequence to the inter-chapter "channel changes" to the progressive signal loss. No other design uses broadcast television as its conceptual frame, and this framing transforms every standard web interaction (scrolling, hovering, reading) into an act within the metaphor (tuning, adjusting signal, receiving transmission). 5. **Asymmetric Gutter Grid:** The 12-column grid with intentionally inconsistent gutter widths (24px/32px/16px) is not used in any other design. This creates a layout that is orderly at first glance but subtly wrong on close inspection -- a spatial expression of the same "almost right but corrupted" tension that drives the entire design language. **Documented Seed:** aesthetic: muji, layout: editorial-flow, typography: display-bold, palette: muted-vintage, patterns: magnetic, imagery: glitch-art, motifs: flowing-curves, tone: mysterious-moody **Avoided Overused Patterns:** - Avoided: playful aesthetic (95%), centered layout (97%), mono typography (97%), warm palette (100%), friendly tone (95%), scroll-triggered as primary pattern (97%), parallax (81%), minimal imagery (95%) - Preferred: muji aesthetic (4%), editorial-flow layout (10%), display-bold typography (4%), magnetic patterns (6%), mysterious-moody tone (6%), flowing-curves motifs (previously unused in frequency data), glitch-art imagery (previously unused in frequency data)