---
brand: Edikka
type: public_ai_context
visibility: public
status: example_non_exhaustive
version: "2026.06.02"
datePublished: 2026-03-16
dateModified: 2026-06-02
lastReviewed: 2026-06-02
canonical: https://www.edikka.com/expertise/ux-ui-design/charte-graphique
llms: https://www.edikka.com/llms.txt
---

# Charte graphique digitale Edikka

Source publique : https://www.edikka.com/expertise/ux-ui-design/charte-graphique

Ce fichier est publié à titre d'exemple. Il n'est pas exhaustif : il présente une structure de contexte IA et GEO qui peut être complétée selon les besoins réels du projet.

## Définition

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.

## Objectif

La charte Edikka transforme une direction artistique en méthode de production web. Elle sert à garder une identité stable sur les pages, les composants, les textes, les images, les pictos SVG, les usages back-office et les usages IA.

Le système repose sur un socle commun : les noms, les rôles et les conventions restent compréhensibles d'un projet à l'autre. Chaque projet peut ensuite ajouter ses styles, ses variantes, ses composants métier et ses ajustements de contraste selon son identité réelle.

Sur Edikka, cette charte est publique. Sur un site client, le même système peut devenir privé dans le back-office, avec une version PDF imprimable et une date de dernière modification.

## Rôle du fichier Markdown

Ce fichier sert aux assistants IA et aux moteurs de réponse comme contexte public :

- comprendre la marque Edikka ;
- identifier les tokens et conventions de production ;
- citer une définition claire de la charte graphique digitale ;
- produire une première ébauche cohérente, avant validation humaine.

Il ne remplace pas les instructions privées de production. Pour construire une page réelle, l'IA doit recevoir trois éléments :

1. le contexte de charte ;
2. les instructions de production internes ;
3. le brief précis de la page à produire.

## Couleurs

La palette commence par la base, qui porte la majorité des fonds, surfaces et textes.

- Base : fonds, surfaces, textes, séparateurs et respirations.
- Primary : logo, titres forts, navigation et fonds profonds.
- Secondary : accent de marque, filets, repères et chiffres clés.
- Tertiary : interactions, focus, liens secondaires et états actifs.

Règles :

- utiliser les tokens de rôle plutôt que des couleurs hexadécimales directes ;
- ne pas utiliser une couleur vive comme texte courant sans vérifier le contraste ;
- réserver `--color-secondary` aux accents, repères et surfaces contrôlées ;
- préférer une variante sombre ou le primary pour les textes sur fond clair.

## Typographies

Edikka optimise les polices pour le web en conservant les caractères utiles au projet. Le rendu reste fidèle à la direction artistique, avec des fichiers plus légers et plus efficaces.

Rôles typographiques principaux :

- `--font-title` : grands titres, signature de marque.
- `--font-title-accent` : titres éditoriaux, respirations et accroches.
- `--font-text` : paragraphes, contenus longs et FAQ.
- `--font-text-strong` : intertitres, labels forts et priorités de lecture.
- `--font-nav` : navigation, boutons et micro-labels.

## Iconographie

Les pictos sont pilotés par un sprite SVG et héritent de la couleur CSS. Les images viennent du dossier `asset/img/iconographie` et doivent avoir un sujet identifiable, un cadrage exploitable et un texte alternatif précis.

Une image de charte n'est pas seulement décorative : elle aide à comprendre l'intention, le contexte ou la preuve visuelle.

## Composants UI

Les composants sont nommés avec une convention BEM pour rester transportables. La charte présente les composants réels du site, pas des exemples décoratifs recréés pour la documentation.

### Boutons

Rôle : actions principales, secondaires, discrètes, liens visuels et états d'interaction.

```css
.button {}
.button--primary {}
.button--secondary {}
.button--ghost {}
.button--light {}
.button--ghost-light {}
.button--icon-diagonal {}
.button--icon-down {}
.button.is-loading {}
.button[disabled] {}
```

