Retour au site

Futur Digital · système visuel

Kit de marque.

Le logo, l'icône, les couleurs et la typographie. Le « i » et le « a » du logotype sont toujours en bleu vif, quel que soit le fond.

01

Logo

i/a toujours bleu #4A9EFF
Sur fond clair
Sur fond navy

Le logotype porte le nom : signature de document, header de site, en-tête de post, présentation. Sur fond clair il est navy, sur fond navy il est blanc. Le i et le a restent bleus dans les deux cas.

Pour l'imprimeur : PDF vectoriel, en CMJN, à l'échelle. Le SVG et le PNG ci-dessus sont pour l'écran.

Zone de protection et taille minimale

Deux chiffres à retenir

Zone de protection

Une hauteur de logotype, sur les quatre côtés.

h h h h

Rien n'entre dans cette marge : ni texte, ni image, ni bord de page, ni autre logo. C'est la même règle pour l'icône, avec une marge égale au quart de sa largeur.

Taille minimale

En dessous, les détails de marque disparaissent.

Logotype, écran
110 px
de large
Logotype, impression
25 mm
de large
Icône, écran
24 px
de côté
Icône, impression
8 mm
de côté

Le plancher du logotype est fixé par le i et le a : sous 110 px de large, leur fût descend sous 3 px et le bleu se brouille. Celui de l'icône est fixé par l'anneau de la loupe, qui se referme visuellement en dessous de 24 px. Le favicon 16 px est la seule exception, assumée, parce qu'aucun navigateur ne propose mieux.

Fonds

Ce sur quoi le logotype se pose, et ce qu'il évite
Blanc
Blanc cassé
Navy
Lime, non
Bleu vif, non
Dégradé, non

Le logotype vit sur du blanc, du blanc cassé ou du navy. Sur lime, le i et le a tombent à 2,3:1 de contraste et l'accent s'éteint. Sur bleu vif, il disparaît complètement puisque c'est sa propre couleur. Sur un dégradé ou une photo non traitée, la lisibilité dépend de l'endroit où le logo tombe, donc elle n'est pas garantie : posez un aplat navy ou blanc derrière, ou utilisez l'icône.

Logo animé

Site et signatures mail
Logo Futur Digital animé, version fond clairFond clair
Logo Futur Digital animé, version fond sombreFond sombre

Deux GIF, hébergés sur le site : logo-anime-light.gif pour un fond clair, logo-anime-dark.gif pour un fond navy. Servent d'en-tête de signature mail et sur le site. Un seul logo animé par support, et jamais dans un visuel qui contient déjà une autre animation. Partout ailleurs (posts, documents, print), on utilise le logo fixe.

02

Icône

Le logo et l'icône ne vivent jamais ensemble
Officielle, externe
Interne, fond clair
Interne, fond sombre

Pour l'imprimeur : PDF vectoriel, en CMJN, à l'échelle.

L'icône représente la marque quand il n'y a pas la place d'écrire son nom : avatar de réseau social, favicon, application, tampon, pastille. Version officielle vers l'extérieur : le pin blanc cassé sur le carré bleu vif. C'est celle qu'on utilise partout où le public nous voit. En interne (favicon des outils, docs, environnements de travail), on utilise le pin monochrome qui suit le thème : navy sur fond clair, blanc sur fond sombre. Une icône ou un logotype par visuel, jamais les deux côte à côte.

03

Couleurs

Navy pour le fond, lime pour l'action

Pour l'impression

Le Lab fait référence, le CMJN est indicatif
CouleurLab (D50)CMJN couchéCMJN non couché
Navy14,5 / -7 / -1796 78 46 56100 80 44 49
Navy secondaire19,6 / -8 / -1993 73 43 43100 78 42 38
Lime92,9 / -26 / 5625 0 65 020 0 61 0
Bleu vif63,5 / -2 / -5764 35 0 067 33 0 0
Accent41,6 / -14 / -2785 52 26 589 50 24 5
Blanc cassé96,9 / -1 / -14 2 2 04 2 2 0

Donnez le Lab à votre imprimeur, pas le CMJN. Le Lab décrit la couleur elle-même, indépendamment du papier et de la presse. Le CMJN, lui, n'a de sens que pour un couple papier plus presse donné. Les valeurs ci-dessus sont converties depuis le sRGB vers Coated FOGRA27 et Uncoated FOGRA29, en colorimétrie relative avec compensation du point noir. Elles servent de point de départ, pas de référence contractuelle : c'est l'épreuve validée qui fait foi. Deux points de vigilance : le bleu vif sort du gamut CMJN et rendra toujours plus terne sur papier qu'à l'écran, et le navy monte à 276 % d'encre totale, à surveiller en numérique et sur papier non couché.

