# Design Language for vtubermanager.com ## Aesthetics and Tone vtubermanager.com is a zen-inspired management platform for virtual YouTubers, where the tranquil emptiness of Japanese zen aesthetics meets the hyper-energetic world of VTuber culture. The visual identity creates a meditative space for managing chaos -- think of a raked sand garden where each carefully placed stone is a VTuber avatar. Split-screen layouts create the duality between the calm manager's view and the explosive performer's world. The tone is edgy yet rebellious in a quiet way -- a zen master who also runs a talent agency. Earth tones and generous negative space counterbalance the inherent visual noise of VTuber culture. Inspiration from zen rock gardens, Japanese management philosophy (kaizen), the minimalism of Muji stores, and the backstage calm before a live performance. ## Layout Motifs and Structure A **split-screen** layout representing the dual nature of VTuber management: the calm control panel and the vibrant stage. **Primary structure:** - **Zen split hero (100vh):** Left half: pure, calm earth-toned surface (#e8e0d0) with the title "VTUBER MANAGER" in clean geometric sans-serif, vertically centered. Right half: a darker surface (#2a2830) with a stylized aurora-light gradient gently pulsing -- representing the digital stage. A thin 1px divider separates the halves. - **Management zen garden (scrollable):** Below the hero, the left panel continues as a scrollable management interface -- clean cards with VTuber profile summaries, schedule blocks, and status indicators. All rendered in earth tones with generous whitespace. - **Stage preview (fixed):** The right panel remains semi-fixed (position: sticky) showing a slowly rotating aurora gradient that shifts color, representing the "live" digital environment. - **Aurora-light footer:** A full-width section where both halves merge, the aurora gradient spreading across the entire width with a final summary message in centered geometric type. **Spatial relationships:** Split-screen: 55% left (management), 45% right (stage) on desktop. Content within each panel: 40px padding, left-panel content max-width: 480px. Right-panel content: centered, max-width: 360px. ## Typography and Palette **Fonts:** - **Headlines:** "Sora" (Google Fonts) -- a geometric sans-serif with balanced proportions, used at clamp(28px, 4vw, 52px). Weight 600. The clean geometry reflects the precision of management while the name "Sora" (sky) resonates with the virtual/digital context. - **Body text:** "Noto Sans JP" (Google Fonts) -- a comprehensive Japanese-supporting sans-serif at 15px/1.7 line-height. Weight 400 for body, 700 for emphasis. Essential for VTuber culture content which frequently includes Japanese terms. - **Data/Metrics:** "Roboto Mono" (Google Fonts) -- monospace for schedule times, metrics, and dashboard data at 13px. Weight 400. **Color Palette:** - **Zen sand:** #e8e0d0 (warm sand for management side) - **Zen stone:** #8a8070 (medium stone gray for borders, accents) - **Earth dark:** #3a3830 (dark earth for text on light backgrounds) - **Stage dark:** #2a2830 (purple-tinted dark for stage side) - **Aurora green:** #40d8a8 (vibrant green for aurora effects) - **Aurora purple:** #8860c8 (vibrant purple for aurora effects) - **Aurora pink:** #e060a0 (vibrant pink for aurora accents) - **Text light:** #e8e0e8 (light text for dark surfaces) ## Imagery and Motifs **Core visual motifs:** - **Duotone photo treatments:** VTuber avatar placeholders rendered as duotone images (CSS filter: grayscale(100%) then mix-blend-mode with earth tones for the management view, or with aurora colors for the stage view). The same avatar appears differently on each side of the split. - **Aurora-light gradients:** Animated CSS gradients (conic-gradient rotating, or multiple radial-gradients shifting position) creating northern-lights effects on the stage panel. Colors cycle between green, purple, and pink over 12s. - **Zen garden SVG elements:** Small decorative SVGs on the management side -- raked sand line patterns (parallel wavy lines), small stone circles, and minimalist leaf shapes. All rendered in zen-stone gray (#8a8070) at 0.2 opacity. - **Shake-error on status changes:** When a VTuber status changes (simulated via scroll-triggered events), the corresponding card briefly shakes (CSS animation: translateX ±3px over 200ms) with a color flash to aurora pink, then settles -- the "shake" represents the moment of disruption in the zen calm. ## Prompts for Implementation **Zen management duality:** The left side must feel absolutely calm -- generous whitespace, muted colors, slow or no animation. The right side must feel alive -- gradient animation, gentle pulsing, vibrant color. The contrast between halves IS the design. **Split-screen implementation:** - display: grid; grid-template-columns: 55% 45%; height: 100vh; for the hero section. - Left panel: overflow-y: auto (scrollable management content). - Right panel: position: sticky; top: 0; height: 100vh; (fixed stage). - On mobile (max-width: 768px): stack vertically. **Aurora gradient animation:** - background: conic-gradient(from var(--angle), #40d8a8, #8860c8, #e060a0, #40d8a8); - CSS @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } - @keyframes aurora { to { --angle: 360deg; } } - animation: aurora 12s linear infinite; **Duotone filter:** - .management-avatar { filter: grayscale(100%) sepia(30%) contrast(1.1); } - .stage-avatar { filter: grayscale(100%) sepia(0%) hue-rotate(220deg) saturate(2) contrast(1.2); } **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids (present metrics narratively), visual noise on the management side. The left panel must remain zen. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zen/chaos split-screen duality for VTuber management:** The literal visual split between calm management interface and vibrant performance stage creates a unique structural metaphor for the VTuber manager's dual role. 2. **Duotone avatars that change treatment per panel side:** The same avatar image rendered differently on the management vs stage sides (earth-toned vs aurora-colored) visually represents how VTuber personas shift between behind-scenes and on-camera. 3. **Aurora gradient as persistent "live" indicator:** The continuously animated aurora on the stage panel serves as both decoration and functional metaphor -- the stage is always "live," always in motion, even while the management side remains still. **Chosen seed/style:** aesthetic: zen, layout: split-screen, typography: geometric-sans, palette: earth-tones, patterns: shake-error, imagery: duotone-photo, motifs: aurora-lights, tone: edgy-rebellious **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).