# Design Language for MMIDDL.com ## Aesthetics and Tone MMIDDL.com is a split-screen cultural theater — a site that divides reality into two halves that argue, seduce, and merge as the user scrolls. The avant-garde aesthetic channels the spirit of Dadaist collage performances and Butoh theater stages, where controlled tension between opposing visual forces creates hypnotic energy. The left half of the viewport lives in deep ink-black darkness lit by neon punctuation; the right half breathes in bleached white space stained with bleeding watercolor pigments. These two worlds interact through the "middle" — the seam where MMIDDL lives. The tone is energetic and confrontational in the way a live performance is confrontational: not aggressive, but demanding attention, refusing to be background noise. Every scroll position is a new scene in an ongoing visual argument between dark-neon precision and watercolor dissolution. The cultural motifs draw from global folk-art traditions — Kintsugi crack-lines, Madhubani linework, Adinkra symbols, Moorish tile geometry — each rendered through the site's dual-world lens: precise neon outlines on the dark side, loose watercolor interpretations on the light side. MMIDDL is the mediator between order and chaos, and it revels in both. ## Layout Motifs and Structure The layout is a persistent split-screen architecture. The viewport is divided into two vertical halves by a central seam — a living, animated 4px line that pulses between electric magenta (#ff00ff) and cyan (#00fff5). This seam is not merely decorative; it is the structural spine of the entire site. **Split-Screen System:** - **Left panel (Dark World):** Background #0a0a0f, contains typographic headings, neon-outlined cultural motifs, and data-like annotations. Content is right-aligned toward the seam, creating tension at the boundary. - **Right panel (Light World):** Background #f8f4ef (warm parchment white), contains watercolor imagery, flowing body text in serif, and organic decorative bleeds. Content is left-aligned toward the seam. - **The Seam:** The center divider shifts and breathes. On certain scroll positions it widens to 40vw, creating a "middle zone" where elements from both halves overlap — dark neon text over watercolor washes, producing the site's signature visual moments. **Scroll Progression:** - **Act I (0-100vh):** The seam dominates — a single thin vertical line with the domain name "MMIDDL" split across it, left half in neon magenta, right half in watercolor-stained ink serif. The two halves slowly pull apart to reveal the full split-screen layout. - **Act II (100vh-400vh):** Content sections alternate dominance. Some sections let the dark panel expand to 70vw while the light panel compresses; others reverse. The seam constantly rebalances, creating a visual rhythm like breathing. - **Act III (400vh+):** The two halves begin merging. The dark background bleeds watercolor stains; the light side develops neon hairlines. By the final section, the split dissolves into a unified field where both visual languages coexist. No traditional grid system is used. Instead, content is positioned relative to the seam using CSS custom properties that animate with scroll position. Elements never snap to a 12-column grid; they float in their respective half, gravitating toward or away from the center line. ## Typography and Palette **Typography:** - **Display / Headings (Dark Side):** "Playfair Display" (Google Fonts) — a high-contrast transitional serif with sharp, dramatic hairlines that catch neon glow effects beautifully. Used at 48px-96px, weight 700-900, with letter-spacing: -0.03em. On the dark half, headings are rendered with a 1px neon text-shadow in magenta or cyan. All-caps for section titles, mixed-case for sub-headings. - **Body / Narrative (Light Side):** "Cormorant Garamond" (Google Fonts) — an elegant, flowing serif with calligraphic DNA that harmonizes with the watercolor imagery. Used at 18px-22px, weight 400-500, line-height: 1.75. The warmth and irregularity of its letterforms evoke hand-set type on handmade paper. - **Accent / Labels:** "DM Mono" (Google Fonts) — a clean monospaced face used sparingly for timestamps, coordinates, and annotation labels on the dark side only. Used at 11px-13px, weight 400, letter-spacing: 0.06em, text-transform: uppercase. This is the clinical counterpoint to the expressive serifs. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Dark base | Obsidian void | #0a0a0f | Left panel background | | Light base | Warm parchment | #f8f4ef | Right panel background | | Neon magenta | Electric fuchsia | #ff00ff | Seam pulse, dark-side headings, hover states | | Neon cyan | Frozen arc | #00fff5 | Secondary neon accents, link underlines, SVG outlines | | Neon amber | Signal gold | #ffb800 | Tertiary neon for cultural motif highlights | | Watercolor rose | Pigment blush | #d4536a | Watercolor wash primary on light side | | Watercolor indigo | Deep wash | #3a4f8f | Watercolor wash secondary, text on light-side headings | | Seam gradient | Magenta-to-cyan | #ff00ff → #00fff5 | Animated central divider | | Ink black | Type dark | #1a1a1f | Body text on light side | | Smoke | Muted annotation | #6b6b7b | Captions and small text | The palette is deliberately split: the dark side uses only neon colors against obsidian; the light side uses only watercolor pigments against parchment. The seam is the only place both palettes coexist simultaneously. ## Imagery and Motifs **Watercolor Wash System:** All imagery on the light side is created through CSS-simulated watercolor effects. Overlapping radial gradients with feathered edges (using large border-radius and gaussian blur) create soft pigment-bleed shapes in rose (#d4536a) and indigo (#3a4f8f). These washes are not static — they slowly shift and breathe using CSS keyframe animations with 20-40 second cycles, simulating wet paint spreading on paper. SVG feTurbulence and feDisplacementMap filters add organic irregularity to edges. Each section features a unique watercolor "painting" that emerges as the user scrolls into view. **Cultural Motif Vocabulary:** The dark side features a library of cultural motifs rendered as SVG line-art with neon stroke colors: - **Kintsugi crack patterns:** Gold (#ffb800) hairlines that spread across the dark panels like repaired ceramic, symbolizing beauty in brokenness. These lines animate with path-draw SVG techniques, growing as the user scrolls. - **Madhubani-inspired linework:** Dense, rhythmic patterns of concentric arcs and fish-scale repetitions in cyan (#00fff5), used as border decorations around content blocks. - **Adinkra symbol accents:** Small geometric symbols (sankofa, dwennimmen, nyame dua) rendered at 24px-36px as neon-outlined SVG icons, used as section markers and list bullets. - **Moorish tile geometry:** Tessellating star-and-polygon patterns in magenta (#ff00ff) at 5% opacity, used as subtle dark-side background textures. **Cursor-Follow Interaction:** The primary interaction pattern is cursor-follow. A soft radial gradient (40px radius) follows the cursor at all times, but its appearance changes depending on which half of the screen the cursor occupies: - **Dark side:** The cursor emits a neon glow — a soft magenta orb with 30% opacity and a 60px blur radius, illuminating nearby elements like a blacklight. - **Light side:** The cursor leaves a watercolor "paint trail" — small, fading circular blobs in rose or indigo that dissipate over 2 seconds, as if the cursor is a wet brush touching paper. - **On the seam:** The cursor triggers a brief electric spark animation — tiny SVG lightning-bolt particles that scatter outward for 0.5 seconds. **Transition Motifs:** Between scroll sections, instead of simple fades, visual transitions use "ink-spill" effects: a dark inkblot spreads from the seam outward (or a watercolor wash floods inward) to mask the section change, then recedes to reveal the new content. ## Prompts for Implementation **Full-Screen Narrative Architecture:** The entire site is a single continuous scroll divided into theatrical acts. There are no navigation menus, no headers, no footers in the traditional sense. The seam IS the navigation — its color shifts indicate progress (magenta-dominant in Act I, balanced in Act II, cyan-dominant in Act III). A small "MMIDDL" wordmark sits centered on the seam at the top of the viewport, fixed-position, rendered in 12px DM Mono with alternating neon/watercolor letter styling. **Cursor-Follow as Core Mechanic:** The cursor-follow effect is not decorative — it is the primary way the user "touches" the world. On the dark side, hovering over a cultural motif SVG should cause it to illuminate fully (from 20% to 100% opacity with a glow bloom). On the light side, hovering over a watercolor wash should cause it to ripple outward slightly (CSS scale transform from 1.0 to 1.03 with a 0.6s ease-out). The cursor's paint-trail on the light side should use requestAnimationFrame for smooth 60fps rendering, storing the last 30 cursor positions and rendering fading circles at each. **Split-Screen CSS Architecture:** Use CSS custom properties tied to scroll position via a lightweight JS scroll listener: - `--seam-position` (0.5 default, ranges 0.3 to 0.7) controls the split ratio - `--seam-width` (4px default, up to 40vw) controls the seam's expansion - `--act-progress` (0 to 1) tracks overall scroll progress Each half is a position:fixed container with width controlled by `--seam-position`, and content within scrolls via transform:translateY. This creates the illusion of two independent scrolling worlds joined at the seam. **Animation Priorities:** 1. Seam pulse animation (CSS keyframes, always running) 2. Cursor-follow glow/paint-trail (JS, requestAnimationFrame) 3. Watercolor wash breathing (CSS keyframes, 20-40s cycles) 4. Kintsugi crack path-draw (scroll-triggered SVG animation) 5. Section transition ink-spill effects (scroll-triggered CSS clip-path) 6. Cultural motif illumination on hover (CSS transitions, 0.3s) **Storytelling Emphasis:** Content should read as a poetic manifesto about existing in the middle — between cultures, between order and chaos, between digital precision and analog warmth. Section headings should be evocative phrases rather than functional labels: "Where the Line Breathes," "Neither This Nor That," "The Seam Remembers." Body text on the light side should be set in generous Cormorant Garamond paragraphs that feel like reading a chapbook. **AVOID:** CTA buttons, pricing tables, stat-grids, testimonial carousels, cookie banners, hero images (the seam IS the hero), hamburger menus, footer link walls, standard card layouts. This site has no "above the fold" — every fold is a scene. ## Uniqueness Notes **Differentiators:** 1. **Persistent split-screen duality:** No other design uses a true split-screen architecture where two entirely different visual worlds (dark-neon vs. watercolor-on-parchment) coexist side by side throughout the entire experience. This is not a split-screen hero that resolves into a normal layout — the duality persists from first pixel to last. 2. **The living seam as structural protagonist:** The animated center divider is both the navigation system, the visual identity, and the thematic core. It breathes, expands, changes color, and mediates between the two halves. No other design elevates a structural element to this level of narrative importance. 3. **Cursor-follow as world-interaction:** While cursor-follow effects exist elsewhere, this design assigns completely different cursor behaviors to each half of the screen — neon blacklight on the dark side, wet-brush paint trail on the light side — making the cursor a tool for exploring two different material realities. 4. **Cross-cultural motif library:** The use of Kintsugi, Madhubani, Adinkra, and Moorish geometric traditions as a unified visual vocabulary — each rendered in both neon-outline and watercolor-wash versions — creates a multicultural visual language that is specific and researched rather than generic "world" imagery. 5. **Theatrical scroll structure (Acts I-III):** The explicit three-act narrative progression, where the split-screen relationship evolves from separation through tension to merger, gives the site a dramatic arc that typical scroll-based sites lack. **Chosen Seed/Style:** aesthetic: avant-garde, layout: split-screen, typography: serif-classic, palette: dark-neon, patterns: cursor-follow, imagery: watercolor, motifs: cultural, tone: energetic **Avoided Overused Patterns:** - Avoided asymmetric layout (87% frequency) — used split-screen instead, which has 0% frequency - Avoided parallax scrolling (87% frequency) — used cursor-follow as primary interaction pattern (0% frequency) - Avoided stagger animations (87% frequency) — used path-draw SVG and ink-spill transitions instead - Avoided mono typography dominance (100% frequency) — DM Mono is relegated to tiny accent labels; primary type is serif (Playfair Display + Cormorant Garamond) - Avoided tech motifs (87% frequency) — used cultural motifs from global folk-art traditions instead - Avoided gradient palette as primary (100% frequency) — palette is split into discrete neon vs. watercolor systems, with gradient only on the seam element - Avoided minimal imagery (62% frequency) — imagery is dense, layered, and ever-present through watercolor washes and cultural SVG motifs