uh!ive Branding Kit — Design System v2.1.0
Design System v2.1.0

uh!ive Branding Kit

Document de référence de l'identité visuelle uh!ive. Ce guide s'adresse aux designers, développeurs, équipes marketing et partenaires externes. En cas de doute, consultez ce guide avant de produire quoi que ce soit.

Vue d'ensemble

uh!ive est une plateforme voice AI B2B européenne. La direction artistique traduit cette posture : sérieux, précision, confiance. Ce branding kit 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.

Minimalisme tech

Pas d'effet pour l'effet. Chaque élément a une fonction. Un composant qui n'informe pas n'a pas sa place.

Lisibilité avant tout

Contrastes forts, hiérarchie claire, espace généreux. L'information doit être accessible immédiatement.

Jamais décoratif

Références d'inspiration : SaaS B2B, outils data, plateformes analytics. Pas de landing pages startup flashy.

Public cible de ce guide

  • Designers et graphistes travaillant sur les supports uh!ive
  • 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
Règle fondamentale : Aucune couleur, police ou composant hors design system sans validation explicite du Directeur Artistique.

Couleurs & Gradients

Règle absolue : Aucune couleur hors palette sans validation explicite du Directeur Artistique.

Couleurs essentielles

Les 7 couleurs principales de l'identité uh!ive.

Palettes complètes

70 couleurs organisées en 7 familles, chacune déclinée en 10 nuances.

Quelle couleur pour quel usage ?

SituationCouleurRéférence
Lien, accent, icône techniqueGlacier-400#7acedc
Texte corpsBlueprint-200#94adb7
Texte secondaire / labelBlueprint-300#638896
TitreBlanc#ffffff
Chiffre clé / KPISuccess-400#67e2ac
Bouton CTA primaireSuccess-500#52d8a0
Card témoignage / produitBorder Premiumrgba(191,168,242,0.35)
Bloc codeObsidian-900#11171d
Alert complianceBorder Attentionrgba(245,200,88,0.35)
Fond global (site V5)Deep#0e2a38

Gradients signature

Pack couleurs complet

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

FigmaAdobe XDSketchCSS/WebGIMP
Télécharger le pack (15 KB)

Typographie

Polices officielles

Montserrat

Principal — Web & Print

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

Regular 400Medium 500SemiBold 600Bold 700ExtraBold 800
Transformez chaque conversation
Notre IA vocale optimise l'expérience client avec précision et éthique.
Google FontsTélécharger

Inter

Secondaire — Interface technique

Usage : Webapp, dashboards, documentation technique. Poids autorisés : 400–800. Pas de 300 ni 900.

Regular 400Medium 500SemiBold 600Bold 700ExtraBold 800
Dashboard Analytics
Visualisez vos performances en temps réel avec des métriques précises.
Google FontsTélécharger

JetBrains Mono

Code & Data

Usage : Code, données techniques, snippets, logs, APIs

Regular 400Medium 500SemiBold 600Bold 700
const analyzeCall = (audioData) => {
  // confidence: 0.97 | sentiment: positive
  return processVoiceAI(audioData);
}
Google FontsTélécharger

Hiérarchie typographique — Site

Desktop (> 1024px)
H172px / 800
H248px / 700
H336px / 700
H424px / 600
H516px / 700
Body16px / 400
Body large20px / 500
Label12-13px / 600
Code13px / 400
Mobile (< 768px)
H138px / 800
H230px / 700
H324px / 700
H420px / 600
H516px / 700
Body15px / 400
Body large17px / 500
Label12-13px / 600
Code13px / 400
Letter-spacing H1 : -3px desktop, -1.5px mobile. Interlignage body : 1.6 minimum.

Couleurs typographiques

RôleCouleurHex
TitresBlanc pur#ffffff
BodyBlueprint-200#94adb7
Chiffres clésSuccess-400#67e2ac
Accents / labelsGlacier-400#7acedc
Texte secondaireBlueprint-300#638896
CodeGlacier-200#b3e3eb

Coloration syntaxique

ÉlémentCouleurHex
KeywordsPremium-400#c9b4f5
StringsSuccess-400#67e2ac
FonctionsGlacier-400#7acedc
CommentairesObsidian-400#545f6b

Espacements & Layout

Grille de base : multiples de 4px

4 · 8 · 12 · 16 · 20 · 24 · 28 · 32 · 36 · 40 · 48 · 56 · 64 · 72 · 80 · 96 · 140 · 160

Règles générales

  • Espacement minimum entre éléments = 16px
  • Padding de section : 80–160px top/bottom (desktop)
  • Padding de card : 28–36px
  • Border-radius : 12px (cards), 6px (boutons, tags), 100px (pills)
  • Largeur max contenu : 1280px, centré

Breakpoints responsive

BreakpointComportement
Desktop ≥ 1024pxLayout plein, colonnes multiples
Tablet 768–1023pxAdaptation progressive
Mobile < 768pxColonnes empilées, typographie réduite

Composants UI

Principe cardinal : Toujours utiliser un composant existant avant d'en créer un nouveau.

Boutons

Primaire (CTA)
background: #52d8a0; /* Success-500 */ color: #0c2a36; /* Blueprint-800 */ border-radius: 6px; font-weight: 600; /* Hover */ background: #67e2ac; box-shadow: 0 4px 20px rgba(82,216,160,0.25);
Secondaire
background: transparent; border: 1px solid rgba(89,194,211,0.35); color: #ffffff; border-radius: 6px;

Cards

background: rgba(255,255,255,0.04); border: 1px solid [couleur sémantique]; border-radius: 12px; padding: 36px 28px; /* Hover */ background: rgba(255,255,255,0.08);

La couleur de la border définit la sémantique :

