# Design Language for vtubermanager.com ## Aesthetics and Tone vtubermanager.com is a **botanical server rack** — the visual language of a living forest encoded in precision engineering diagrams. Imagine a 19-inch rack unit where each shelf is overgrown with deep moss, and the cable management panels are traced with fine hairline circuit paths that branch like mycorrhizal networks between tree roots. The mood is calm authority, not hype: a senior network engineer who keeps a terrarium on the desk. The color palette emerges entirely from forest undergrowth — deep malachite greens, shadowed bark blacks, lichen silver, and the occasional bioluminescent amber of an active LED status indicator. This is a **tech-tutorial site with restraint**. It teaches, it guides, it explains — but the editorial voice is measured and precise, not breathlessly enthusiastic. Every visual choice signals: this tool was built by practitioners, for practitioners. The decorative layer is circuit topography on organic ground — not as whimsy, but as structural metaphor: VTuber management is the act of routing signals through a living performance ecosystem. The circuit IS the forest. Tone: knowledgeable, unhurried, specific. Not a startup pitch. A field manual with a moss cover. ## Layout Motifs and Structure The layout uses **layered depth** as its primary spatial grammar. There are three explicit depth planes: **Plane 0 (Substrate):** A full-viewport fixed SVG layer behind everything. It depicts a cross-section of a forest floor — root channels, mycelium threads, buried trace lines — drawn at 0.4px stroke in `#1a3828` on a near-black `#0d1f16` background. This substrate never scrolls. **Plane 1 (Ground):** The main scrollable content column, `min(720px, 92vw)` centered. Sections are stacked with generous breathing room — 96px gaps minimum. The ground plane sits at `z-index: 10` and uses subtle `backdrop-filter: blur(1px)` to separate from the substrate, creating the impression of content resting on top of the diagram below. **Plane 2 (Float):** Interactive elements — code blocks, callouts, diagram annotations — that float 4–8px above the ground plane using layered box-shadows (`0 2px 8px #0d1f1680, 0 8px 24px #0d1f1640`). Hover-lift animations raise these elements a further 6px with a smooth 200ms `cubic-bezier(0.2, 0, 0.2, 1)` transition. Navigation: a single horizontal strip at top, max 7 links, set flush left against the column edge. No mega-menus, no hamburgers on desktop. On mobile it collapses to an icon-only strip with text tooltips. Section rhythm: each tutorial section opens with a `##` header in large serif display type, then a pull-quote paragraph in italic medium weight, then body text, then (where applicable) a code block or circuit diagram annotation. No cards. No icon-grid feature blocks. No testimonial carousels. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display / H1–H2 — `Playfair Display`** — serif-revival display. Used at 56–80px, weight 700, slightly negative tracking (`-0.02em`). The serifs recall 19th-century botanical illustration title pages. H1 is set at 72px, weight 900 italic, with color `#c8e6c0` (light sage). H2 at 48px, weight 700, color `#8fbc8b`. - **Body / H3–H4 — `Source Serif 4`** — optical size variable, used at `opsz 16–20`. Body text at 17px, weight 400, line-height 1.75, color `#d4e8cc`. H3 at 24px weight 600, H4 at 20px weight 600. Source Serif 4 has a technical authority that complements Playfair's expressiveness. - **Code / Monospace — `JetBrains Mono`** — weight 400 for body code, weight 700 for keywords/identifiers. Code blocks at 14px, line-height 1.65. Color `#a3d9a5` on `#0d2418` background. - **UI Labels / Captions — `Inter`** — weight 400–500, 12–14px, color `#6b9e70`. Used sparingly for navigation, timestamps, breadcrumbs, and diagram labels. **Color Palette:** | Role | Hex | Description | |------|-----|-------------| | Background deep | `#0d1f16` | Forest floor, near-black green | | Background mid | `#122a1c` | Shadowed undergrowth | | Surface | `#1a3828` | Moss-covered substrate | | Surface raised | `#1f4530` | Elevated code blocks | | Accent primary | `#3a7d44` | Malachite — links, active states | | Accent bright | `#52a860` | Lit LED — hover states, active nav | | Text primary | `#d4e8cc` | Sage white — body text | | Text secondary | `#8fbc8b` | Faded moss — captions, subtitles | | Text highlight | `#c8e6c0` | Light sage — display headings | | Amber signal | `#c8a832` | Bioluminescent amber — warnings, callouts | | Circuit trace | `#2d5c3a` | Substrate circuit lines | | Lichen silver | `#7a9e82` | Decorative accents | ## Imagery and Motifs **No photography.** No stock images of anime characters, no screenshots of streaming software, no human faces. The visual world is constructed from two families of original SVG form: **1. Circuit-Forest Substrate (fixed SVG, full-viewport).** The substrate is a single `` at `position: fixed, inset: 0`. It renders a cross-section view of a forest floor, but the organic root channels ARE circuit traces. Trace routing follows 45/90-degree PCB conventions — no smooth curves — but the trace endpoints resolve into root-tip flares (3px radius rounded ends). Mycelium nodes are small vias: 5px circles at `#2d5c3a` with a 1.5px ring at `#3a7d44`. Buried component pads (rectangular, `8×14px`, `#1a3828` fill with `#3a7d44` stroke) mark where major section anchors sit — the pad appears in the substrate at exactly the y-position of the corresponding section heading. When the user scrolls to a heading, the pad's stroke animates to `#52a860` with a 180ms ease-out. **2. Section Diagrams (inline SVG, content-column).** Each major tutorial section may include a bespoke inline SVG diagram — not a generic icon, but a technical schematic specific to that section's concept. These diagrams use the same circuit-trace visual language but are drawn at `1px` stroke, oriented horizontally, and annotated with `Inter` 11px labels in `#6b9e70`. Diagrams are decorative-structural: they reinforce the concept taught, not decorate around it. **Hover-lift pattern:** All interactive surfaces (code blocks, callout boxes, diagram panels, nav links) use a compound hover-lift: - `transform: translateY(-4px)` - `box-shadow: 0 8px 24px #0d1f1660, 0 2px 8px #3a7d4430` - `border-left-color` transitions from `#2d5c3a` to `#52a860` - Duration: 200ms, easing: `cubic-bezier(0.2, 0, 0.2, 1)` **Amber callout motif:** Tutorial warnings and "important" callouts use a distinct amber treatment: left border `4px solid #c8a832`, background `#1a1800`, text `#f0d878`, with a small SVG "signal" icon (a 3-dot blinking LED) at left. This is the only warm color in an otherwise cool-green system — the contrast is intentional and visceral. ## Prompts for Implementation Build vtubermanager.com as a **single-page scrolling field manual**, structured as a vertical narrative descent from surface to substrate. The user scrolls down and progressively deeper into the forest/circuit metaphor. **Architecture (sections in scroll order):** 1. **Hero.** Full-viewport. The substrate SVG is visible behind a centered text block: site name in Playfair Display 72px italic, a one-sentence description beneath in Source Serif 4 20px italic. No buttons. No CTAs. A single scroll-indicator arrow (SVG, animated `translateY` bounce) at bottom center. 2. **What It Manages.** A clean 3-column layout (on desktop, stacked on mobile) with three SVG diagrams side-by-side: VTuber workflow → agency → schedule pipeline. Each diagram is a circuit schematic. No icons from icon libraries. 3. **How It Works.** Tutorial narrative: multi-step explanation with code blocks. Each step has a heading (Playfair H2), prose (Source Serif 4), and an optional code block (JetBrains Mono). The substrate pad at this section's y-position lights amber. 4. **Quick Start.** Dense but clean code-heavy section. Three code tabs (shell, YAML config, API call). Each tab is a floating panel with hover-lift. Tab switcher uses `border-bottom` indicator, not pills. 5. **Architecture Overview.** A single large SVG diagram (800px wide, left-bleed to column edge) showing the system architecture as a PCB layout: modules as component pads, data flows as traces. 6. **Community / Links.** Minimal footer section. No icons. Text-only links in Playfair Display italic, large, spaced generously. Background shifts to deepest `#0d1f16` with the substrate visible at near-zero opacity beneath. **Animation principles:** - Substrate pad illumination: Intersection Observer, fires when heading enters viewport at 30% threshold - Hover-lift: CSS-only, no JS - Scroll-indicator: CSS animation only - No entry animations, no page transitions, no parallax on content — only the substrate is fixed **DO NOT implement:** - Pricing blocks or "plans" sections - Testimonials or user avatars - Stat grids ("10k+ users", "99.9% uptime") - Gradient hero backgrounds (the background IS the substrate SVG) - Any sans-serif body text (Source Serif 4 is the body voice) ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **evolved-minimal**, layout = **layered-depth**, typography = **serif-revival**, palette = **forest-green**, patterns = **hover-lift**, imagery = **vector-art**, motifs = **circuit**, tone = **tech-tutorial**. **Differentiators from the existing corpus:** 1. **The circuit IS the forest floor, not a decoration on top.** Every prior circuit-motif design in the registry (15% usage) treats circuit traces as UI chrome — overlaid on cards, used as borders, applied as background texture. vtubermanager.com inverts this: the circuit traces are the geological substrate that the content sits on, rendered as a cross-section of living earth where roots and PCB traces are indistinguishable. This is a conceptual inversion, not a style variation. 2. **Serif-revival body text in a tech-tutorial context.** The registry's tech-tutorial tone (3% usage) defaults to geometric sans or monospace for body. vtubermanager.com uses Source Serif 4 as the primary body voice — a deliberate anachronism that evokes field manuals, academic papers, and botanical expedition logs. The typeface choice is load-bearing for the forest-botanist-engineer persona. 3. **Amber as the only warm signal in a cold-green system.** The entire palette is one temperature (deep forest green, cool) except for a single carefully rationed amber (`#c8a832`) reserved exclusively for warnings and critical callouts. This scarcity makes the amber hits visceral — when the user sees amber, they stop. No other design in the corpus uses single-color restraint as an information hierarchy tool. 4. **Substrate pad illumination as navigation feedback.** The fixed SVG substrate contains component pads at exact y-positions matching section headings. As the user scrolls, pads light up in sequence — creating a schematic map of the reader's progress through the document. This is navigation as circuit state, not as a sidebar or progress bar. **Patterns avoided (overused in corpus):** - Full-bleed hero gradients (dominant at 85%+) - Icon-grid feature blocks - Card-based layouts - Testimonial sections - CTA-heavy structures - Sans-serif body text in tech contexts