Guide de marque

À quoi ressemble Motionbar
quand rien ne presse.

Le système réel, pas une planche d’ambiance. Chaque valeur ici correspond aux fichiers maîtres — cinq versions du logo, quatre déclinaisons de couleur et une géométrie de barres qu’on ne redessine jamais à la main.

SVG · PNG · JPG · AISlogan : Dynamic Workflow SuiteTypographie : Sora + Instrument Serif

Les versions du logo

Cinq versions couvrent tous les emplacements. Choisissez selon l’espace dont vous disposez, pas selon vos préférences : si le nom doit être lisible, prenez une version qui le contient; s’il ne peut pas l’être, utilisez le symbole seul.

Principale

La signature complète — symbole, logotype et slogan. En-tête du site, présentations, papier à en-tête, partout où la marque se présente.

2400 × 720 · 10:3

Horizontale

La même version, sans le slogan. Interface de l’application, barres de navigation, signatures de courriel, pieds de page de partenaires.

2400 × 600 · 4:1

Verticale

Le symbole au-dessus du nom, pour les espaces étroits ou carrés — barres latérales, produits dérivés, colonnes imprimées.

square-ish

Logotype

Le nom seul. À utiliser quand le symbole apparaît déjà à proximité, ou dans une rangée de logotypes de partenaires.

large

Symbole

Le symbole seul. Avatars, favicons, tuiles d’application, états de chargement, filigranes en coin.

1024 × 1024 · 1:1

Déclinaisons de couleur

Quatre par version. C’est l’arrière-plan qui décide, et seulement l’arrière-plan.

Sombre

Barres en couleur, logotype blanc. Sur Ink et tout fond sombre. Le choix par défaut du site.

Clair

Barres en couleur, logotype noir. Sur Bone, le blanc et tout fond clair.

Blanc, monochrome

Une seule encre. Photographie, superpositions vidéo, broderie, impression une couleur.

Noir, monochrome

Une seule encre, inversée. Papier journal, tampons, gravure laser, documents à télécopier.

Géométrie du symbole

Quatre barres en pilule et un point. Les barres sont entièrement arrondies — le rayon vaut toujours la moitié de la largeur de la barre, jamais une valeur fixe. Les hauteurs, l’entraxe et le point sont verrouillés; mettez tout le symbole à l’échelle, jamais une seule de ses parties.

hauteurs des barres65 / 100 / 71 / 46 %largeur des barres20 % · rayon 10 %entraxe30.6 % · écart 10.6 %rayon du point4.7 % · diamètre 9.4 %décalage du point11.8 % de la barre 4

Hauteurs des barres65 / 100 / 71 / 46 pour cent de la hauteur du symbole. La deuxième barre est toujours la plus haute.

Largeur des barres20 % de la hauteur du symbole, identique pour les quatre. Le rayon vaut la moitié de la largeur : les extrémités sont donc de vrais demi-cercles.

EntraxeLes centres sont espacés de 30,6 % de la hauteur du symbole, ce qui laisse un écart de 10,6 %. L’écart ne se referme jamais pour faire de la place au texte.

Point d’accentRayon de 4,7 % de la hauteur du symbole — 9,4 % de diamètre —, en Gold à 90 % d’opacité, sur le tiers inférieur de la quatrième barre. C’est la traîne du son qui s’éteint, pas une cinquième barre.

DégradésChaque barre porte son propre dégradé vertical, plus clair en haut. Les aplats sont réservés aux déclinaisons monochromes.

Ne jamais redessinerUtilisez le SVG. Reconstruire le symbole avec des boîtes CSS fait perdre les extrémités arrondies et les dégradés.

Mauvais usages

On les a tous déjà vus en circulation. Le SVG maître les évite tous.

×Ne recolorez pas les barres. Les quatre dégradés sont fixes.

×N’étirez pas, n’inclinez pas et ne faites pas pivoter le symbole.

×Ne rendez pas carrées les extrémités des barres.

×Ne changez pas l’ordre des barres et ne retirez pas le point d’accent.

×N’ajoutez ni lueur, ni ombre, ni contour, ni biseau.

×Ne placez pas le symbole sur une photo chargée ou aux tons moyens.

Motionbar

×Ne composez pas le logotype dans une autre police ni tout en majuscules.

par

2026

×N’encombrez pas le logo et n’y accrochez pas de texte.

Couleur

Chaque barre a son propre dégradé; l’interface en reprend la teinte du haut comme jeton uni. Ember est la seule couleur autorisée à crier, et elle apparaît sur environ un élément par écran. Gold signifie argent et crédits. Stone, c’est le texte secondaire. Ink et Bone portent tout le reste.

