Bonnes pratiques des ressources de marque White Label

White Label Lite propose des champs distincts pour le logo clair, le logo sombre, le favicon, la couleur principale et la couleur d'accentuation. Ce guide vous aide à préparer un kit de marque clair, à utiliser les fichiers acceptés par le formulaire et à tester le résultat avant de le montrer aux clients.

Importer les logos

Deux logos peuvent être importés : un logo clair pour les fonds clairs et un logo sombre pour les fonds sombres. Importez les deux si vous les possédez, puis vérifiez dans l'aperçu Branding que chacun reste lisible dans son thème.

Types de fichiers acceptés :

• PNG : meilleur choix pour la transparence. Recommandé dans la plupart des cas.
• JPG / JPEG : convient aux logos sur fond uni, sans prise en charge de la transparence.
• SVG : pas encore accepté, car nous travaillons sur un rendu sûr des scripts intégrés.

Taille maximale : 1 MB par importation. Si votre fichier est plus grand, compressez-le avec TinyPNG ou pngquant. Les logos se compressent généralement sous 50 KB sans perte de qualité visible.

Taille source recommandée : utilisez une source nette de résolution raisonnablement élevée, et non une minuscule icône. Un logo carré ou presque carré est un bon point de départ. Un logotype plus large convient aussi s'il reste lisible dans l'aperçu.

Fonds :

• Un PNG transparent est vivement recommandé. Le fond du tableau de bord et le bandeau d'en-tête des e-mails de marque ne sont pas forcément d'un blanc pur. Un fond coloré aux bords nets sur votre logo donnera un mauvais résultat.
• Pour un monogramme ou une icône, la transparence assure une intégration propre sur tout fond.
• Si le logo comporte un fond coloré fixe, harmonisez-le avec la couleur principale ou d'accentuation du tableau de bord.

Favicon

Le favicon dispose de sa propre importation distincte et n'est pas automatiquement dérivé du logo. Utilisez une icône carrée simple au format PNG, JPG ou ICO, jusqu'à 1 MB. Un monogramme ou symbole fonctionne généralement mieux qu'un logotype complet à la taille d'un onglet de navigateur.

Gardez le favicon carré. Utilisez les champs de logo clair et sombre, et non le favicon, pour votre logotype complet.

Choisir les couleurs

Les deux champs de couleur sont :

• Couleur principale : couleur dominante des boutons, liens et états actifs.
• Couleur d'accentuation : couleur secondaire pour les éléments mis en valeur.

Saisissez des couleurs hexadécimales, par exemple #3b82f6. Utilisez l'aperçu en direct pour voir le résultat avant d'enregistrer.

Choisir la couleur principale

La couleur principale est celle que les visiteurs voient le plus. Gardez trois points à l'esprit :

• Testez-la sur des fonds clairs et sombres. Le tableau de bord prend en charge les deux thèmes. Une couleur qui ressort sur le blanc peut disparaître sur un fond sombre.
• Gardez les couleurs d'état reconnaissables. Évitez une couleur principale trop proche de celle des avertissements, réussites ou actions destructrices. Un bleu, violet, bleu-vert, anthracite ou autre ton de marque distinct est généralement plus lisible.
• Les tons unis moyennement saturés sont préférables au presque blanc ou presque noir. Faites le test du bouton : la couleur ressortirait-elle comme bouton sur un fond blanc ? Si la réponse est « à peine », elle est trop pâle.

Choisir la couleur d'accentuation

La couleur d'accentuation est secondaire. Elle doit :

• Se distinguer visiblement de la couleur principale, sans choisir deux tons presque bleus
• Compléter la couleur principale sans lui faire concurrence
• Rester claire lorsqu'elle est placée à côté de la couleur principale

Une association efficace consiste à choisir comme couleur principale un ton de marque profond et saturé, et comme accentuation un ton complémentaire plus clair. Exemple : principale #2563eb (indigo-600), accentuation #10b981 (emerald-500).

Contraste et accessibilité

L'interface peut afficher du texte clair sur votre couleur principale. Choisissez une nuance qui préserve la lisibilité des libellés de boutons. Un pastel très pâle peut sembler joli dans un échantillon, mais manquer de contraste sur un vrai bouton.

Un outil tel que le vérificateur de contraste WebAIM permet de contrôler la combinaison du texte et du fond. Utilisez l'aperçu pour la vérification finale, car l'interface environnante influe également sur la perception d'une couleur.

Couleurs presque toujours efficaces : bleu profond, violet profond, anthracite, bleu-vert foncé, bordeaux profond. Couleurs souvent problématiques : pastels clairs, gris moyen, jaune moyen, néon.

Nom affiché

Le nom affiché apparaît dans le tableau de bord et le webmail de marque, ainsi que sur les surfaces d'e-mails compatibles. Trois modèles fonctionnent bien :

