Cas 06 · Identité de marque
Une marque qui
s’efface.
L’identité de Veltrix, notre plateforme de contenu : un V en dégradé qui se pose sur n’importe quel fond, une seule couleur d’accent pour l’administration et un système de design dont le mode sombre redéfinit le rôle de chaque couleur — parce que les sites bâtis sur Veltrix portent la marque de leurs propriétaires, pas la nôtre.
- 01 // Rôle
- Identité · Système de design · Outils de marque
- 02 // Livrable
- Logo, jetons et script de marque
- 03 // Année
- 2026
- 04 // En usage
- L’admin, la connexion et l’installateur
A Le mandat
La marque d’un CMS a un rôle délicat : chaque site bâti avec lui appartient à quelqu’un d’autre. Veltrix avait besoin d’une identité assez forte pour habiter l’administration — et assez disciplinée pour rester complètement hors des sites publics.
A.2 Ce qu’il devait faire
- 01Un seul logo qui fonctionne sur tout fond, clair ou sombre
- 02Une administration identique, peu importe la marque du site
- 03Un mode sombre qui reste lisible, pas simplement inversé
- 04Un changement de logo qui se résume à remplacer un fichier, pas à fouiller chaque écran
B · La trousse
Des règles qui se livrent.
Le système de design de l’administration, en direct dans ses propres jetons et sa police. Chaque règle est née d’un vrai défaut — essayez de les enfreindre, puis passez l’administration en mode sombre.
Veltrix · Système de design01 · Inter, casse de phrase
Publiez votre première page
Les pages restent en brouillon jusqu’à leur publication.
Inter pour tout; la chasse fixe du système pour le code. Rien n’est qualifié de « simplement » ni de « juste ».
Conforme à la marque02 · Les boutons disent ce qu’ils font
Un seul accent pour les actions principales, la navigation active et le focus. Au survol, il passe à brand-strong — le même dans les deux thèmes.
03 · Le mode sombre redéfinit le sens
Dans l’admin sombre, brand-700 devient un bleu pâle pour le texte. Garder sa valeur claire laissait l’élément actif à 1,96:1.
04 · Un seul traitement du focus
Un contour de marque de 2px, décalé de 2px, défini une seule fois — aucun composant ne le remplace. L’astérisque obligatoire reste hors de l’étiquette.
Conforme à la marqueC · Système d’identité
De l’idée à l’identité.
Le V sur sa grille de construction, son dégradé et la typographie. Ses lignes de séparation sont transparentes : un seul logo se pose sur n’importe quel fond — choisissez-en un pour le voir.
Couleur
Typographie
Aa Titre
Aa Texte — Inter
Aa Code — chasse fixe du système
D · Les règles
Six règles, sans exception.
- 01Un seul accent
- Le bleu de marque sert aux actions principales, à la navigation active et au focus — et à rien d’autre dans l’administration.
- 02Le mode sombre redéfinit le sens
- Les jetons s’inversent dans l’administration sombre : une couleur de texte reste une couleur de texte. Le contraste est testé dans les deux thèmes.
- 03Un seul traitement du focus
- Un contour de 2 px aux couleurs de la marque avec un décalage de 2 px, défini une fois. Aucun composant ne le remplace.
- 04Majuscule initiale, mots simples
- Les boutons disent ce qu’ils font. Les erreurs disent ce qui s’est passé et quoi faire ensuite. Rien n’est « simplement » ou « juste ».
- 05L’admin est à nous, le site est à eux
- Aucun thème ne porte le logo et aucun pied de page public ne dit sur quoi tourne le site.
- 06Des couleurs en oklch
- La luminosité reste perceptuellement égale d’une teinte à l’autre : danger et succès ont le même poids visuel.
E · Ingénierie
Comment c’est bâti.
- 01
Deux fichiers, une commande
Les deux logotypes du designer entrent; pnpm brand produit le logo, les deux logotypes pour fonds clairs et sombres, les icônes et leurs tailles.
- 02
Il refuse un mauvais résultat
Le script mesure chaque logotype par rapport au fond sur lequel il se pose et refuse d’en produire un qui serait illisible.
- 03
Les tailles sont vérifiées
Aucun composant ne fixe de proportions; pnpm check échoue si les tailles consignées et les images ne concordent pas.
- 04
WebP, pas PNG
Le dégradé pèse un demi-mégaoctet en PNG et un vingtième de cela en WebP, transparence intacte.
Pile technologique
F · Impact
En chiffres.
- 1
- Accent dans l’administration
- 2
- Fichiers sources pour chaque élément de marque
- 8
- Éléments produits par une seule commande
- 0
- Logos sur les sites que les gens bâtissent