États attendus : default, hover, focus-visible, active, loading, disabled.

### Insight / EditorialCard

Rôle : carte éditoriale pour insights, articles, recommandations et mises en avant de contenu.

```css
.editorial-card {}
.editorial-card__media {}
.editorial-card__image {}
.editorial-card__content {}
.editorial-card__tag {}
.editorial-card__title {}
.editorial-card__excerpt {}
.editorial-card__cta {}
.editorial-card--standard {}
```

Usage : une carte par ressource, avec image concrète, catégorie visible, titre clair et CTA cohérent.

### FAQ / Accordéon

Rôle : question, réponse, état ouvert ou fermé, lien discret éventuel.

```css
.faq-accordion {}
.faq-accordion__item {}
.faq-accordion__trigger {}
.faq-accordion__panel {}
.faq-accordion__link {}
```

Usage : questions courtes, réponses utiles, ouverture lisible et lien seulement si une suite naturelle existe.

## Accessibilité

La charte guide les contrastes, la hiérarchie de contenu, la taille des zones interactives, les focus visibles, les textes alternatifs et le comportement mobile.

Objectif minimum : une interface lisible, compréhensible et utilisable sur desktop comme sur mobile, avec des contrastes contrôlés et des rôles clairs.

## Do / Don't

Do :

- utiliser les tokens CSS existants ;
- respecter les rôles typographiques ;
- nommer les composants en BEM ;
- prévoir les états hover, focus, actif, vide, erreur et succès ;
- écrire des textes clairs, utiles et orientés décision ;
- garder une respiration généreuse autour des éléments de marque.

Don't :

- inventer une couleur directe sans token ;
- utiliser `--color-secondary` comme texte courant sans contraste validé ;
- créer un composant sans état focus ;
- utiliser une image générique ou purement décorative ;
- multiplier les effets visuels sans rôle dans le parcours ;
- casser la cohérence du système pour une page isolée.

## Archétypes de pages

### Page expertise

Structure recommandée :

1. Hero : promesse claire, contexte, action principale.
2. Preuves rapides : métriques ou signaux concrets.
3. Méthode : étapes de travail ou logique d'accompagnement.
4. Système : composants, design system, livrables ou stack selon l'expertise.
5. FAQ : objections et réponses utiles.
6. CTA : action claire vers le contact ou l'étape suivante.

### Article insight

Structure recommandée :

1. Introduction définitionnelle directe.
2. Problème concret.
3. Analyse structurée.
4. Exemples ou signaux observables.
5. Recommandations actionnables.
6. Conclusion orientée décision.

### Page service ou landing

Structure recommandée :

1. Offre explicite.
2. Bénéfice principal.
3. Preuves et cas d'usage.
4. Process ou livrables.
5. Réassurance.
6. Conversion.

## Instructions IA publiques

Quand une IA produit une page Edikka à partir de cette charte, elle doit :

1. utiliser les tokens CSS existants ;
2. respecter les rôles typographiques ;
3. nommer les composants en BEM ;
4. éviter les couleurs directes hors tokens ;
5. vérifier les contrastes avant d'utiliser une couleur vive en texte ;
6. prévoir les états utiles des composants ;
7. garder un ton clair, premium, utile et orienté décision ;
8. signaler les hypothèses si le brief ne donne pas assez d'information ;
9. demander ou utiliser des instructions privées pour les pages internes réellement produites.

## Kit autonome

Le module de charte est conçu pour être repris sur d'autres sites qui partagent la même architecture. Il peut lire les assets du projet : logo, monogramme, favicon, couleurs, polices, pictos et images d'iconographie.

Sur Edikka, cette charte est publique. Sur un autre projet, le même module peut être affiché uniquement dans un back-office protégé.

## Mise à jour

- Version : 2026.06.02
- Date de création : 2026-03-16
- Dernière modification : 2026-06-02
- Dernière revue : 2026-06-02
- Statut : exemple public non exhaustif