uhlive Branding Kit - Vue d'ensemble

uhlive Branding Kit

Vue d'ensemble

Un brand guideline (ou charte graphique) est un document de référence qui définit l'identité visuelle d'une marque. Il rassemble l'ensemble des règles, codes visuels et bonnes pratiques nécessaires pour garantir une communication cohérente et professionnelle sur tous les supports.

Objectif de ce guide

Ce branding kit uhlive a été conçu pour permettre à tous les collaborateurs, partenaires et prestataires de respecter l'identité visuelle de la marque, quel que soit le support utilisé : site web, applications mobiles, documents imprimés, réseaux sociaux ou communication événementielle.

Pourquoi respecter ces guidelines ?

Cohérence de marque

Une identité visuelle cohérente renforce la reconnaissance de la marque et transmet un message de professionnalisme. Chaque interaction avec uhlive doit refléter les mêmes valeurs visuelles.

Efficacité opérationnelle

Ces guidelines permettent de gagner du temps en proposant des éléments prêts à l'emploi : couleurs définies, typographies optimisées, templates validés et codes CSS directement utilisables.

Impact utilisateur

Une expérience visuelle unifiée améliore la navigation et la compréhension des utilisateurs, créant un sentiment de confiance et de familiarité avec la marque.

Structure du guide

Logo & Emblème

Versions du logo, règles d'usage, zones de protection et déclinaisons contextuelles pour tous vos besoins de communication.

Couleurs & Gradients

Palette complète avec codes précis, gradients signature et guidelines d'application pour créer des interfaces cohérentes.

Typographie

Hiérarchie des textes, graisses recommandées et codes CSS pour maintenir une cohérence typographique sur tous les supports.

Éléments Visuels

Iconographie, illustrations, photographie et motifs graphiques pour enrichir vos créations tout en respectant l'identité uhlive.

Guidelines & Templates

Règles d'usage, bonnes pratiques, templates prêts à l'emploi et conseils d'application pour différents contextes.

Comment utiliser ce guide

Consultez la section correspondant à vos besoins
Copiez les codes exacts (HEX, RGB, CSS) fournis
Respectez les règles d'usage et zones de protection
Testez la cohérence visuelle sur vos supports
Validez avec l'équipe brand en cas de doute

Public cible

Ce guide s'adresse aux :

Designers et graphistes travaillant sur les supports uhlive
Développeurs intégrant l'identité visuelle sur les plateformes digitales
Équipes marketing créant du contenu promotionnel
Partenaires externes respectant la charte dans leurs réalisations

Note importante : La cohérence de votre travail contribue directement à la force et à la reconnaissance de la marque uhlive.

Logo & Emblème - uhlive Branding Kit

Logo & Emblème

Identité visuelle

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 évoque une sophistication professionnelle, équilibrant solidité et modernité. L'agencement clair met 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.

Logo principal (inline)

Logo inline - Obsidian

Usage : Version principale pour la plupart des supports

