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.
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
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
⚠️ 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 entreprise. 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.
💡 Les variantes -500 sont nos couleurs de base par défaut
Glacier
Bleu clair et rafraîchissant, idéal pour les interfaces modernes et les éléments interactifs.
Blueprint
Bleu professionnel et stable, parfait pour les applications business et corporatives.
Obsidian
Gris sophistiqué et neutre, excellent pour les textes et les éléments secondaires.
Premium
Violet élégant et luxueux, idéal pour les fonctionnalités premium et les call-to-action.
Success
Vert frais et positif, parfait pour les messages de succès et les indicateurs positifs.
Attention
Jaune chaleureux et informatif, idéal pour les avertissements et les notifications importantes.
Warning
Rouge vif et alerte, utilisé pour les erreurs et les avertissements critiques.
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é.
Système typographique UhLive
Architecture à trois niveaux optimisée pour tous les supports : de la communication print aux interfaces webapp, jusqu'au code technique.
🎯 Approche multi-contexte
Chaque police a été sélectionnée pour exceller dans son domaine d'application tout en maintenant une cohérence visuelle globale.
Montserrat
Print & Communication
Inter
Webapp & UI
JetBrains Mono
Code & Data
Montserrat
Print & Communication
Usage : Matériaux imprimés, communications externes, marketing, branding
Transformez chaque conversation
Notre IA vocale révolutionne l'expérience client avec une précision et une éthique sans compromis.
Light 300
Aa
Regular 400
Aa
Medium 500
Aa
SemiBold 600
Aa
Bold 700
Aa
Inter
Webapp & Interface
Usage : Interface webapp, dashboards, applications, documentation technique
Dashboard Analytics
Visualisez vos performances en temps réel avec des métriques précises et des insights actionnables pour optimiser votre stratégie client.
Light 300
Aa
Regular 400
Aa
Medium 500
Aa
SemiBold 600
Aa
Bold 700
Aa
JetBrains Mono
Code & Data
Usage : Code, données techniques, numéros, logs, configurations
const analyzeCall = (audioData) => {
API_KEY=uhlive_prod_2024 | CONFIDENCE=0.97 | SENTIMENT=positive
Regular 400
Aa
Medium 500
Aa
SemiBold 600
Aa
Bold 700
Aa
Hiérarchie typographique
Échelle harmonieuse pour structurer l'information et guider le regard utilisateur.
Titre Principal H1
36px, weight: 700
line-height: 1.2
line-height: 1.2
Titre Section H2
30px, weight: 600
line-height: 1.3
line-height: 1.3
Sous-titre H3
24px, weight: 600
line-height: 1.4
line-height: 1.4
Titre Composant H4
20px, weight: 500
line-height: 1.4
line-height: 1.4
Titre Élément H5
18px, weight: 500
line-height: 1.4
line-height: 1.4
Titre Détail H6
16px, weight: 500
line-height: 1.5
line-height: 1.5
Texte de paragraphe standard pour le contenu principal et les descriptions détaillées.
16px, weight: 400
line-height: 1.6
line-height: 1.6
Exemples d'usage contextuel
Comment appliquer notre système typographique selon les différents contextes d'usage.
🎯 Marketing & Communication
Utiliser Montserrat pour tous les supports externes et commerciaux.
Révolutionnez votre expérience client
Découvrez comment notre IA vocale transforme chaque interaction en opportunité business.
💻 Interface & Dashboard
Appliquer Inter pour toutes les interfaces utilisateur et applications.
Conversations analysées : 1,247
Taux de satisfaction moyen : 94.2% (+2.3% vs mois dernier)
⚙️ Technique & Code
Réserver JetBrains Mono pour le code, les logs et les données techniques.
POST /api/v2/analyze-call
Status: 200 | Duration: 1.24s | Confidence: 0.97
📊 Métriques & KPIs
Combiner Inter pour les labels et JetBrains Mono pour les chiffres.
Temps de réponse moyen
1.24s
📄 Documentation
Hiérarchiser avec Montserrat (titres) et Inter (corps de texte).
Configuration API
Suivez ces étapes pour intégrer notre solution dans votre environnement existant.
🔧 Composants UI
Utiliser Inter pour tous les éléments d'interface : boutons, formulaires, navigation.
Analyser conversation
