Plateforme de ressources
SVG, WEBP, code HTML autonome, signature texte ou métadonnées : choisissez un style de badge pour obtenir les ressources des 5 labels, téléchargez le kit complet ou générez vos balises meta prêtes à l’emploi
Optimisez votre intégration avec nos actifs officiels
Bienvenue sur la plateforme de ressources TCP/UP. Au-delà des actifs graphiques, vous y trouverez un générateur de métadonnées pour intégrer vos labels directement dans votre code HTML. Que ce soit pour une interface web ou un support de communication, vous trouverez ici le badge adapté à votre design, incluant pour les versions HTML un lien sécurisé vers la page du label concerné afin d'offrir une réassurance immédiate à vos utilisateurs.
Guide d'utilisation
Les métadonnées
Le générateur de métadonnées permet de générer automatiquement les balises adaptées au contenu que vous souhaitez labelliser (éditorial, code, visuel, etc.), à insérer directement dans le code HTML de votre page.
Les labels visuels
Le générateur de label permet de générer automatiquement les badges visuels, et pour garantir une cohérence visuelle parfaite sur tous les supports, nous mettons à votre disposition les 4 modes d'intégration suivants :
- Format SVG : Idéal pour le web et les documents haute résolution. Il offre une netteté parfaite quelle que soit la taille et un poids de fichier minimal
- Format WEBP : Un format d'image ultra-optimisé pour les performances web, offrant un excellent compromis entre qualité et rapidité de chargement
- Code HTML autonome : La solution la plus rapide pour les développeurs. Copiez et collez le code directement dans votre projet. Le style est intégré ("inline") et inclut un lien vers le label concerné, ce qui signifie qu'aucune feuille de style CSS externe n'est requise pour l'affichage correct du badge
- Version texte pur : Conçue pour la simplicité et l'accessibilité universelle. Ce format est idéal pour les réseaux sociaux (LinkedIn, X), les descriptions YouTube ou les environnements n'autorisant pas le HTML. Il permet de déclarer votre label de manière claire et lisible par les humains comme par les algorithmes sans aucun fichier image
Les 7 variantes de couleur
Retrouvez les 5 labels (HUC, HCA, HCE, ACE, AIC) déclinés chacun dans leurs 7 variantes de couleurs pour s'adapter à toutes vos interfaces (Standard, Contraste marqué, Print, Dark Mode et Transparences).
Couleur (_co)
Noir & Couleur (_bc)
Blanc & Noir (_wb)
Noir & Blanc (_bw)
Transparent Couleur (_tr_co)
Transparent Blanc (_tr_wh)
Transparent Noir (_tr_bl)
Télécharger le kit complet
Ce kit ZIP complet constitue la boîte à outils officielle pour l'intégration de la déclaration TCP/UP. Il contient l'intégralité des ressources graphiques nécessaires à une signalétique claire et professionnelle de vos contenus :
- 35 badges de label : Les 5 labels (HUC, HCA, HCE, ACE, AIC) déclinés chacun dans leurs 7 variantes de couleurs
- Formats multi-supports : Chaque badge est disponible en format SVG (vectoriel pour une qualité infinie) et WEBP (optimisé pour le web)
- Ressources complémentaires : Le kit inclut également les icônes et logos officiels de la charte pour vos menus et pieds de page
- Aide à l'intégration : Un répertoire code_html est fourni avec un fichier récapitulatif contenant tous les codes d'intégration prêts à l'emploi
Note : Cette version 1.0 se concentre sur les ressources graphiques et le code. Le guide d'utilisation officiel ainsi que la charte graphique complète au format PDF sont en cours de finalisation et seront intégrés lors d'une prochaine mise à jour.
Générateur de métadonnées
Créez vos balises meta dans le respect de la logique Fond/Forme et des 5 labels TCP/UP.
- Ajoutez un ou plusieurs contenus à l’aide du bouton Ajouter un contenu
- Pour chaque contenu, choisissez une clé de contenu (editorial, visual, code, etc.) et un label TCP/UP (HUC, HCA, HCE, ACE, AIC)
- Les métadonnées sont générées en direct selon la nomenclature fixe :
content-origin(Fond),form-origin(Forme) etai-role - Cliquez sur Copier pour enregistrer le code dans le presse‑papier, puis insérez‑le entre les balises
<head>et</head>de votre page
Code généré
Copiez le code et insérez-le entre les balises <head> et </head> de votre page.
Générateur de badges (SVG, WEBP, text et code html autonome
Choisissez un style de badge et obtenez instantanément les ressources pour les 5 labels.