• « E-mail VotreMarque » : indique clairement qu'il s'agit du service d'e-mail. Professionnel et adapté aux revendeurs.
• « VotreMarque » : uniquement le nom de marque. Plus épuré, idéal si l'e-mail fait partie d'une gamme de produits plus vaste.
• « Tableau de bord VotreMarque » : met l'accent sur l'interface. Utile pour distinguer plusieurs produits de marque.

Gardez-le assez court pour être reconnu au premier coup d'œil. Vérifiez l'aperçu sur un écran étroit et dans les deux thèmes au lieu de vous fier à une règle de nombre de caractères.

Le nom affiché apparaît dans :

• La navigation du tableau de bord et du webmail
• La connexion de marque et les titres du navigateur
• Les surfaces d'e-mails transactionnels compatibles

Avant d'enregistrer

Avant de cliquer sur Save changes, vérifiez que les fichiers font moins de 1 MB, que les logos clair et sombre sont lisibles dans leur aperçu, que le favicon est une icône carrée simple, que la couleur principale offre un contraste lisible et que le nom affiché est naturel comme nom d'expéditeur.

Après l'enregistrement, ouvrez l'hôte de marque actif dans une fenêtre privée. Vous éviterez ainsi de confondre une image ou un favicon en cache avec la version actuelle.

Processus simple de préparation des ressources

1. Partez des fichiers de logo originaux, et non d'une capture d'écran ou d'un fichier copié depuis un site web.
2. Exportez une version lisible sur fond clair et une autre sur fond sombre.
3. Créez un favicon carré distinct à partir de la partie la plus reconnaissable de la marque.
4. Ajoutez le nom et les couleurs dans Branding, puis comparez les aperçus d'e-mail et de webmail.
5. Enregistrez, testez l'hôte actif sur un téléphone et un navigateur de bureau, puis conservez les sources à un endroit où l'équipe pourra les actualiser.

Mettre à jour ultérieurement

Vous pouvez mettre à jour les ressources de marque plus tard sans remplacer l'enregistrement DNS d'un hôte de marque existant. Revérifiez toujours l'hôte actif après un changement visuel.

Si vous importez la mauvaise ressource ou choisissez une couleur illisible, corrigez-la dans Branding et enregistrez à nouveau. Tenez compte du cache normal du navigateur lors de la vérification du remplacement.

Automatiser avec l'API et MCP

Si votre intégration possède les autorisations nécessaires, l'API REST ou MCP peut gérer les paramètres et ressources de marque. Les mêmes types de fichiers et la limite de 1 MB s'appliquent. Utilisez le tableau de bord et l'aperçu pour la vérification visuelle finale.

Consultez le Guide de l'API et de MCP pour le Branding White Label pour connaître les opérations disponibles.

Situations fréquentes

« Mon logo est net dans la barre latérale, mais flou sur mon téléphone. » Importez une source plus nette et de plus haute résolution, enregistrez-la et testez l'hôte de marque actif sur le téléphone. Ne vous fiez pas uniquement à l'aperçu d'un navigateur de bureau.

« Ma couleur principale convient au tableau de bord, mais le texte des boutons est difficile à lire. » Choisissez une nuance plus sombre ou plus saturée, puis vérifiez-la dans l'aperçu et sur l'hôte actif.

« Mon logo a un fond coloré qui ne correspond pas au tableau de bord. » Exportez une version PNG transparente si le logo le permet. Comparez les versions claire et sombre sur leurs fonds prévus.

« Puis-je utiliser un logo différent dans les e-mails et le tableau de bord ? » Utilisez les variantes claire et sombre fournies par Branding. Testez l'aperçu des e-mails compatibles et les surfaces actives de vos clients avant de promettre un rendu.

« Et le mode sombre ? » Le tableau de bord prend en charge les thèmes clair et sombre, et vous importez un logo distinct pour chacun. Le logo clair s'affiche sur les fonds clairs et le sombre sur les fonds sombres. Vous pouvez donc utiliser une version sombre sur fond clair et une version blanche ou claire sur fond sombre, toutes deux lisibles.

« Puis-je importer un favicon séparément du logo ? » Oui. Le favicon dispose de son propre champ (PNG, JPG ou ICO, maximum 1 MB) et n'est pas dérivé du logo. Importez une icône simple et distinctive pour l'onglet du navigateur.

Et maintenant ?

• Configurer White Label Lite : activation et configuration DNS.
• Ce qui reste associé à la marque TrekMail : ce que vos clients pourraient encore voir de TrekMail.
• FAQ sur les tarifs de White Label Lite : questions de facturation et de devise.
• Guide de l'API et de MCP pour le Branding White Label : importez les logos et configurez la marque par REST ou MCP.