# Set up my design system — checklist Claude Design Tout est prêt. Tu n'as plus qu'à recopier / glisser-déposer dans la bonne case du formulaire. --- ## 1. Company name (or name of design system) Champ : **Company name** ``` ORDiDOC Design System ``` --- ## 2. Blurb Champ : **(under company name)** ``` ORDiDOC est une entreprise locale d'informatique, téléphonie IP et réparation basée à Ganges (34190, Hérault). Elle accompagne particuliers, professionnels, associations, collectivités et établissements publics : vente de matériel, réparation PC / Mac / smartphones / tablettes, réseaux Wi-Fi entreprise, fibre pro, VoIP, cybersécurité, sauvegardes, déploiements multi-sites. Pas une boutique anonyme : un partenaire technique de proximité qui vend, installe, maintient, conseille et accompagne de bout en bout. Co-gérance : Alexis Delmonte & Mickaël Vialla. Le design system ORDiDOC s'organise en deux couches : Brand Core (site, devis, documents, B2B, collectivités) et Retail Promo (affiches boutique, prix XXL, opérations commerciales). ``` --- ## 3. Provide examples of your design system and products ### Link code on GitHub **Laisser vide.** Pas de repo frontend dédié actuellement. ### Link code from your computer **Laisser vide.** Idem. À ajouter le jour où un repo frontend (Tailwind config + tokens + composants) existera. ### Upload a .fig file **Laisser vide pour l'instant** — voir la note dédiée plus bas. --- ## 4. Add fonts, logos and assets Drag-and-drop **le contenu** du dossier `ORDiDOC_Claude_Design_Kit/`. Ordre recommandé (du plus important au plus accessoire) : 1. **`07_Brand_Guidelines/`** d'abord (charte officielle PDF, design tokens JSON, prompt) — c'est la fondation. 2. **`02_Logo/`** (logos officiels 2025/2026, mascotte avec codes couleurs précis, favicon, tampon, photos magasin Ganges). 3. **`01_Typography/`** (specimen HTML + URLs Google Fonts + arbre de décision typo). 4. **`06_Website_Screenshots/`** (les 4 captures full-page que tu viens de récupérer dans Téléchargements + les 2 wireframes de la charte). 5. **`03_Print_PLV/`** (templates affiche boutique + 25 visuels imprimés réels). 6. **`04_Social_Posts/`** (12 posts Insta / FB). 7. **`05_Generative_Visuals/`** (références IA déjà dans la patte ORDiDOC) — moins prioritaire. Astuce : tu peux zipper tout le dossier et le déposer en une fois, mais le drag-and-drop de Claude Design préfère les fichiers individuels. Si l'upload zip échoue, dépose dossier par dossier. --- ## 5. Any other notes? Champ : **Any other notes?** Copie-colle le contenu intégral du fichier `07_Brand_Guidelines/claude_design_prompt.txt`. C'est le prompt enrichi avec : l'ADN 3 piliers, les règles d'engagement de la mascotte, le gabarit affiche boutique, les 4 modèles maîtres web, le langage Glassmorphism, l'architecture Figma, le workflow, les anti-patterns et la checklist QA. --- ## 6. Statut .fig **Honnête : je ne peux pas générer un vrai `.fig` depuis le sandbox.** Pourquoi : - Le format `.fig` est propriétaire et fermé. Il n'a pas de spec publique. - Aucune lib serveur ne sait l'écrire (à ma connaissance, et j'ai vérifié). - Seul Figma desktop (que tu as installé) peut produire un `.fig` propre. Ce que je peux faire à la place — au choix : **Option A — Tu pars d'une page Figma vierge** (recommandé) 1. Ouvrir Figma desktop. 2. Importer le `design_tokens.json` via le plugin **Tokens Studio for Figma** → tu récupères toutes les variables (couleurs, spacing, radii, typo) liées et nommées correctement. 3. Importer les SVG de `02_Logo/` directement dans la canvas. 4. Coller le `specimen.html` de `01_Typography/` dans le plugin **html.to.design** ou **Figma to Code (reverse)** pour avoir une page typo prête. 5. Save → tu as un vrai `.fig`. Délai : 20-30 min. **Option B — Je te génère un mockup HTML/CSS prêt à importer** Un fichier HTML auto-suffisant avec : hero, services cards, footer, palette, typo, mascotte placée. Tu l'ouvres dans Figma via **html.to.design** (plugin gratuit) → conversion automatique en frames + composants. Dis-moi si tu veux que je le génère, je le crée en 2 minutes. **Option C — Tu skippes le .fig pour l'instant** Claude Design accepte parfaitement un kit sans `.fig` (le champ est explicitement marqué *optional*). Avec tout ce qu'on lui donne (charte PDF + tokens JSON + logos + screenshots + prompt), il a largement de quoi générer cohérent. Recommandation : **Option C maintenant**, **Option A** plus tard quand tu auras 30 min, en utilisant le kit comme source. --- ## 7. État du site ordidoc.fr (observation honnête) Les screenshots viennent d'être pris (4 fichiers `ordidoc-*-desktop-fullpage.jpg` dans ton dossier Téléchargements). Constats à signaler à Claude Design : - Le site utilise encore l'**ancien logo jaune ORDIDOC** (texte vert lime + clé bleue). Le nouveau `Logo-Definitif-2026.png` du kit n'est pas en ligne. - Le bandeau bleu en haut est cohérent avec la palette charte (#1F4E8C). - Le menu / typo du site n'est pas Inter ni Archivo : police par défaut du thème WordPress / Elementor. - L'admin bar WordPress était visible (j'ai injecté un script pour la masquer avant capture). - Le hero de la page d'accueil contient un visuel de tablette ; les pages services / à propos / contact ont chacune leur propre hero illustré. Conclusion : le site est en **décalage avec la charte v2026**. Tu peux soit : - demander à Claude Design de proposer une **refonte alignée sur la charte** (en utilisant les screenshots comme référence "avant"), - soit lui demander de générer du **nouveau matériel print/social** en respectant la charte (le site sera mis à jour plus tard). À toi de choisir l'angle dans ta prochaine instruction à Claude Design.