# ORDiDOC — Claude Design Kit

Kit prêt à uploader dans Claude Design (sections : *Provide examples of your
design system and products*, *Company name and blurb*, *Add fonts, logos and
assets*).

## Ce que tu uploades à Claude Design

Dans la fenêtre de setup de Claude Design :

1. **Company name** : `ORDiDOC`
2. **Blurb** : copier-coller le bloc *Blurb* depuis
   `07_Brand_Guidelines/claude_design_prompt.txt`.
3. **Other notes / Design system instructions** : copier-coller le reste de
   `07_Brand_Guidelines/claude_design_prompt.txt`.
4. **Add fonts, logos and assets** : zipper ce dossier (ou uploader le contenu).
5. **Link code** : laisser vide tant qu'il n'y a pas de repo frontend dédié.
6. **.fig file** : laisser vide tant qu'il n'y a pas de master Figma propre.

## Arborescence

```
ORDiDOC_Claude_Design_Kit/
├── README.md                         ← ce fichier
├── 01_Typography/
│   ├── README.md                     ← règles d'usage + URLs Google Fonts
│   ├── specimen.html                 ← spécimen visuel des 3 typos
│   ├── arbre-decision-typo.jpg       ← page 20 charte : quelle typo quand
│   ├── Inter/INTER_SOURCE.txt
│   ├── Archivo/ARCHIVO_SOURCE.txt
│   └── Anton/ANTON_SOURCE.txt
├── 02_Logo/                          ← logos officiels + favicon + tampon + photos magasin
│   ├── mascotte-anatomie-charte.jpg          (page 4 charte)
│   ├── mascotte-poses-expressions.jpg        (page 9 charte)
│   ├── mascotte-poses-pro-atelier-promo.jpg  (page 19 charte)
│   └── mascotte-spectre-usage.jpg            (page 29 charte : 0% pro / 30% web / 100% promo)
├── 03_Print_PLV/                     ← affiches, PLV, vitrine, opérations boutique
│   ├── template-affiche-boutique-gabarit.jpg   (page 10 charte : A4 cotes)
│   └── template-affiche-boutique-anatomie.jpg  (page 32 charte : 5 zones)
├── 04_Social_Posts/                  ← visuels Insta / Facebook
├── 05_Generative_Visuals/            ← références IA (Gemini / ChatGPT) à la patte ORDiDOC
├── 06_Website_Screenshots/           ← À COMPLÉTER MANUELLEMENT (egress sandbox bloqué)
│   ├── README.md                                ← procédure de capture
│   ├── wireframes-pages-cibles.jpg              (page 11 charte : Home + Particuliers + Pros)
│   └── wireframes-master-pages.jpg              (page 31 charte : 4 modèles maîtres)
└── 07_Brand_Guidelines/
    ├── design_tokens.json                       ← tokens couleurs / spacing / typo
    ├── claude_design_prompt.txt                 ← prompt prêt à coller
    ├── Charte_design_visuelle_complete.pdf      ← charte officielle 38 pages (NotebookLM)
    └── charte_pages_jpg/                        ← 38 pages converties + INDEX.md
```

## Couleurs (rappel)

Brand Core :
- Bleu        `#1F4E8C`
- Bleu foncé  `#163A69`
- Vert        `#7AC043`
- Vert foncé  `#5E9E2F`
- Texte       `#1F2937`
- Page bg     `#F5F7FA`

Retail Promo (uniquement affiches / prix) :
- Orange      `#F28C28`
- Jaune       `#F7C948`
- Doré        `#D4A72C`

## Typographies

- **Inter** — body / UI / docs (400/500/600/700)
- **Archivo** — titres / structure (500/600/700)
- **Anton** — prix XXL / affiches (Regular, display strict)

Détails et URLs : `01_Typography/README.md`.

## Limites connues de cette génération

- **Téléchargement automatique des `.ttf` impossible** : `fonts.google.com` est
  bloqué par le proxy egress du sandbox Cowork. Les sous-dossiers Inter /
  Archivo / Anton contiennent les URLs et la procédure à suivre depuis ton
  navigateur (compter 2 minutes au total).
- **Screenshots ordidoc.fr non capturés** : `ordidoc.fr` est aussi bloqué côté
  egress, et l'extension Claude in Chrome a remonté un conflit multi-extension.
  La procédure de capture manuelle est documentée dans
  `06_Website_Screenshots/README.md`.

## Prochaines étapes recommandées

1. Télécharger Inter, Archivo, Anton depuis Google Fonts (liens dans
   `01_Typography/README.md`) et les déposer dans les 3 sous-dossiers.
2. Faire 4 screenshots du site (home, services, pro, contact) en desktop +
   mobile et les déposer dans `06_Website_Screenshots/`.
3. Zipper le dossier `ORDiDOC_Claude_Design_Kit/` et l'uploader dans Claude
   Design avec le prompt de `07_Brand_Guidelines/claude_design_prompt.txt`.

## Charte officielle intégrée

Le PDF `Charte_design_visuelle_complete.pdf` (38 pages, généré par NotebookLM)
est maintenant embarqué dans `07_Brand_Guidelines/`. Tu y trouveras :

- l'ADN ORDiDOC (Proximité / Expertise / Transparence)
- les règles d'engagement de la mascotte (3 niveaux + spectre d'usage)
- les fondations couleur tokenisées (Brand Core ↔ Retail)
- l'arbre de décision typographique
- les gabarits affiche boutique (A4, marges, prix hero)
- les wireframes des modèles maîtres web (Home, Particuliers, Pros, One-Pager)
- les anti-patterns (interdits ↔ corrections systémiques)
- l'architecture Figma & le workflow de production
- les checklists Pre-Flight QA

Pages clés extraites au format JPG dans `07_Brand_Guidelines/charte_pages_jpg/`
avec un `INDEX.md` détaillant le contenu de chacune.

⚠ **Incohérence détectée** : le prompt système original de la charte (pages 16
et 36) mentionne *« Montserrat for headings »*, alors que l'arbre de décision
typographique (page 20) confirme **Archivo** pour les titres. Le prompt fourni
dans ce kit a été aligné sur **Archivo** (cohérent avec l'arbre de décision et
les fichiers `01_Typography/`). Si tu veux conserver Montserrat, dis-le.