Ember

Action principale. Première barre.

var(--ember) → #e64a19 oklch(64% 0.21 39)

Ember clair

Deuxième barre, le sommet. Survol et mise en évidence.

#ff7a3d → #f4511e oklch(71% 0.18 42)

Gold

Crédits, facturation, premium. Troisième barre et le point.

var(--gold) → #dda15e oklch(83% 0.08 71)

Stone

Texte secondaire, états inactifs. Quatrième barre.

var(--mute) → #797871 oklch(67% 0.01 95)

Ink

Fond de page, et tuile d’icône en #09090b.

var(--ink) oklch(14.5% 0 0)

Bone

Texte principal et surfaces claires.

var(--cream) oklch(95% 0.017 90)

Gris du slogan

Slogan seulement, déclinaison claire.

#71717a oklch(54% 0.02 286)

Voile Ember

Fonds des bannières d’accueil et des CTA seulement.

two radial gradients over var(--panel-warm)

Borduresrgba(cream,.10) hairlines. .14 on inputs, .20 on secondary buttons.

ContrasteBody text sits at 4.5:1 minimum. Never set stone below 13px on ink.

ProportionsEnviron 70 % Ink, 22 % Bone, 5 % Stone, et 3 % Ember et Gold combinés.

Mintvar(--mint) signals verified and operational in the interface. It is not a brand colour and never appears in the logo.

Typographie

Sora fait le travail. L’italique d’Instrument Serif apparaît au plus une fois par page, sur un seul mot dans un titre, et jamais sous 32px.

AffichageClonez une fois64/1.02, 600, -0.035em

TitreQuatre salles, un jumeau40/1.08, 600, -0.03em

SectionCe que ça coûte24/1.2, 600, -0.02em

CorpsTrois photos et deux secondes d’audio font un jumeau.15/1.7, 400

Libellé d’interfaceGénérer13/1.4, 500-600

MicroCRÉDITS11/1.4, 600, 0.12em caps

Serif d’accentvidéoInstrument Serif italique 400

Voix

Motionbar parle comme un pro compétent qui a fait ça mille fois et que ça n’impressionne plus. Phrases courtes. Noms concrets. Une blague pince-sans-rire qui mérite sa place, jamais deux de suite.

Précis plutôt que grandioseDites « rendu en 0:52 », pas « ultrarapide ».

Des verbes, pas des adjectifsLe jumeau parle, vend, livre. Il n’est pas « révolutionnaire ».

Honnête sur la machineC’est de la vidéo générée. Nous le disons, dans le texte comme dans le fichier.

Pas de vocabulaire tape-à-l’œilPas de « libérez », « propulsez », « qui change la donne », « fluide ».

Pas de points d’exclamationUn par année, et mieux vaut que ce soit pour s’excuser d’une panne.

NOUS ÉCRIVONS

Clonez une fois. Tournez sans fin.Vos quarante prochaines vidéos sont déjà inscrites sur votre visage.Les rendus échoués sont remboursés automatiquement.Vous ne pouvez cloner qu’un visage que vous avez le droit de cloner.

NOUS N’ÉCRIVONS PAS

Libérez la puissance de la vidéo IA!Révolutionner la création de contenu, une vidéo à la fois.Votre solution tout-en-un et fluide pour les créateurs modernes.Bienvenue dans l’avenir de la narration.

Icônes, réseaux sociaux et courriel

Le symbole sur la tuile Ink, rien d’autre. Le logotype n’apparaît jamais dans une icône.

FAVICON

favicon.svg + .ico
16 · 32 · 48 · 96 · 512

ICÔNE D’APPLICATION

1024², carrée et arrondie
apple-touch 180 · chrome 192 / 512

AVATAR

symbole à 52 % du cercle
fichier maître 400 × 400

Carte Open Graph

1200 × 630, sombre et clair. Chaque page en a une — sans elle, un aperçu de lien semble brisé.

FORMATS DISPONIBLES

Avatar de profil400 × 400En-tête X1500 × 500Bannière LinkedIn1584 × 396Couverture Facebook851 × 315Bannière YouTube2560 × 1440Open Graph1200 × 630

Utilisez le SVG.
Ne redessinez jamais le symbole.

SVG · PNG · JPG · AI, pour chaque version du logo et chaque déclinaison de couleur. Demandes des médias : press@motionbar.ai.

Télécharger la trousse →Contact médias

À quoi ressemble Motionbarquand rien ne presse.