OnlineFreeTools.org
  • Accueil
  • Image editing tools
    • Filigrane texte — dans le navigateur
    • Extraire les couleurs — palette et pipette au clic
    • Retourner une image — miroir H/V
    • Bordure d’image — couleur et épaisseur
    • Compresser une image — côté max, qualité et taille cible (local)
    • Recadrer et redimensionner une image — en local
    • Voir et supprimer l’EXIF des photos — GPS, appareil, en local
    • Convertisseur de formats d'image — PNG JPEG WebP AVIF BMP GIF ICO SVG
    • Niveaux de gris — conversion locale
    • Fusionner des images — créez un collage en une photo
    • Optimiser une image — WebP, AVIF et MozJPEG en local
    • Superposer des images — placez un logo sur une photo
    • Image ↔ Base64 — encoder et décoder
    • Images en GIF — courte animation
    • Images en PDF — une page par photo
    • Images vers PowerPoint — une diapo par photo
    • Images vers Word — DOCX local
  • Outils de design
    • Générer l’échelle de couleur de marque — palette 50–950 et tokens CSS
    • Charte graphique — brouillon modulaire à modifier
    • Schéma de couleurs web — tokens CSS sémantiques
    • Vérificateur de contraste WCAG — ratio AA/AAA
  • Developer tools
    • Ajouter WWW au DNS — A/CNAME et guides
    • Convertisseur CSV ↔ JSON — types, séparateur, local
    • Encoder et décoder les entités HTML — local
    • IndexNow — soumettre des URL à Bing, vérifier la clé et les codes
    • Quelle est mon adresse IP — IP publique (IPv4/IPv6)
    • Validateur JSON Schema — Chemins draft-07 et local
    • Markdown vers HTML assaini — et retour Markdown
    • Compare Two Texts Online — Text Diff Checker
    • Vérifier les en-têtes HTTP d'un site — Inspecter les response headers
    • YAML vers JSON — et retour YAML (types, multi-doc)
  • Calculators
    • Calculateur d'IMC — Comment calculer l'indice de masse corporelle
    • Calculateur de gradient — ∇f multivariable (dérivées partielles)
    • Calculateur de revenu marginal — Formule ΔRT / ΔQ
    • Calculateur de variation en % — De l’ancienne à la nouvelle valeur
    • Calculateur de ROI — Calculer le retour sur investissement
    • Pieds carrés en m² — Conversion pour logement et rénovation
  • English
  • 中文
  • Español
  • العربية
  • Português
  • Bahasa Indonesia
  • Français
  • 日本語
  • Русский
  • Deutsch

Outils

Filigrane texte — dans le navigateurAjouter WWW au DNS — A/CNAME et guidesGénérer l’échelle de couleur de marque — palette 50–950 et tokens CSSCharte graphique — brouillon modulaire à modifierExtraire les couleurs — palette et pipette au clicConvertisseur CSV ↔ JSON — types, séparateur, localRetourner une image — miroir H/VCalculateur d'IMC — Comment calculer l'indice de masse corporelleCalculateur de gradient — ∇f multivariable (dérivées partielles)Calculateur de revenu marginal — Formule ΔRT / ΔQCalculateur de variation en % — De l’ancienne à la nouvelle valeurCalculateur de ROI — Calculer le retour sur investissementEncoder et décoder les entités HTML — localBordure d’image — couleur et épaisseurCompresser une image — côté max, qualité et taille cible (local)Recadrer et redimensionner une image — en localVoir et supprimer l’EXIF des photos — GPS, appareil, en localConvertisseur de formats d'image — PNG JPEG WebP AVIF BMP GIF ICO SVGNiveaux de gris — conversion localeFusionner des images — créez un collage en une photoOptimiser une image — WebP, AVIF et MozJPEG en localSuperposer des images — placez un logo sur une photoImage ↔ Base64 — encoder et décoderImages en GIF — courte animationImages en PDF — une page par photoImages vers PowerPoint — une diapo par photoImages vers Word — DOCX localIndexNow — soumettre des URL à Bing, vérifier la clé et les codesQuelle est mon adresse IP — IP publique (IPv4/IPv6)Validateur JSON Schema — Chemins draft-07 et localMarkdown vers HTML assaini — et retour MarkdownSchéma de couleurs web — tokens CSS sémantiquesPieds carrés en m² — Conversion pour logement et rénovationCompare Two Texts Online — Text Diff CheckerVérificateur de contraste WCAG — ratio AA/AAAVérifier les en-têtes HTTP d'un site — Inspecter les response headersYAML vers JSON — et retour YAML (types, multi-doc)

Charte graphique — brouillon modulaire à modifier

