Marque & assets
guide partenaires
Ce que raconte Clicjo, les fichiers que nous mettons à votre disposition, et la façon de les utiliser sans se tromper.
CHAPITRE 01
La marque
Ce que Clicjo raconte, et la façon dont elle se montre.
- La promesse et la baseline
- Le logo et ses versions
- Les couleurs et la règle de contraste
- La typographie
La marque · 02
« Un clic. Un déclic. »
Deux temps dans une seule phrase : le geste, puis ce qu'il déclenche. Le premier est minuscule, le second change quelque chose.
Le logo dit exactement la même chose : une main qui claque des doigts, et trois éclats de mouvement. Le claquement, c'est le clic ; les éclats, c'est le déclic. Rien à expliquer.
- La baseline est une image vectorielle : on ne la retape jamais au clavier.
- Elle accompagne le logo lors du premier contact : couverture, page d'accueil, kakémono.
- En dessous de 40 mm de large, elle devient illisible : passez à la version sans baseline.
La marque · 03
Le logo, élément par élément
1
2
3
4
Les éclats
Trois traits verts. Ils disent le déclic. Seul élément vert du logo.
Le symbole
Une main qui claque des doigts, en trait bleu ouvert. Utilisable seul.
Le wordmark
Bas-de-casse, terminaisons arrondies, retravaillé puis vectorisé. Il ne se recompose jamais au clavier.
La baseline
Logée sous le wordmark. Présente uniquement sur la version principale.
La marque · 04
Trois versions, trois usages
Choisissez toujours la version la plus riche que le support autorise.
Avec baseline
Premier contact : page d'accueil, couverture de document, signature de campagne, kakémono.
≥ 40 mm de large
Sans baseline
Usage courant : en-tête de site, pied de page, présentations, documents internes, partout où la marque est déjà identifiée.
Version par défautSymbole seul
Espaces carrés et petites tailles : favicon, avatar de réseau social, icône d'application, tampon.
Format carréLa marque · 05
Une déclinaison par type de fond
Six fichiers couvrent tous les cas. Ne recréez jamais une variante à la main.
Sur crème (référence)clicjo-logo-on-cream.svg
Sur blancclicjo-logo.svg
Sur bleu (logo crème)clicjo-logo-on-navy.svg
Monochromegravure, tampon, une seule encre
Symbole seulclicjo-symbol.svg
Wordmark + baselinequand le symbole est déjà présent
CHAPITRE 02
Les assets
Ce que nous mettons à votre disposition, et ce que vous n'avez donc pas à produire.
- 59 fichiers de logo, 10 favicons
- 20 illustrations, 16 pictogrammes
- Les gabarits d'impression et les tokens de couleur
- Un kit médias sociaux et l'animation du logo
- Tokens de design et fichiers d'impression
Les assets · 02
Logos, favicons et icônes d'application
| Dossier | Contenu | Pour quoi |
|---|---|---|
| 2-logo/svg/*.svg | 45 vecteurs | Web, print, tout support redimensionnable |
| 2-logo/png/*-800w.png | Raster léger | Signature mail, bureautique |
| 2-logo/png/*-1600w.png | Raster HD | Diaporama, écran haute densité |
| 2-logo/png/*-3200w.png | Raster XL | Grand format, secours si le SVG est refusé |
| 2-logo/svg/*-sprite.svg | Sprite | Intégration web par <use> |
| 2-logo/favicon/ | 10 fichiers | Onglet, favori, écran d'accueil mobile, PWA |
| 5-reseaux-sociaux/ | 15 SVG + 16 PNG | Profils, bannières, posts, stories, signature |
| 7-animation/ | 6 MP4 | Animation du logo : 16:9, 9:16, fond vert, chacun en deux versions |
Règle simple : SVG partout où c'est accepté. Le PNG n'est qu'un secours, et jamais en dessous de sa taille d'export.
favicon 32 (affiché ×2)
icône 192
arrondie 512
maskable
Monochrome crème : gravure, marquage à chaud, sérigraphie une couleur
Les assets · 03
Vingt illustrations, du premier déclic à la réussite
Fichiers carrés en 2K, nommés par thème. Le genre illustre l'effort héroïque ; nous prenons le contre-pied par le calme — la situation déraille d'un cran, le personnage ne bronche pas.
01 déclic
02 apprendre
03 progression
04 certification
05 équipe
06 accompagnement
07 audit
08 parcours
09 objectif
10 pilotage
11 récompense
12 démarrage13 catalogue
14 partenariat
15 temps
16 croissance
17 communauté
18 support
19 plateforme
20 célébrationLes assets · 04
Une planche de pictogrammes
16 pictogrammes, une planche unique
Les thèmes récurrents : trophée, certificat, cible, manette, parcours, poignée de main. La planche couvre 16 sujets dans un traitement homogène : utilisez-la telle quelle, sans redessiner ni recolorer les pictogrammes.
Un pictogramme se détoure depuis la planche. Les sujets ne sont pas livrés en fichiers séparés : découpez celui dont vous avez besoin, sans le redessiner.
CHAPITRE 03
Les usages
Quatre repères suffisent pour ne jamais se tromper de fichier.
- Choisir le bon fichier
- Respecter la zone de protection
- Tenir les tailles minimales
- Éviter les cinq erreurs classiques
Les usages · 02
Zone de protection et tailles minimales
x = ¼ de la hauteur du logo
Réservez autour du logo une marge égale au quart de sa hauteur.
Aucun texte, filet, image ni bord de page n'entre dans cette zone. C'est ce vide qui rend le logo lisible quand il cohabite avec d'autres éléments.
Tailles minimales
En dessous de ces valeurs, le trait se referme et les éclats disparaissent.
Écran
120 px
de large
Impression
25 mm
de large
Symbole seul
24 px / 8 mm
de large
Le gabarit 6-impression/zone-de-protection.svg est fourni : transmettez-le tel quel à votre graphiste.
Les usages · 03
Les cinq erreurs à éviter
Chacune détruit une propriété du logo. Aucune n'est rattrapable après impression.
✕Déformer
Redimensionnement toujours proportionnel. Jamais d'étirement ni de compression.
✕Faire pivoter
Le logo reste horizontal, y compris sur les supports verticaux.
✕Recolorer
Uniquement les couleurs de la charte. Pas de dégradé, pas d'ocre dans le logo.
✕Séparer
Symbole et wordmark gardent leur position et leur écart. Partez du fichier fourni.
✕Fond chargé
Sur un fond chargé, posez le logo sur une zone calme ou sur un aplat crème ou bleu.
✓À faire
Partir des SVG livrés, respecter la zone de protection, choisir la version adaptée au fond.
Sixième erreur, plus discrète : les effets. Pas d'ombre portée, pas de contour, pas de biseau, pas de reflet : le logo est déjà dessiné pour tenir seul.
CHAPITRE 04
En pratique
Le passage à l'acte, support par support.
- Intégration web et tokens de design
- Bureautique, impression, réseaux sociaux
- Associer votre logo au nôtre
- La checklist avant publication
- Le kit en ligne, sur marque.clicjo.fr
En pratique · 03
Associer votre logo au nôtre
Ces règles découlent de la zone de protection. Tout cas qu'elles ne couvrent pas se valide avec l'équipe Clicjo avant diffusion.
votre logo
Séparateur : filet fin, hauteur du plus grand des deux logos, espacement égal de part et d'autre.
- Hauteurs optiques équivalentes : on égalise ce que l'œil perçoit, pas les boîtes englobantes.
- Un filet vertical fin sépare les deux marques, avec au minimum la zone de protection de chaque côté.
- Fond neutre : crème, blanc ou bleu Clicjo uni. Jamais de photo ni de motif derrière un couple de logos.
- Un seul niveau d'association : deux marques, pas cinq. Au-delà, alignez les logos sur une ligne de partenaires distincte.
Ce qui n'est pas permis : fusionner les deux marques en un signe unique, intégrer votre nom dans notre wordmark, ou modifier le symbole pour l'assortir à votre charte.
Un clic.
Un déclic.
Merci, et bonne diffusion.