Bleu UI
#0A3D62Titres · boutons · navigation
IDENTITÉ NUMÉRIQUE · 01
Clair dans le fond.
Précis dans la forme.
Un même langage visuel pour le conseil, les produits et l’apprentissage. Une interface lisible, des proportions compactes et juste ce qu’il faut de mouvement.
01 / FONDATIONS
La couleur sert la hiérarchie.
Le bleu porte la marque et les commandes. Les neutres laissent respirer les contenus. L’orange attire l’attention sur un détail.
Bleu profond
#072C48Fonds sombres · pied de page
Orange UI
#F39C12Accent ponctuel
Papier
#F6F7F5Surface neutre
Le logo conserve ses couleurs officielles.Bleu du dessin :
#002C42 · orange du symbole : #EC8A30. Les fichiers de marque font référence ; les tokens UI ne recolorent pas le logo.INTER / TITRES
Aa
La force de la clarté.
Une présence franche. Des mots simples.
Des titres courts, jamais déformés.
750 · approche −0,045 em
INTER / TEXTE
Relier l’information à l’action.
Une interface aide à comprendre ce qui compte, puis à choisir la prochaine étape. Le texte courant privilégie le confort de lecture, avec une largeur maîtrisée et un interligne généreux.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 · ÀÉÈÊÇŒœ
RegularMediumSemiBoldBoldExtraBold
02 / COMPOSANTS
Une prochaine étape évidente.
Un bouton principal par zone, des actions secondaires plus discrètes, des champs qui expliquent ce qu’ils attendent.
COMMANDES01
Actions & états
Lire les règles d’usageClavier : la touche Tab révèle le focus. Le contour brun reste visible sur les surfaces claires.
FORMULAIRE02
Des champs explicites
Rendre vos opérations plus lisibles.
Des priorités partagées, des données cohérentes et des décisions mieux étayées.
Comprendre la démarcheRelier vos outils à vos objectifs.
CRM, fichiers et processus s’inscrivent dans un fonctionnement d’ensemble.
Explorer les possibilitésFaire avancer les équipes ensemble.
Une appropriation progressive, avec des usages concrets et des responsabilités claires.
Voir l’accompagnementIllustrations schématiques originales du spécimen. Format standard : 200 × 112 px ; elles soutiennent la lecture au lieu de remplir l’espace.
03 / DÉCLINAISONS
La même famille, le bon ton.
Chaque offre garde son rôle. Les signatures sont composées dans les fichiers fournis pour préserver les proportions et l’alignement optique.
Suivre l’activité.
Garder la vue d’ensemble.
Bleu, blanc, informations structurées, contrôles compacts. L’orange signale un point d’attention.
Opportunités24
À relancer06
Explorer, créer.
Être fier d’essayer.
Vert de signature, fonds doux, formes arrondies et consignes simples. Une ambiance chaleureuse et lisible.
ExplorerCréerInventer
04 / COMPOSITION & MOUVEMENT
L’espace est utile.
Le mouvement est léger.
Les repères ci-contre distinguent les valeurs observées sur les sites et les conseils pour de nouveaux supports.
- Sections corporate
- 56 px · tablette 44 px · mobile 38 px
- Largeur maximale
- Corporate 1280 px · CRM 1240 px · Kids 1200 px
- Illustrations de soutien
- 200 × 112 px · tête de page 220 × 140 px · détail max. 440 px
- Contrôles
- Corporate / Kids : 48 px minimum · CRM : 44 px
- Contact
- 360 px de large · menu 410 px · conversation 520 px maximum
- Animation
- 180–240 ms · petit déplacement · arrêt si mouvement réduit