Reconnaissance
Le logo, les titres, les accents, les pictos et les photos racontent le même univers.
Système graphique digital
Charte graphique digitale : méthode UX/UI
Une charte digitale doit être plus qu’un joli document. Elle devient un design system opérationnel : une palette, des polices, des composants, des règles BEM et un fichier de contexte, avec un socle commun que chaque marque peut ensuite ajuster. Edikka propose pour chaque projet une version imprimable, native au back-office, que le client consulte comme document officiel.
Pourquoi
Une charte graphique digitale pose le design system avant les pages.
Une charte graphique digitale est un système de règles qui relie couleurs, typographies, composants, tokens CSS, iconographie et accessibilité pour produire des pages cohérentes, lisibles et reconnaissables.
Un site se fatigue quand ses décisions visuelles sont prises écran par écran. La charte définit les règles avant la production : ce qui sert la marque, ce qui sert la lisibilité, ce qui sert l’action et ce qui doit rester stable sur mobile.
Sur les projets Edikka, elle devient un livrable concret : une charte consultable dans le back-office, avec une version PDF imprimable, pour que le client garde une référence claire après la mise en ligne.
L’objectif n’est pas de figer la créativité. C’est de donner une colonne vertébrale au site : une logique commune pour produire vite et juste, puis assez de liberté pour ajouter les nuances, composants et usages que chaque projet mérite.
Production
Les composants sont nommés, testés et prêts à être réutilisés sans débat permanent.
Transmission
La méthode reste lisible par une équipe, un client, un développeur, un rédacteur ou une IA, avec une version imprimable depuis le back-office.
Méthode UX/UI
Méthode UX/UI : transformer l’identité en design system de production.
La méthode part du sens, puis descend jusqu’au code, au back-office et au document imprimable. C’est ce qui permet d’obtenir une charte belle, mais surtout exploitable par le client et par l’équipe qui fera vivre le site.
Cadrer
Positionnement, audience, promesse, pages clés, contraintes SEO et accessibilité.
Traduire
Transformer l’identité en palette, typographies, rythme, iconographie et règles de contraste.
Systémiser
Nommer les décisions en tokens, composants, classes BEM et consignes éditoriales.
Tester
Mettre la charte en situation sur titres, textes longs, CTA, cartes, formulaires et mobile.
Transmettre
Documenter la charte pour l’équipe, le client, le back-office, le code et l’IA afin de garder le cap dans le temps.
Exemple complet
La charte Edikka comme module autonome.
Cette section est pensée comme un bloc copiable : sur un autre site qui garde la même architecture, il récupère automatiquement le logo, le monogramme s’il existe, les polices, les couleurs et les pictos.
Module indépendant Une seule section à déplacer, des données lues dans le projet.
Les valeurs viennent des dossiers standards du site. Si un asset manque, le module conserve une version lisible au lieu de casser la page.
Logo
logo-edikka.svg Icône
favicon.svg Monogramme
monogramme-edikka.svg Couleurs
src/sass/settings/_variables-css.scss Polices
src/sass/base/_font-face.scss Pictos
asset/svg/sprite.svg Kit copiable
charte-template.php charte-tokens.css charte.md instructions-ia-production.md README.md _charte-template.scss 01 · Logo
Une signature simple, lisible, immédiatement reconnaissable.
La planche part du plus petit signe, puis élargit progressivement vers la signature complète : icône, monogramme, logotype et composition finale.
Icône
Repère compact pour favicon, app icon et petits points de contact.
Monogramme
Symbole de reconnaissance quand la marque est déjà identifiée.
Logo
Signature principale pour les en-têtes, documents et zones institutionnelles.
Composition complète
02 · Typographies
Les cinq fontes du projet, montrées en usage réel.
La charte reprend les familles déclarées dans src/sass/base/_font-face.scss et les replace dans des situations concrètes : titres, texte, emphase, navigation et boutons.
Polices optimisées pour le web
Edikka prépare les fontes du projet en ne conservant que les caractères utiles : le rendu reste fidèle à la direction artistique, avec des fichiers plus légers et plus efficaces.
Font Title
Transformer l’attention en compréhension.Titres courts, mots de marque, blocs d’autorité.
Font Title Accent
Créer une lecture plus éditoriale.Grands titres fluides, citations, respirations premium.
Font Text
Une lecture calme, précise, confortable sur les contenus longs.Paragraphes, FAQ, formulaires et contenus de fond.
Font Text Strong
Message important, chiffre clé, libellé structurant.Intertitres, emphases, listes et signaux de priorité.
Font Nav
Expertise · Insights · ContactMenus, boutons, labels et microcopies d’interface.
Interface claire
Créer une page lisible, précise et immédiatement identifiable.
Le texte reste calme, les mots importants gagnent en densité, et les actions gardent la même voix que la navigation.
Font Text Strong clarifie les priorités sans alourdir la page. Interface sombre
La même hiérarchie, mais avec les contrastes inversés.
Les titres passent en clair, les textes gardent une douceur de lecture, et le secondary devient le repère actif.
Navigation et boutons utilisent la même famille pour rester cohérents. 03 · Couleurs
Base d’abord, puis trois couleurs de marque parfaitement cadrées.
La palette commence par ce qui sert le plus : fonds, surfaces et texte. Les couleurs de marque arrivent ensuite, côte à côte, avec leurs usages, leurs variantes et les ajustements propres au projet.
Fondation
Base : le socle de lecture du site.
Fonds, surfaces, textes, séparateurs et respirations.
Fond général
--color-base-light #f7f7f5 Surface UI
--color-base-surface #ffffff Texte courant
--color-base-dark #0c1a24 Palette active
Les trois couleurs qui signent l’interface.
Chaque famille garde un rôle précis : identité, accent, interaction. Les variantes servent à créer de la profondeur sans multiplier les couleurs.
Primary #0c1a24
Primary
Logo, titres forts, navigation, fonds profonds.
--color-primary --color-primary
#0c1a24 Texte principal --color-primary-light
#2f4a5f Variante calme --color-primary-dark
#030b14 Fond profond Secondary #a3b74a
Secondary
Accent de marque, filets, repères et chiffres clés.
--color-secondary --color-secondary
#a3b74a Accent, pas texte courant --color-secondary-light
#d8e58a Fond doux --color-secondary-dark
#657226 Accent lisible Tertiary #4a7ab7
Tertiary
Interactions, focus, liens secondaires, états actifs.
--color-tertiary --color-tertiary
#4a7ab7 Interaction --color-tertiary-light
#d8e6f7 Fond information --color-tertiary-dark
#1f4f8d Lien / focus Tokens d’usage
La palette devient un langage de production.
Les composants utilisent ces rôles, pas les hex directement. La charte reste stable même si les couleurs évoluent sur un autre site.
--color-page-bg
Base --color-page-bg
var(--color-base-light) Fond général de page
--color-surface
Base --color-surface
var(--color-base-surface) Surfaces, panneaux et cartes
--color-text
Base --color-text
var(--color-base-dark) Texte courant et titres sobres
--color-heading
Marque --color-heading
var(--color-primary) Titres identitaires
--color-accent
Accent --color-accent
var(--color-secondary) Repères, filets et détails de marque
--color-interaction
Interaction --color-interaction
var(--color-secondary-dark) Liens, états actifs et actions secondaires
--color-focus
Accessibilité --color-focus
var(--color-secondary) Focus clavier visible
Voir toutes les valeurs techniques
Base
Fonds, surfaces, textes, séparateurs et respirations.
--color-base-light
#f7f7f5 Fond général --color-base-surface
#ffffff Surface UI --color-base-dark
#0c1a24 Texte courant Primary
Logo, titres forts, navigation, fonds profonds.
--color-primary
#0c1a24 Texte principal --color-primary-light
#2f4a5f Variante calme --color-primary-dark
#030b14 Fond profond Secondary
Accent de marque, filets, repères et chiffres clés.
--color-secondary
#a3b74a Accent, pas texte courant --color-secondary-light
#d8e58a Fond doux --color-secondary-dark
#657226 Accent lisible Tertiary
Interactions, focus, liens secondaires, états actifs.
--color-tertiary
#4a7ab7 Interaction --color-tertiary-light
#d8e6f7 Fond information --color-tertiary-dark
#1f4f8d Lien / focus 04 · Picto sprite SVG
Un langage d’icônes piloté par le dossier SVG.
Le sprite complet documente 21 symboles : pictos, flèches, labels de confiance et logo. Chaque symbole hérite de la couleur CSS pour rester transportable.
05 · Iconographie
Une direction visuelle claire, documentée et réutilisable.
Les images viennent du dossier asset/img/iconographie. Le JSON associe chaque visuel à une intention, un alt et des tags pour éviter l’image décorative sans rôle.
06 · Composants UI
Le même niveau d’exigence dans les détails ordinaires.
Un site haut de gamme ne tient pas seulement dans son hero. Il tient dans les composants nommés, leurs états, leurs variantes et leur capacité à être repris sans dépendance invisible.
Composant 01
Boutons
Le bouton porte l’intention d’action : démarrer, naviguer, scroller, confirmer ou signaler. La charte limite les variantes pour garder des décisions rapides et cohérentes sur toutes les pages.
Composant 02
Insight / EditorialCard
La carte éditoriale structure les contenus de fond : image, catégorie, niveau de lecture, titre, résumé et CTA. Elle rend chaque article identifiable sans réinventer une grille à chaque page.
UX UI Design Comprendre UX writing : écrire des interfaces plus claires
Transformer les micro-textes en repères utiles pour réduire l’hésitation et guider l’action.
Variantes
- Carte standard pour grille d’articles.
- Carte featured pour contenu à la une.
- Carte slider pour recommandations éditoriales.
Composant 03
FAQ / Accordéon
L’accordéon organise les questions sans alourdir la page. Il montre une question fermée, une question ouverte, une réponse lisible et, si nécessaire, un lien discret de poursuite.
Parce que le client voit les mêmes éléments que ceux utilisés sur le site : boutons, cartes éditoriales, accordéons, états et règles d’usage.
Le markup, les classes et les états restent identiques. Le projet change les tokens, pas la logique du composant.
07 · Production
Des règles sobres pour produire vite, juste et réutilisable.
La charte traduit les choix graphiques en règles de production : tokens, composants nommés, états, accessibilité et convention BEM. Le client voit une méthode claire ; l’équipe garde un socle technique transportable.
Tokens avant valeurs
Les couleurs, surfaces, focus et typographies sont appelés par rôle pour rester modifiables sans casser les pages.
Composants nommés
Les boutons, cartes éditoriales et accordéons existent comme blocs réutilisables, pas comme styles isolés.
États visibles
Hover, focus, actif, loading, indisponible et responsive sont documentés avant d’être déployés ailleurs.
Contrôle qualité
Chaque reprise doit préserver contraste, focus visible, lisibilité mobile, images concrètes et hiérarchie de lecture.
BEM reste la règle interne.
On ne le met plus en avant comme sujet client, mais il garde les composants propres, lisibles et transportables d’un site à l’autre.
.button {}
.button--secondary {}
.button--icon-diagonal {}
.editorial-card {}
.editorial-card__media {}
.editorial-card__title {}
.faq-accordion {}
.faq-accordion__trigger {}
.faq-accordion__panel {} 08 · IA / GEO public
Un contexte public lisible par les humains, les moteurs de réponse et les assistants IA.
La charte ne se limite pas à une page visuelle. Elle expose aussi un fichier Markdown public, court et structuré : identité, tokens, composants, règles de production et frontière claire entre contexte public et instructions privées.
Identité
Nom de marque, intention, ton, interdits visuels et principes de lisibilité.
Tokens
Couleurs, typographies, surfaces, focus et rôles UI stables.
Composants
Boutons, cartes éditoriales, accordéons et conventions BEM réutilisables.
Production
Accessibilité, contrastes, images concrètes et limites à ne pas franchir.
Public
Un contexte synthétique qui aide à comprendre la méthode, les règles et le vocabulaire de la marque.
Privé
Les briefs de page, arbitrages client, données sensibles et instructions de production détaillées restent hors fichier public.
Tokens CSS
Tokens CSS : un socle commun, extensible projet par projet.
Les tokens posent un vocabulaire partagé pour chaque charte : base, couleurs de marque, rôles UI, typographies et composants. Ce socle évite de repartir de zéro, puis chaque projet peut recevoir ses styles, ses variantes et ses ajustements spécifiques.
:root {
--color-primary: #0c1a24;
--color-secondary: #a3b74a;
--color-secondary-dark: #657226;
--color-tertiary: #4a7ab7;
--color-tertiary-light: #d8e6f7;
--color-tertiary-dark: #1f4f8d;
--color-base-light: #f7f7f5;
--color-base-surface: #ffffff;
--color-base-dark: #0c1a24;
--color-page-bg: var(--color-base-light);
--color-surface: var(--color-base-surface);
--color-text: var(--color-base-dark);
--color-heading: var(--color-primary);
--color-accent: var(--color-secondary);
--color-interaction: var(--color-secondary-dark);
--color-focus: var(--color-secondary);
--font-title: "Font Title", system-ui, sans-serif;
--font-title-accent: "Font Title Accent", system-ui, sans-serif;
--font-text: "Font Text", system-ui, sans-serif;
--font-text-strong: "Font Text Strong", system-ui, sans-serif;
--font-nav: "Font Nav", system-ui, sans-serif;
--font-button: var(--font-nav);
--font-label: var(--font-nav);
}Guidage
Accessibilité, textes et composants : la charte guide chaque page.
Elle devient utile quand elle se voit dans les choix répétitifs : une accroche, une carte, un bouton, un encadré, une FAQ, une page expertise. Le visiteur n’a pas besoin de connaître le système pour sentir que tout est au bon endroit.
Structurer votre identité digitaleUne hiérarchie claire avant le style.
Titre, intro, preuve, action, contenu de fond, FAQ : chaque page reprend un rythme reconnaissable.
Des rôles éditoriaux documentés.
Le ton, les titres, les microcopies et les messages d’erreur restent cohérents.
Des états pensés dès le départ.
Hover, focus, actif, vide, erreur, succès : le composant existe dans la vraie vie.
FAQ
Adapter la charte sans perdre le système
La méthode reste universelle pour garder une production cohérente. Chaque projet ajoute ensuite ses couleurs, ses usages, ses composants et ses contraintes propres, avec une charte consultable dans le back-office et imprimable en PDF.