01Démarrer
Le générateur est une seule page, app.html. Il n’y a rien à installer et aucun compte à créer : ouvre la page, choisis ta source, règle, exporte.
- Choisis ta source : un ou deux fichiers
.binksy, ou « Partir de zéro ». - Complète si besoin : logos, couleurs, polices, assets supplémentaires.
- Règle le site : langue, nom, titre, intro, sections, style, crédits.
- Vérifie l’aperçu en bureau et en mobile.
- Exporte : tu obtiens un ZIP, le site complet, prêt à mettre en ligne.
Pour découvrir l’outil sans tes fichiers, ouvre la démo AVORA (marque fictive). Les boutons de démo ont besoin que la page soit servie en http:// ; en file://, importe les fichiers du dossier demo/ à la main.
Tes réglages (style, crédits, langue…) sont mémorisés dans ton navigateur. Ils ne sont envoyés nulle part.
02Importer un .binksy LogoKit
Le .binksy enregistré par Binksy LogoKit contient l’essentiel du guide. Les deux formats sont lus : le nouveau (archive ZIP, v2) et l’ancien (JSON V5).
Ce qui est repris :
- Versions du logo (horizontal, vertical, icône, logotype…) et leurs déclinaisons de couleur ;
- Règles : zone de protection et tailles minimales ;
- Palette (avec rôles, Pantone et pourcentages s’ils existent), dégradés et associations de couleurs validées ;
- Typographies : fichiers de police, licence, hiérarchie typographique ;
- Mauvais usages choisis et mockups (rendus finis seulement) ;
- Textes de marque du brief et des pages du guide : signature, présentation, histoire, mission, vision, valeurs, ton et voix… (voir Plateforme de marque).
Dans le générateur : bouton Importer un .binksy LogoKit, ou glisse le fichier sur la page. Le type de fichier est détecté automatiquement.
03Importer un .binksynext LogoNext
Le .binksynext de Binksy LogoNext (même format interne qu’un .binksy ; l’outil reconnaît le type d’après le contenu) apporte surtout les fichiers prêts à l’emploi :
- versions du logo, palette et rôles de couleur ;
- QR code (lien et style) ;
- formats coupés et actifs : favicon, icônes d’application, réseaux sociaux, fabrication… ;
- la couleur de fond choisie.
Seul, il suffit pour un site complet : logo, couleurs, formats et ressources. Il n’a pas de typographies ni de règles de construction ; ajoute tes polices à la main si tu veux une section Typographie.
04Les deux ensemble
Tu peux importer un .binksy Binksy LogoKit et un .binksynext LogoNext. Ils sont fusionnés avec ces règles :
| Élément | Source retenue |
|---|---|
| Nom de la marque | LogoKit d’abord (modifiable dans les réglages) |
| Logo, versions, règles | Binksy LogoKit prioritaire ; LogoNext ajoute ses versions manquantes (les SVG identiques sont écartés) |
| Palette | Binksy LogoKit, complétée par les couleurs et rôles de LogoNext |
| Typographies, guide, mockups | LogoKit |
| Formats coupés, QR code | LogoNext |
| Ajouts manuels (logos, couleurs, polices, assets) | S’ajoutent à tout |
Un .binksy LogoKit qui contient déjà le module LogoNext (ou un ancien export LogoNext en .binksy) sert aux deux : inutile d’importer un second fichier.
05Partir de zéro
Pas de .binksy ? Choisis Partir de zéro et fournis toi-même :
- le nom de la marque ;
- tes logos en SVG, chacun avec un nom et un type : horizontal, vertical, icône, logotype, monogramme ou autre ;
- tes couleurs : code HEX, nom et rôle (principale, secondaire, accent, texte, fond, surface, neutre, clair, sombre) ;
- tes polices (TTF, OTF, WOFF, WOFF2), en indiquant si leur licence est libre.
L’outil n’invente rien : sans logo fourni, pas de logo ; sans couleur, pas de palette. Les déclinaisons de couleur sont calculées à partir de tes SVG.
06Assets supplémentaires
Ajoute les visuels créés ailleurs : images (PNG, JPG, WebP, SVG, GIF) ou fichiers (PDF, etc.). Chaque asset est rangé dans une catégorie, avec un titre et une légende modifiables.
| Catégorie | Pour | Dossier dans le site |
|---|---|---|
| Applications | mockups, photos du logo en situation | assets-supplementaires/mockup/ |
| Réseaux sociaux | posts, stories, bannières, avatars | assets-supplementaires/social/ |
| Imprimés | cartes de visite, affiches, papeterie | assets-supplementaires/print/ |
| Web | maquettes de site, bannières, e-mails | assets-supplementaires/web/ |
| Autres | tout le reste (PDF, présentations…) | assets-supplementaires/other/ |
Les images s’affichent avec un aperçu ; les autres fichiers apparaissent comme téléchargements.
07Réglages
- Langue du site : français ou anglais. Tous les textes fixes du site suivent ; tes propres textes restent tels que tu les écris.
- Nom de la marque : repris du .binksy, modifiable.
- Titre : affiché en haut du site.
- Plateforme de marque : les textes du site (voir ci-dessous).
- Sections à afficher ou masquer :
- intro
- marque
- ton
- logo
- declinaisons
- protection
- tailles
- interdits
- couleurs
- typographie
- applications
- assets
- formats
- ressources
Désactive les sections qui n’ont pas de sens pour ta marque (par exemple Typographie si tu n’as pas fourni de polices).
Modifier toutes les sections
Chaque ligne de la liste Sections a un interrupteur et deux flèches pour la déplacer. Clique sur son nom pour l’ouvrir et changer son titre, son chapeau (le texte d’introduction) et lui ajouter des blocs :
- Texte : un intertitre facultatif et ton texte (une ligne vide = nouveau paragraphe) ;
- Image : PNG, JPG, WebP, GIF, SVG ou AVIF, plusieurs images à la suite s’affichent en grille ;
- Vidéo : MP4, WebM ou MOV, lue directement dans le site, même hors ligne ;
- Lien vidéo : YouTube ou Vimeo, intégré au site (nécessite internet).
Ajouter une section crée une section personnalisée, que tu places où tu veux. Les pages de ton guide LogoKit sans équivalent (direction photo, iconographie, réseaux sociaux, contact, page vierge…) arrivent toutes seules, avec leurs textes et images. « Rétablir » annule tes changements sur une section.
Images et vidéos sont reprises telles quelles, en résolution d’origine, avec un bouton Télécharger (et Copier pour les images). Elles sont rangées dans telechargements/sections/<section>/ et dans le ZIP « Tout télécharger ».
Plateforme de marque
Le panneau Plateforme de marque réunit les textes du site. Ils sont repris du brief et des pages du guide d’un .binksy LogoKit, ou saisis et modifiés à la main. Chaque bloc n’apparaît que s’il contient du texte : rien n’est inventé.
| Section | Blocs |
|---|---|
Introduction intro | signature (tagline), présentation, activité |
La marque marque | histoire, mission, vision, objectifs, valeurs, public, positionnement |
Ton et voix ton | personnalité, ton, mots-clés, « on dit » / « on évite » |
Valeurs, objectifs, mots-clés, « on dit » et « on évite » : un élément par ligne. Vider un champ masque le bloc ; « Rétablir » reprend le texte du .binksy.
08Les 10 styles
Le style règle la mise en page du site : grille, titrage, fonds, ornements. Ton identité (logos, couleurs, polices) ne change pas. Tu peux changer de style à tout moment, l’aperçu suit.
- ÉditorialGrands titres, filets fins, colonnes.
editorial - SuisseGrille stricte, fer à gauche, gros chiffres.
suisse - MinimalBeaucoup de blanc, un seul accent.
minimal - NoirFond sombre, contrastes forts.
noir - MagazineImages en grand, titres superposés.
magazine - BrutalisteBordures épaisses, ombres franches.
brutal - DouxCoins arrondis, teintes douces.
doux - TechniqueGrille de plan, cotes, monospace.
technique - AplatTa couleur de marque en grands aplats.
aplat - ClassiqueSerif, cadres fins : le luxe.
classique
09Crédits du graphiste
Le site exporté peut te créditer dans sa navigation et son pied de page. Tout est personnalisable :
- nom du studio, e-mail, Instagram, site web, téléphone ;
- liens supplémentaires (Behance, Dribbble, LinkedIn…), avec un libellé et une adresse ;
- crédit affiché ou non.
Valeurs par défaut : Binks Design, graphistedubinks@gmail.com, instagram.com/graphiste.binks. Remplace-les par les tiens : ils sont mémorisés pour tes prochains guides.
10Aperçu
L’aperçu montre le site tel qu’il sera exporté, en bureau ou en mobile. Il se met à jour à chaque réglage. Vérifie notamment :
- que chaque version du logo est lisible sur ses fonds ;
- les noms de couleurs et leurs rôles ;
- les titres et légendes de tes assets ;
- le crédit en pied de page.
11Exporter et mettre en ligne
Exporter le site télécharge un ZIP. Décompresse-le : tu obtiens un dossier avec index.html. Ensuite, au choix :
| Où | Comment |
|---|---|
| Netlify | Ouvre app.netlify.com/drop et glisse le dossier décompressé. Le site est en ligne en quelques secondes ; renomme l’adresse dans les réglages du site. |
| Vercel | Crée un projet et dépose le dossier, ou en ligne de commande : npx vercel deploy depuis le dossier. |
| Tout hébergement | Envoie le contenu du dossier par FTP ou par le gestionnaire de fichiers de ton hébergeur (OVH, o2switch, GitHub Pages…). Aucune base de données, aucun réglage serveur. |
| Sans hébergement | Envoie le ZIP à ton client : il double-clique sur index.html. Le site marche en file://, hors ligne. |
Mets en ligne le contenu du dossier (index.html à la racine), pas le ZIP lui-même.
12Le site exporté
Un site statique autonome : HTML, CSS et JavaScript en ligne, polices incluses, aucune ressource externe.
ton-site/
├─ index.html le site
├─ LISEZMOI.txt mode d’emploi pour ton client
├─ assets/ polices, images
└─ telechargements/
├─ logos/<version>/svg/ <marque>_<version>_<couleur>.svg
├─ logos/<version>/png/ … .png
├─ logos/<version>/pdf/ … .pdf
├─ logos/<version>/jpg/ … .jpg
├─ couleurs/ ASE, GPL, CSS, SCSS, JSON, TXT
├─ typographies/ polices à licence libre seulement
├─ applications/ mockups
├─ formats/<groupe>/ web, apps, réseaux, fabrication, qr-code
└─ assets-supplementaires/<catégorie>/Chaque déclinaison de couleur de chaque version du logo existe en quatre formats, rangés par variante puis par format :
- SVG — vectoriel, pour le web et les logiciels de création ;
- PNG — 2000 px, fond transparent ;
- PDF — vectoriel, pour l’impression ;
- JPG — sur fond plein.
Dans le site, chaque fichier (logos, formats, favicons, fichiers de palette, mockups, assets) a un aperçu visuel, un bouton Copier (l’image dans le presse-papiers, ou le code / texte) et un bouton Télécharger. Un bouton Tout télécharger fournit l’ensemble en un ZIP.
13Polices et licences
- Polices à licence libre (OFL, Apache…) : affichées dans le site et téléchargeables dans
typographies/, avec leur licence. - Autres polices (commerciales, licence inconnue) : intégrées pour afficher les exemples, mais jamais proposées au téléchargement.
Polices à importer
Si la hiérarchie typographique utilise une police dont le fichier manque, le générateur affiche Polices à importer, avec un bouton d’import par famille. Importe le fichier de la police (TTF, OTF, WOFF, WOFF2) pour que le site l’affiche correctement.
Avec un .binksy LogoKit, la licence est reprise du projet. En partant de zéro, c’est toi qui indiques si la police est libre : dans le doute, laisse « non libre ».
14Formats spécialisés
Avec un .binksynext LogoNext, le site propose les formats coupés, groupés par usage :
- Web : favicon, icônes de site, images de partage ;
- Applications : icônes d’app ;
- Réseaux sociaux : photos de profil, bannières ;
- Fabrication : fichiers pour l’impression et la découpe ;
- QR code : le code et son lien.
15FAQ et limites
Certains formats manquent
Les tickets thermiques, les étiquettes Zebra, la vidéo, l’EPS et les jeux complets d’icônes Android / macOS restent dans Binksy LogoNext : exporte-les depuis cet outil.
Les valeurs CMJN sont-elles exactes ?
Non : c’est une conversion simple, sans profil ICC. Pour l’impression, donne à ton client les valeurs CMJN ou Pantone validées avec l’imprimeur.
Mes fichiers sont-ils envoyés quelque part ?
Non. Tout est lu et calculé dans ton navigateur ; rien n’est envoyé sur un serveur. Les réglages sont mémorisés localement.
Le site exporté marche-t-il sans Internet ?
Oui. Il embarque ses polices et ses images ; il s’ouvre par double-clic sur index.html.
Je peux modifier le site après l’export ?
Oui, c’est du HTML : modifie-le à la main si tu veux. Le plus simple reste de refaire l’export depuis l’outil.
Mon .binksy ne s’ouvre pas
Vérifie qu’il vient bien de Binksy LogoKit ou de Binksy LogoNext. Rouvre-le dans l’outil d’origine et enregistre-le à nouveau si besoin.
16Agents IA
Le générateur peut être piloté par un agent (Claude Code, Codex…) via l’API JavaScript window.binksyGuide, sans clé API. Le mode d’emploi complet est sur la page Agents IA et dans AGENTS.md (français puis anglais).