Pour les développeurs : les mêmes couleurs en variables, à importer plutôt qu'à recopier.

04

Typographie

Geist, une seule famille
Famille
Geist
Toute la marque est en Geist : web, print, présentations, visuels. Une seule famille, trois graisses. Licence SIL Open Font 1.1, libre d'usage et redistribuable, les fichiers sont dans le kit.
Graisses
Regular 400Medium 500SemiBold 600
Rien au-dessus de 600 : ni Bold, ni Black. Pas d'italique.
Logotype
600 · -5%
Display
500 · -3%
Un interlocuteur unique pour votre visibilité.
Corps
400 · 1.6
Google, ChatGPT, fiche d'établissement, Instagram : une présence suivie au même endroit, par la même équipe.
Label
500 · +16%
Le conseil de la semaine

Le logotype ne se retape pas. Il est vectorisé, c'est un tracé, pas du texte en Geist : utilisez toujours les fichiers fournis. Dans les emails, Geist ne se charge pas (aucun client mail ne charge de police externe de façon fiable) : les signatures et templates déclarent 'Geist',Arial,Helvetica,sans-serif, et retombent donc sur Arial chez le destinataire. C'est voulu, ne cherchez pas à forcer.

Pour le print et la bureautique (InDesign, Illustrator, Word, Google Docs) : les TTF.

Pour le web : les WOFF2. Aucun logiciel de PAO ne les lit, ne les envoyez pas à l'imprimeur.

05

Iconographie

Phosphor duotone, teinté accent
Téléphoneico-phone
Emailico-mail
Calendrierico-cal
Prise de rendez-vousico-rdv
Site webico-web
Adresseico-pin
Fiche d'établissementico-gmb
LinkedInico-linkedin

Un seul jeu d'icônes : Phosphor, style duotone, licence MIT, teinté en accent #1E6A8E, la couche de fond gardant son opacity 0.2. Besoin d'une icône absente de la liste ? Prenez-la sur phosphoricons.com en duotone et appliquez la même teinte, ne la dessinez pas et ne mélangez pas deux bibliothèques. Dans les emails, les icônes sont des <img> de 18 px, jamais des background-image : Outlook ne les afficherait pas. En thème sombre, la teinte passe au bleu vif, comme les surtitres.

06

Partenaires et co-branding

Si vous n'êtes pas de chez nous, lisez ceci

Ce que vous pouvez faire

  • Utiliser le logotype ou l'icône tels que fournis ici, pour indiquer un partenariat réel et en cours.
  • Choisir la version adaptée à votre fond : navy sur clair, blanc sur foncé. Le i et le a restent bleus.
  • Afficher notre logo à une taille au plus égale à la vôtre, avec sa zone de protection.
  • Nous nommer en texte : Futur Digital, deux mots, deux majuscules, sans tiret et sans autre graphie.

Ce que vous ne pouvez pas faire

  • Recolorer, déformer, incliner, détourer, ajouter une ombre, un contour ou un effet.
  • Retaper le nom dans une autre police, ou reconstruire le logotype à la main.
  • Intégrer notre logo ou notre pin dans le vôtre, ni en composer un verrou visuel commun.
  • Laisser entendre une recommandation, une certification ou une exclusivité qui n'existe pas.
  • Poser notre logo sur du lime, du bleu vif, un dégradé ou une photo non traitée.

En cas de doute, demandez avant de publier. Une validation prend moins de temps qu'un retrait. Passez par votre interlocuteur Futur Digital habituel, avec la maquette où le logo apparaît. Les fichiers de cette page sont les seuls officiels : si vous avez récupéré un logo ailleurs, dans une vieille présentation ou sur un moteur de recherche, il est probablement périmé, et notre rouge historique ne fait plus partie de la marque.

07

Règles rapides

À faire

Le lime sur ce qui doit trancher : bouton d'action, highlight, trait, grand chiffre. Un seul accent par visuel.

À faire

Le i et le a du logotype toujours en bleu vif. Le reste du tracé s'adapte au fond : navy sur clair, blanc sur navy.

À faire

Vers l'extérieur, l'icône officielle est le pin blanc cassé sur carré bleu. En interne, le pin monochrome selon le thème.

À éviter

Le lime en petit texte : contraste trop faible, réservez-le aux grandes tailles et aux aplats.

À éviter

Le logotype et l'icône ensemble dans le même visuel : c'est l'un ou l'autre.

À éviter

Déformer, recolorer ou re-typographier le logo : utilisez toujours le tracé fourni.

Pour créer des posts : le studio de gabarits (Instagram, LinkedIn) est un outil séparé, avec l'export PNG.
Noms de fichiersGardez ceux du kit, par exemple fd-logo-navy@2x.png
CréditsGeist sous licence SIL Open Font 1.1, icônes Phosphor sous licence MIT