Couleurs : Obsidian (#293746) sur fond clair

Logo inline - Black

Usage : Applications monochromes, impression noir et blanc

Couleurs : Noir pur sur fond clair

Logo inline - White

Usage : Fonds sombres, applications en négatif

Couleurs : Blanc pur sur fond sombre

Logo inline - Glacier

Usage : Quand nécessaire sur fond blanc

Couleurs : Glacier (#59C2D3) sur fond blanc

📦 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é.

Logo Bubble - Glacier

Usage : Version principale du logo bubble

Couleurs : Glacier (#59C2D3)

Logo Bubble - Obsidian

Usage : Alternative élégante et professionnelle

Couleurs : Obsidian (#293746)

Logo Bubble - White

Usage : Fonds sombres, applications en négatif

Couleurs : Blanc pur sur fond sombre

Logo Bubble - Black

Usage : Applications monochromes

Couleurs : Noir pur

📦 Télécharger le pack - Logo Bubble UhLive

Zone de protection

Espacement minimal

Assurez un espace vide autour du logo équivalent à la hauteur du "u" pour maintenir la lisibilité et l'impact visuel.

Application : Cet espacement s'applique à toutes les versions du logo, inline et bubble.

Utilisation interdite

⚠️ Interdictions strictes

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 appliquer sur un fond similaire

Ne pas pivoter

Ne pas déformer

Ne pas changer la couleur

Ne pas appliquer de filtre

Ne pas utiliser sur fond similaire

Couleurs & Gradients - uhlive Branding Kit

Couleurs & Gradients

Couleurs Essentielles

Les 7 couleurs principales de l'identité uhlive - accès rapide aux codes les plus utilisés.

Glacier

#59C2D3

rgb(89, 194, 211)

Principal

Blueprint

#164D63

rgb(22, 77, 99)

Secondaire

Obsidian

#293746

rgb(41, 55, 70)

Neutre

Premium

#BFA8F2

rgb(191, 168, 242)

Fonctionnel

Success

#52D8A0

rgb(82, 216, 160)

Fonctionnel

Warning

#D94559

rgb(217, 69, 89)

Fonctionnel

Attention

#F5C858

rgb(245, 200, 88)

Fonctionnel

↓ Palettes complètes avec toutes les nuances ci-dessous

Palettes Complètes

La palette uhlive comprend 70 couleurs organisées en 7 familles distinctes, chacune déclinée en 10 nuances pour offrir une flexibilité maximale.

Glacier

Couleur principale - Bleu glacé moderne et rafraîchissant

Blueprint

Couleur secondaire - Bleu marine professionnel et stable

Obsidian

Couleur neutre - Gris anthracite élégant et sophistiqué

Premium

Violet élégant et luxueux pour les fonctionnalités premium

Success

Vert frais et positif pour les messages de succès

Warning

Rouge vif et impactant pour les erreurs critiques

Attention

Jaune chaleureux pour les avertissements importants

Gradients signature

Dégradés officiels pour donner du dynamisme aux designs

Télécharger les couleurs

Pack multi-formats pour importer la palette UhLive dans vos outils design préférés.

📦

Pack Couleurs Complet

5 formats inclus : JSON, CSS, TXT, GPL, Documentation

Figma Adobe XD Sketch CSS/Web GIMP Photoshop

⬇ Télécharger le pack (15 KB)

Typographie - UhLive Branding Kit

Typographie

Système typographique UhLive

Architecture responsive optimisée pour tous les supports : de la communication print aux interfaces webapp, avec une approche adaptative selon les devices.

Approche multi-contexte responsive

Chaque police a été sélectionnée pour exceller dans son domaine d'application tout en s'adaptant parfaitement à tous les devices.

Police principale

Montserrat

Principal — Web & Print

Usage : Interface web UhLive, communications digitales, marketing, branding, supports imprimés

Graisses disponibles :

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700

Transformez chaque conversation
Notre IA vocale optimise l'expérience client avec précision et éthique.

Voir sur Google Fonts Télécharger la police

Inter

Secondaire — Interface technique

Usage : Webapp complexes, dashboards, applications techniques, documentation

Note : À réserver aux interfaces très techniques nécessitant une lisibilité optimale à l'écran.

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700

Dashboard Analytics
Visualisez vos performances en temps réel avec des métriques précises et des insights actionnables.

Voir sur Google Fonts Télécharger la police

JetBrains Mono

Code & Data

Usage : Code, données techniques, numéros, logs, configurations, APIs

Graisses disponibles :

Regular 400 Medium 500 SemiBold 600 Bold 700

const analyzeCall = (audioData) => {
  API_KEY=uhlive_prod_2024 | CONFIDENCE=0.97 | SENTIMENT=positive
}

Voir sur Google Fonts Télécharger la police

Tailles responsive — valeurs de référence

Adaptation par device

Desktop (> 1024px)

H1	60px
H2	48px
H3	39px
H4	24px
H5	21px
H6	18px
Body	16px

Tablet (768–1024px)

H1	45px (75%)
H2	34px (70%)
H3	27px (70%)
H4	22px (90%)
H5	19px (90%)
H6	18px (100%)
Body	16px (100%)

Mobile (< 768px)

H1	39px (65%)
H2	29px (60%)
H3	25px (65%)
H4	22px (90%)
H5	19px (90%)
H6	18px (100%)
Body	16px (100%)

Hiérarchie typographique responsive

Les tailles s'adaptent automatiquement selon votre device. Redimensionnez votre navigateur pour tester.

H1 — Titre principal

Desktop : 60px Tablet : 45px Mobile : 39px Graisse : Bold (700) Line-height : 1.2 Usage : Hero, titres de pages principales

H2 — Titre de section

Desktop : 48px Tablet : 34px Mobile : 29px Graisse : SemiBold (600) Line-height : 1.3 Usage : Titres de sections majeures

H3 — Sous-titre

Desktop : 39px Tablet : 27px Mobile : 25px Graisse : SemiBold (600) Line-height : 1.4 Usage : Sous-sections importantes

H4 — Titre composant

Desktop : 24px Tablet : 22px Mobile : 22px Graisse : Medium (500) Line-height : 1.4 Usage : Titres de composants, cartes

H5 — Titre élément

Desktop : 21px Tablet : 19px Mobile : 19px Graisse : Medium (500) Line-height : 1.4 Usage : Éléments de navigation, labels

H6 — Titre détail

Toutes tailles : 18px Graisse : Medium (500) Line-height : 1.5 Usage : Détails, sous-éléments

P — Paragraphe standard pour contenu principal et descriptions.

Toutes tailles : 16px Graisse : Regular (400) Line-height : 1.6 Usage : Texte de lecture, descriptions

Applications CSS

/* Variables typographiques uhlive - Versions responsive réelles */
:root {
  /* Desktop (>1024px) */
  --text-h1-desktop: 60px;
  --text-h2-desktop: 48px;
  --text-h3-desktop: 39px;
  --text-h4-desktop: 24px;
  --text-h5-desktop: 21px;
  --text-h6-desktop: 18px;
  --text-body: 16px;

  /* Tablet (768-1024px) */
  --text-h1-tablet: 45px;
  --text-h2-tablet: 34px;
  --text-h3-tablet: 27px;
  --text-h4-tablet: 22px;
  --text-h5-tablet: 19px;
  --text-h6-tablet: 18px;

  /* Mobile (<768px) */
  --text-h1-mobile: 39px;
  --text-h2-mobile: 29px;
  --text-h3-mobile: 25px;
  --text-h4-mobile: 22px;
  --text-h5-mobile: 19px;
  --text-h6-mobile: 18px;

  /* Line Heights */
  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.4;
  --lh-h4: 1.4;
  --lh-h5: 1.4;
  --lh-h6: 1.5;
  --lh-body: 1.6;

  /* Graisses */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Couleurs */
  --color-title-primary: #164D63;
  --color-title-secondary: #293746;
  --color-body: #293746;
  --color-link: #59C2D3;
}

/* Base styles */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body);
  color: var(--color-body);
}

/* Headings - Desktop */
h1 {
  font-size: var(--text-h1-desktop);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-h1);
  color: var(--color-title-primary);
}
h2 {
  font-size: var(--text-h2-desktop);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-h2);
  color: var(--color-title-primary);
}
h3 {
  font-size: var(--text-h3-desktop);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-h3);
  color: var(--color-title-primary);
}
h4 {
  font-size: var(--text-h4-desktop);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-h4);
  color: var(--color-title-secondary);
}
h5 {
  font-size: var(--text-h5-desktop);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-h5);
  color: var(--color-title-secondary);
}
h6 {
  font-size: var(--text-h6-desktop);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-h6);
  color: var(--color-title-secondary);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  h1 { font-size: var(--text-h1-tablet); }
  h2 { font-size: var(--text-h2-tablet); }
  h3 { font-size: var(--text-h3-tablet); }
  h4 { font-size: var(--text-h4-tablet); }
  h5 { font-size: var(--text-h5-tablet); }
  h6 { font-size: var(--text-h6-tablet); }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  h1 { font-size: var(--text-h1-mobile); }
  h2 { font-size: var(--text-h2-mobile); }
  h3 { font-size: var(--text-h3-mobile); }
  h4 { font-size: var(--text-h4-mobile); }
  h5 { font-size: var(--text-h5-mobile); }
  h6 { font-size: var(--text-h6-mobile); }
}

