PROMPT À COLLER DANS CLAUDE DESIGN ==================================== Company name: ORDiDOC Blurb: ORDiDOC est une entreprise locale d'informatique, téléphonie IP et réparation basée à Ganges (34190, Hérault). Nous accompagnons 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. Adresse : 98 avenue du Mont Aigoual, 34190 Ganges. Design system: ORDiDOC v1.1 (avril 2026). ---------------------------------------------------------------- SYSTÈME À DEUX COUCHES — RESPECTER LA SÉPARATION ---------------------------------------------------------------- Layer 1 — BRAND CORE - Pour : site web, documents, devis, propositions commerciales, pages service, contenus B2B / collectivités, interfaces UI. - Style : propre, moderne, lisible, rassurant, pro mais humain. - Palette : bleu ORDiDOC #1F4E8C / bleu foncé #163A69 / vert #7AC043 / vert foncé #5E9E2F / blanc / gris clair #F5F7FA / texte #1F2937. - Pas d'orange dominant. Pas de typographie display. Layer 2 — RETAIL PROMO - Pour : affiches boutique, prix XXL, stickers promo, opérations commerciales, posters magasin, campagnes boutique. - Style : impact, lisible à 3 mètres, accent prix. - Accents autorisés : orange #F28C28 / orange foncé #D96A00 / jaune #F7C948 / doré #D4A72C — uniquement sur cette couche. - Anton autorisé uniquement pour prix et accroches courtes. ---------------------------------------------------------------- TYPOGRAPHIES ---------------------------------------------------------------- - Inter (400/500/600/700) — body, UI, devis, documents, formulaires. - Archivo (500/600/700) — titres, sous-titres, cartes service, fiches produit. - Anton (Regular) — prix XXL, affiches boutique, stickers promo. Display strict. Hiérarchie : - Hero / H1 site → Archivo Bold 48–64 px - H2 → Archivo SemiBold 36 px - H3 / Card title → Archivo SemiBold 24 px - Body → Inter Regular 16 px - Bouton → Inter SemiBold 16 px - Prix affiche → Anton Regular 96–240 px Règle stricte : Anton est interdit dans tout document corporate, devis ou courrier collectivité. ---------------------------------------------------------------- PRINCIPES DE MARQUE ---------------------------------------------------------------- - Local et humain avant corporate. - Lisible avant stylé. - Expert mais accessible. - Moderne sans tomber dans le startup générique. - Impact retail fort sans virer cheap. - Mascotte = élément de soutien, jamais en remplacement du logo principal. À éviter absolument : - esthétique SaaS générique - gamer RGB / dark hacker - multiplication de couleurs dans une même composition - mascotte partout - mélange du langage promo retail dans un document pro ---------------------------------------------------------------- LIVRABLES ATTENDUS DANS FIGMA ---------------------------------------------------------------- Pages : - 00 Cover & Usage - 01 Brand Foundations (palette, typo, grille, espacements) - 02 Variables (Core / Retail / Semantic) - 03 Components / Core (boutons, inputs, cards service, navbar, footer) - 04 Components / Retail (poster prix, sticker promo, étiquette, badge) - 05 Patterns / Web (hero, section service, fiche produit, page contact) - 06 Patterns / Print (affiche A3, étiquette location, PLV vitrine) - 07 Social / Campaigns (post Insta, story, post Facebook) - 90 Archive Naming rule : Category / Component / Part / Variant. Auto-layout obligatoire. Spacing basé sur 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. ---------------------------------------------------------------- TON ÉDITORIAL ---------------------------------------------------------------- - Sympathique, décontracté mais professionnel. - Accessible, parfois légèrement humoristique. - Jamais froid, jamais corporate vide, jamais arrogant. - Sur supports collectivités : rigoureux, précis, juridiquement prudent. - Vendre service + proximité + compétence + sérieux, pas du matériel froid. ---------------------------------------------------------------- ADN DE MARQUE (synthèse charte v2026) ---------------------------------------------------------------- Trois piliers identitaires : 1. PROXIMITÉ (Humain) — tons accessibles, photos réelles, mascotte secondaire, CTA simples. Rassurer et humaniser : « l'informaticien voisin ». 2. EXPERTISE (Technique) — bleu dominant, structure nette, pictos techniques. Crédibiliser sans refroidir : « le technicien de confiance ». 3. TRANSPARENCE (Clarté) — hiérarchie ultra-lisible, prix nets, zéro jargon. « Le devis sans surprise ». Promesse centrale : un interlocuteur unique à Ganges pour simplifier la technologie. ---------------------------------------------------------------- MASCOTTE — RÈGLES D'ENGAGEMENT ---------------------------------------------------------------- Hiérarchie stricte : - Niveau 1 = LE LOGO (toujours dominant, indispensable) - Niveau 2 = LE PRODUIT / L'OFFRE (cœur du message) - Niveau 3 = LA MASCOTTE (soutien visuel uniquement) Spectre d'usage de la mascotte : - 0 % sur devis pro / propositions / collectivités - ~30 % sur le web (médaillon, badge, carte service) - ~100 % sur promo vitrine / affiche boutique / sticker label INTERDITS : - Mascotte plus grande que le produit - Mascotte qui remplace le logo - Mascotte dans un document corporate / collectivité Codes couleurs mascotte (à respecter) : - Combinaison bleu : #1F4E8C / shadows #163A69 - Cape & accessoires verts : #7AC043 / shadows #5E9E2F - Ceinture & emblème poitrine (or) : #D4A72C - Highlights : #F7C948 Expressions approuvées (Mascot Expressions Grid) : - neutral friendly smile / enthusiastic / focused-concentrated - reassuring-supportive / proud heroic / slightly surprised Poses : Repair Pose pour services techniques, Heroic Pose pour campagnes, Assistance/Welcome pour pages contact. ---------------------------------------------------------------- GABARIT AFFICHE BOUTIQUE (RETAIL) ---------------------------------------------------------------- Format : A4 portrait (210 × 297 mm). Marges sécurité : 8 mm. Fond perdu : 3 mm. Export 300 dpi CMJN. 5 zones obligatoires : 1. Header — marque / nom du modèle (Archivo Bold, en haut) 2. Visuel central — produit OU mascotte retail 3. Liste de specs — MAX 4 caractéristiques au premier niveau 4. Prix Hero — composant Price/Hero, contour bleu, fond chaud (Anton) 5. Sticker garantie — forme ronde ou ruban (1 an / 2 ans) + Mentions légales bas de page (Inter, taille mini 8 pt) Validation finale obligatoire : lecture claire à 3 mètres. ---------------------------------------------------------------- GABARIT WEB (BRAND CORE) ---------------------------------------------------------------- 4 modèles maîtres : - Home / Brand : Hero → Services → Preuves → FAQ → Contact. Aucune couleur promo dominante. - Service Particuliers : ton simple et humain, mascotte autorisée mais mesurée. - Service Pros : architecture sobre, offre + sécurité + maintenance, mascotte minimale ou absente. - One-Pager Pro : problème + solution + stack + garanties, aucun langage promo. ---------------------------------------------------------------- GLASSMORPHISM (LANGAGE UI) ---------------------------------------------------------------- Border-radius : - sm = 8 px (tags, badges) - md = 12 px (inputs, petits boutons) - lg = 20 px (cartes de service) - pill = 999 px (boutons d'action principaux) Ombres : diffuses et douces. Jamais de bordures dures sur les cartes. ---------------------------------------------------------------- ARCHITECTURE FIGMA (FICHIER MASTER) ---------------------------------------------------------------- Fichier unique : ORDiDOC Design System – Master. Pages : - 00 Cover & Usage (read-only) - 01 Brand Foundations (Published) - 02 Variables (Published) — Couleurs, espacements - 03 Components Core (Published) — UI Web - 04 Components Retail (Published) — Prix, badges - 05 Patterns Web (Published) - 06 Patterns Print (Published) - 90 Archive (Do Not Publish) Workflow obligatoire : Bifurcation → Fondation → Assemblage → Vérification → Test QA (lisibilité 3 m / mobile) → Déploiement. Auto-layout obligatoire sur tous les composants. Aucune valeur brute hardcodée. Spacing basé sur 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. ---------------------------------------------------------------- ANTI-PATTERNS (INTERDITS SYSTÉMIQUES) ---------------------------------------------------------------- - Plus de 4 blocs specs sur une affiche → surcharge cognitive. - Orange en fond principal d'un support corporate → dilution de l'expertise pro. - Mascotte plus grande que le produit → infantilisation du service. - Mélanger langage promo retail dans un document pro / devis / collectivité. - Bordures dures, valeurs hardcodées, composants sans auto-layout. ---------------------------------------------------------------- CHECKLIST PRE-FLIGHT QA ---------------------------------------------------------------- QA Figma : - Variables 100 % reliées ? - Auto-layout actif ? - Ancrages responsives testés ? QA Print (Boutique) : - Règle des 4 specs respectée ? - Lisible à 3 mètres ? - Fond perdu 3 mm ? - Contraste prix / fond validé ? QA Web & Dev : - Aucune contamination Promo sur une page institutionnelle ? - JSON valide sans valeur hardcodée ? - Orthographe et conditions légales lisibles ? ---------------------------------------------------------------- PIPELINE DESIGN TOKENS ---------------------------------------------------------------- Global → Sémantique → Composant. Exemple sémantique : surface.page = {color.neutral.50} action.primary.bg = {color.brand.green.500} retail.price.primary = {color.promo.yellow.400} retail.badge.promo = {color.promo.orange.500} Directive dev : exposer un export JSON brut + un export transformé pour Tailwind / Style Dictionary. Aucun token hardcodé dans les maquettes ni dans le code.