# Fidulia — Design System > Export consolidé · v2026-06-08 > Marque : Fidulia (anciennement Linked Connexion) — by Fabien Massavie > Agence LinkedIn pour les **professions de confiance** : CGP · Notaires · Experts-comptables · Avocats. Ce document est l'export complet du design system. Il rassemble en un seul fichier : positionnement, ton éditorial, fondations visuelles, tokens (couleurs, typo, espacement, rayons, ombres, motion), composants, logos et iconographie. Tout ce qu'il faut pour produire un visuel ou une interface 100 % à la marque. --- ## 1. MARQUE & POSITIONNEMENT Fidulia accompagne les professionnels réglementés (CGP, CIF, notaires, experts-comptables, avocats) dans leur **exécution LinkedIn de A à Z**, dans le strict respect de leur cadre réglementaire (AMF, déontologie). **Promesse centrale.** « Exécution LinkedIn A→Z, conforme à votre réglementation. » **Signature.** *by Fabien Massavie · Stratège LinkedIn pour professions de confiance* **Audiences** | Audience | Besoin | Format | |---|---|---| | CGP / CIF | Visibilité conforme AMF, leads qualifiés | Ghostwriting, formation, audit | | Notaires / Avocats | Autorité, pédagogie, déontologie | Carrousels, articles, accompagnement | | Experts-comptables | Acquisition, marque employeur | Contenu, employee advocacy | **Canaux** - Site : - LinkedIn : - Instagram : - YouTube : --- ## 2. CONTENU & TON ÉDITORIAL **Langue.** Français. **Vous** pour s'adresser aux prospects ; *je* à la première personne pour Fabien (signatures, contenus longs). **Ton de voix.** Humain, direct, exigeant, bienveillant. **Pas de promesses miracles** — jamais « explosez votre business », « +1000 leads garantis ». On privilégie le factuel et le mesurable : *« un profil plus percutant »*, *« des prises de contact qualifiées »*, *« +23 % de leads entrants en 6 mois »*. **Registre conformité.** Sur les sujets réglementés, toujours contextualiser, cadrer le risque, rester collectif (jamais de conseil nominatif public). Mention légale obligatoire sur tout contenu à caractère financier. **Casse.** - **Titres de programmes / sections** → MAJUSCULES, gras (Black 900). - **CTAs** → MAJUSCULES. *RÉSERVER UN CRÉNEAU*, *DÉCOUVRIR LA FORMATION*, *TÉLÉCHARGER LE GUIDE*. - **Badges / kickers** → MAJUSCULES, magenta, tracking large. *CONFORMITÉ AMF · CIF*, *IDÉE REÇUE*. - **Sous-titres** → Casse phrase, souvent italique Light. - **Corps** → Casse phrase. Paragraphes courts (2–4 lignes max). **Emoji.** Évités dans l'UI produit. Sur LinkedIn, un seul ✅ ou 🚩 toléré comme marqueur inline — jamais de chaînes décoratives (🚀💥🔥). **Caractères unicode.** `→` (étape suivante), `·` (séparateur), `—` (incise). Jamais `>>` ni flèches ASCII. **Exemples de voix** > « On ne devient pas visible par accident. On le devient par méthode. » > « Vous vous autocensurez sur LinkedIn par peur de l'AMF. Voici ce que vous avez le droit de dire. » > « Même message. Deux formulations. Un seul risque. » --- ## 3. COULEURS Trois couleurs, utilisées avec discipline. Le magenta ne dépasse jamais ~5 % d'une composition. | Token | Hex | Rôle | |---|---|---| | `--lc-bg` | `#0C132A` | **Bleu nuit** — fond dominant (navy profond, pas du noir pur) | | `--lc-magenta` | `#D70459` | **Magenta** — accent unique (CTA, kickers, mots-clés, mark) | | `--lc-magenta-700` | `#A60344` | Magenta hover / pressed | | `--lc-magenta-300` | `#F25C95` | Tint magenta sur fond sombre | | `--lc-white` | `#FFFFFF` | Texte sur sombre, surfaces sur clair | | `--lc-true-black` | `#000000` | Fond photo full-bleed | **Échelle de gris (navy-tinted)** — sous-ton bleu froid accordé au fond. ``` 950 #0C132A 900 #131A33 800 #1B2240 700 #2A3252 600 #424B6D 500 #6E7593 400 #9FA5BD 300 #C9CEDC 200 #E1E4EE 100 #F1F3F8 50 #F8F9FC ``` **Pas de gradient décoratif.** Pas de violet-bleuté, pas d'arc-en-ciel, pas de glassmorphism, pas de glow néon. Le magenta est **toujours plat**. --- ## 4. TYPOGRAPHIE **Trinité typographique Fidulia** *(bascule 2026-07-15 — remplace Sana Sans)* | Famille | Rôle | Fichier VF | |---|---|---| | **Playfair Display** *(serif éditorial)* | Titres H1/H2/H3, chutes, citations, sous-titres italiques | `PlayfairDisplay-VF.ttf` + `PlayfairDisplay-Italic-VF.ttf` | | **Raleway** *(sans-serif humaniste)* | Corps, bullets, légendes, sources, UI, kickers | `Raleway-VF.ttf` + `Raleway-Italic-VF.ttf` | | **League Spartan** *(sans-serif géométrique bold)* | Chiffres display exclusivement — KPIs, stats-hero, chiffres-fort de slides | `LeagueSpartan-VF.ttf` | - **Titres (H1/H2/H3)** → **Playfair Display Bold 700 / SemiBold 600**, casse phrase (pas de MAJUSCULES sur du serif), tracking légèrement serré (−0.01em / −0.02em). Un mot-clé en magenta par titre. - **Chutes / sous-titres italiques** → **Playfair Display Italic 400**, casse phrase. Idéal pour la conclusion italique en pied de slide. - **Citations** → **Playfair Display Italic**, encadrées de guillemets français `« »`. - **Corps & UI** → **Raleway Regular 400**, interligne généreux (1.5–1.65). SemiBold 600 pour H4/labels UI. - **Kickers, badges, CTAs** → **Raleway Bold 700 uppercase**, tracking large (+0.14em), couleur magenta. - **Chiffres display** → **League Spartan Bold 700 / Black 900**, taille XXL, souvent en magenta. **Règle : dès qu'un chiffre est mis en avant sur une slide ou dans un KPI, c'est League Spartan.** Les chiffres inline dans le corps restent en Raleway. **Fichiers de police — chemins locaux** Toutes les typos sont stockées en Variable Fonts (un fichier VF par famille couvre tous les weights 100→900) dans `Contexte/Design-System/Fonts/`. | Famille | Fichier local | Source | Licence | |---|---|---|---| | Playfair Display (Regular + Italic) | `PlayfairDisplay-VF.ttf` + `PlayfairDisplay-Italic-VF.ttf` | Google Fonts | SIL Open Font License (libre) | | Raleway (Regular + Italic) | `Raleway-VF.ttf` + `Raleway-Italic-VF.ttf` | Google Fonts | SIL Open Font License (libre) | | League Spartan (Regular) | `LeagueSpartan-VF.ttf` | Google Fonts | SIL Open Font License (libre) | | Sana Sans *(asset dormant)* | 16 fichiers `SanaSans-*.ttf/.otf` | Latinotype (MyFonts) + Datfont | Achetée MyFonts + Datfont gratuit | **Note Sana Sans** : conservée dans `/Fonts/` comme asset historique réactivable, mais **plus utilisée** dans les productions Fidulia depuis le 2026-07-15. Les 12 templates JSON, les HTML actifs et les prompts d'agents ont basculé sur la trinité Playfair/Raleway/League Spartan. > **⚠️ RÈGLE ABSOLUE** : Toute proposition graphique produite pour Fidulia utilise **Playfair Display** (titres), **Raleway** (corps) et **League Spartan** (chiffres display), dans les rôles définis ci-dessus. Aucun mélange avec Sana Sans dans une nouvelle production. Les fallbacks CSS (Georgia, system-ui, Bebas Neue, Impact) sont réservés aux environnements web sans accès aux fichiers locaux. **Familles CSS (variables tokens.css)** ```css --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Raleway', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-numeric: 'League Spartan', 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; /* Aliases legacy pour compat des HTML existants */ --font-display: var(--font-title); --font-serif: var(--font-title); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; ``` **Échelle typographique** ``` xs 12 · sm 14 · base 16 · md 18 · lg 20 · xl 24 2xl 32 · 3xl 44 · 4xl 64 · 5xl 88 · 6xl 128 (px) ``` **Interlignes** : tight 1.05 · snug 1.2 · normal 1.5 · loose 1.65 **Tracking** : display −0.01em · kicker +0.14em · tight −0.02em --- ## 5. ESPACEMENT, RAYONS, OMBRES, MOTION **Espacement** — base 4 px. ``` 1=4 2=8 3=12 4=16 5=24 6=32 7=48 8=64 9=96 10=128 (px) ``` Rythme vertical web : 96 (large) / 64 (moyen) / 32 (petit). Padding interne carte : 24–32. **Rayons** — serrés. ``` xs 2 · sm 4 · md 8 (boutons, inputs) · lg 12 (cartes) · xl 20 · pill 999 ``` Les boutons sont à 8 px (légèrement arrondis), **jamais** full-pill. **Ombres** — parcimonie. Sur sombre, quasi invisibles (préférer un fin border). Sur blanc, cartes flottantes autorisées. ``` sm 0 1px 2px rgba(0,0,0,.12) md 0 6px 16px -4px rgba(0,0,0,.18) lg 0 12px 32px -8px rgba(0,0,0,.22) xl 0 24px 64px -16px rgba(0,0,0,.32) magenta 0 12px 40px -12px rgba(215,4,89,.55) ``` **Motion** — retenu, cinématographique. Pas de bounce, pas de spring. ``` ease-out cubic-bezier(.2,.7,.2,1) ease-in-out cubic-bezier(.65,0,.35,1) fast 150ms · base 220ms · slow 420ms ``` Reveal par défaut : fade + translation 12 px vers le haut. Hover 200 ms ease-out. **Layout** : container 1200 px · nav fixe 72 px (glassy, blur 16 px). Footer toujours sombre, même sur page claire. --- ## 6. COMPOSANTS **Boutons** - *Primary* : fond magenta `#D70459`, texte blanc, MAJUSCULES, radius 8. Hover → `#A60344`. Press → scale 0.98. - *Secondary* : contour blanc sur fond sombre. Hover → fond blanc + texte navy. - *Ghost* : contour `rgba(255,255,255,.18)`. Hover → bord + texte magenta. - *Link* : texte magenta, flèche `→` qui glisse de 3 px au hover. **Badges / kickers** — MAJUSCULES, tracking large. - Magenta sur blanc · blanc sur magenta · contour. Status avec point : « Inscriptions ouvertes ». **Cartes** — deux recettes. - *Carte sombre* : fond `#131A33`, border `1px rgba(255,255,255,.08)`, radius 12, padding 28, titre magenta, corps blanc. Hover → bord passe à `rgba(215,4,89,.5)`. - *Carte claire* : fond blanc, border `#E1E4EE`, radius 12, titre navy, corps charcoal. Hover → ombre grandit, pas de mouvement. **Champs de formulaire** — fond `#131A33`, border `1px rgba(255,255,255,.12)`, radius 8. Focus → bord magenta. Checkbox cochée : fond magenta + ✓ blanc. **Témoignage** — 5 ★ magenta + citation serif/italic + nom client en **magenta** majuscules + rôle muted. **Bordures** — subtiles : `1px rgba(255,255,255,.08)` sur sombre, `1px #E1E4EE` sur clair. **Jamais** de border-accent coloré à gauche seul. **Transparence / blur** — uniquement nav (`backdrop-filter: blur(16px)`, bg `rgba(12,19,42,.7)`) et scrims de modale. Jamais sur les cartes. --- ## 7. LOGO & ICONOGRAPHIE ### Écriture du nom de marque Fidulia s'écrit toujours en romain, Regular 400, couleur unique (navy ou blanc selon le fond). Jamais en gras, jamais en italique, jamais bicolore. Pas de majuscule de fantaisie (FIDULIA), pas d'accentuation graphique du "F". Correct : Fidulia Incorrect : **Fidulia** · *Fidulia* · Fidulia · FIDULIA ### Monogramme F Le logo Fidulia est un **F** construit à partir de trois barres horizontales parallèles reliées par une courbe en S. Sans cercle, sans cadre, sans fond — le monogramme seul. Couleur : magenta `#D70459` plat. Deux variantes proportionnelles : - **Isotype (compact)** — barres plus courtes, forme resserrée. Usage : favicon, icône app, avatar, petit format (< 48 px d'affichage). - **Logo (étendu)** — barres plus longues avec débordement gauche, espace intérieur généreux. Usage : en-tête de document, slide, bannière LinkedIn, grand format. | Fichier | Variante | Fond | Usage | |---|---|---|---| | `/Volumes/Samsung_T5/entreprise/IDENTITE/Fidulia/logos/isotype-magenta-fd-W.png` | Isotype | Blanc / transparent | Favicon, avatar, petit format | | `/Volumes/Samsung_T5/entreprise/IDENTITE/Fidulia/logos/logo-Magenta.png` | Logo étendu | Blanc / transparent | Documents, slides, bannière | > Fichiers sources Illustrator : `/Volumes/Samsung_T5/entreprise/IDENTITE/Fidulia/Banner/` > Versions fond sombre (navy) à exporter depuis les sources .ai si nécessaire. **Règle d'usage.** Le monogramme ne se pose jamais sur un fond coloré autre que navy ou blanc. Il ne doit pas être redimensionné en dessous de 24 px de hauteur. Aucune rotation, aucun effet (ombre, glow, gradient). **Iconographie.** Pictogrammes blancs linéaires sur **cercle / tuile** sombre (40–48 px), trait 1.5 px, bouts arrondis, sans remplissage. Bibliothèque : **Lucide** () via CDN. Icônes fréquentes : `shield-check`, `ban`, `user-x`, `file-text`, `book-open`, `users`, `message-square-quote`, `alert-circle`, `send`. **Mascottes — L'Escadrille (v2 · acté 2026-06-09).** Figurines 3D premium style Playmobil/action figure. Registre Top Gun — élite, précis, performant. - **Fabien — Le Général** : blouson aviateur navy, insigne de grade magenta, posture commandement (bras croisés ou main sur l'épaule d'un pilote). Usage : photo de profil LinkedIn, bannière, posts coulisses. - **15 agents — Les Pilotes** : même base visuelle. Tête pixelisée/cubique terracotta-brique (clin d'œil logo Claude — intentionnel). Lunettes aviateur. Chaque agent porte l'attribut de sa spécialité (Rédacteur : stylo lumineux · Graphiste : tablette · Prospection : radar · Stratège : carte holographique · etc.). - **Fond** : cockpit navy nuit / tarmac / Paris vue aérienne — ancrage France, haut de gamme. - **Brief complet** : `Clients/Fidulia/Design/BRIEF-MASCOTTES-ESCADRILLE.md` - **Prompts Nano Banana** : voir brief ci-dessus. --- ## 8. FORMATS & GABARITS PRODUITS | Format | Dimensions | Ratio | |---|---|---| | Bannière LinkedIn | 1584 × 396 | 4:1 (safe-zone photo profil 0–460 px à gauche) | | Carrousel LinkedIn | 1080 × 1350 | 4:5 | | Post image / citation | 1080 × 1350 | 4:5 | | Infographie | 1080 × 1350 | 4:5 | | Thumbnail YouTube | 1280 × 720 | 16:9 | | Slide deck | 1920 × 1080 | 16:9 | **Anatomie carrousel** : kicker magenta → titre Black → corps Light → règle encadrée (fond `rgba(215,4,89,.08)`, border magenta) → signature avec logo. Numéro de slide discret en haut à droite. Safe-zone 80 px. ### Règle de grille — Infographies à blocs (1 à 9 éléments) Pour toute infographie HTML générée au format 1080 × 1350 px, le nombre de colonnes suit cette table : | Nb éléments | Grille | Notes | |---|---|---| | 1 | 1 col × 1 ligne | Centré, grand format | | 2 | 1 col × 2 lignes | Portrait, empiler | | 3 | 1 col × 3 lignes | Portrait, empiler | | 4 | 2 col × 2 lignes | Carré parfait | | 5 | 1 col × 5 lignes | Cohérence avec les impairs 1/3 | | 6 | 2 col × 3 lignes | Équilibré | | 7 | 2 col — gauche 4, droite 3 | Asymétrie d'1 ligne tolérée | | 8 | 2 col × 4 lignes | Équilibré | | 9 | 3 col × 3 lignes | Carré parfait, seul cas à 3 colonnes | **Principes :** - Maximum 3 colonnes en format portrait — uniquement pour 9 éléments - Les impairs 1, 3, 5 restent en colonne unique - Pour 7, asymétrie tolérée (4+3) plutôt que colonne unique trop chargée - Ne jamais dépasser 4 lignes par colonne (lisibilité) --- ## 9. RÉSUMÉ DES TOKENS (copier-coller) ```css /* Couleurs */ --lc-bg:#0C132A; --lc-magenta:#D70459; --lc-magenta-700:#A60344; --lc-magenta-300:#F25C95; --lc-white:#FFFFFF; --lc-true-black:#000000; /* Typo — trinité Fidulia (Playfair / Raleway / League Spartan) */ --font-title:'Playfair Display',Georgia,serif; --font-body:'Raleway',system-ui,sans-serif; --font-numeric:'League Spartan','Bebas Neue',Impact,sans-serif; /* Poids : Playfair 400–900 · Raleway 100–900 · League Spartan 100–900 (Variable Fonts) */ /* Espacement (px) */ 4 8 12 16 24 32 48 64 96 128 /* Rayons (px) */ 2 4 8 12 20 999 /* Motion */ ease-out cubic-bezier(.2,.7,.2,1); 150/220/420ms ``` --- *Fin de l'export. Pour les recreations interactives (UI kit site, slides, composants React), voir les dossiers `ui_kits/`, `slides/`, `social/` et `preview/` du projet source.*