Les variantes officielles
Quatre variantes du logo sont disponibles. Toutes dérivent du PNG source via le script npm run brand:assets (génère les versions monochromes depuis public/logo.png).
Principal · logo.png · 158 Ko
Monochrome blanc · logo-monochrome-blanc.svg · pour fond sombre
Monochrome noir · logo-monochrome-noir.svg · pour print et fax
Favicon · favicon.svg + .png
Aperçu sur différents fonds
Logo couleur sur fond blanc — public/logo.png
Logo monochrome blanc sur gradient de marque (bannière LinkedIn, cover PDF)
Fichiers disponibles
| Fichier | Taille | Usage |
|---|---|---|
logo.png | 158 Ko | Version couleur principale, toutes circonstances digitales |
logo.webp | 7.7 Ko | Dérivé optimisé pour le web |
logo-monochrome-noir.svg | 207 Ko | Version monochrome noire (print, fax) |
logo-monochrome-blanc.svg | 207 Ko | Version monochrome blanche (fond sombre) |
favicon.svg + .png + -32.png | 500 o à 2.5 Ko | Onglets navigateur, raccourcis mobiles |
Comment les monochromes sont produits
Les versions monochromes (logo-monochrome-noir.svg et logo-monochrome-blanc.svg) sont dérivées du PNG source par un script Node (scripts/build-brand-assets.mjs) qui applique un feColorMatrix pour convertir tous les pixels non-transparents en noir ou blanc pur tout en préservant la silhouette (alpha).
Pour regénérer ces fichiers si le logo change :
npm run brand:assetsLimitation : pas de SVG source natif
Le logo Gradly reste à l’origine un raster PNG. Les versions monochromes SVG embarquent le PNG en base64 via <image>, ce qui produit des fichiers de ~207 Ko (vs ~5 Ko pour un vrai vectoriel).
Pour les impressions grand format (kakémonos, totems), recommandation : produire un SVG source vectoriel via Adobe Illustrator Image Trace, Inkscape Trace Bitmap, ou un re-design from scratch. Cette dette est tracée dans le changelog du brandbook.
Espace de protection
Autour du logo, conserver un espace libre équivalent à la hauteur du “G” sur chaque côté. Cet espace ne doit contenir aucun autre élément graphique (texte, forme, bordure).
Tailles minimales
Sous ces seuils, le logo devient illisible.
| Support | Hauteur minimale |
|---|---|
| Digital (écran) | 24 px |
| 10 mm | |
| Favicon | 16 × 16 px (mais favicon.svg recommandé, sans limite) |
Dimensions dans le site
Dans le site actuel, le logo apparaît :
- Nav :
w-8 h-8(32 × 32 px) en contexte header - Footer :
w-8 h-8(32 × 32 px) en contexte footer - Cover brandbook : non utilisé (typographie seulement)
- Favicon :
favicon.svgen priorité, fallback PNG