# Design Language for vtubermanager.com ## Aesthetics and Tone vtubermanager.com should feel like the backstage wall of a tiny neon theater where a VTuber, their moderator, and their exhausted manager are calmly getting the next stream under control. The style is friendly brutalism: oversized slab-like panels, unapologetically exposed borders, visible registration marks, and UI labels that look taped onto concrete, softened by candlelight and cheerful line-art mascots. It is not a corporate creator platform; it is a night-shift command shrine for handling schedules, overlays, collabs, lore notes, assets, and chat chaos before the curtain rises. The opening mood is dark-neon but intimate: blackened control-room surfaces, violet glow from monitors, warm candle halos, and little doodled spirits carrying clipboards. The brutalism should read as protective rather than hostile — big buttons, chunky frames, loud headings, and honest construction — while the tone stays encouraging, like a manager saying, “We’ve got this,” five minutes before stream. The candle-atmospheric motif turns the usual tech dashboard into a ritual of preparation: every section is a revealed layer of the pre-stream checklist, from lighting the room to opening the stage. ## Layout Motifs and Structure Use parallax-sections as a sequence of full-screen backstage rooms stacked vertically. Each room occupies most or all of the viewport and moves at a different visual depth: foreground candle silhouettes drift slowly, midground line-illustrated equipment slides at moderate speed, and background concrete grids barely move. Avoid normal card grids and centered SaaS blocks. The experience should feel like walking sideways through a dim studio as panels snap open one by one. The composition is based on a brutalist stage-rig grid: thick horizontal rails, overbuilt vertical dividers, hard black outlines, and large offset content slabs that occasionally overlap the viewport edge. Each section should use progressive disclosure instead of showing everything at once. For example: the hero exposes only the domain and a glowing “manager desk” diagram; the next scroll reveals three hinged panels labeled Schedule, Assets, and Collabs; deeper sections peel back sticky-note layers, translucent chat bubbles, and curtain-like overlays. Layout rhythm should alternate between dense control surfaces and cinematic negative space, with content appearing as annotated props rather than conventional sections. Suggested narrative structure: 1. **The Manager Desk:** full-screen hero with vtubermanager.com in towering Bebas Neue type, a line-art avatar silhouette, candles, and neon monitor blocks. 2. **The Pre-Stream Tunnel:** parallax vertical panels reveal schedule fragments, asset tags, emote sketches, and pinned lore notes. 3. **The Collab Switchboard:** oversized cables and brutalist toggles connect illustrated creator portraits as friendly line icons. 4. **The Incident Lantern:** a darker room where moderation, backup plans, and sponsor notes appear in candlelit disclosure drawers. 5. **The Curtain Open:** final full-screen stage glow, not a sales CTA, with the feeling that everything is ready. ## Typography and Palette Use Google Fonts with a deliberately loud hierarchy: - **Display / hero / section titles:** "Bebas Neue" (Google Fonts), uppercase, huge, condensed, and slightly tracked out. Use it at `clamp(4.5rem, 14vw, 13rem)` for the domain and `clamp(3rem, 8vw, 7rem)` for room titles. Its poster-like force reinforces the planned bebas-bold typography and gives the page a stream-poster energy. - **Body / friendly explanations:** "Inter" (Google Fonts), weights 400 and 600. Keep body copy compact and practical, like production notes on a clipboard. - **Labels / technical annotations:** "Space Mono" (Google Fonts), weights 400 and 700, for timestamps, switch labels, file names, mock schedule codes, and disclosure tabs. - **Handwritten accent:** "Caveat" (Google Fonts), weight 600, for warm sticky-note comments such as “hydrate,” “backup BGM,” or “ask mod team.” Palette: dark-neon with candle warmth. - **Backstage Black:** `#05050A` — primary background, nearly black with a blue-violet cast. - **Concrete Ink:** `#14131C` — brutalist panel surfaces and large slabs. - **Neon Magenta:** `#FF2BD6` — active outlines, stage glow, key reveals. - **Electric Cyan:** `#2BF6FF` — monitor light, SVG strokes, parallax wire paths. - **Candle Amber:** `#FFB84D` — flame halos, friendly annotations, warm transitions. - **Soft Paper:** `#F4E8D1` — note cards, tiny labels, readable highlights. - **Signal Violet:** `#7A4DFF` — secondary glows and deep shadows. Use hard, mostly flat fills rather than glossy gradients. Gradients may appear only as localized neon/candle glows: radial amber around flames and thin cyan/magenta bloom behind monitor edges. ## Imagery and Motifs All imagery should be CSS/SVG line-illustration and decorative interface drawing, not photography. Build a vocabulary of friendly backstage icons: avatar bust outline, headset, schedule clipboard, dangling microphone, emote sheet, collab cable, chat lantern, moderation stamp, and tiny mascot spirits with square eyes. Draw them in single-weight SVG strokes with occasional brutalist corner blocks, like production diagrams made by someone who also loves zines. The candle-atmospheric motif should appear repeatedly but never as a generic cozy background. Candles are functional status indicators: a tall candle for schedule readiness, three tealights for assets, a guttering candle for crisis notes, and a final bright row at curtain time. Flames can flicker through CSS transforms and radial gradients. Wax drips become vertical timeline marks; smoke curls become line-art arrows that guide the scroll. Use progressive-disclosure props: hinged concrete doors, taped overlays, stamp marks, sliding acetate sheets, and black censor bars that retract to reveal friendly notes. Motifs should contrast harsh brutalist geometry with small cute details: thick rectangular frames around delicate emote sketches, neon cable paths crossing candle halos, and massive Bebas words interrupted by hand-drawn sticky notes. ## Prompts for Implementation Implement as a single immersive `index.html` with embedded CSS and JS. Load Bebas Neue, Inter, Space Mono, and Caveat from Google Fonts. The site should be a full-screen narrative scroll, not a normal marketing landing page. Use CSS custom properties for the palette, large fixed-position parallax layers, and IntersectionObserver to trigger each room’s progressive disclosure. Prioritize storytelling and stagecraft. On load, show a dark concrete wall, a small candle flicker, then let the huge `vtubermanager.com` title snap into place like a pasted concert poster. As the user scrolls, parallax line illustrations should drift at different speeds: cables sag, smoke rises, sticky notes slide aside, and disclosure panels unlock with a chunky mechanical feel. Use `clip-path`, `transform`, `stroke-dashoffset`, and CSS variables to make SVG lines draw themselves when their room enters view. Avoid CTA-heavy layouts, pricing blocks, testimonial strips, logo clouds, and stat-grids. If product-like information is needed, embed it as story artifacts: a checklist pinned to a wall, a switchboard label, a clipboard note, or a neon annotation beside a line drawing. Buttons should be rare and diegetic, like “light desk,” “open switchboard,” or “raise curtain,” not “Get Started.” The final screen should feel like a completed ritual: candles aligned, panels open, stage light warming the edges, and the manager’s notes visible. Animation direction: candle flames loop gently; major panels enter with abrupt brutalist snaps; line drawings reveal with friendly hand-drawn timing; parallax is vertical and slow; hover states should use neon outline shifts and small label flips. Keep the mood generous and readable but visually bold, with oversized typography and concrete-scale shapes dominating every screen. ## Uniqueness Notes 1. Combines **brutalist** structure with **friendly VTuber backstage warmth**, avoiding the common corporate SaaS look and making the site feel like a creator’s night-shift command shrine. 2. Uses **parallax-sections** as full-screen rooms rather than standard stacked content, deliberately avoiding the overused card-grid and centered patterns found in the frequency analysis. 3. Treats **candle-atmospheric** motifs as status indicators and narrative devices, not generic cozy decoration. 4. Replaces photography and minimal stock visuals with custom **line-illustration** props, SVG cable paths, sticky notes, and cute manager spirits. 5. Uses **progressive-disclosure** as theatrical stage mechanics: hinged slabs, retracting censor bars, taped overlays, and switchboard reveals. Chosen seed/style: aesthetic: brutalist, layout: parallax-sections, typography: bebas-bold, palette: dark-neon, patterns: progressive-disclosure, imagery: line-illustration, motifs: candle-atmospheric, tone: friendly. Avoided patterns from frequency analysis: corporate aesthetics, photography, minimal imagery, centered layouts, card-grids, warm gradient palettes, stat-grids, pricing blocks, and authoritative SaaS tone.