Skip to main content

Guide de Marque uh!live

Bienvenue dans le guide de marque de uh!live. Ce document a pour objectif de fournir des directives claires et pratiques pour garantir une utilisation cohérente de notre identité visuelle et verbale.

📧 Pour toute question ou clarification, veuillez contacter le département design à : g.delacroix@uh.live.

🖌️ Logos


 

Logo principal

Le logo uh!ive incarne modernité, dynamisme et proximité humaine. Avec sa typographie arrondie et sans-serif, il reflète accessibilité et simplicité, tandis que l’exclamation dans « uh! » ajoute une touche d’énergie et d’enthousiasme. Sa palette de couleurs « gunmetal » évoque une sophistication professionnelle, équilibrant solidité et modernité. L’agencement clair et la tagline « Understanding humans — live! » mettent en avant une vision axée sur l’humain, la connexion en temps réel et l’innovation. Ce logo est conçu pour s’adapter à une variété de supports, tout en transmettant les valeurs fondamentales d’uh!ive : comprendre, connecter et inspirer.

  • Couleurs autorisées : Version Gunmetal, noir, et blanc, mais également quand nécessaire sur fond blanc la version Pacific.
  • Espacement minimal : assurez un espace vide autour du logo équivalent à la hauteur du “u”.

_

uhlive logo inline – Gunmetal

_

uhlive logo inline – Black

_

uhlive logo inline – White

_

uhlive logo inline – Pacific

Télécharger le pack - Logo Line Uhlive

 

Logo Bubble

Le logo uh! encapsule l’essence de la marque à travers une bulle symbolisant communication et interaction humaine. Sa typographie moderne et l’exclamation énergique transmettent dynamisme et engagement. La couleur bleu « pacific » inspire confiance et innovation, tout en reflétant une approche accueillante et collaborative. Par sa forme fluide et ludique, ce logo évoque ouverture, mouvement et connectivité, alignés sur les valeurs fondamentales d’uh!ive : connecter les humains dans des échanges authentiques et enrichissants.

  • Couleurs autorisées : Version Pacific, Gunmetal, noir, et blanc.

_

uhlive logo – Pacific

_

uhlive logo – Gunmetal

_

uhlive logo – white

_

uhlive logo – Black

Télécharger le pack - Logo Bubble Uhlive

⚠️ Utilisation interdite

  • Ne pas déformer ou étirer le logo.
  • Ne pas modifier les couleurs du logo.
  • Ne pas ajouter de filtres ou effets.

Ne pas pivoter le logo

Ne pas déformer le logo

Ne pas changer la couleur du logo

Ne pas appliquer de filtres sur le logo

Ne pas appliquer sur un fond similaire

🎨 Palette de couleurs


Nos couleurs jouent un rôle essentiel dans le design graphique de notre enteprise. Elles véhiculent des émotions et des messages spécifiques, renforçant l’image de marque. Les couleurs aident également à différencier une marque de ses concurrents et à la rendre mémorable.

Utilisation des codes couleurs :

  • HEX : Format à 6 caractères, utilisé principalement pour les couleurs web.
  • RGB : Basé sur les niveaux de rouge, vert et bleu, adapté aux images numériques.
  • CMYK : Basé sur cyan, magenta, jaune et noir, conçu pour l’impression.

Couleurs primaires :

À utiliser en priorité sous forme d’aplats ou de textures fines et régulières. Elles constituent les teintes dominantes du design graphique de notre entreprise, car elles captent l’attention et influencent la première impression de nos clients. Leur sélection doit être stratégique pour renforcer l’impact visuel et l’identité de la marque.

Pacific

#30b3c8



RGB: 48, 179, 200

CMYK: 76, 11, 0, 22

Gunmetal

#293746



RGB: 41, 55, 70

CMYK: 41, 21, 0, 73

Copper

#e8855c



RGB: 232, 133, 92

CMYK: 0, 43, 60, 9

Haze

#eef2f5



RGB: 238, 242, 245

CMYK: 3, 1, 0, 4

 

Couleurs secondaires

Les couleurs secondaires complètent la palette principale et permettent une plus grande flexibilité dans les conceptions. Elles doivent être utilisées avec modération et principalement pour des éléments de support comme des arrière-plans, des infographies ou des accents graphiques.

  • Exemples d’utilisation :
    • Arrière-plans doux : Ajoutez des nuances subtiles pour ne pas détourner l’attention du contenu principal.
    • Graphiques et illustrations : Apportez de la variété tout en maintenant une harmonie visuelle.
    • Boutons secondaires : Différenciez les actions principales des actions secondaires.

 

Pacific-Lighter

#a1f0fc



RGB: 161, 240, 252

CMYK: 36, 5, 0, 1

Pacific-Light

#7bdfef



RGB: 123, 223, 239

CMYK: 49, 7, 0, 6

Pacific-Dark

#368295



RGB: 54, 130, 149

CMYK: 64, 13, 0, 42

Pacific-Darker

#133548



RGB: 19, 53, 72

CMYK: 74, 26, 0, 72

Gunmetal-Lighter

#b0c1d1



RGB: 176, 193, 209