TokenUsage
--border-glacierTech, stats, data
--border-premiumTémoignages, produits
--border-successCTA, chiffres positifs
--border-attentionCompliance, avertissements
--border-subtleNeutre, structurel

Tags / Pills

background: rgba(89,194,211,0.1); border: 1px solid rgba(89,194,211,0.35); color: #7acedc; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;

Badge hero (pill arrondi)

background: rgba(255,255,255,0.04); border: 1px solid rgba(89,194,211,0.35); border-radius: 100px; padding: 8px 20px; font-size: 13px; font-weight: 600; color: #90d6e2; letter-spacing: 0.5px;

Autres composants

Séparateurs
border-bottom: 1px solid rgba(255,255,255,0.08);

Aucun shape divider SVG. Lignes fines uniquement.

Header (site)
background: rgba(14,42,56,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08);

Accessibilité

  • Contrastes WCAG 2.1 AA minimum
  • Focus clavier visible sur tous les éléments interactifs
  • Zones cliquables ≥ 44x44px
  • Ne pas utiliser la couleur seule pour transmettre une information

Tokens visuels — Site V5

Atmosphère : full dark immersif. Fond #0e2a38, aucune section blanche, halo lumineux Glacier subtil. Le Pitch Deck V2 est la référence esthétique absolue.

Fonds

TokenValeurUsage
--bg-deep#0e2a38Fond body principal
--bg-surfacergba(255,255,255,0.04)Cards, containers
--bg-surface-hoverrgba(255,255,255,0.08)Hover state

Borders

TokenValeurUsage
--border-subtlergba(255,255,255,0.08)Dividers, borders par défaut
--border-glacierrgba(89,194,211,0.35)Cards tech, stats, data
--border-premiumrgba(191,168,242,0.35)Témoignages, produits
--border-successrgba(82,216,160,0.35)CTA, chiffres positifs
--border-attentionrgba(245,200,88,0.35)Compliance, warnings

Halo lumineux global

/* body::before ou row hero */ background: radial-gradient(ellipse, rgba(89,194,211,0.08) 0%, transparent 70%); position: fixed; top: -20%; left: -10%; width: 60%; height: 60%; pointer-events: none; z-index: 0;

Illustrations

Style officiel : Notion-like line art. Objectif : illustrer une idée, jamais décorer.

Spécifications

CritèreValeur
StyleÉditorial, Notion-like
CouleurNoir & blanc uniquement (sauf variante Glacier)
TraitLine art épais
FondGris neutre ou transparent
TexteAucun texte dans l'illustration
Format16:9 par défaut
PersonnagesSimplifiés, cohérents, en action

Prompt de référence

Minimal editorial illustration, Notion-like style, thick black line art, black and white only, neutral light grey background, no text, no labels, 16:9 composition, simplified characters in action, conceptual scene showing [SUJET]. Tech-focused, clean, professional. No color fills, no gradients, no sticker borders.

Ce qu'on ne produit pas

  • Icônes déguisées en illustrations
  • Pictogrammes
  • Visuels 3D réalistes
  • Sticker borders
  • Couleurs vives ou dégradés décoratifs
  • Logos de marques tierces
  • Illustrations IA brutes non retravaillées

Guidelines & Interdictions

Ce qu'il ne faut jamais faire

Ces règles sont absolues.

Couleurs
  • Couleur hors palette
  • Fond blanc (site V5)
  • Gradient décoratif sans fonction
  • Glow excessif
Typographie
  • Police non autorisée
  • Poids 300 ou 900
  • Plusieurs familles mélangées
Composants
  • Card fond blanc + border-left (V3)
  • Shape Divider SVG (wave)
  • Border solid sans transparence
Général
  • Emojis
  • Effets de mode (glassmorphism, néon…)
  • Approximations
  • Livrable IA non retravaillé

Applications par contexte

Interfaces web
  • Primaire : Glacier (liens, boutons)
  • Secondaire : Blueprint (navigation)
  • CTA : Success-500
  • Erreurs : Warning-500
Communication digitale
  • Réseaux sociaux : formats optimisés
  • Newsletters : template cohérent
  • Présentations : gradients signature
  • Documents : logo horizontal en header
Print
  • Versions CMYK
  • Couleurs solides > gradients
  • Test impression niveaux de gris
  • Lisibilité multi-tailles

Accessibilité

Standards
  • WCAG 2.1 AA — minimum requis
  • WCAG 2.1 AAA — recommandé
Ratios validés
  • Glacier sur blanc : AA
  • Blueprint sur blanc : AAA
  • Obsidian sur blanc : AAA
Tests
  • Simulateur de daltonisme
  • Navigation clavier
  • Lecteurs d'écran
  • Faible luminosité

Checklist rapide

À cocher avant de livrer toute production visuelle.

Couleurs
  • Toutes les couleurs sont issues de la palette officielle
  • Borders sémantiques utilisées correctement
  • Aucun fond blanc non validé
Typographie
  • Police Inter / Montserrat / JetBrains Mono
  • Hiérarchie lisible et contrastée
  • Interlignage ≥ 1.6 sur le body
Composants
  • Cards : fond transparent + border fine
  • CTA primaire en Success-500
  • Aucun composant inventé sans nécessité
Accessibilité
  • Contrastes WCAG 2.1 AA vérifiés
  • Focus visible sur éléments interactifs
  • Zones cliquables ≥ 44x44px
Illustrations
  • Style Notion-like, N&B, line art épais
  • Aucun texte dans l'image
  • Retouche post-IA effectuée
Général
  • Aucun emoji
  • Aucune couleur hors palette
  • Cohérence avec les productions existantes

Maintenu par Guillaume — Direction Artistique uh!ive
Design System v2.1.0 — Dernière mise à jour : mars 2026