Des gestes exagérés, une surprise, une lettre qui s’échappe. L’humour vient des situations et du dessin.
01 / NOTRE INTENTION DIRECTION RETENUE
On change
la donne.✦
Un club créatif où les idées prennent forme.
Du design graphique, des sites et un petit esprit
qui donne du volume aux mots.
MAGIE TOON × LETTRES SCULPTÉESVIOLET. ACIDULÉ. ATTACHANT.
LE FIL CONDUCTEUR
Une idée mérite
du caractère.
Une silhouette qui se reconnaît, des contrastes francs et des lettres qui ont une présence physique.
La fantaisie repose sur des compositions précises. Chaque forme sert la lecture, chaque détail a sa place.
02 / LE SIGNE LE SYSTÈME DU LOGO
Une idée.
Prend forme.
Les lettres deviennent des objets : une face claire, une profondeur violette, une arête citron qui attrape la lumière. Le nom prend corps avant même de parler de notre métier.
HOCUS, l’élan.
Le nom évoque le geste du magicien. Sa traduction graphique est concrète : des lettres épaisses, des faces planes et une perspective légèrement mouvante. Garder leurs proportions et leur dessin d’origine.
CLUB, le lien.
La ligne stable sous les lettres donne un point d’appui. Le Club désigne un atelier où l’on construit avec le client : une intention partagée, des choix expliqués, une création que l’on peut s’approprier.
Un signe pour les petits espaces.
Son chapeau, notre repère.
Une pointe tordue, un large bord violet et un liseré citron : le personnage reste présent sans afficher tout son visage. Le chapeau remplace le H simplifié comme icône. Le logo sculpté reste la signature des couvertures.
Chapeau transparent · PNG ↓16 · 32 · 48 px à taille réelleLes repères à respecter.
Laisser respirer.
Réserver autour du logo une marge au moins égale à la hauteur de la ligne CLUB. Aucun texte, bord ou illustration dans cet espace.
CLUB doit rester lisible.
Repère de départ : 160 px de large sur écran, 35 mm en impression. En dessous, privilégier le chapeau. Vérifier le résultat à taille réelle selon le support.
Une zone calme.
Version claire sur blanc ou citron ; version sombre sur aubergine, noir ou violet. Sur une image, choisir une zone unie. Ne pas recolorer toutes les lettres ni ajouter de halo.
Le logo signe.
Sur les couvertures et compositions, utiliser le vrai logo. « Studio créatif » reste une mention séparée. Dans une phrase, un email ou une légende, écrire simplement Hocus Club.
À CONSERVER
Faces crème · tranches violettes · touches citron · CLUB centré · fichier transparent.
À ÉVITER
Étirer, incliner ou rogner le bloc · refaire le nom avec une police · détailler la favicon comme une illustration · filtrer le logo en blanc.
L’étincelle citron est un signe d’accompagnement. Le chapeau assure l’identification dans les onglets. Pour une impression en une seule encre, préparer une adaptation dédiée ; ces fichiers couleur ne sont pas une version monochrome.
03 / LA PALETTE
Du violet.
Du piquant.
Le violet installe l’univers. Le citron le réveille.
L’abricot donne sa chaleur à Hocus.
La couleur a un rôle
Crème pour les grandes respirations et les faces des lettres. Aubergine pour le texte et les ombres. Violet pour la présence. Citron pour les accents. Abricot pour le personnage et les touches chaleureuses.
Le bon dosage
Commencer avec crème, aubergine et violet. Ajouter le citron là où le regard doit s’arrêter. Réserver l’abricot à une présence choisie : pas cinq couleurs à parts égales.
Valeurs numériques de travail retenues pour cette direction. Une épreuve sera nécessaire avant de fixer des équivalences imprimées.
04 / LE LANGAGE GRAPHIQUE
Des lettres
qui existent.
L’alphabet sculpté
Les lettres deviennent des objets : on peut les soulever, s’y asseoir et les faire tourner. Faces crème, profondeur violette, petites facettes et reflets citron.
Une construction cohérente
Dans une même scène, conserver la direction de lumière, la matière et l’épaisseur relative. Les perspectives peuvent varier dans l’illustration ; le logo doit rester facile à lire.
✦↗∿
Éclats pointus, courbes tendues et trajectoires : des accents pour accompagner le mouvement. Ils ne doivent pas remplir tous les espaces.
Typographie d’accompagnement
Pour les grands titres : une sans-serif très condensée, grasse et inclinée, dans l’énergie de « On change la donne ». Pour les textes : une sans-serif sobre et lisible.
Statut des fontes
La paire de référence est Barlow Condensed ExtraBold Italic pour les titres et DM Sans pour les textes. Les fichiers, graisses et licences sont disponibles au chapitre 15. Les lettres des images générées ne sont pas une fonte installable.
L’ALPHABET / A → Z
26 lettres.
Un même sort.
Un alphabet d’illustration pour composer des mots qui prennent du volume.
Télécharger la planche A–Z ↓
Des capitales géométriques épaisses. Le H est construit avec des montants francs ; O, C et U partagent une rondeur simple ; les diagonales gardent des arêtes nettes.
Face crème plane, tranche violette profonde, facettes discrètes. Le citron souligne quelques arêtes, sans entourer systématiquement chaque lettre.
Un éclairage principal cohérent, venant du haut à gauche. Préserver la même profondeur et la même logique d’ombre au sein d’une composition.
POUR QUOI ?COMMENT ?
Un titre court
Un à trois mots, une ligne de lecture claire. Garder de l’air entre les volumes et accompagner d’un sous-titre à plat.
Une initiale
Une grande lettre comme sujet d’une affiche, couverture de projet ou image éditoriale.
Un accessoire de Hocus
Le O devient passage ou siège ; le H, construction ; le S, trajectoire. Le personnage agit sur la lettre.
Une composition de marque
Associer quelques lettres et une seule action. Les rotations restent modérées pour préserver la reconnaissance.
À CONSERVER
Lisibilité des contreformes · épaisseur constante · dessin sans empattements · contraste des faces · une seule matière par scène.
À ÉVITER
Texte courant en 3D · effet gonflé · perspectives contradictoires · lettres serrées au point de se masquer · mélange avec une autre police sculptée.
Cette planche est une référence raster de l’alphabet, pas une police installable. Pour un réemploi précis lettre par lettre, prévoir des exports détourés, puis une reconstruction vectorielle ou 3D cohérente. Les chiffres, signes et capitales accentuées sont présentés ci-dessous. Les fichiers individuels détourés restent à préparer.
L’EXTENSION / CHIFFRES & SIGNES
Compter.
Ponctuer. Accentuer.
Le même vocabulaire sculpté, étendu aux chiffres et aux signes pour composer en français.
Télécharger les chiffres et signes ↓
0 1 2 3 4 5 6 7 8 9
, . ! ? ; : … - — / ( ) & @ #
Télécharger les accents et ligatures ↓
À Â Ä Ç É È Ê Ë Î Ï Ô Ö Ù Û Ü Ÿ
Æ Œ « »
Pour des numéros de chapitres, dates ou étapes. Garder des chiffres de même hauteur, sur une ligne stable. Distinguer le 0 du O dans les compositions qui les mélangent.
Elle peut devenir le sujet d’une illustration. Dans un titre, conserver sa taille et sa place de signe : la profondeur ne doit pas masquer le point du ! ou du ?.
Les capitales gardent leurs accents. Réserver de l’espace au-dessus des lettres, préserver la cédille sous le Ç et donner aux diacritiques la même lumière que la lettre.
LE SIGNESON RÔLE DANS L’UNIVERS
?
Une question à explorer. Hocus l’inspecte, le retourne ou s’y accroche.
!
Le moment de la découverte. Un seul signe fort accompagne la révélation.
( )
Un espace qui accueille une idée, un détail ou le personnage.
&
La rencontre : deux idées ou deux personnes qui créent ensemble.
…
Une idée en cours. Hocus avance de point en point.
Ces planches étendent la bibliothèque visuelle ; elles ne constituent pas une fonte installable. Restent notamment à ajouter : apostrophe, +, =, %, €, puis minuscules si un usage concret le demande. Avant export final, contrôler chaque accent, contreforme et perspective.
05 / LE PERSONNAGE
Voici
Hocus.
Le sculpteur de lettres.
Malicieux. Enthousiaste.
Un tout petit peu frimeur.
- SA SILHOUETTE
- Tête abricot étoilée, immense chapeau courbé, cape et bottes pointues.
- SON COSTUME
- Violet profond, bordures citron et grands gants blancs expressifs.
- SON REGARD
- Des yeux ouverts, une malice accueillante. Il invite à jouer.
- SON MOUVEMENT
- Des poses Toon élastiques, une main vers le public, l’autre occupée à fabriquer.
La carte est une mise en situation créative inspirée des cartes Yu-Gi-Oh!, pas un support officiel de Hocus Club à diffuser tel quel. Le personnage original et sa direction sont les références à conserver.
06 / SON HISTOIRE
Né dans
une marge.
Dans un atelier, un carnet recueillait les dessins abandonnés : lettres bancales, logos inachevés, personnages griffonnés dans les marges.
Une nuit, une petite étoile dessinée à côté d’un H s’est réveillée. Elle s’est fabriqué un chapeau avec une page du carnet, une cape avec une tache d’encre violette et s’est appelée Hocus, d’après le premier mot qu’elle a trouvé.
Depuis, il fouille les carnets à la recherche d’idées qui méritent une seconde chance.
« Attends,
j’ai une
idée. »
01 / Sculpter les lettres +
Il les décolle du papier et leur donne du volume. Un O devient un portail, un H une échelle, un S un toboggan.
02 / Animer les dessins +
Un croquis peut marcher, rebondir et s’étirer pendant quelques instants. Ses créations vivent tant qu’on les imagine.
03 / Retoucher la matière +
Ses gants lui permettent de tirer une courbe, de plier une ombre et de repeindre un objet d’un geste.
04 / Garder les trouvailles +
Son chapeau contient des fragments de lettres et des idées récupérées. Il en sort rarement ce qu’il cherchait du premier coup.
05 / Ses petites limites +
Il lui faut un point de départ : un mot, un trait, une intention. Quand il veut tout embellir à la fois, ses lettres s’entrechoquent. Il doit apprendre à choisir.
La même histoire, à chaque échelle.
Le récit public
Hocus Club donne forme aux idées. Nous dessinons des identités, des sites et des documents avec du caractère, puis préparons tout ce qu’il faut pour les faire vivre.
Le rôle d’Hocus
Hocus est le magicien des idées en devenir. Curieux, chaleureux et un peu impatient, il révèle ce qui attend dans un croquis. Il accompagne le travail du studio et invite le client à découvrir sa création.
Du récit aux formes +
Les lettres sculptées sont ses idées devenues tangibles. Les grandes courbes de fond sont des fragments de ces lettres, vus de près. Le grain évoque la matière travaillée. Les étincelles marquent une trouvaille ; elles restent brèves. Chaque effet découle de ce même atelier.
Du personnage au parcours +
À l’atelier, Hocus ouvre le dossier des pistes. Pendant la mise au point, les compositions parlent. À la remise, il présente la création prête à être utilisée. Une apparition principale suffit : son geste sert le moment.
Ce qu’il ne fait pas +
Il ne crée pas sans intention, ne décide pas à la place du client et ne promet pas de miracle. Sa magie donne une forme visible aux idées. L’écoute, les essais et le soin apporté aux détails appartiennent au travail réel du studio.
07 / NOTRE VOIX
De la malice.
Du concret.
Une voix chaleureuse, directe et sûre de son métier.
La magie est une touche de personnalité, pas une formule à répéter partout.
« Donnons du caractère à votre idée. »
Une promesse claire et liée au travail.
« Attends, j’ai une idée. »
Un clin d’œil ponctuel à Hocus.
« Identité visuelle et sites web. »
Une signature qui dit ce que fait le studio.
LA BONNE ÉNERGIE
Phrases courtes. Verbes concrets. Humour léger. Confiance et proximité.
LE CURSEUR À SURVEILLER
Pas de ton infantile, de menace maléfique ni de jargon magique qui rend l’offre difficile à comprendre.
08 / LE SYSTÈME D’ILLUSTRATION EXPLORATIONS À AFFINER
Un personnage.
Plusieurs rôles.
Tenue de référence : Hocus porte un short bouffant violet opaque, taille haute, sous sa tunique, avec un fin liseré citron. Il couvre les hanches, l’entrejambe et les cuisses jusqu’à mi-cuisse, dans toutes les poses et les versions mini.
Hocus reste le même d’une image à l’autre. Ce sont son action, son expression et ses accessoires qui changent.
UN NOM COURT + UN TITREHocus,
Hocus,
le Magicien des Possibles.
Proposition de titre à valider. « Hocus » reste son prénom et le nom employé dans les textes courants. « Le sculpteur de lettres » décrit son pouvoir signature.
Pourquoi « des Possibles » ?
Il transforme une idée en quelque chose que l’on peut voir et manipuler. Le titre permet d’étendre ses aventures au-delà de l’alphabet.
Deux autres pistes
« Le Mage des Idées » : plus direct.
« L’Enchanteur de Caractères » : plus typographique et plus singulier.
Le grand jeu.
Pour les affiches, couvertures et grandes compositions : costume détaillé, pose ample, objets sculptés et ombres en aplats. Une scène doit raconter une action compréhensible.
Télécharger les six poses ↓
Petit, mais Hocus.
Une première version complémentaire pour les stickers, les petites signatures et les réactions. On simplifie les détails du costume ; on conserve la silhouette, le visage étoilé et l’attitude.
Télécharger la planche mini ↓
Cette première recherche mini conserve encore de nombreuses facettes. Une version destinée aux très petits formats devra être plus plate et plus épurée.
SIMPLIFIER
Moins de plis, de facettes et d’ornements. Deux ou trois valeurs par couleur. Mains et expression légèrement accentuées.
PRÉSERVER
Pointes de la tête abricot · chapeau violet courbé · bordure citron · gants blancs · regard accueillant. À très petite taille, préférer le visage ou le chapeau.
Bienvenue au club
Hocus salue et ouvre le passage. Une invitation, un début de présentation, une première rencontre.
À l’atelier
Il façonne le H avec ses gants. Pour parler du métier, de la méthode et de la fabrication.
Un autre possible
Il traverse ou chevauche le O. Une exploration, une nouvelle piste, un changement de point de vue.
L’idée se cherche
Il observe son carnet. Un moment de réflexion, sans prétendre que tout vient instantanément.
On démêle
Les lettres s’emmêlent, il ajuste avec humour. Une itération créative, jamais une moquerie envers le client.
Bien joué
Il présente une étoile terminée. Pour célébrer une création ou la fin d’un projet.
La continuité
du personnage.
Les invariants
Une tête non humaine, abricot et étoilée. Un immense chapeau asymétrique violet bordé de citron. Des gants blancs, une cape sombre et des bottes courbes. Une intelligence joyeuse dans le regard.
Les variations autorisées
Pose, orientation, expression, accessoire et niveau de détail. La version mini garde les mêmes proportions relatives des traits du visage, adaptées à sa petite silhouette.
HOCUS EST…
Curieux, joueur, enthousiaste, appliqué, parfois frimeur. Il fabrique et essaie. Il peut être fier sans devenir arrogant.
HOCUS N’EST PAS…
Un sorcier maléfique, un enfant humain, une peluche générique ou un nouveau personnage à chaque illustration. Éviter yeux agressifs et visage noyé dans l’ombre.
Les planches sont des recherches de poses. Avant une grande série, verrouiller un modèle de face, trois-quarts, profil et dos, ainsi qu’une grille d’expressions. Les petites variations entre dessins devront alors être harmonisées.
UNE GRANDE SCÈNE / L’ATELIER DES POSSIBLES
Du « et si ? »
au « voilà ! »
Hocus donne forme à une question. Le point d’interrogation et le point d’exclamation deviennent les objets de son atelier.
Télécharger l’illustration d’atelier ↓
La transformation du signe porte l’histoire. Les autres objets soutiennent ce geste.
Le regard et les gants de Hocus dirigent vers la création. Les éclats citron signalent l’endroit où la magie agit.
Une zone calme laisse une place à un titre. Une grande scène n’oblige pas à remplir toute la surface.
09 / L’IDENTITÉ EN SITUATION HERO VALIDÉE
De la planche
à l’écran.
Cette composition est notre référence pour faire vivre Hocus sur le web : une zone claire pour le message, un univers violet en relief et des lettres qui relient les deux. Elle fixe une direction ; elle ne constitue pas un modèle à répéter sur chaque page.
Explorer en plein écran ↗Aperçu vivant : texte HTML, logo SVG, boutons, étoiles animées et étincelles au pointeur. La mascotte et les volumes du décor restent une illustration commune.
Ce qui est validé
- « Donnons forme à vos idées. » et la précision des trois métiers.
- Le contraste clair / violet, les volumes et le grain fin.
- Hocus habillé, entouré des lettres de son nom.
- Les étoiles indépendantes et les étincelles citron.
Ce que cette référence nous apprend
- La richesse vient de la composition, pas du nombre d’effets.
- Le texte doit rester lisible et indépendant de l’illustration.
- Une lettre peut traverser une séparation sans masquer le message.
- La magie se rattache à notre métier : donner forme, composer, transformer.
10 / LES RÈGLES DE COMPOSITION SOCLE + RECOMMANDATIONS
La même famille.
Des formes libres.
Une idée principale par composition.
Le titre et Hocus se répondent. Un seul message domine ; le sous-titre explique le métier. Éviter deux grands titres de styles différents dans la même scène.
Une zone calme. Une zone expressive.
Le blanc légèrement froid laisse lire. Le violet accueille la profondeur. La séparation peut être droite ou oblique ; quelques lettres la traversent. Garder visage, texte et actions dégagés.
Du relief, sans effet cristal.
Faces claires simples, tranches violettes, contours nets et fines arêtes citron. Le grain donne une matière imprimée. Éviter les facettes sur toute la face, les halos jaunes et les fonds sombres collés autour des images.
Le titre a de l’élan. Le texte respire.
Titres condensés, hauts et inclinés. Les lignes gardent un alignement optique commun. Les textes courants restent droits, ouverts et lisibles. Aucun rapprochement des lettres ne doit fermer leurs contreformes.
Hocus agit dans la composition.
Il soulève, assemble, présente ou observe. Le short violet opaque est obligatoire dans toutes les poses. Préserver la silhouette étoilée, l’abricot du visage et la malice ; éviter les halos qui recolorent le personnage.
Le logo est un fichier de référence.
Utiliser le SVG sculpté, avec CLUB entier sous HOCUS. Conserver ses proportions et sa transparence. Aucun faux logo typographique, recadrage ou étirement. Les anciennes planches restent des documents de recherche.
Télécharger le logo SVG ↓À privilégier
Une grande courbe issue d’une lettre. Un geste lisible de Hocus. Un accent citron. Des contrastes francs. Des superpositions intentionnelles.
À éviter
Des rubans sans lien avec les lettres. Le décor sur chaque surface. La mascotte posée comme un autocollant sans rôle. Une multitude de rotations et d’ombres. Un grand aplat vide pour remplacer la composition.
11 / LE MOUVEMENT PRINCIPES DE DÉPART
Un geste.
Une intention.
Le mouvement prolonge le dessin. Il signale une action, accompagne le regard ou donne de la vie à Hocus. Il ne doit jamais être nécessaire pour comprendre un message.
| Élément | Comportement | Point de départ |
|---|---|---|
| Étoiles du décor | Scintillement doux, rythmes décalés ; motifs du costume fixes. | Boucles de 4 à 6 s |
| Étincelles citron | Suivent la souris ou le doigt, puis disparaissent sans bloquer le défilement. | Environ 650 ms |
| Boutons | Légère réaction au survol et repère visible au clavier. | 150 à 250 ms |
| Illustration | Décalage léger ; garder le texte stable. | Quelques pixels |
| Réduction des mouvements | Une composition fixe complète, sans scintillement ni traînée. | Préférence système respectée |
Ces durées documentent la première application. Elles sont des repères à ajuster, pas une obligation d’animer chaque support.
12 / LA MARQUE AU QUOTIDIEN PROPOSITIONS À AFFINER
Du caractère.
Même sans Hocus.
La magie dans le ton.
« Une idée en tête ? » invite à discuter. « Identité de marque, design web et direction artistique » explique ce que nous faisons. Employer une touche de magie, puis des mots concrets.
La création comme preuve.
Sans portfolio client, présenter des recherches typographiques, des variations de composition et des expériences du studio. Les identifier comme telles. Ne pas inventer de clients, de résultats ou de témoignages.
Trois façons de s’exprimer.
Signature : logo et typographie. Composition : lettres en relief et contrastes. Scène : Hocus, décor et mouvement. Choisir selon le message et l’espace disponible.
Les prochains compléments utiles
13 / LA BIBLIOTHÈQUE
Les références
du club.
Ces images documentent l’intention retenue. Elles ne remplacent pas encore des fichiers de production vectoriels.
0–9↓ÉŒ↓ART↓A–Z↓06↓04↓01↓02↓03↓
Chiffres & ponctuation
10 chiffres et 15 signes sculptés · PNG
Accents & ligatures
Capitales accentuées et guillemets · PNG
L’atelier des Possibles
Grande scène illustrée · PNG
Alphabet sculpté complet
Les 26 capitales · PNG
Situations de Hocus
Six poses illustrées · PNG
Hocus mini
Quatre expressions et poses · PNG
Logo sculpté
Planche source du logo choisi · PNG
Direction Toon
Personnage, palette et lettres · PNG
Carte de personnage
Référence de mise en scène · PNG
Hocus Club · logo sculpté géométrique · violet et citron · chaleur abricot · Hocus Toon étoilé · lettres-objets.
Déclinaisons monochromes · éléments détourés · règles de taille et d’impression. Le SVG, la fiche Hocus et les polices sont disponibles dans ce guide.
14 / LE MODÈLE DE HOCUS FICHE DE RÉFÉRENCE 1.0
Un personnage.
Le même partout.
Cette fiche devient le point de départ des prochaines illustrations. Les vues de face, de profil et de dos servent à conserver sa silhouette et son costume quand la pose change.
Télécharger la fiche ↓Les invariants
- Visage abricot étoilé : les pointes font partie de sa silhouette, ce ne sont pas des cheveux.
- Grand chapeau violet à pointe courbée, bord large et liseré citron.
- Gants blancs expressifs, cape sombre et bottes recourbées.
- Short bouffant violet opaque, taille haute et longueur mi-cuisse. Les hanches et l’entrejambe restent couverts, même en mouvement.
- Expression curieuse, joueuse et bienveillante ; la malice ne devient pas une menace.
La cohérence avant le détail
Comparer chaque nouvelle pose à cette fiche : volume du chapeau, forme du visage, longueur du short et taille des gants. Ne pas ajouter une nouvelle étoile ou un accessoire au costume à chaque génération.
Pour la version mini, simplifier les plis et les détails. Conserver le visage étoilé, le chapeau, les gants et la tenue couvrante.
Référence illustrée, pas modèle 3D ni construction vectorielle. Les vues guident le dessin ; elles ne garantissent pas une géométrie exacte comme un modèle technique.
15 / LES POLICES PAIRE DE RÉFÉRENCE
L’élan du titre.
La clarté du texte.
BARLOW CONDENSED / EXTRA BOLD ITALIC / 800
Donnons forme
à vos idées.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
À Â Ä Ç É È Ê Ë Î Ï Ô Ö Ù Û Ü Ÿ
0123456789 — & ! ?
À Â Ä Ç É È Ê Ë Î Ï Ô Ö Ù Û Ü Ÿ
0123456789 — & ! ?
DM SANS / REGULAR 400 · MEDIUM 500 · BOLD 700
Un peu de magie. Beaucoup de caractère.
Identité de marque, design web et direction artistique. Des mots simples pour expliquer le métier, une voix chaleureuse pour donner envie de discuter.
abcdefghijklmnopqrstuvwxyz · À bientôt !
0123456789 · 09:30 · 100 % · contact
0123456789 · 09:30 · 100 % · contact
| Usage | Police | Règle de départ |
|---|---|---|
| Accroches | Barlow Condensed 800 Italic | 48–112 px, interligne 0,95 à 1,05. Espacement normal ; aucune lettre ne doit toucher sa voisine. |
| Titres secondaires | Barlow Condensed 800 Italic | 32–56 px, interligne 1,05. Rester bref. |
| Paragraphes | DM Sans 400 | 16–20 px, interligne 1,5 à 1,7 ; 45–70 caractères par ligne. |
| Navigation et boutons | DM Sans 500 ou 700 | 14–18 px, casse naturelle ; priorité à la lecture. |
| Repères de chapitre | DM Sans 700 | 12–14 px ; capitales et espacement léger, uniquement pour les libellés courts. |
Le titre n’est pas le logo
Ces fontes servent à écrire. Le logo sculpté reste son propre SVG. L’alphabet illustré sert aux compositions ; il ne remplace pas la police des textes.
Ne pas reproduire automatiquement les déformations d’une image générée. La version native de la police est la référence réutilisable. Les réglages optiques de la hero restent spécifiques à cette composition.
Fichiers & licences
Les deux familles sont distribuées sous SIL Open Font License. Les licences accompagnent les fichiers ; conserver ces notices lors d’une redistribution.
Barlow Condensed 800 Italic ↓
DM Sans variable ↓
Licence Barlow · Licence DM Sans
Sources : Google Fonts — Barlow Condensed et Google Fonts — DM Sans.
16 / SANS LA MASCOTTE DIRECTION VALIDÉE
Hocus Club.
Même quand Hocus
n’est pas là.
Trois applications originales de notre langage graphique. Elles montrent comment les lettres, le contraste et la matière peuvent porter l’identité sans personnage ni projet client fictif.
01 / COUVERTURE
Télécharger la composition ↓Donnons forme aux idées.
Un espace clair pour l’accroche, des volumes violets et des lettres qui franchissent la séparation. À utiliser pour une présentation du studio ou une couverture éditoriale.
02 / ANNONCE
Télécharger la composition ↓Place aux possibles.
Le citron prend le premier rôle, avec une typographie sombre et un fragment sculpté. Une prise de parole courte et énergique, adaptée à une annonce.
03 / EXPERTISE
Télécharger la composition ↓Du signe à l’écran.
Une composition violette plus calme pour parler du métier. Le relief encadre les mots et les trois expertises restent clairement identifiées.
Ces compositions sont des références raster de direction artistique. Pour des supports éditables, reconstruire les textes avec les polices ci-dessus ; les lettres générées ne correspondent pas toujours exactement à leurs glyphes.
17 / FONDS & MATIÈRES LA BIBLIOTHÈQUE À COMPOSER
Un décor.
De la place pour
votre idée.
Trois familles, deux intensités. Les volumes viennent de nos lettres : leurs courbes, leurs tranches, leur façon de capter la lumière. Le centre reste disponible pour le message.
Clair / laisser lire
Pour une couverture, une offre ou un message développé. Texte aubergine dans la zone claire.
Violet / installer l’univers
Pour une ouverture ou une prise de parole immersive. Texte blanc, citron en accent.
Citron / attirer le regard
Pour une annonce courte. Texte aubergine ; réserver le relief à un bord.
Choisir l’intensité
Discret : plusieurs lignes, une offre ou une explication.
Expressif : une accroche courte, une ouverture ou une annonce. Le décor porte déjà le mouvement.
Recadrer avec intention
Conserver une courbe reconnaissable et une grande zone calme. En vertical, préférer le fond discret. Si un volume traverse le texte, changer de fond ou déplacer le message.
Trois nouvelles matières à composer.
Arche nocturne
Une grande arche à droite, un espace calme à gauche. Pour une couverture ou une ouverture, avec texte blanc.
PNG vierge · 1536 × 1024 ↓
Relief blanc
Des lettres vues de près, presque ton sur ton. Pour des contenus plus longs et des présentations, avec texte aubergine.
PNG vierge · 1536 × 1024 ↓
Angles violets
Des fragments sculptés aux bords. Pour une accroche courte au centre ; déplacer le texte si le recadrage rencontre un volume.
PNG vierge · 1536 × 1024 ↓
Ces variantes complètent la bibliothèque : même palette, mêmes matières, compositions différentes. En vertical, vérifier le recadrage ; aucun fond ne convient automatiquement à tous les textes.
La matière, en couches séparées.
Grain fin
Pour donner une matière imprimée. Commencer entre 3 et 6 % d’opacité, en mode Produit. Les fonds sont déjà texturés : éviter de cumuler les grains.
Télécharger le grain ↓
Facettes
Pour enrichir une grande surface violette. Commencer entre 4 et 8 % en Lumière tamisée. Garder les visages et les textes dégagés.
Télécharger les facettes ↓
Éclat citron
Un accent vectoriel à poser près d’une action ou d’un détail. Une à trois étoiles suffisent. Garder les pointes fines et de l’espace autour.
Télécharger l’éclat SVG ↓Les deux textures sont des images monochromes à superposer ; elles ne sont pas transparentes ni garanties raccordables en mosaïque. Les étirer sur le support et garder une faible opacité.
ESSAYER / TEXTE MODIFIABLE
La même idée.
Trois formats.
Choisissez un fond et un format, puis écrivez votre accroche. Le texte reste séparé du décor.
STUDIO CRÉATIFDonnons forme
aux idées.
Identité · Web · Direction artistique
Ce test montre aussi les limites du recadrage : gardez une accroche courte, surtout sur le format vertical.
Fichier autonome avec image, polices et texte éditable. Ouvrez-le dans un navigateur ; cliquez sur le titre pour le modifier.
18 / L’EXPÉRIENCE HOCUS DE L’ATELIER À LA LIVRAISON
Une création.
Une attention.
Signé Hocus.
Des idées qui prennent forme. Des créations qui prennent vie. Notre signature se retrouve dans le dessin, dans les finitions et dans la façon de transmettre le travail.
LE FIL CONDUCTEUR
Nous donnons forme
aux idées, aux contenus
et aux marques.
Trois métiers. Un même soin.
Donner du caractère.
Branding, logo, identité visuelle, univers graphique et guide de marque. Construire une expression cohérente, puis donner les moyens de l’utiliser.
Donner vie à l’écran.
Sites vitrines et expériences web. Concevoir le parcours, le dessin et la réalisation ; définir les fonctionnalités supplémentaires selon le projet.
Donner envie de lire.
Guides, rapports, présentations et supports. Hiérarchiser les contenus et soigner leur mise en page, à partir d’une identité existante ou créée ensemble.
Ce que « Signé Hocus » engage
Une intention expliquée. Des détails soignés. Une livraison organisée. Des conseils pour prendre le relais. La signature se mérite dans l’ensemble du projet.
Attribuer avec précision
« Un site signé Hocus » pour un site conçu et réalisé au studio. Pour des guides issus d’une charte existante : « Mise en page et design des documents par Hocus Club. » Respecter le travail et la marque du client.
Notre vocabulaire commun.
| Le mot | Son rôle | Dans une phrase |
|---|---|---|
| L’atelier | L’espace de travail et d’échange du projet. | « Vos premières pistes sont dans l’atelier. » |
| Les pistes | Les propositions créatives et leurs intentions. | « Explorons ces deux pistes ensemble. » |
| La mise au point | Les ajustements et les finitions. | « Nous passons à la mise au point de la direction retenue. » |
| Le grimoire de marque | Les règles et les ressources d’une identité. | « Votre grimoire vous accompagne pour faire vivre la marque. » |
| Votre création | Le résultat concret, nommé selon le projet. | « Votre site est prêt à prendre vie. » |
| Signé Hocus | La signature du travail du studio. | « Pensé, composé et réalisé par Hocus Club. » |
Le bon dosage
Une touche de personnalité à l’accueil. De la précision pendant l’usage. Une signature à la fin.
Les boutons disent « Télécharger le PDF », « Voir les pistes » ou « Ouvrir le site ». Sortilèges, formules et enchantements restent des clins d’œil occasionnels. Le grimoire désigne le guide de marque, pas toutes les livraisons.
Un parcours reconnaissable.
- 01 / LA RENCONTRE
Une idée en tête ?
Comprendre le besoin, les publics, les contenus et les contraintes. Préciser le périmètre et ce qui sera livré.
- 02 / L’ATELIER
On lui donne forme.
Partager des pistes nommées, montrer l’intention et expliquer les choix. Indiquer les points sur lesquels un retour est attendu.
- 03 / LA MISE AU POINT
Chaque détail compte.
Rassembler les retours, confirmer la direction retenue et préparer les fichiers finaux. Distinguer clairement brouillons et versions validées.
- 04 / LA LIVRAISON
Votre création est prête.
Présenter le résultat, expliquer les formats et donner accès aux ressources. Un seul lien, un rangement clair.
- 05 / LA PRISE EN MAIN
À vous de la faire vivre.
Transmettre les repères utiles et les modalités de suivi convenues. Dire qui contacter et pour quel besoin.
Hocus a un rôle, à chaque apparition.
Il cherche.
À l’atelier, il observe et assemble. Ses gestes parlent d’exploration, sans donner l’impression que le résultat tombe du ciel.
Il ajuste.
Une lettre, une page, un détail : il montre le soin apporté à la création. Ses accessoires se rattachent au métier.
Il transmet.
À la livraison, il présente ou ouvre le passage. Une apparition suffit ; les ressources restent au premier plan.
Le cadre porte Hocus.
L’accueil, les repères, les petits accents et le message de livraison reprennent notre identité. Le décor accompagne le contenu et garde une zone calme.
La création appartient à son univers.
Les aperçus et documents du client conservent sa charte. Ne pas ajouter notre mascotte ou nos couleurs à ses livrables sans que cela fasse partie de la demande.
PROJECTION / LIVRAISON DE GUIDES EXEMPLE DU PARCOURS, SANS DOCUMENT CLIENT
VOTRE ESPACE DE LIVRAISONPRÉPARÉ POUR VOTRE ÉQUIPEVos nouveaux
Vos nouveaux
guides sont prêts.
Une mise en page repensée pour faciliter la lecture et donner de la cohérence à vos documents.
Découvrir la livraison ↓Tout pour prendre le relais.
Cette projection montre le rangement d’une livraison. Les documents clients et les liens de téléchargement seront ajoutés pour chaque projet.
PRÊTS À DIFFUSER
La bonne version, au bon format.
Séparer les PDF de lecture et les fichiers destinés à l’impression, si les deux sont prévus. Afficher le nom du document, sa version, sa date et son usage.
Nom-du-guide_v1.0_lecture.pdf
Nom-du-guide_v1.0_impression.pdf
Nom-du-guide_v1.0_impression.pdf
Merci de nous avoir confié vos contenus.
Mise en page et design des documents par Hocus Club.
Les mots du moment.
LE MESSAGE QUI ACCOMPAGNE LE LIEN
Une livraison, personnellement.
Bonjour [Prénom], Vos nouveaux guides sont prêts. Nous avons réuni les documents finalisés, les fichiers modifiables prévus et les conseils d’utilisation dans votre espace. Découvrir votre livraison : [lien] Merci de nous avoir confié vos contenus. Hocus Club
Avant de remettre le lien.
- Les fichiers correspondent au périmètre convenu et à la version validée.
- Chaque format indique son usage. Les sources mentionnent le logiciel nécessaire.
- Les liens fonctionnent, les fichiers portent des noms compréhensibles.
- Les conseils de prise en main et le contact de suivi sont présents.
- L’accès est réservé aux bonnes personnes ; les anciennes versions sont clairement séparées.
- Les droits, licences et éléments tiers utiles au client sont précisés.
Ce chapitre fixe le langage et la structure de l’expérience. La projection n’est pas encore un portail client connecté : aucun fichier client n’est stocké ou envoyé ici.
19 / LA REMISE D’UNE CRÉATION LE RITUEL & LES DÉTAILS
Pensée pour vous.
Signée Hocus.
Une création accompagnée de son intention, de ses ressources et de quelques repères pour la suite. L’attention se ressent dans la présentation et dans la facilité à prendre le relais.
Vivre la démonstration de livraison ↗Trois parcours à explorer : identité, web et documents. Le destinataire est personnalisable. Les fichiers utilisés sont ceux de Hocus ou des exercices fictifs.
01 / Une ouverture préparée pour quelqu’un.
Le nom, avant la signature.
Nommer le client et le projet. Une phrase adaptée présente ce qui est prêt. « Votre marque a son grimoire » pour une identité ; « Vos nouveaux guides sont prêts » pour des documents.
Un mouvement, puis le résultat.
Une inclinaison se remet en place au clic, comme une création que l’on présente. L’ouverture peut être rejouée. Après la première visite de la session, le bouton invite à retrouver la création. Les ressources restent accessibles à tout moment. Respecter la réduction des mouvements.
02 / La fiche qui accompagne la création.
Une fiche courte, préparée pour le client : intention, choix principaux, périmètre réalisé par Hocus, version, date et mot personnel. Elle accompagne la création sans remplacer le devis ou les conditions convenues.
La précision fait partie du soin.
Une prestation de mise en page à partir d’une charte existante est signée « Mise en page et design des documents par Hocus Club ». Le client conserve son identité. Ne pas présenter toute sa marque comme une création Hocus.
03 / Trois métiers, trois rangements.
| Identité | Site web | Documents |
|---|---|---|
| Découvrir l’identité | Visiter le site ou la préproduction | Découvrir la refonte |
| Lire le grimoire de marque | Comprendre la prise en main | Comparer les pages avant / après |
| Choisir les logos selon leur usage | Connaître l’hébergement et le suivi | Choisir lecture, impression ou sources |
| Retrouver les polices et licences | Identifier ce qui reste à réaliser | Retrouver les consignes d’édition |
04 / Une signature dans les détails.
Le projet en premier.
Nom du projet, nature du livrable, client, version et date. Le cadre peut être Hocus ; les pages du client conservent sa charte. Une grande courbe de lettre suffit pour signer la couverture de l’espace.
Montrer ce qu’on ouvre.
Une vraie page du document, un écran du site ou le logo concerné. Même ratio dans une liste, fond calme, titres lisibles. Pas de mascotte répétée sur chaque fichier.
Compréhensibles hors du portail.
Projet_Livrable_v1.0_usage.ext
Exemple : Hocus_Logo_v1.0_vectoriel.svg. Garder une convention stable. Éviter « final-final-2 » et indiquer la version réellement validée.
Classer par usage.
01_Finaux · 02_Sources · 03_Ressources · 04_Prise-en-main. Ne créer que les dossiers utiles au projet. Séparer les archives et les pistes non retenues de la livraison finale.
Une apparition qui compte.
Hocus présente la création ou salue en fin de parcours. Son geste désigne le résultat. Une livraison peut aussi reposer entièrement sur les lettres et les matières. Dans la démonstration, Hocus apparaît une fois pour accompagner la remise.
Rester présent, concrètement.
Après le délai convenu : « Avez-vous pu prendre en main vos nouveaux supports ? Dites-nous si un format ou une consigne mérite d’être précisé. » Adapter le message au projet et au suivi prévu.
LE MOT GLISSÉ AVEC LA CRÉATION
À vous de lui donner la suite.
Merci de nous avoir confié cette idée.
Nous avons soigné sa forme et préparé les repères pour la faire vivre.
Nous avons hâte de la voir entre vos mains.
Hocus Club
La démonstration est un parcours de référence. Elle ne gère pas encore de comptes clients, de dépôts de fichiers ou d’envois automatiques. Les modalités d’accès, de conservation et de suivi seront définies pour le futur portail.
20 / L’ATELIER EXPLORER, COMPRENDRE, AFFINER
Une piste.
Une intention.
Une discussion.
Présenter le travail de façon à guider le regard. Chaque piste explique ce qu’elle cherche à accomplir, les choix qui la portent et les points à discuter.
Entrer dans l’atelier ↗Démonstration avec deux compositions du studio. Les retours se copient ou se téléchargent ; ils ne sont pas envoyés automatiquement.
Montrer, puis expliquer.
Un nom, une intention, une composition en grand et trois choix concrets. Préciser l’usage privilégié et le point à surveiller. Ne pas présenter des goûts personnels comme des résultats mesurés.
Revenir au besoin.
Qu’est-ce qui sert l’objectif ? Quel élément gêne dans l’usage ? Quelle contrainte manque ? Les retours précisent une direction ; ils ne déclenchent pas seuls une validation.
Un carnet lisible.
Le socle retenu, l’étape en cours et la prochaine action. Distinguer ce qui est exploré de ce qui est confirmé. Nommer la version et la date des pistes dans un projet réel.
Reformuler avant d’affiner.
Rassembler les commentaires, résoudre les points contradictoires et confirmer la direction avec le client. Passer ensuite à la mise au point, selon le périmètre convenu.
Hocus, au bon moment.
Une apparition principale par page, liée à une action. Dans l’atelier, il présente le dossier des pistes. À la livraison, ce même geste accompagne la création finalisée. Ses gestes accueillent et accompagnent ; les pistes et les ressources restent au premier plan.
Il ouvre l’atelier.
À l’entrée de l’atelier, près de l’intention. Une présence joyeuse pour inviter à découvrir les pistes. La pose au dossier sert aussi à la livraison.
Pose d’accueil · PNG ↓Il transmet.
Dans l’accueil de la livraison, avec son geste ouvert. Le dossier évoque la remise sans remplacer l’aperçu du projet.
Pose remise · PNG ↓Une présence, pas une répétition.
Éviter la mascotte sur chaque fichier, chaque bouton ou chaque confirmation. Garder sa tenue couvrante, sa couleur abricot et son expression bienveillante. Le texte et les commandes restent dégagés sur mobile.
Ce parcours est une référence de présentation. Il ne constitue pas un espace de collaboration partagé : les brouillons de retour restent dans la session du navigateur.
21 / LA RÉFÉRENCE VIVANTE
Créer la suite.
Garder le fil.
Ce grimoire est le point de départ de toute création Hocus. Une nouvelle application reprend ses signes, puis enrichit la bibliothèque lorsqu’elle apporte un élément réutilisable.
Avant de créer
Lire l’intention et le chapitre concerné. Regarder les fichiers de référence. Réutiliser le logo, les polices, la palette et les poses existantes avant de créer de nouveaux éléments.
Quand une idée évolue
Documenter le fichier, son intention, ses usages, ses limites et sa date. Distinguer une exploration d’une direction retenue. Les essais ne remplacent pas une décision validée.
Dans ce projet
Les consignes de travail demandent de consulter la fiche de marque et de mettre à jour le guide dans la même tâche qu’une évolution réutilisable. Cette règle accompagne les prochaines interventions.
Dans un autre projet
Transmettre la fiche et les assets utiles, ou ajouter la consigne de référence au projet. Un lien ne suffit pas à garantir que chaque outil le consulte spontanément.
La consigne à réutiliser
« Pour toute création Hocus Club, consulte le guide brand.hocus-club.com/magic/ et sa fiche de référence avant de concevoir. Réutilise les éléments retenus. Documente toute évolution réutilisable dans le guide et distingue les explorations des décisions validées. »
La mise à jour fait partie du travail demandé à l’outil. Ce n’est pas une synchronisation autonome entre tous les logiciels ni une surveillance permanente.