CMYK: 16, 8, 0, 18

Gunmetal-Light

#62778c



RGB: 98, 119, 140

CMYK: 30, 15, 0, 45

Gunmetal-Dark

#1b242f



RGB: 27, 36, 47

CMYK: 43, 23, 0, 82

Gunmetal-Darker

#141920



RGB: 20, 25, 32

CMYK: 38, 22, 0, 87

Copper-Lighter

#f6bfa4



RGB: 246, 191, 164

CMYK: 0, 22, 33, 4

Copper-Light

#f4a986



RGB: 244, 169, 134

CMYK: 0, 31, 45, 4

Copper-Dark

#b75b34



RGB: 183, 91, 52

CMYK: 0, 50, 72, 28

Copper-Darker

#8e3d1a



RGB: 142, 61, 26

CMYK: 0, 57, 82, 44

Haze-Lighter

#f9fafb



RGB: 249, 250, 251

CMYK: 1, 0, 0, 2

Haze-Light

#f4f6f8



RGB: 244, 246, 248

CMYK: 2, 1, 0, 3

Haze-Dark

#e5ecf0



RGB: 229, 236, 240

CMYK: 5, 2, 0, 6

Haze-Darker

#d8e3e8



RGB: 216, 227, 232

CMYK: 7, 2, 0, 9

Télécharger le pack - Colors

Dégradés

Les dégradés ajoutent de la profondeur et de la modernité aux visuels. Ils doivent être utilisés de manière stratégique pour guider le regard ou renforcer un design dynamique.

Conseils d’utilisation :

    • Cohérence : Les dégradés doivent toujours respecter la direction définie (par exemple, horizontal ou diagonal).
    • Lisibilité : Assurez-vous que le texte ou les éléments superposés restent lisibles.
    • Modération : Ne surchargez pas les designs avec trop de dégradés pour éviter un effet désordonné.

✍️ Typographie


 

Rôle de la typographie

La typographie est essentielle pour renforcer l’identité visuelle de uh!live. Elle transmet le ton de la marque tout en assurant une hiérarchie visuelle claire et une expérience utilisateur agréable. L’utilisation cohérente des polices garantit une communication fluide et impactante.

Polices principales

  • Montserrat Bold : Pour les titres et accents visuels.
  • Montserrat Regular : Pour le corps de texte principal.
  • Montserrat Light : Pour les textes secondaires ou légers.

Directives pour l’utilisation

Présentations (Google Slides, PowerPoint, etc.)

  • Police recommandée : Montserrat (disponible sur Google Fonts). Si Montserrat n’est pas disponible, utilisez Poppins comme alternative.
  • Disponible ici : https://fonts.google.com/specimen/Montserrat
  • Taille des titres : 36 px minimum pour garantir la lisibilité.
  • Taille du corps de texte : 16 px minimum.
  • Interligne : 1,5 pour améliorer la lecture.
  • Hiérarchie visuelle :
    • H1 (titres principaux) : Montserrat Bold.
    • H2 (sous-titres) : Montserrat Regular.
    • Texte courant : Montserrat Light ou Regular.

Exemple avec Lorem Ipsum

Titre H1

Montserrat Bold, 48px

Texte courant

Montserrat Regular, 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Conseils de mise en page

  1. Espacement : Laissez suffisamment d’espace entre les éléments pour éviter un aspect surchargé.
  2. Alignement : Favorisez un alignement à gauche ou centré pour une cohérence visuelle.
  3. Couleurs : Utilisez les couleurs de la palette officielle pour les titres, le texte et les arrière-plans.

 


 

Guide de Marque : Typographie

 

Propriétés des Polices

 

Police pour le corps de texte

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 16px
  • Hauteur de ligne : 24px
  • Style et poids : Normal 400
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.015em

 

Polices des Titres

 

Titre 1 (H1)

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 48px
  • Hauteur de ligne : 57.6px
  • Style et poids : Extra-Bold 800
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.03em

Titre 2 (H2)

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 40px
  • Hauteur de ligne : 44.8px
  • Style et poids : Bold 700
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.02em

Titre 3 (H3)

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 32px
  • Hauteur de ligne : 33.6px
  • Style et poids : Medium 500
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.015em

Titre 4 (H4)

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 24px
  • Hauteur de ligne : 28px
  • Style et poids : Semi-Bold 600
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.02em

Titre 5 (H5)

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 20px
  • Hauteur de ligne : 27px
  • Style et poids : Semi-Bold 600
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.02em
Titre 6 (H6)
  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 18px
  • Hauteur de ligne : 27px
  • Style et poids : Semi-Bold 600
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.02em

Texte Italique

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 18px
  • Style et poids : Normal 400 Italic

Texte Gras

  • Famille de police : Montserrat
  • Style et poids : Bold 700
  • Autres propriétés : Hérité de la police pour le corps de texte

Libellés des Formulaires et Catégories

  • Famille de police : Montserrat
  • Sous-ensembles : Subsets
  • Taille : 16px
  • Hauteur de ligne : 24px
  • Style et poids : Normal 400
  • Transformation du texte : Aucune
  • Espacement des lettres : 0.01em