/* Familles de polices */
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-jetbrains { font-family: 'JetBrains Mono', monospace; }

/* Classes utilitaires couleurs */
.text-glacier   { color: var(--color-link); }
.text-blueprint { color: var(--color-title-primary); }
.text-obsidian  { color: var(--color-body); }

Contextes d'application

Web / Digital (principal)

Police : Montserrat exclusivement
Tailles : Responsive comme définies ci-dessus
Couleurs : Blueprint pour titres, Obsidian pour body
Usage : Site web UhLive, applications, interfaces

Print / Communication externe

Police : Montserrat
Tailles : Utiliser les tailles desktop comme base
Adaptation : Ajuster selon le format final
Usage : Brochures, cartes de visite, affiches

Bonnes pratiques

Sélection par contexte

Web principal : Montserrat obligatoire
Interface technique : Inter si nécessaire
Code / Données : JetBrains Mono
Print : Montserrat pour cohérence

Responsive & hiérarchie

Respecter les proportions définies
Body texte à 16px sur tous les devices
Hiérarchie H1 → H6 respectée
Un seul H1 par page
Tester sur différentes tailles d'écran

À éviter

Utiliser Inter/JetBrains pour le contenu web principal
Sauter des niveaux hiérarchiques
Ajouter d'autres polices sans validation
Modifier les proportions responsive établies
Multiplier les polices sur un même support
Négliger les tests sur mobile et tablette