Composez votre charte dans le navigateur. Étapes : nom, secteur, HEX principal (exemple Northline Studio #0F6E8C), tags de personnalité, modules ; obtenez un brouillon avec zone de protection, couleurs, typo, espacements et exemples à faire/à éviter, puis copiez Markdown ou JSON. Les suggestions se modifient champ par champ — pas d’IA cloud. Rien n’est envoyé.

Les tags influencent le rayon, la typo suggérée, la voix et la zone du primaire.

Les modules désactivés n’apparaissent ni en aperçu ni à l’export.

Brouillon modifiable, pas un avis juridique de marque. Les presets (Strict / Produit / Convivial) sont des schémas pédagogiques inspirés de chartes publiques — pas des kits officiels ni un lien avec ces organisations. Génération locale ; nous n’hébergeons pas de logos tiers.

Comment ça marche

Renseignez l’essentiel, choisissez preset et modules, puis Générer. Règles de personnalité visibles (rayon, typo, voix, zone primaire), exemples à faire/à éviter, export Markdown/JSON. Ce que vous éditez reste manuel ; Régénérer suggestions ne rafraîchit que les defaults intacts.

Règles attendues

Modules, suggestion vs manuel, contraste et confidentialité.

  • Structure : Module → Élément → Exemple (À faire/À éviter). Modules fermés absents de l’export.
  • Tags → rayon, surface max du primaire, rôles typo et voix — règles visibles, pas boîte noire.
  • Zone de protection par défaut 1× hauteur du signe (1,5× en Strict). Taille digitale min selon preset.
  • Couleurs de statut fixes et découplées du primaire ; les erreurs n’héritent pas de la teinte marque.
  • «Suggestion» = règles déterministes dans cet onglet — pas un brand kit LLM cloud.
  • Confidentialité : génération, aperçu et copie presse-papiers en local. Pas d’upload de logos ou packs marque.

Exemple

Charger l’exemple : Northline Studio, SaaS, #0F6E8C, calme + technique, preset Produit. Aperçu : fondations, zone 1×, primaire teal avec secondaire/accent dérivés, statuts fixes, rôles typo, espacement 8px, cartes À faire/À éviter. Markdown et JSON suivent.

Bon usage

  • Sites indie rédigeant une première feuille visuelle avant de recruter un designer.
  • Freelances remettant un Markdown éditable, pas seulement un PDF figé.
  • Petites équipes alignant web, social et chrome d’app sur mêmes règles d’espace et de couleur.

Frequently asked questions

«Suggestion» équivaut-elle à une IA de marque ?

Non. Ce sont des règles fixes visibles (personnalité → rayon/typo/voix, HEX → secondaire/accent). Aucun appel API modèle.

Puis-je l’utiliser comme licence officielle ?

Non. L’export est un brouillon de travail pour votre marque ; ce n’est ni un avis juridique ni une autorisation pour des signes tiers.

Différence avec un outil de palette ?

Les palettes visent échantillons ou tokens CSS. Ici vous construisez un document multi-modules (logo, typo, espacement, exemples). Pour des systèmes plus profonds, utilisez Brand Color Scale ou Smart Website Color Scheme.

Que changent les presets de structure ?

Strict insiste sur zone de protection et limites ; Produit garde modules token-friendly ; Convivial active aussi voix et touchpoints. Modules togglables à la main.

Les modules fermés restent-ils dans le JSON ?

Les flags modules sont stockés ; aperçu et Markdown omettent les sections fermées pour que les partenaires ne voient que l’activé.

Comment fonctionnent les exports Word et PDF ?

Word et PDF capturent le même aperçu que sur la page (html2canvas), puis le paginent en images .docx ou pages PDF. Les démos de mouvement sont figées. Tout reste local après génération ; les libs se chargent au clic sur télécharger.

Related tools

  • Générer l’échelle de couleur de marque — palette 50–950 et tokens CSS
  • Schéma de couleurs web — tokens CSS sémantiques
  • Vérificateur de contraste WCAG — ratio AA/AAA

Partager cet outil

Partagez sur les réseaux, copiez le lien ou utilisez le partage du système.

XFacebookLinkedInRedditWhatsAppTelegram

https://onlinefreetools.org/fr/tools/brand-style-guide

Questions ou retours

Quelque chose n’est pas clair, cassé ou manquant ? Rédigez un message ci-dessous — nous lisons chaque note.

E-mail: dailyonetools@outlook.com

References

  • WCAG 2.2 Understanding — Contrast (Minimum)
  • Material Design 3 — Styles
  • Carbon Design System — Color
  • NASA Brand Guidelines (structure reference)
  • docx — JavaScript library
  • pdf-lib
OnlineFreeTools.org · Projet d'apprentissage · En cours d'itération
À propos·Journaux de développement·Confidentialité·Conditions·Contact