# Index — Charte design visuelle ORDiDOC (38 pages)

Source : `Charte_design_visuelle_complete.pdf` (extrait NotebookLM, avril 2026).
Chaque PNG/JPG ci-dessous correspond à une page du PDF.

| # | Fichier | Contenu | Utilité pour Claude Design |
|---|---------|---------|----------------------------|
| 01 | charte-01.jpg | L'ADN ORDiDOC : Proximité Locale + Rigueur Technique | Tonalité de marque |
| 02 | charte-02.jpg | Équation identitaire : Proximité (Humain) / Expertise (Technique) / Transparence (Clarté) | Piliers de marque |
| 03 | charte-03.jpg | Vision ORDiDOC : Simplifier la technologie | Positionnement |
| 04 | charte-04.jpg | Anatomie technique du Super-Technicien (mascotte) — codes couleurs précis | Spec mascotte |
| 05 | charte-05.jpg | Règles d'engagement de la mascotte (Niveau 1=Logo, 2=Produit, 3=Mascotte) | Hiérarchie de marque |
| 06 | charte-06.jpg | Modèle d'assemblage A : Architecture "Brand Core" | Layouts site/docs |
| 07 | charte-07.jpg | La règle absolue : Séparation des écosystèmes (Core ↔ Retail) | Règle d'or |
| 08 | charte-08.jpg | Les fondations : architecture de la couleur (Marque / Neutre / Retail) | Palette |
| 09 | charte-09.jpg | Ingénierie de la mascotte (poses, expressions, code couleurs) | Spec mascotte détaillée |
| 10 | charte-10.jpg | Gabarits d'assemblage : l'affiche boutique (A4 210×297mm, 8mm marge, prix hero) | Template print |
| 11 | charte-11.jpg | Gabarits d'assemblage Web & Services (Home, Service Particuliers, Service Pros) | Wireframes site |
| 12 | charte-12.jpg | Diagnostic : prévenir la dilution de marque (interdits ↔ corrections) | Anti-patterns |
| 13 | charte-13.jpg | Architecture système : design tokens (pipeline sémantique) | Architecture tokens |
| 14 | charte-14.jpg | Implémentation : dictionnaire de variables (extrait JSON) | Dictionnaire tokens |
| 15 | charte-15.jpg | Workflow de production & QA (Figma → Dev → Print) | Process |
| 16 | charte-16.jpg | Le prompt système Claude Design (version originale) | Prompt LLM |
| 17 | charte-17.jpg | Les jetons de couleur (Color Tokens) — vue isométrique | Palette détaillée |
| 18 | charte-18.jpg | Le grand principe : la dualité (Core vs Retail, exemple visuel) | Dualité Core/Retail |
| 19 | charte-19.jpg | Ingénierie de la mascotte (suite : poses pro/atelier/promo) | Spec mascotte |
| 20 | charte-20.jpg | L'arbre de décision typographique (Inter / Archivo / Anton) | Arbre typo |
| 21 | charte-21.jpg | Atomes UI & géométrie (boutons, formes, auto-layout) | Atomes UI |
| 22 | charte-22.jpg | Le grand principe : la dualité (cards comparatives Core/Retail) | Dualité illustrée |
| 23 | charte-23.jpg | Anatomie d'un composant tokenisé (carte service) | Anatomie composant |
| 24 | charte-24.jpg | Architecture Figma & librairie (00 → 90, Published / Do Not Publish) | Structure Figma |
| 25 | charte-25.jpg | Les règles de l'écosystème retail (règle des 4, prix hero, lisibilité 3m) | Règles retail |
| 26 | charte-26.jpg | La règle d'or : séparation stricte des langages (Core/Retail) | Séparation langages |
| 27 | charte-27.jpg | Architecture des couleurs (tokens nommés + alerte orange) | Tokens couleur nommés |
| 28 | charte-28.jpg | Typographie : le poids du contexte (Core UI / Display / Retail / Tech) | Niveaux typo |
| 29 | charte-29.jpg | Le dosage de la mascotte (0% Devis Pro / 30% Web / 100% Promo Vitrine) | Spectre mascotte |
| 30 | charte-30.jpg | Design tokens : du design au code (export JSON sémantique) | Pipeline dev |
| 31 | charte-31.jpg | Modèles maîtres : le cœur de marque (Home, Particuliers, Pros, One-Pager) | Master pages site |
| 32 | charte-32.jpg | Anatomie d'une affiche boutique (5 zones : hiérarchie, visuel, specs, prix hero, garantie) | Décortication affiche |
| 33 | charte-33.jpg | Interdits & corrections systémiques (3 cas types) | Anti-patterns |
| 34 | charte-34.jpg | Architecture du fichier master Figma (00 → 90, statut publish) | Structure master |
| 35 | charte-35.jpg | Le langage Glassmorphism (radii, ombres, formes organiques) | Style UI |
| 36 | charte-36.jpg | Injection IA : Claude system prompt (extrait) | Prompt LLM |
| 37 | charte-37.jpg | Le flux de production (Bifurcation → Déploiement, 6 étapes) | Workflow détaillé |
| 38 | charte-38.jpg | Checklist de sortie (Pre-Flight QA Figma / Print / Web) | Checklist QA |

---

## Couleurs officielles confirmées par la charte

Brand Core :
- `#1F4E8C` → brand.blue.500 (Structure, fonds corporate, navigation)
- `#163A69` → brand.blue.700 (Titres forts, encadrés premium)
- `#7AC043` → brand.green.500 (CTA, validation, boutons d'action)
- `#5E9E2F` → brand.green.700 (Hover green)
- `#F5F7FA` → neutral.50 (Fond principal page)
- `#1F2937` → neutral.800 (Texte primary)

Activation Retail (encadré strict) :
- `#F28C28` → promo.orange.500 (Pastilles, labels)
- `#F7C948` → promo.yellow.400 (Prix hero)
- `#D4A72C` → promo.gold.500 (Badge garantie / médaille)

⚠ La charte alerte explicitement (page 27) : *« L'orange ne doit jamais devenir la base d'une interface ou d'un document pro »*.

## Mascotte — palette officielle (page 4 + 9)

- Suit color : `#1F4E8C`
- Suit shadows : `#163A69`
- Mask & Accessories (vert principal) : `#7AC043`
- Cape & Accessory shadows : `#5E9E2F`
- Belt & Chest emblem (or principal) : `#D4A72C`
- Highlight accents : `#F7C948`
- Eyes (sclera) : `#FFFFFF`
- Sheet background : `#F5F7FA`

Règles d'usage mascotte :
- Niveau 1 = Logo (toujours dominant)
- Niveau 2 = Produit / Offre
- Niveau 3 = Mascotte (soutien visuel uniquement)
- Spectre d'usage : 0 % devis pro / 30 % web (médaillon) / 100 % promo vitrine.

## Incohérence à signaler

Le prompt système original (pages 16 & 36 du PDF) mentionne **« Montserrat for headings »**.
La spec officielle ailleurs (page 20, arbre de décision typo) confirme **Archivo pour les titres**, pas Montserrat.

→ Le prompt Claude Design fourni dans `07_Brand_Guidelines/claude_design_prompt.txt` a déjà été aligné sur **Archivo** (cohérent avec l'arbre de décision typo, la stack actuelle et les fichiers `01_Typography/`). Si tu veux conserver Montserrat, dis-le et je bascule.