Aller au contenu

Marque · Identité visuelle

Charte graphique

Ce manuel décrit comment l'identité visuelle du LBS est construite et comment l'appliquer : le logo et ses variantes approuvées, la zone de protection et les tailles minimales, la palette de couleurs, la typographie et le ton employé par le laboratoire.

L'identité appartient à tout le laboratoire : articles, affiches, présentations, outils et sites web doivent sembler venir du même endroit. En cas de doute, choisissez l'option correcte la plus simple et laissez le logo dégagé de tout autre élément.

Retour aux documents

Nom et signature

Le laboratoire s'appelle « LBS » en forme courte et « Laboratório de Bioinformática e Sistemas » en toutes lettres. Le nom complet est institutionnel et reste en portugais dans les contextes formels, même dans un document rédigé dans une autre langue ; les traductions ne servent qu'au confort de lecture.

LBS
Toujours en capitales, jamais « L.B.S. » ni « Lbs ». Peut être employé seul une fois le nom complet mentionné.
Laboratório de Bioinformática e Sistemas
Nom officiel complet. À conserver en portugais sur les papiers à en-tête, les conventions et partout où le laboratoire est nommé institutionnellement.
Laboratoire de Bioinformatique et Systèmes
Traduction de lecture, employée dans les textes en français. Équivalents : Laboratory of Bioinformatics and Systems (EN) et Laboratorio de Bioinformática y Sistemas (ES).
DCC · UFMG
Rattachez toujours le laboratoire au Département d'Informatique de l'Université Fédérale du Minas Gerais. Utilisez un point médian, ni barre oblique ni trait d'union.

La signature typographique intégrée au logo est un tracé vectorisé, pas du texte éditable. Elle est toujours en portugais et n'est jamais recomposée ni traduite.

Le logo

L'identité comporte deux éléments : le symbole numérique — la flèche qui s'élance hors d'un globe pointillé — et la signature typographique. Ils se combinent en trois compositions et trois déclinaisons de couleur. Chaque version existe en SVG, qui s'agrandit sans perte, et en PNG à fond transparent.

Composition horizontale

Symbole à gauche de la signature. Choix par défaut pour les en-têtes, pieds de page, papiers à en-tête et masques de présentation — partout où l'espace est plus large que haut. C'est la version employée par ce site.

Charte graphique — Composition horizontale, Couleur

Couleur

Par défaut. À utiliser sur fond blanc ou clair.

Charte graphique — Composition horizontale, Bleu marine

Bleu marine

Usage monochrome : impression sans dégradé, gravure, tampons et documents en une couleur.

Charte graphique — Composition horizontale, Blanc

Blanc

Sur fond bleu marine, sombre ou photographique. C'est la version employée par le thème sombre du site.

Composition verticale

Symbole au-dessus de la signature. À utiliser lorsque l'espace est étroit ou carré : affiches, kakémonos, badges, bandeaux de réseaux sociaux et coin d'un poster scientifique.

Charte graphique — Composition verticale, Couleur

Couleur

Version par défaut. À utiliser sur fond blanc ou clair.

Charte graphique — Composition verticale, Bleu marine

Bleu marine

Fonds clairs.

Charte graphique — Composition verticale, Blanc

Blanc

Fonds sombres et photographiques.

Symbole seul

Le symbole sans la signature. À n'utiliser que lorsque le LBS est déjà nommé à proximité, ou lorsque l'espace est trop réduit pour la composition complète : favicons, avatars, icônes d'application, filigranes et repères de section.

Charte graphique — Symbole seul, Couleur

Couleur

Par défaut, sur fond clair.

Charte graphique — Symbole seul, Bleu marine

Bleu marine

Usage monochrome et très petites tailles.

Charte graphique — Symbole seul, Blanc

Blanc

Fonds sombres et photographiques.

Zone de protection et taille minimale

Ménagez sur les quatre côtés du logo une marge égale à la moitié de la hauteur du symbole. Rien n'entre dans cette marge : ni texte, ni filet, ni image, ni bord de page. En cas de doute, donnez-lui plus d'air, pas moins.

LBS½x½x½x½x

Composition horizontale

144 px / 40 mm

Largeur minimale. C'est la taille employée par l'en-tête du site sur petit écran.

Composition verticale

96 px / 25 mm

Largeur minimale.

Symbole

32 px / 10 mm

Largeur minimale. En dessous, utilisez la version bleu marine : le dégradé cesse d'être lisible.

Ce qu'il ne faut pas faire

