# Design Language for vtubermanager.com ## Aesthetics and Tone vtubermanager.com is staged as **the backstage greenroom of a virtual talent agency, rendered as a soft-bodied 3D toy world** — a place where avatars are not files but plush, inflatable mascots that hover off their pedestals, blink, and need looking after. The governing conceit: this is not a dashboard, it is a **vivarium for digital idols**. Each managed VTuber is a balloon-skinned creature kept under a glass cloche on a velvet shelf; the "manager" tends them the way a botanist tends terrariums — checking their air pressure (schedule load), their bloom (engagement), their humidity (community sentiment). The whole site has the optical physics of blown vinyl and squeezed silicone: nothing is flat, every surface has a fat highlight rolling across it, edges are over-rounded to the point of comedy, drop shadows are huge and gummy. Tonally this is **playful and energetic but tender** — the energy of a backstage that genuinely loves its performers, not the energy of a hype reel. It deliberately rejects the two default registers of streaming-tool sites: (a) the dark "creator HUD" with neon-cyan terminal graphs, and (b) the corporate-gradient SaaS landing with a laptop mockup. Instead the mood is closer to a **claymation idol anime opening sequence** crossed with a **late-90s inflatable furniture showroom** — Y2K-futurism's optimism, but executed in 2026 soft-3D rendering rather than chrome bevels. Warmth comes not from the over-used amber palette but from **pillowy candy pastels lit by a single warm key light**, so the screen feels like a sunlit nursery for celebrities. The implied user is an agency caretaker who is half producer, half zookeeper, and who finds the whole business of managing imaginary people both absurd and dear. ## Layout Motifs and Structure The organizing structure is **layered-depth as a literal diorama**, not as parallax velocity tricks. The page is one continuous scroll, but the visitor reads *through a series of glass display shelves* — each scene is a shallow box (call it a "vitrine"), perhaps 90vh tall, with a clearly defined back wall, floor plane, and front glass, and the managed-idol "objects" float in the gap. Scrolling does not slide flat panels past each other; it walks the camera **forward into and out of each vitrine** along the Z-axis, so a creature that was a distant blob on the back wall swells toward the viewer, gets a rim of bloom, and then is left behind as the next vitrine's floor tilts up into frame. Within each vitrine the composition is **off-center and gravity-light**: content blobs (rounded-rectangle "pods" with no straight edges, corner radius ≥ 32px and asymmetric per-corner) sit at rest on invisible cushions, tilted 2–6°, casting shadows that don't quite line up with their position — the shadow is offset toward a single fixed sun in the upper-left of the whole document, so as you scroll the shadows all swing consistently, reinforcing one coherent light. There is **no card-grid** and **no bento mosaic**; pods are placed by hand in loose constellations of 3–5, connected by thin elastic "tethers" (SVG paths) that go taut and slack as the layout breathes. Navigation is a **floating pill that inflates** — at the top it's a slim capsule; on scroll it puffs slightly and the active section's label balloons. There is no hero with a CTA stack: the opening vitrine is the **"Greenroom Roster"** — a row of cloches, each containing one demo idol gently bobbing, breathing (scale 1.0↔1.02 over ~3.4s), occasionally blinking. The closing vitrine is the **"Shelf at Night"** — the same roster, lights dimmed to a single nightlight glow, creatures asleep, a soft snore particle drifting up — which is the site's emotional resolution, not a sign-up wall. Between them: vitrines for *Scheduling* (a hovering calendar that's a soft cube you can mentally rotate), *Community Pulse* (a single breathing orb whose surface mottles with sentiment), *Collab Bookings* (two cloches whose tethers braid together), *Brand Kit Vault* (a plush safe with a squishy dial). ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Fredoka** (variable, weight 300–700) — the **playful-rounded display and UI voice**. Every heading, every nav label, every pod title. Set the H1 ("A greenroom for your virtual idols") at clamp(44px, 6.4vw, 116px), weight 600, letter-spacing -0.01em, with the descenders and bowls so round the text itself reads as inflated. On load, animate the weight axis 380→600 over 1100ms so the headline visibly *puffs up*. - **Quicksand** (weight 400/500/600) — the **body and longform voice**, a rounded humanist sans that sits quietly under Fredoka without competing; used for paragraph copy, captions, the little caretaker's-notes that hang off pods like luggage tags. ~18px base, line-height 1.7, generous. - **Space Mono** (weight 400, used sparingly) — the **instrument-label voice**: timestamps on the schedule cube, the air-pressure / humidity numeric readouts on each idol's status tag, version strings in the Brand Kit Vault. Tracked +0.04em, always small (12–13px), always lowercased. This is the only "tech" texture allowed, and it's deliberately tiny — a label on a toy, not a terminal. **Palette — pillowy candy pastels under one warm key light. Hex values:** - `#FFF6FB` — *Nursery White*: the base "air" of every vitrine, very slightly warm-pink, never pure white. - `#FFD7E8` — *Bubblegum Cloche*: the dominant soft pink, glass tints, pod fills at rest. - `#C9E4FF` — *Sky Helium*: secondary cool pastel, used for shadows-in-light and the schedule cube. - `#FFE9A8` — *Key-Light Honey*: the warm sun color — every highlight, bloom, and rim light is tinted with this, the single source of warmth. - `#B6E8C9` — *Mint Velvet*: shelf surfaces and the "healthy / good pressure" status state. - `#7C5CFF` — *Idol Violet*: the one saturated accent — active states, taut tethers, the headline's puff-shadow; used at <8% of any viewport. - `#3A2E4D` — *Backstage Plum*: the near-black for type and the "Shelf at Night" dim — a deep dusty violet, never #000. Gradients are allowed but must be **soft radial blooms** (a honey-tinted highlight smeared across a pink pod), never the linear corner-to-corner SaaS gradient. High contrast is forbidden — the whole thing should feel like it's lit through a paper lantern. ## Imagery and Motifs **Three motif families, all "inflated-3d / soft-body":** **1. Cloches & Creatures (the load-bearing imagery).** Every managed-idol stand-in is a **balloon-skinned blob under a glass dome**. The creatures are abstract — no faces drawn, just a body, two dot-eyes that blink, and an implied volume — rendered with CSS/SVG: a big radial highlight (Key-Light Honey), a fat soft shadow puddled beneath, a subtle squash-and-stretch idle. The glass cloche is a translucent pink half-capsule with a single curved specular streak and a tiny knob on top. State is shown by the creature's *behavior*: a healthy idol bobs serenely; an overbooked one vibrates slightly and the cloche fogs at the base; an asleep one is flattened with a `Z` particle. **No photography anywhere** — photography appears in 98% of designs; this site has zero. **2. Tethers & Cushions.** Thin elastic SVG curves connect related pods (an idol to its schedule, two collabing idols to each other). They obey spring physics — pull a pod (drag, or scroll-jostle) and the tether overshoots and settles. "Cushions" are the invisible-then-visible pads things rest on: when you hover a pod it presses into its cushion, which bulges out the sides with a `morph` of the cushion's clip-path. **3. Status Tags ("luggage tags").** Each idol/pod carries a small rounded tag on a short string — Space Mono numerics for air-pressure (schedule density), humidity (sentiment), bloom (reach). The tags swing on their strings with the page's motion (a damped pendulum), so the whole site has a gentle dangling life to it. Decorative atmosphere: faint floating dust motes lit by the key light (very few, slow), occasional soap-bubble drifting through a vitrine and popping with a tiny `ripple`. Background of each vitrine: a smooth back wall with one enormous diffuse honey glow in the upper-left and a soft horizon line where wall meets shelf. ## Prompts for Implementation Build vtubermanager.com as **one HTML document, one CSS file, one ES module**. No framework, no router, no SPA shell. No "above-the-fold" CTA stack, no pricing tiers, no three-up feature grid, no stat-counter band, no testimonial carousel, no laptop-in-a-mockup hero. The page is a **walkthrough of a greenroom**, narrative-first; the "features" are scenes you visit, not bullet points. **Storytelling is the spine.** The visitor arrives in the lit Greenroom Roster (idols bobbing under cloches), then the camera dollies forward through Scheduling → Community Pulse → Collab Bookings → Brand Kit Vault, each a self-contained vitrine that demonstrates one capability *as a physical scene the user manipulates lightly* (rotate the schedule cube with a drag, poke the sentiment orb to see it mottle, braid two tethers), and finally lands in the Shelf at Night where the same roster sleeps under one warm nightlight — the resolution beat. If a contact/start link is needed it's a small inflatable "leave a note" tag on the night shelf, not a section. **Motion principles (prefer the rare patterns; avoid the over-used):** - Everything springs. Use spring/elastic easing for all transforms — pods settling, nav puffing, tethers overshooting, tags swinging. No linear, no ease-in-out. - Idle life: creatures breathe (scale 1↔1.02, ~3.4s), blink (random 4–9s), tags pendulum, dust drifts. The page is never fully still even with no input. - Scroll = camera Z-dolly between vitrines, not parallax-layer translation. Each vitrine scales/translates in Z; the new floor plane tilts up into frame. - `morph` on hover (cushions bulge, pods squish), `ripple` on bubble-pops and pokes, `path-draw`/elastic on tethers, `tilt-3d` only on the schedule cube. Deliberately AVOID cursor-follow comet trails (89% of designs), AVOID typewriter-effect, AVOID counter-animate stat numbers, AVOID magnetic buttons. - `prefers-reduced-motion`: freeze breathing/blinking/dust to a single static frame, keep tag positions, disable Z-dolly (snap between vitrines). **Rendering notes:** soft-body look comes entirely from CSS — multiple stacked `box-shadow`s (one large diffuse honey-tinted, one tight contact shadow), radial-gradient pseudo-element highlights, asymmetric `border-radius`, slight `rotate`. Glass cloches: `backdrop-filter: blur()` lightly + a pink overlay + one `clip-path` specular streak. Keep DOM modest; creatures and tethers are SVG. One coherent light source at the document's upper-left governs every shadow direction — never let a shadow point the "wrong" way. ## Uniqueness Notes 1. **Inflated-3d soft-body as the entire visual system, not an accent.** "inflated-3d" registers at ~1% in frequency analysis — among the rarest aesthetics — and where it appears it's usually one bouncy button. Here every surface is blown vinyl / squeezed silicone; the whole site is a toy world. No other CMassC site commits to this end-to-end. 2. **The "vivarium for digital idols" conceit.** Managed VTubers rendered as faceless balloon creatures under glass cloches on velvet shelves, with status shown by *behavior* (bobbing, vibrating, sleeping) rather than by charts — a streaming-tool site with literally zero dashboard graphs, zero neon HUD, zero terminal aesthetic. 3. **Candy-pastel under a single warm key light, rejecting the registry's defaults.** Frequency shows `warm` palettes at 98% (almost always amber/terracotta) and `photography` imagery at 98%. This design uses pillowy pinks/blues/mint with warmth supplied *only* by one honey-tinted sun — and uses zero photography, replacing it with soft-3D blobs. 4. **Scroll as a camera Z-dolly through dioramas**, not parallax-layer translation and not a card-grid (card-grid 93%, full-bleed 84%) — the layout is hand-placed pod constellations inside shallow glass vitrines. 5. **Avoided over-used patterns explicitly:** no cursor-follow trail (89%), no typewriter-effect (17%), no counter-animate (18%), no magnetic buttons (77%), no stat-grid / pricing / CTA-stack. Chosen seed/style: **inflated-3d soft-body + y2k-futurism optimism ("holographic 3d product" / "y2k chrome metallic" reframed as plush rather than chrome)**, with playful-rounded typography (Fredoka/Quicksand) — a combination not present elsewhere in the registry.