Le logo
Le logo associe un symbole (une main qui claque des doigts, avec trois éclats de mouvement) et un wordmark en bas-de-casse aux terminaisons arrondies. Le claquement de doigts dit le geste simple ; les éclats disent ce qu'il déclenche. C'est exactement la promesse de la baseline.
Laquelle utiliser ?
- Avec baseline, pour le premier contact : page d'accueil, couverture de document, signature de campagne, kakémono. La baseline doit rester lisible ; en dessous de 40 mm de large, passez à la version sans baseline.
- Sans baseline, pour l'usage courant : en-tête de site, pied de page, présentations, documents internes, tout support où la marque est déjà identifiée.
- Symbole seul, pour les espaces carrés et petites tailles : favicon, avatar, icône d'application, tampon.
Déclinaisons
Quatre traitements de fond et quatre mises en forme couvrent tous les cas. Choisissez toujours la version la plus riche que le support autorise ; ne recréez jamais une variante à la main, toutes sont livrées dans logo/.
Zone de protection et tailles minimales
Réservez autour du logo une marge égale au quart de sa hauteur. Aucun texte, filet, image ou bord de page n'entre dans cette zone.
Tailles minimales
En dessous de ces valeurs, le trait se referme et les éclats disparaissent.
Ce qu'il ne faut pas faire
Ne pas déformer
Le logo se redimensionne toujours proportionnellement. Jamais d'étirement, de compression ni de rotation.
Ne pas recolorer
Uniquement les couleurs de la charte. Pas de dégradé, pas de couleur d'appoint dans le logo.
Ne pas séparer les éléments
Le symbole et le wordmark gardent leur position et leur écart relatifs. Utilisez les fichiers fournis.
Ne pas poser sur un fond chargé
Sur photo, placez le logo sur une zone calme ou sur un aplat crème / bleu.
Ne pas ajouter d'effets
Pas d'ombre portée, de contour, de biseau ni de reflet.
À faire
Partir des SVG livrés, respecter la zone de protection, choisir la version adaptée au fond.
Couleurs
Trois couleurs viennent directement du logo. Elles suffisent à porter la marque ; les nuances ci-dessous n'existent que pour les besoins d'interface.
Nuances d'interface
Onze pas par famille, la couleur de marque occupant le pas indiqué. À réserver aux interfaces : états, bordures, fonds.
Couleurs de statut
Pour les messages d'interface. Chaque statut a un ton texte qui passe le niveau AA sur crème, et un fond clair associé.
| Statut | Texte | Fond | Aplat | Contraste texte/crème |
|---|---|---|---|---|
| Succès | #417359 | #E0EDE6 | #4E8A6B | 4,51 AA |
| Attention | #8A5D1B | #F4E3C9 | #D99A3C | 4,70 AA |
| Erreur | #A94B37 | #F5E4E0 | #C0553F | 4,60 AA |
| Information | #3F6C8C | #DFE9F1 | #4A7FA5 | 4,61 AA |
Contrastes
Rapports mesurés selon WCAG 2.1. Seuils : 4,5 pour le texte courant, 3,0 pour le grand texte et les éléments d'interface.
| Association | Rapport | Verdict |
|---|---|---|
| Bleu sur crème | 7,84 | AAA |
| Bleu sur blanc | 9,56 | AAA |
| Crème sur bleu | 7,84 | AAA |
| Blanc sur bleu | 9,56 | AAA |
| Vert sur bleu | 4,47 | Grand texte / UI |
| Vert sur crème | 1,75 | Jamais en texte |
| Vert 700 sur crème | 4,59 | AA |
La règle à retenir
Le vert Déclic ne sert jamais à écrire sur fond crème : 1,75 pour 4,5 requis. Il reste une couleur de forme : éclats, filets, pastilles, aplats. Pour du texte vert, utilisez le vert 700 #48705D.
Typographie
Le wordmark est un dessin retravaillé à partir de la police Chopin, puis vectorisé : il ne doit jamais être recomposé au clavier, et son tracé ne s'obtient pas en tapant « clicjo » dans cette fonte. Pour les textes, il faut une famille qui prolonge son esprit : géométrique, ouverte, aux terminaisons douces.
Licence de la police du logotype
Le PDF de présentation de la designer embarque une version d'essai de Chopin (Chopin-TrialVFRoman), dans un sous-ensemble réduit aux six lettres de « Clicjo ». La comparaison des tracés confirme la parenté : le « o » du wordmark se superpose presque exactement à celui de la fonte, le « c » en partage le squelette avec des terminaisons redessinées, et le « j » à longue queue est un ajout propre au logo.
Ce que cela implique. Les fichiers de logo, eux, ne contiennent aucune police : tout est vectorisé, rien n'est à installer pour afficher ou imprimer la marque. En revanche, composer un titre ou un support dans Chopin exige d'en acquérir la licence au préalable : une version d'essai ne couvre pas l'usage commercial. Tant que la licence n'est pas achetée, s'en tenir strictement aux familles ci-dessous. La confirmation de la fonte exacte a été demandée à la designer.
Où l'acheter. Chopin est éditée par Fontfabric (fontfabric.com), sortie en 2024, 18 styles plus deux fontes variables. La famille complète en licence bureau coûte de l'ordre de 130 $ HT au premier palier (1 à 5 postes), une graisse seule environ 25 à 35 $ HT. Une licence web séparée est nécessaire pour l'intégrer à un site.
Baloo 2 · Nunito · Quicksand
Familles arrondies, libres de droits, disponibles sur Google Fonts. Elles reprennent la rondeur du wordmark sans chercher à l'imiter. Graisses 600–700, interlettrage légèrement resserré.
Inter · Source Sans 3
Linéales neutres et très lisibles en petit corps, y compris sur les longs documents réglementaires. Graisses 400–600.
Règles d'application
- Une seule famille de titre et une seule de texte par support.
- Le corps de texte ne descend pas sous 14 px à l'écran, ni 9 pt à l'impression.
- Les intertitres se composent en bleu Clicjo, jamais en vert.
- La baseline « Un clic. Un déclic. » reste une image vectorielle : on ne la retape pas.
Illustrations
Une collection de vingt illustrations couvre les sujets récurrents de Clicjo, du premier déclic à la réussite collective. Elles sont conçues pour illustrer un propos en présentation, une section de site ou un article.
Le style en cinq règles
- Vectoriel plat, sans dégradé ni volume, avec un léger grain de papier.
- Personnages stylisés aux membres allongés et aux mains expressives, visages réduits à l'essentiel.
- Palette fermée : bleu, vert vif
#73C28B, crème, plus l'ambre#E9A12Cen appoint. La peau des personnages reste crème papier. Aucune autre couleur. - Fond crème et vide généreux autour du sujet, composition centrée.
- Aucun texte dans l'image : la légende reste dans la mise en page.
Le ton : pince-sans-rire
Le genre entier — l'illustration corporate — met en scène l'effort héroïque : le trophée brandi, la flèche qu'on gravit, les bras en V. Clicjo prend le contre-pied par le calme. La situation déraille d'un cran ; le personnage ne bronche pas. C'est de là que vient l'humour, et il dit la promesse : « Un clic. Un déclic. »
- La tête ne rit jamais. Yeux-points et demi-sourire, sans exception. Ni bouche ouverte, ni sourcils levés, ni goutte de sueur. Dès que le personnage trouve la scène drôle, le lecteur cesse de la trouver drôle.
- Une seule anomalie par image. Le pince-sans-rire meurt de l'accumulation : un élément décale, tout le reste est dessiné avec le même sérieux.
- L'anomalie porte sur l'échelle, le nombre ou le moment, jamais sur le trait. Pas de déformation, pas de grimace.
- Le personnage n'est jamais le dindon. Il reste compétent et posé : nous parlons à des professionnels de la formation, se moquer de l'apprenant serait une faute.
- Le décalage ne s'annonce jamais. Les vingt illustrations en portent un, mais aucune ne le signale : chacune se lit d'abord comme une illustration ordinaire, et ne livre son anomalie qu'à la deuxième lecture.
Fichiers livrés
Tous les logos dérivent directement du fichier Illustrator livré par la designer, conservé dans source/. Les tracés y sont repris à l'identique, sans aucun recalcul de coordonnées : ce ne sont ni des captures d'image, ni des reconstructions. Ils restent nets à toute taille.
Chaque dossier porte son propre README.md : ce qu'il contient, quel script le produit, ce qu'il ne faut pas y faire. Le commutateur -Web du dernier script décide de tout : avec lui les illustrations passent en WebP 1000 px pour l'hébergement, sans lui elles restent en PNG 2048 px pour une remise directe.
Régénérer les fichiers
Tout ce qui se trouve dans logo/, favicon/, print/, social/ et kit-partenaires/ est produit par script à partir de source/. En cas de doute sur un fichier, il suffit de le régénérer plutôt que de le retoucher à la main :
powershell, et non pwsh : les scripts demandent Windows PowerShell 5.1.
Pour les développeurs
Le fichier clicjo-tokens.css déclare toute la palette en variables CSS, avec un thème sombre déjà défini :