Brand guidelinesCharte graphique
What makes VTrix look like VTrix.Ce qui fait que VTrix ressemble à VTrix.
The name, the logo, the colors, the type, the glass, the motion and the voice. For anyone making something with or about VTrix: a video, an article, an overlay, a partnership, a fan art.Le nom, le logo, les couleurs, les lettres, le verre, le mouvement et la voix. Pour toute personne qui fabrique quelque chose avec ou autour de VTrix : une vidéo, un article, un habillage, un partenariat, un fan art.
01 · The nameLe nom
VTrix, the VTuber app built for streamingVTrix, l’appli VTuber pensée pour le stream
Live2D Cubism 5.3, PNGTuber, webcam and iPhone tracking, and your whole stage sent to OBS as a single source.Live2D Cubism 5.3, PNGTuber, tracking webcam et iPhone, et toute ta scène envoyée à OBS en une seule source.
✓Write itOn écrit
- VTrix : capital V, capital T, the rest lowercase. : V et T en majuscules, le reste en minuscules.
- Website: vtrix.live · on X: @VTrixLiveSite : vtrix.live · sur X : @VTrixLive
✕NeverJamais
- Vtrix · VTRIX · V-Trix · vTrix
- “VTrix” always stays one word, never split or hyphenated.« VTrix » reste toujours un seul mot, jamais coupé ni avec un trait d’union.
02 · Logo
A V, a T, and they become an XUn V, un T, qui deviennent un X
VTrix is V for VTuber and Trix for the tricks you pull off live. The symbol tells it in two gestures.VTrix, c’est V comme VTuber et Trix comme les tours que tu joues en live. Le symbole le raconte en deux gestes.
- V
The V is painted in one brush stroke, from deep violet to VTrix blue: the hand of the artists who draw and rig our avatars.Le V est peint d’un seul coup de pinceau, du violet profond au bleu de VTrix : la main des artistes qui dessinent et riggent nos avatars.
- T
The T of Trix crosses it. Two strokes meet where the avatar, the stage and the audience come together.Le T de Trix vient le croiser. Deux traits qui se rencontrent, là où l’avatar, la scène et le public se retrouvent.
- X
Crossed, they become an X: the solid mark the brush rests on. Simple enough for a 16-pixel icon, alive enough for a stream.Croisés, ils deviennent un X : la forme pleine sur laquelle se pose le pinceau. Assez simple pour une icône de 16 pixels, assez vivant pour un stream.
✓DoÀ faire
- The white version on dark backgrounds, the black one on light backgrounds.La version blanche sur fond sombre, la noire sur fond clair.
- Give it room to breathe, and keep it big enough to stay legible.Lui laisser de l’air, et le garder assez grand pour rester lisible.
- Use the original files: 6250 px PNG, SVG for the symbol.Prendre les fichiers d’origine : PNG de 6250 px, SVG pour le symbole.
✕Don’tÀ éviter
- Recolor, stretch, rotate or crop it.Le recolorer, le déformer, le tourner ou le rogner.
- Separate the V from the X.Séparer le V du X.
- Add a shadow, an outline, a glow or any effect.Lui ajouter une ombre, un contour, un halo ou un effet.
- Use the brush’s violet anywhere else: it only lives in the logo.Reprendre le violet du pinceau ailleurs : il n’existe que dans le logo.
03 · ColorsCouleurs
Calm is the rule, color is the exceptionLe calme est la règle, la couleur est l’exception
Each color means something. Blue is what you control, pink is what goes out to your audience, red is what’s wrong. Everything else is grey.Chaque couleur veut dire quelque chose. Le bleu, c’est ce que tu contrôles, le rose ce qui part vers ton public, le rouge ce qui ne va pas. Tout le reste est gris.
The brand, the logo, the main action. One solid blue button per place, with white text.La marque, le logo, l’action principale. Un seul bouton bleu plein par endroit, texte blanc.
Blue text or icons on dark backgrounds.Texte ou icône bleus sur fond sombre.
What goes live, your voice, what’s new. Rare: it shows up, then fades.Ce qui part en live, ta voix, ce qui est nouveau. Rare : il apparaît, puis s’efface.
Only when something is wrong, always with what to do.Seulement quand quelque chose ne va pas, toujours avec quoi faire.
The lit center of the studio background.Le centre éclairé du fond de studio.
The body of the background.Le corps du fond.
Edges, and the base of every visual.Les bords, et la base de chaque visuel.
Then #bcc5d4 for secondary text, #8a95a8 for quiet text.Puis #bcc5d4 pour le texte secondaire, #8a95a8 pour le texte discret.
04 · The NightLa Nuit
A studio background, made for any avatarUn fond de studio, fait pour tous les avatars
Lighter in the center, darker on the edges, with a faint floor reflection: whatever their colors, avatars stand out on it. It’s the background of the app, the site and every visual.Plus clair au centre, assombri sur les bords, avec un léger reflet de sol : quelles que soient leurs couleurs, les avatars s’y détachent. C’est le fond de l’appli, du site et de chaque visuel.
background:
radial-gradient(60% 70% at 50% 46%,
#2f4a6e, transparent 72%),
radial-gradient(120% 90% at 50% 100%,
rgb(120 180 255 / 9%), transparent 60%),
linear-gradient(180deg, #1b2a42, #0d1424);The Night is the default. In the app, streamers can pick another theme, always in the blue family.La Nuit est le fond par défaut. Dans l’appli, on peut choisir un autre thème, toujours dans la famille du bleu.
05 · TypeLes lettres
Two typefaces, two weightsDeux polices, deux graisses
Both are free (SIL Open Font License). Capitals come from the style, never from typing in caps.Toutes deux libres (SIL Open Font License). Les capitales viennent du style, jamais du texte tapé en majuscules.
Sora · 400 / 500
Text, buttons, titles. Friendly and geometric, like a game menu.Texte, boutons, titres. Ronde et géométrique, comme un menu de jeu. Google Fonts ↗
JetBrains Mono · 400
Values, shortcuts, codes and overlines (spaced capitals, .18em).Valeurs, raccourcis, codes et surtitres (capitales espacées, .18em). Google Fonts ↗
06 · Glass and motionLe verre et le mouvement
The avatar is the starLa star, c’est l’avatar
The interface sits on top of the stage like a game HUD, in frosted glass. At rest, there’s nothing but the avatar on its background.L’interface se pose sur la scène comme le HUD d’un jeu, en verre dépoli. Au repos, il n’y a rien d’autre que l’avatar sur son fond.
- AmbienceAmbianceOnly the avatar breathes. The interface never moves on its own.Seul l’avatar respire. L’interface ne bouge jamais toute seule.
- Reaction · 0.4 to 1.4 sRéaction · 0,4 à 1,4 sAn action goes live, an update is ready: a brief burst that slows down at the end, often pink.Une action part en live, une mise à jour est prête : un éclat bref qui ralentit à la fin, souvent rose.
- Gesture · 120 to 250 msGeste · 120 à 250 msHover in 120 to 150 ms, a panel fades in with 6 px of lift in 250 ms.Survol en 120 à 150 ms, un panneau apparaît en fondu avec 6 px de montée en 250 ms.
- ShapesFormesPills for the dock and chips, 16 px corners for panels, a 4 px grid for everything.Pilules pour le dock et les puces, coins de 16 px pour les panneaux, une grille de 4 px pour tout.
07 · VoiceLa voix
A streamer building their own toolUn streamer qui fabrique son outil
Short, concrete sentences, starting from a live moment every streamer knows. Honest about what exists and what doesn’t yet. A friend of VTube Studio, never against it. Artists first: VTrix never touches a model’s files.Des phrases courtes et concrètes, qui partent d’un moment de live que tout streamer connaît. Honnête sur ce qui existe et ce qui n’existe pas encore. Ami de VTube Studio, jamais contre lui. Les artistes d’abord : VTrix ne touche jamais aux fichiers d’un modèle.
“The raid drops, your avatar keeps smiling. Your whole stage goes to OBS as one source.”« Le raid tombe, ton avatar sourit toujours. Toute ta scène part dans OBS en une seule source. »
“The revolutionary all-in-one VTubing solution.”« La solution VTubing tout-en-un révolutionnaire. »