Aller au contenu principal

Charte visuelle

Source : project/conventions/charte-visuelle.md
Identifiant : [DOC-CHR-001]
Version : 0.6
Dernière modification : 2026-06-12
Statut : convention de travail initiale

Cette charte définit le style visuel des pages du site Coder avec l’IA.

1. Direction visuelle​

Le style retenu est : Superhero pédagogique.

Il combine :

  • une base claire et lisible pour les textes longs;
  • des accents bleu profond et vert sarcelle inspirés d’un univers technique;
  • des blocs à dégradé pour les introductions et les synthèses importantes;
  • des cartes claires pour structurer les contenus;
  • des matrices icône-item pour rendre les pages de synthèse plus vivantes;
  • des boîtes IA inspirées de l’expérience GitHub Copilot dans VS Code;
  • des éléments visuels sobres pour garder un ton professionnel.

2. Motifs visuels principaux​

Utiliser les motifs suivants selon le besoin :

  • coursHero pour une page importante ou une synthèse;
  • coursCard pour une idée courte ou une catégorie;
  • coursIconMatrix et coursIconItem pour une matrice d’éléments réutilisable;
  • coursPill pour un mot-clé ou un statut;
  • coursTerminal pour une commande ou une sortie terminal;
  • aiBox, aiBoxPrompt, aiBoxResponse et aiBoxChanges pour les interactions IA;
  • admonitions Docusaurus pour les informations importantes;
  • tableaux courts pour comparer ou classifier.

3. Matrice icône-item​

Utiliser une matrice icône-item lorsqu’une page présente plusieurs éléments de même nature.

3 éléments ou plus de même nature → matrice icône-item plutôt que simple liste à puces.

Variantes disponibles :

coursIconMatrix
coursIconMatrixCompact
coursIconMatrixFeatured

4. Boîtes IA​

Tous les prompts, réponses simulées, sorties IA et résumés de modifications doivent être placés dans une boîte IA.

Classes disponibles :

aiBox          = boîte IA de base
aiBoxPrompt    = demande envoyée à l’IA
aiBoxResponse  = réponse ou hypothèse produite par l’IA
aiBoxChanges   = résumé de modifications ou de fichiers
aiBoxSmall     = boîte plus étroite

Règle générale :

prompt ou réponse IA visible → boîte IA plutôt que simple bloc de code

5. Icônes recommandées par domaine​

DomaineIcône
IA🧠
CTX🧩
INS📜
SPE📝
MAP🗺️
CLI💻
VCS🌿
AGT🤖
EVA✅
OBS📡
SEC🛡️
RET🔎
LOC🖥️
PED🎓
DOC📚

6. Panneaux provider​

Lorsque le contenu doit montrer une équivalence entre plusieurs outils IA, utiliser un panneau par provider.

Ordre recommandé :

GitHub Copilot | Codex | Claude Code
attention

Éviter d’utiliser ce motif pour faire une comparaison générale de produits. Le panneau doit répondre à une question concrète.

7. Code et terminal​

Les blocs de code doivent toujours être précédés d’une phrase qui explique leur rôle.

Pour une commande ou une sortie de terminal à mettre en évidence, utiliser un bloc visuel coursTerminal.

8. À éviter​

  • Les pages très longues sans sections.
  • Les listes de liens sans contexte.
  • Les titres décoratifs difficiles à maintenir.
  • Les noms de produits dans les identifiants pédagogiques.
  • Les blocs de code sans explication.
  • Les prompts ou réponses IA présentés comme de simples blocs de code sans contexte.
  • Les effets visuels lourds ou animés sans valeur pédagogique.
  • Les couleurs trop agressives pour une lecture prolongée.
  • Les matrices icône-item utilisées pour masquer un contenu trop flou.
  • Les liens internes absolus en <a href="/..."> dans les pages MDX.
  • Les panneaux provider utilisés sans vraie équivalence utile.

9. Page de référence​

Voir : Page exemple de style.