01
Clarté immédiate
Chaque écran doit rester lisible, respirant et simple à parcourir, même pour un public peu à l aise avec le numérique.
Référentiel visuel officiel
Charte graphique
Références visuelles et usages de la marque
Cette page fixe les repères visuels de la marque Oneduc : couleurs, typographies, logo, iconographie, composants d interface et principes d usage. Elle sert de base commune pour garder une expérience cohérente, inclusive et identifiable sur tout le site.
Signature
Une identité visuelle chaleureuse, structurée et rassurante, pensée pour des contextes de formation où la lisibilité reste prioritaire.
3 couleurs repères
Bleu pour la structure, orange pour l action, vert pour la validation.
3 familles typographiques
Une hiérarchie claire entre marque, interface et lecture longue.
Fondamentaux
Les principes qui guident toute l identité visuelle
02
Chaleur pédagogique
L identité visuelle doit inspirer la confiance, l accompagnement et la proximité, sans tomber dans une esthétique froide ou trop institutionnelle.
03
Progression guidée
La hiérarchie visuelle doit aider l utilisateur à savoir où il est, quoi faire ensuite et comment revenir en arrière.
04
Accessibilité concrète
Contrastes, tailles de texte, formes généreuses et contenus lisibles restent prioritaires sur les effets purement décoratifs.
Palette
Un système simple, contrasté et mémorisable
La palette Oneduc repose sur peu de couleurs fortes. Cette sobriété facilite la reconnaissance de la marque et réduit la fatigue visuelle sur les écrans à forte densité d information.
Conserver des angles arrondis et une sensation d interface accueillante plutôt que rigide.
Privilégier les contrastes forts entre bleu, orange et fonds clairs.
Limiter les effets visuels décoratifs quand ils nuisent à la lecture ou à la compréhension.
Maintenir des boutons d action principaux en orange et des repères structurels en bleu.
Bleu Oneduc
#004461Couleur de structure : titres, navigation, confiance, éléments cadres.
Orange Oneduc
#E94D2ACouleur d action : appels à l action, accents, surlignage éditorial.
Vert repère
#01C69CCouleur de validation ou de signal positif, à utiliser avec parcimonie.
Blanc cassé
#F8F7FAFond principal du site, permet de garder une interface lumineuse et douce.
Brume bleutée
#E7EEF3Fonds secondaires, séparateurs, encadrements discrets.
Ardoise lisible
#334155Texte courant, compléments d information et contrastes de lecture.
Typographies
Trois rôles, trois voix visuelles complémentaires
Titres et prises de parole fortes
Raleway
Une plateforme pensée pour accompagner la progression.
À utiliser pour les titres de pages, sections majeures et messages de marque.
Interface, navigation et labels
Varela Round
Des repères simples, accueillants et immédiatement compréhensibles.
À réserver aux boutons, sous-titres, menus, filtres et repères de navigation.
Lecture longue et contenus pédagogiques
OpenDyslexic / Arial
Oneduc privilégie une lecture confortable, espacée et tolérante pour des publics très variés.
Pour les paragraphes, les descriptions, les explications et les contenus d accompagnement.
Version principale
À privilégier sur fonds clairs ou très peu texturés. C est la signature de référence.
Version inversée
À utiliser sur fond bleu ou orange quand le contraste avec la version principale ne serait pas suffisant.
Interface
Composants clés et comportements attendus
L univers Oneduc repose sur des composants francs, faciles à reconnaître et cohérents d une page à l autre. Les actions principales ressortent en orange, les repères structurels restent en bleu et les suppressions demandent une validation explicite.
Boutons et repères
Filtre actif
Iconographie
Préférer des icônes en tracé simple
Sur le front et dans les espaces formateur, privilégier les SVG inline en style contour. Dans l admin, les Tabler Icons peuvent rester utilisés quand l écran est déjà construit autour de cette librairie.
Bonnes pratiques
+
Utiliser une icône simple en tracé fin pour les actions rapides.
+
Réserver la couleur orange aux actions importantes ou aux accents de hiérarchie.
+
Prévoir une confirmation avant toute suppression irréversible.
+
Laisser de l espace entre les blocs pour réduire la charge cognitive.
Icônes
Bibliothèque active des icônes Oneduc
Cette section regroupe les pictogrammes déjà posés dans les interfaces Oneduc. Elle sert de base commune pour garder une iconographie cohérente entre les vues publiques, formateur et observateur.
Repères métier
Stagiaire
Identité visuelle standardisée
Repère apprenant pour les compteurs, la navigation de suivi et les synthèses individuelles.
Groupe
Identité visuelle standardisée
Repère collectif pour les vues de progression par groupe et les totaux de cohortes.
Module
Identité visuelle standardisée
Repère contenu pour les modules de formation, les suivis pédagogiques et les synthèses associées.
Actions d interface
Filtrer
Identité visuelle standardisée
À utiliser sur les boutons de tri, de recherche et de filtrage de tableau.
Voir
Identité visuelle standardisée
Réservée aux actions de consultation, d aperçu, de parcours et de détail.
Modifier
Identité visuelle standardisée
Action d édition sur un élément existant, dans un tableau ou une fiche.
Supprimer
Identité visuelle standardisée
Suppression d un élément avec confirmation explicite avant validation.
Ajouter un stagiaire
Identité visuelle standardisée
CTA principal pour l ajout d un nouvel apprenant dans les vues formateur.
Ajout stagiaire alternatif
Identité visuelle standardisée
Variante plus dense utilisée sur certains repères secondaires ou compteurs liés aux apprenants.
Compte et préférences
Profil
Identité visuelle standardisée
Entrée d accès à la fiche utilisateur et aux informations personnelles.
Paramètres
Identité visuelle standardisée
Navigation vers les préférences et réglages du compte.
Sécurité
Identité visuelle standardisée
Accès aux réglages sensibles liés au mot de passe et à la protection du compte.
Ton éditorial
Une marque qui guide sans écraser
Le ton Oneduc reste simple, rassurant et concret. Il doit aider l utilisateur à agir, sans jargon inutile ni surcharge d autorité.
Les formulations courtes, utiles et chaleureuses sont à privilégier. Le langage doit rester compréhensible pour des profils variés, y compris en situation d apprentissage ou de fragilité numérique.
À éviter
x
Multiplier les styles d icônes différents sur une même vue.
x
Utiliser un rouge saturé partout alors que l univers Oneduc repose d abord sur le bleu et l orange.
x
Surcharger les écrans avec trop de bordures épaisses ou d ombres lourdes.
x
Employer des intitulés vagues quand une consigne directe peut mieux guider l utilisateur.
Usage
Cette charte sert de base pour les futures pages et interfaces Oneduc
Elle peut évoluer, mais elle fixe déjà une direction claire : une identité plus cohérente, plus accessible et plus immédiatement reconnaissable sur tout l écosystème.