Guidelines & Templates - uhlive Branding Kit

Guidelines & Templates

Règles générales d'usage, bonnes pratiques, modèles prêts à l'emploi, grilles et recommandations d'accessibilité.

Règles générales d'usage

Identité de marque

Respectez toujours l'intégrité du logo
Utilisez exclusivement les couleurs de la palette
Maintenez la cohérence typographique Montserrat
Préservez les zones de protection définies

Cohérence visuelle

Appliquez les mêmes standards sur tous les supports
Respectez les proportions et alignements
Utilisez les gradients signature pour les backgrounds brandés
Testez la lisibilité sur différents écrans et supports

Bonnes pratiques

Interface utilisateur

Utilisez les couleurs primaires pour les éléments de navigation et CTA
Respectez les rapports de contraste pour l'accessibilité (min 4.5:1)
Appliquez les gradients signature pour les backgrounds immersifs
Maintenez la hiérarchie typographique sur tous les écrans
Copiez les codes HEX/RGB exacts depuis la documentation
Testez l'affichage sur différentes résolutions

Communication print

Utilisez les versions CMYK des couleurs
Préférez les couleurs solides aux gradients complexes
Respectez les espaces blancs et la lisibilité
Testez l'impression en niveaux de gris
Vérifiez la lisibilité à différentes tailles

À éviter absolument

Erreurs courantes

Ne mélangez pas plus de 3 couleurs primaires sur une interface
N'utilisez jamais les couleurs d'alerte pour des éléments décoratifs
Ne modifiez pas les gradients sans respecter l'identité UhLive
N'utilisez pas uniquement la couleur pour transmettre une information
Évitez les approximations de couleurs - utilisez toujours les codes exacts
Ne négligez jamais l'accessibilité pour les personnes malvoyantes

Interdictions strictes

Modification du logo (déformation, rotation, couleurs non autorisées)
Usage de polices autres que Montserrat sans autorisation
Création de nouveaux gradients non validés
Application sur fonds nuisant à la lisibilité

Applications par contexte

Interfaces web

