Livre de marque
Tout ce qui sort au nom de Growthsquare passe par ce document : une page d'atterrissage, une publicité, une présentation de vente, un courriel. L'objectif n'est pas d'être joli, c'est d'être reconnaissable du premier coup d'œil, même sans le logo.
Growthsquare installe l'intelligence artificielle dans des entreprises qui n'ont ni le temps ni l'équipe pour le faire elles-mêmes. On ne vend pas un logiciel, on installe un système et il reste chez le client.
Growth Through AI
Toujours cette formulation exacte, en anglais, même sur du matériel français. Jamais « Powered by AI » ni une traduction.
On enlève le travail répétitif des mains du propriétaire. Campagnes, visuels, rendez-vous, relances. Ce qui prenait trois heures en prend vingt minutes.
L'IA ne remplacera pas le client. La personne qui s'en sert, oui. C'est cet angle qui convertit, pas la liste de fonctionnalités.
Un seul violet, un seul noir. Le violet est un accent, pas un fond : s'il couvre plus du quart d'un visuel, il perd son pouvoir de diriger l'œil. Cliquez une pastille pour copier son code.
Le violet sur un quart de la surface au maximum
#a47dff pour du texte violet sur fond sombre, plus lisible
Le noir #0a0a0f, qui a une pointe de bleu et ne mange pas la lumière
#7c3aed ou #c084fc : ce sont les violets par défaut de Tailwind, pas les nôtres
#000000 pur en fond : ça écrase tout et ça sonne « gabarit »
#1E1E24 ou #231F33 comme fond d'interface : ils sont réservés au texte et à l'imprimé
:root {
--purple: #8457ff; --purple-light: #a47dff; --purple-dark: #6b3fe0;
--bg: #0a0a0f; --bg2: #111118; --bg3: #18181f;
--t1: #f5f5f7; --t2: #a1a1aa; --t3: #71717a;
--line: rgba(255,255,255,.08);
--radius: 16px; --ease: cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] {
--bg: #fff; --bg2: #f5f5f7; --t1: #1a1625; --t2: #44404d;
--line: rgba(0,0,0,.12);
}Piège vécu. Un composant
qui reste sombre dans les deux thèmes (une console, une maquette d'écran) ne doit pas utiliser
--t1/--t2/--t3 : en thème clair elles deviennent presque noires et le texte
disparaît sur le fond noir. Lui donner des variables à part, du genre --od1/--od2/--od3,
qui ne basculent jamais.
Manrope, et rien d'autre. Une seule police pour tout : titres, texte, boutons, étiquettes. Ce qui crée la hiérarchie, c'est la graisse et l'interlettrage négatif sur les gros titres, jamais un changement de police.
Les accents français ne sont jamais optionnels. « CONGEDIE », « CREATIFS », « A » au lieu de « À » : ce sont des bogues, pas des choix de style. Les modèles d'images les massacrent systématiquement, c'est pourquoi on ne leur fait jamais composer de texte français.
On n'utilise pas de tiret long pour séparer deux morceaux de phrase en français. C'est une signature de texte généré. Une virgule, un point ou un deux-points font le travail et sonnent humain.
La seule question à se poser : sur quel fond ? Choisir la variante qui garde du contraste. Un logo blanc sur fond clair est l'erreur la plus fréquente, et elle arrive surtout dans les pieds de page en thème clair.
Au moins 20 px de vide tout autour, sans exception
Le SVG dès qu'on est sur le web, le PNG transparent pour le courriel
Ni étirer, ni pencher, ni ombrer, ni recolorer
Ne jamais poser le logo sur une zone occupée de l'image
Sur une page qui a un thème clair et un thème sombre, on pose les deux images et le CSS choisit. Une seule image ne peut pas servir les deux.
<img class="logo-clair" src="...">
<img class="logo-sombre" src="...">
.logo-sombre{display:none}
html[data-theme="light"] .logo-clair{display:none}
html[data-theme="light"] .logo-sombre{display:block}Les quatre variantes se téléchargent directement ci-dessus, en SVG
et en PNG. Sur le poste, elles sont dans
Growthsquare/Brand-Book/logos/, et en ligne à
growthsquare-marque.pages.dev/logos/<nom>.svg, ce qui permet de les pointer
depuis n'importe quel outil.
Le SVG dès que possible. Il reste net à n'importe quelle taille et pèse dix fois moins que le PNG. Le PNG sert au courriel et aux outils qui ne digèrent pas le vectoriel.
| Situation | Variante | Format |
|---|---|---|
| En-tête de site, fond sombre | Violet + blanc | SVG |
| En-tête de site, fond clair | Violet + encre | SVG |
| Signature de courriel | Violet + encre | PNG transparent |
| Photo de profil, réseaux | Emblème violet seul | PNG |
| Présentation, diapos sombres | Violet + blanc ou tout blanc | PNG |
| Publicité par-dessus une photo | Tout blanc | PNG |
| Favicon | Emblème | PNG 32 × 32 |
Ce qui rend une page reconnaissable comme une nôtre : des coins très arrondis, des bordures d'un blanc à 8 %, un halo violet sous les boutons, et une animation lente avec une courbe qui décélère fort.
Fond #8457FF, texte blanc, entièrement arrondi, ombre violette. Un seul par
écran visible : deux boutons pleins se volent l'attention.
Transparent avec une bordure. Il existe pour donner une porte de sortie à ceux qui ne sont pas prêts, jamais pour doubler l'action principale.
Fond blanc à 3 %, bordure blanche à 8 %, rayon 16 px. Au survol, les deux montent d'un cran. Pas d'ombre portée sur fond sombre.
Une seule courbe pour tout le système. Elle démarre vite et finit lentement, ce qui donne cette impression de matière lourde et chère plutôt que de rebond.
--duration: .35s;
--ease: cubic-bezier(.16, 1, .3, 1);
/* apparition au defilement : 22px vers le haut, jamais plus */
.rv{opacity:0; transform:translateY(22px);
transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}Piège vécu. Si
l'apparition au défilement est en CSS pur et que l'observateur ne part pas, toute la page reste
à opacity:0. Il faut conditionner l'effet à une classe posée par le script, et
prévoir un balayage de sécurité après deux secondes et demie qui rend tout visible.
On parle à des propriétaires d'entreprise occupés, au Québec, qui se font solliciter tous les jours. Le ton est direct et chaleureux, jamais cassant, jamais professoral.
« Vous lui écrivez une phrase, il exécute. Puis il reste chez vous. »
« L'IA ne vous remplacera pas. Elle va juste travailler pour vous. »
« On regarde vos vrais systèmes et on vous remet le document. Vous le gardez même si on n'installe rien. »
Le franglais de métier passe : setup, workflow, ROI, lead.
« Révolutionnez votre business grâce à la puissance de l'IA »
Une promesse sans chiffre derrière, ou un chiffre qu'on ne peut pas tenir
Un ton qui fait la leçon ou qui sous-entend que le lecteur est en retard
Des tirets longs qui séparent les phrases, marque de fabrique du texte généré
Dollars canadiens. Pourcentages sans décimale sauf nécessité. Le vert pour ce qui monte, le rouge pour ce qui descend. Et un chiffre qu'on avance doit exister quelque part.
Un script publicitaire doit tenir debout lu d'un trait. Si on bute, c'est que le texte est écrit pour être lu, pas pour être dit. On récrit.
On dirige les acteurs générés en chaleureux et complices. Un ton cassant fait fuir, et aucun réglage audio ne le rattrape après coup.
Une photo générée, même belle, se lit comme une photo. Ce qui la fait lire comme une publicité tient en quatre éléments, dans cet ordre d'importance.
Un dégradé sombre qui crée la zone morte où le texte peut vivre. Sans lui, rien ne se lit comme une publicité.
Énorme et courte. Le visuel sera vu à la taille d'un pouce dans un fil d'actualité.
Deux, pas cinq. Ce sont des preuves, pas une liste de fonctionnalités.
Une pastille violette avec une flèche. C'est le signal visuel qui dit « publicité » même sans lire le texte.
Aucun prix dans un visuel publicitaire. Jamais.
Aucun emoji en guise d'icône. Toujours du SVG dans le langage graphique de la page.
On ne génère jamais le visage d'une personne réelle nommée. Sa vraie photo, ou une scène sans personnage.
On ne reprend pas les accroches d'un concurrent, même bonnes.
Une photo n'est pas du décor. Elle doit démontrer le point de vente exact de la section où elle se trouve. Une équipe souriante autour d'un portable ne prouve rien et se voit tout de suite.
La section parle de créatifs ? On montre un écran rempli de créatifs.
La section parle d'agenda ? On montre un agenda plein.
Les modèles d'images massacrent les accents français et inventent des lettres. On leur fait générer la photo seule, puis on compose le texte en HTML et CSS et on rend l'image avec un navigateur automatisé. C'est la seule façon d'avoir « posée », « vérifiées » et « Échéancier » propres.
Et on réduit l'image avant de la compresser : compresser un grand format pour tenir dans un petit poids force le compresseur à sacrifier la netteté du texte en premier.
Photos officielles, à utiliser telles quelles dans les présentations, les pages « à propos » et les signatures.
Jeremy DrouinPrésident
Matt LegaultDirecteur des opérations
EmmanuelAcheteur média
DenzelAcheteur média
AntoineDéveloppement et R&D
MatteusStagiaire IANeuf vérifications. Elles prennent deux minutes et attrapent la quasi-totalité des écarts de marque.