# Divinemenciel — Design System **Divinemenciel** est une agence de communication 360° spécialisée dans la **Food & Beverage** et l'**Hospitality**, basée à Marseille (bureaux à Paris, Marseille, Strasbourg). « *Divinemenciel est une agence créative et influente qui sublime les marques, les concepts et les expériences.* » Mission : **Créer, révéler, amplifier** les marques et lieux de vie qui améliorent notre quotidien. 15+ ans, 900+ projets : chefs, marques et lieux d'exception (Meteor, Carrefour, Basilic & Co, InterContinental, Juma, Domaine Jòlibois…). Méthode en trois temps : **Create. Spread. Amplify.** Services : branding, social media, relations presse, influence marketing, growth & paid media, événementiel, shooting photo/vidéo, webdesign. ## Sources - `uploads/Divinemenciel_Chartegraphique_2026.pdf` — **la charte graphique 2026, document de référence** (47 pages : logotype, colorimétrie, typographies, photographie, iconographie, applications). - Dossier monté `01_CHARTE GRAPHIQUE/` — exports logo (SVG/PNG), photos de marque, signatures mail HTML, sources .ai/.indd. - Dossier monté `02_PRINT/` — plaquette agence 2026, cartes de visite, flyers SIRHA/EGAST, stand salon 2026, t-shirts. - Fonts uploadées : DM Sans (variable) + Instrument Serif (regular/italic). --- ## CONTENT FUNDAMENTALS **Langue : français.** L'anglais n'apparaît que pour les concepts de méthode (« Create. Spread. Amplify. », « what do we do ») et certains termes métier (branding, social media, opening). **Ton** : assuré, chaleureux, gourmand. L'agence parle d'elle à la première personne du pluriel (« Nous créons des marques fortes, déployons leur visibilité et accélérons leur performance ») et s'adresse au client en « vous » (« Votre agence de communication », « pour répondre à vos besoins »). Vocabulaire sensoriel et culinaire assumé — les couleurs elles-mêmes s'appellent « Vert Pesto Frais », « Rose Sorbet Framboise », « Orange Patate Douce ». **Casing** : - Sur-titres et pastilles : CAPITALES letterspaced (« NOTRE MISSION : », « ACCOMPAGNEMENT 360° », « OPENING »). - Titres Instrument Serif : soit bas de casse à l'anglaise (« Une agence au rythme de son époque »), soit FULL CAPS (Titre 1, Mega-titre). - Mots-clés mis en relief *en Instrument Serif italic* au milieu d'une phrase en DM Sans (« Nous créons des *marques fortes*, déployons leur *visibilité*… »). **Motifs d'écriture** : - Citations ouvertes par un double-apostrophe décoratif « ‘‘ » en Instrument Serif. - Chiffres-preuves en gros (« 15 ans », « +900 projets », « +740 000 impressions en 5 mois »). - Crédit photo systématique : « Crédit photo @Divinemenciel ». - Listes de services en mots courts séparés par des puces médianes : « Branding · Social Media · Shooting · Influence · Presse ». - Pas d'emoji dans les supports de marque. --- ## VISUAL FOUNDATIONS **Le motif central : la carte aux coins arrondis.** « La base de notre iconographie, c'est la carte aux coins arrondis. » Tout est construit en cartes — fonds, placeholders, encarts, bandeaux. Elles s'empilent verticalement en bandes de couleurs (vert olive → pesto → orange → rose) sur fond crème, séparées par de fines gouttières. Une carte peut être « inversée » (découpe en creux). **Les marges internes d'une carte sont proportionnelles à son arrondi** (charte p.30) : arrondis autorisés 5/10/15 mm (digital : 16/28/44 px). **Couleurs** : 6 couleurs principales + nuanciers en 5 teintes chacune (voir `tokens/colors.css`). Fond par défaut : crème **Blanc Lait d'Amande** `#ebedd4`. Couleur signature : **Vert Olive Noire** `#1a3a2b` (texte par défaut sur fond clair, fonds de cartes sombres). Texte sur fonds saturés : blanc cassé `#f5f5f5` ou **Jaune Mousse Citron** `#d8f19f` (combinaison signature : jaune sur vert olive). Accents typographiques : vin rouge `#7c1c20`, fuchsia `#c13f8a`. Pas de dégradés — uniquement des aplats. **Typographies** : - **Instrument Serif** (principale) : tous les titres, mega-titres, citations, mots accentués en italique. Jamais en graisse — uniquement regular et italic. - **DM Sans** (secondaire) : corps de texte (regular), légendes (light), pastilles et sur-titres (CAPS letterspaced), chiffres-clés (light à regular en très grand corps). **Photographie** : très présente, pleine carte (coins arrondis) ou plein écran avec texte blanc par-dessus. Couleurs chaudes, saturées, appétissantes ; lumière naturelle ; gros plans gourmands (le sandwich croqué de la plaquette), scènes de vie d'équipe et de restaurant. Jamais froide ni désaturée, pas de noir & blanc. **Illustrations** : doodles culinaires dessinés à la main, en trait fin monochrome (blanc ou crème) posés sur les aplats de couleur — verre de martini, bouteille, micro, appareil photo, théière, poisson, hashtag. Sources dans les .ai (non extraites — voir CAVEATS). **Animation** : la charte est print-first ; aucune règle d'animation définie. Pour le digital : rester sobre — fondus et translations douces, pas de bounce. **États interactifs** (extrapolés, non définis par la charte) : liens en vert olive, hover par passage à la teinte 80 ou soulignement ; boutons = pastilles pleines, hover par assombrissement léger. **Ombres : aucune.** Les cartes sont des aplats mats posés sur le fond crème. Pas de bordures décoratives non plus — la séparation se fait par la couleur. Pas de blur, pas de transparence (hors voile sombre léger sur photo pour lisibilité du texte). **Layout** : compositions éditoriales centrées ou en bandes pleine largeur ; beaucoup d'air autour des titres ; grilles de cartes ; le contenu respecte la « zone autorisée » à l'intérieur des cartes. --- ## ICONOGRAPHY - **Pas d'icon font ni de bibliothèque d'icônes UI.** L'« iconographie » au sens de la charte = le système de cartes arrondies + les doodles culinaires dessinés main. - Les doodles (martini, bouteille, micro, caméra, théière, poisson, hashtag) vivent dans les fichiers .ai sources et n'ont pas pu être extraits en SVG — **demander les exports SVG à l'équipe**. - Icônes réseaux sociaux : petits PNG monochromes hébergés sur divinemenciel.com (cf. signatures mail). - `assets/icons/chevron-double-down.png` — chevron double utilisé dans les flyers. - Pas d'emoji, pas de caractères unicode décoratifs (hors puce médiane « · » de séparation et « ‘‘ » de citation). - Si une icône UI fonctionnelle est indispensable en prototype : utiliser un set à trait fin (ex. Lucide en `stroke-width:1.5`) en vert olive — **substitution à signaler**. ### Logos (`assets/logos/`) - `Logo_div_blanc.svg` / `Logo_div_creme.svg` / `Logo_div_vert.svg` — wordmark bas de casse « divinemenciel » (blanc / crème `#ebedd4` / vert olive `#1a3a2b`). Zone de protection x/2, taille min digital 75–100 px de large. - `Logo_div_fav1…6.svg` — monogramme « d » dans un cercle, 6 combinaisons : crème/vert-olive, vert-olive/crème, pesto/crème, jaune/vert-olive, orange/crème, rose/blanc. - ⚠️ Les SVG uploadés avaient perdu leurs styles ; ils ont été re-colorés d'après les exports PNG officiels. ### Photos (`assets/photos/`) Photos de projets clients rangées par dossier client (`500-degres/`, `basilic-co/`, `juma/`, `emile-noel/`, `meteor/`, …), équipe dans `equipe/`, portraits détourés de chefs dans `chefs/` (Anne-Sophie Pic, Zanoni, Lefebvre, Levy, Camino, Ju — extraits de la plaquette 2026). Carte « Photographie » dans l'onglet Design System. --- ## INDEX | Chemin | Contenu | | --- | --- | | `styles.css` | Point d'entrée CSS (imports uniquement) | | `tokens/colors.css` | Palette, nuanciers, alias sémantiques | | `tokens/typography.css` | Familles, échelle, classes `.ds-*` | | `tokens/spacing.css` | Espacements, arrondis de cartes | | `tokens/fonts.css` | @font-face DM Sans + Instrument Serif | | `assets/` | logos, fonts, photos, icons | | `guidelines/` | cartes spécimens (Design System tab) | | `components/core/` | `Card`, `Pastille`, `Button`, `Heading` (+`Accent`), `Stat`, `Quote`, `Logo`, `PhotoCard` | | `ui_kits/slides/` | 10 gabarits fidèles à la plaquette 2026 : `CoverSlide`, `StatementSlide`, `MissionSlide`, `ServicesSlide`, `OffersSlide`, `MethodSlide`, `SectionSlide`, `ChapterSlide`, `CaseStudySlide`, `ClosingSlide` (voir `ui_kits/slides/README.md`) | | `templates/presentation-agence/` | template « Présentation agence » : mini-deck des 10 gabarits, point de départ pour les projets consommateurs | | `ui_kits/print/` | `EmailSignature` (recréée du HTML réel), `EncartPub` 95×260 | | `SKILL.md` | guide d'utilisation pour agents (compatible Agent Skills) | **Règles d'or** : tout est cartes arrondies sur fond crème · padding interne = arrondi · Instrument Serif jamais en gras · pas de dégradés, pas d'ombres · pas d'emoji · français, ton chaleureux et gourmand. Composants exposés sous `window.DivinemencielDesignSystem_eafb8e` via `_ds_bundle.js` (généré).