Couleur primaire: Glacier (#59C2D3) pour liens et boutons principaux
Couleur secondaire: Blueprint (#164D63) pour navigation et headers
Success: #52D8A0 pour confirmations et états positifs
Warning: #D94559 pour erreurs critiques et suppressions
Gradients: Pour héros, backgrounds immersifs et cartes premium

Communication digitale

Réseaux sociaux: Formats optimisés avec logo adapté
Newsletters: Template cohérent avec hiérarchie typographique
Présentations: Slides avec gradients signature en background
Documents: Utilisation du logo horizontal en header

Communication print

Cartes de visite: Logo principal + coordonnées en Blueprint
Brochures: Gradients adaptés au print (CMYK)
Affiches: Grande visibilité avec couleurs contrastées
Signalétique: Lisibilité maximale, couleurs durables

Templates disponibles

Template 1: Carte de communication

Usage: Réseaux sociaux, posts promotionnels
Format: Carré 1080x1080px
Éléments: Logo, titre, texte, gradient background

Template 2: Présentation corporate

Usage: Présentations business, pitch decks
Format: 16:9 Full HD
Éléments: Headers brandés, palette de slides

Template 3: Newsletter

Usage: Communications email régulières
Format: Responsive web
Éléments: Header, sections modulaires, footer

Template 4: Carte de visite

Usage: Networking, événements
Format: 85x54mm (print)
Éléments: Logo, informations de contact, QR code

Grille et alignements

Grille de base

Module: 8px
Colonnes: 12 colonnes (desktop), 4 colonnes (mobile)
Gouttières: 24px (desktop), 16px (mobile)
Marges: 80px (desktop), 24px (mobile)

Points de rupture responsive

Mobile: < 768px
Tablette: 768px - 1024px
Desktop: > 1024px
Large: > 1440px

Accessibilité

Standards respectés

WCAG 2.1 AA - Niveau minimum requis
WCAG 2.1 AAA - Niveau recommandé pour le texte principal

Ratios de contraste validés

Glacier sur blanc: AA
Blueprint sur blanc: AAA
Obsidian sur blanc: AAA
Success sur blanc: AA

Tests recommandés

Simulateur de daltonisme
Navigation clavier uniquement
Test avec lecteurs d'écran
Contrôle en conditions de faible luminosité

Découvrir

Découvrir

Découvrir

Vue d'ensemble

Objectif de ce guide

Pourquoi respecter ces guidelines ?

Cohérence de marque

Efficacité opérationnelle

Impact utilisateur

Structure du guide

Logo & Emblème

Couleurs & Gradients

Typographie

Éléments Visuels

Guidelines & Templates

Comment utiliser ce guide

Public cible

Identité visuelle

Logo principal (inline)

Logo inline - Obsidian

Logo inline - Black

Logo inline - White

Logo inline - Glacier

Logo Bubble

Logo Bubble - Glacier

Logo Bubble - Obsidian

Logo Bubble - White

Logo Bubble - Black

Zone de protection

Espacement minimal

Utilisation interdite

⚠️ Interdictions strictes

Couleurs Essentielles

Palettes Complètes

Glacier

Blueprint

Obsidian

Premium

Success

Warning

Attention

Gradients signature

Télécharger les couleurs

Pack Couleurs Complet

Système typographique UhLive

Approche multi-contexte responsive

Police principale

Montserrat

Inter

JetBrains Mono

Tailles responsive — valeurs de référence

Adaptation par device

Hiérarchie typographique responsive

H1 — Titre principal

H2 — Titre de section

H3 — Sous-titre

H4 — Titre composant

H5 — Titre élément

H6 — Titre détail

Applications CSS

Contextes d'application

Web / Digital (principal)

Print / Communication externe

Bonnes pratiques

Sélection par contexte

Responsive & hiérarchie

À éviter

Règles générales d'usage

Identité de marque

Cohérence visuelle

Bonnes pratiques

Interface utilisateur

Communication print

À éviter absolument

Erreurs courantes

Interdictions strictes

Applications par contexte

Interfaces web

Communication digitale

Communication print