Les compositions sont des fichiers finalisés. Redimensionnez-les proportionnellement et ne touchez à rien d'autre.

  • N'étirez pas, n'aplatissez pas et ne faites pas pivoter le logo. Redimensionnez-le proportionnellement.
  • Ne le recolorisez pas en dehors des trois déclinaisons approuvées.
  • Ne placez pas la version couleur ou bleu marine sur un fond sombre ou chargé : c'est le rôle de la version blanche.
  • Ne recomposez pas la signature. C'est un tracé vectorisé, pas du texte, et elle ne se traduit jamais.
  • Ne fabriquez pas votre propre composition en écartant le symbole de la signature.
  • N'ajoutez ni ombre portée, ni contour, ni biseau, ni halo.
  • Ne l'enserrez pas. Respectez la zone de protection.
  • Ne l'enfermez pas dans un cartouche blanc sur fond coloré alors que la version blanche peut s'appliquer directement sur ce fond.

Couleur

La palette associe le bleu profond et le cyan — science, calcul et confiance — au vert des sciences du vivant. L'orange est un accent rare : il souligne un seul élément dans une page, jamais une seconde couleur de marque. Le violet, le rouge, le noir ou le gris dominants et les tons fluo sortent de la palette.

Couleurs du logo

Relevées directement dans les fichiers. Utilisez ces valeurs pour reproduire le logo ou le caler en impression.

Bleu LBS

#093373

Bleu marine plein — symbole et signature en usage monochrome

Dégradé bleu

#123F86 → #082F68

Corps du symbole dans la version couleur

Turquoise LBS

#05ADB6 → #00889C

Rehaut du symbole dans la version couleur

Blanc

#FFFFFF

Logo en réserve sur fonds sombres et photographiques

Palette d'interface

Les jetons sur lesquels reposent le site et les outils du laboratoire. Chacun possède une valeur pour le thème clair et une pour le thème sombre ; dans le code, utilisez le jeton, pas l'hexadécimal.

InkClair #08213F · Sombre #E8F4FFTexte principal et aplats sombres
MarineClair #0F6FB8 · Sombre #76C4FFLiens, intitulés de section et actions principales
CyanClair #139BD7 · Sombre #57CDFFRehauts, icônes et accents de données
LeafClair #35A972 · Sombre #62DC9DAccent sciences du vivant et états positifs
AmberClair #F4A01B · Sombre #F8B84CAccent rare. Un seul par écran, au maximum
MutedClair #5F728B · Sombre #9AB3CDTexte secondaire et légendes
LineClair #DCE8F4 · Sombre #253E58Bordures, filets et contours de cartes
CloudClair #F7FBFF · Sombre #09192BFonds de page et de cartes

Typographie

Deux piles : une serif pour les titres, une sans serif pour tout le reste. Ce sont des piles de polices et non des polices uniques, afin que les documents restent cohérents sur les machines où le premier choix n'est pas installé.

Titrage

Bioinformatique

Iowan Old Style → Newsreader → Fraunces → Georgia

Titres de page et gros titres. À composer en grand corps, interlignage serré et avec parcimonie.

Texte et interface

Laboratoire de Bioinformatique et Systèmes

Inter → Manrope → Geist → system UI

Corps de texte, navigation, libellés, boutons et tableaux — tout ce qui n'est pas un titre.

Intitulés de section

AXES DE RECHERCHE

Sans serif, graisse 900, capitales, approche 0,2em

Le petit intitulé bleu marine au-dessus d'une section. À garder court : deux ou trois mots.

Voix et ton

Définis lors de l'enquête interne de marque du laboratoire. Nous parlons comme des chercheurs qui livrent des outils.

Innovant

Commencez par ce qui est nouveau et pourquoi cela compte, pas par la méthode.

Interdisciplinaire

Écrivez de façon qu'un biologiste et un informaticien suivent tous les deux. Explicitez chaque terme à sa première apparition.

Entreprenant

Concret et tourné vers l'avant. Nommez l'outil, le jeu de données, le résultat.

Moderne

Phrases courtes, voix active, sans préambule institutionnel.

Fiable

Ne surestimez jamais un résultat. Citez-le, liez-le, ou laissez-le de côté.

À éviter

  • Le violet dans tout contexte de marque
  • Le rouge comme accent : il se lit comme un état d'erreur
  • Le noir ou le gris comme couleur dominante
  • Le fluo et les dégradés très saturés en dehors du logo

Fichiers

Les neuf versions du logo se trouvent dans public/logos/ de ce dépôt, chacune en SVG et en PNG à fond transparent — dix-huit fichiers au total. Privilégiez le SVG : il s'agrandit sans perte. Le PNG est là pour les éditeurs qui n'ouvrent pas les vecteurs, comme Word, PowerPoint et les réseaux sociaux. Téléchargez l'ensemble en ZIP, ou récupérez un fichier isolé depuis les cartes ci-dessus.

ZIP · 9 SVG + 9 PNG · ~1,5 Mo

Télécharger tous les logos (ZIP)