# Design System — Fidulia (agence)

> Direction validée : palette navy/magenta + Sana Sans + métaphore alpinisme — identité Fidulia
> Généré le 2026-06-02 · Mis à jour le 2026-06-03 (rebrand Linked Connexion → Fidulia)
> Source : `Contexte/CONTEXTE-LINKED-CONNEXION.md` + `CLAUDE.md`
> Statut : à importer comme SKILL.md du projet Claude.ai "Fidulia Design System"

---

## 1. Intention visuelle

- **Métaphore directrice** : alpinisme / effort durable (Sherpa, cordée, 1ers de cordée, randonnée — jamais "viral", "fusée", "révolutionnaire")
- **Public cible** : professions de confiance — solo ou TPE (CGP, experts-comptables, notaires, avocats, architectes, mandataires haut de gamme) — décisionnaires exigeants, sensibles à la conformité réglementaire · **M1 : CGP indépendants ORIAS**
- **Émotion cible** : confiance posée, expertise crédible, sérieux sans froideur
- **Ce qu'on évite absolument** : clichés business (poignées de main, costumes en salle de réunion), surcharge décorative, palettes pastel, illustrations vectorielles "tech startup", photos stock génériques

---

## 2. Design tokens

### Palette

| Rôle | Nom | Hex | Usage |
|---|---|---|---|
| Primary (background dominant) | Navy | `#0C132A` | Fond principal — slides, posts, bannières |
| Accent (signal) | Magenta | `#D70459` | Mots-clés, chiffres-rois, kickers, numéros de section (~5% par composition) |
| Neutral light | White | `#FFFFFF` | Texte sur fond navy + slides "light" pour rythmer |
| Neutral dark | Black 900 | `#0A0A0A` | Fond des cartes/composants sur slides light |
| Border subtle | Neutral 800 | `#1F2937` | Bordures discrètes de cartes (radius 12px) |
| Text muted (sur navy) | Neutral 300 | `#D1D5DB` | Sous-titres, légendes, captions |

### Typographies

- **Titre (display + headlines)** : **Sana Sans Black 900** — UPPERCASE, tracking serré (-0.02em)
- **Corps** : **Sana Sans Regular** — body standard
- **Mono (numérotation, captions techniques)** : `JetBrains Mono` ou `IBM Plex Mono` (système de secours)

**Note licence** : Sana Sans = police propriétaire Fidulia (téléchargée, hors Google Fonts). Charger via `@font-face` depuis `/Design/Assets/fonts/sana-sans/`.

### Échelle typographique (référence 1920×1080)

| Token CSS | Taille | Usage |
|---|---|---|
| `--type-display` | 150px | Big numbers, hero numerals |
| `--type-title` | 80px | Titres de slides |
| `--type-subtitle` | 38px | Sous-titres / chapeaux |
| `--type-body` | 30px | Corps de texte |
| `--type-small` | 24px | Légendes, captions |
| `--type-kicker` | 20px | Mentions hautes (catégories, étiquettes) |

### Échelle pour formats LinkedIn (référence 1080×1080)

| Token | Taille |
|---|---|
| `--type-display` | 84px |
| `--type-title` | 48px |
| `--type-subtitle` | 26px |
| `--type-body` | 20px |
| `--type-small` | 16px |

### Espacements

Échelle 4px : `4 / 8 / 16 / 24 / 32 / 48 / 64 / 88 / 100`

| Token CSS | Valeur 1920×1080 | Valeur 1080×1080 |
|---|---|---|
| `--pad-x` | 100px | 64px |
| `--pad-y` | 88px | 56px |
| `--gap-title` | 40px | 24px |
| `--gap-item` | 26px | 16px |

### Bordures & rayons

- Rayon par défaut : **12px**
- Bordure cartes : `1px solid #1F2937` (subtile sur fond navy)

### Élévations

- Ombre légère : `0 2px 8px rgba(0,0,0,0.15)`
- Ombre marquée : `0 8px 32px rgba(0,0,0,0.35)`

### Iconographie

- **Style** : filaire, stroke 2px, simple
- **Librairie de référence** : Lucide ou Phosphor (variant Regular)
- **Couleur d'icône** : magenta `#D70459` pour les icônes signal, blanc pour les icônes neutres

### Logo & habillage

- **Logo Fidulia** : version blanche sur fond navy / version magenta sur fond blanc
- **Position standard** : haut-gauche
- **Numérotation de slide** : bas-droite, police mono, neutral muted

---

## 3. Catalogue de templates

### Bannière de profil LinkedIn — 1584 × 396 px
- **Intention** : signaler immédiatement le positionnement "agence LinkedIn personnelle — professions de confiance — conforme à votre réglementation"
- **Composition** : fond navy uni / typo display blanche à gauche / accent magenta sur 1 mot-clé / pictogramme alpinisme discret à droite
- **Tokens** : `--type-display` adapté (compression verticale), magenta sur 1 mot maximum

### Cover newsletter LinkedIn native — 1200 × 627 px
- **Intention** : titre clair de l'édition + signature graphique Fidulia
- **Composition** : fond navy / titre 60% gauche / numéro d'édition magenta en mono / signature Fidulia discrète
- **Variantes** : alternance hebdomadaire d'1 mot-clé surligné magenta

### Carrousel pédagogique LinkedIn — 1080 × 1350 px (ratio 4:5)
- **Slide 1 (cover)** : titre display Black 900 UPPERCASE + sous-titre + numéro magenta (01)
- **Slides intérieures** (3–6 slides) : 1 idée par slide, format texte court + chiffre/mot-clé en magenta
- **Slide de clôture** : récap + CTA "On en parle ?" + signature

### Carrousel cas client — 1080 × 1350 px
- **Slide 1** : "Avant" — situation initiale, fond navy
- **Slides 2–4** : actions menées + chiffres clés (magenta sur chiffres)
- **Slide finale** : résultat chiffré (display number magenta) + verbatim client

### Citation visuelle — 1080 × 1350 px (4:5)
- **Composition** : fond navy / citation centrée 60% / nom attribué en mono / signature Fidulia discrète
- **Règle** : maximum 25 mots dans la citation

### Infographie "Formats LinkedIn" — 1080 × 1350 px
- **Composition** : titre du format en haut + schéma technique + specs en colonne droite + 1 conseil d'application en bas
- **Style** : illustration géométrique simple, palette monochrome navy/blanc + accent magenta

### Big Number / chiffre choc — 1080 × 1350 px (4:5)
- **Composition** : `--type-display` géant magenta centré + contextualisation en `--type-subtitle` blanc
- **Usage** : posts "preuve sociale" ou "coût d'opportunité"

---

## 4. Règles d'usage (do / don't)

### ✅ Do
- Magenta réservé aux mots-clés, chiffres-rois et accents (~5% de la composition max)
- UPPERCASE pour les titres display avec tracking serré
- Logo blanc sur fond navy / logo magenta sur fond blanc — **jamais** logo blanc sur fond blanc
- Numérotation de section toujours en magenta + chiffre cardinal (01, 02, 03…)
- Métaphores : sommet, cordée, sentier, étape, trace, sherpa, point de bivouac

### ❌ Don't
- Pas de photos stock business génériques (poignée de main, conférence, sourires forcés)
- Pas de palette élargie hors navy/magenta/blanc/black — toute autre couleur fragilise la marque
- Pas de polices décoratives ou serif "élégantes" en parallèle de Sana Sans
- Pas d'icônes pleines, pas de gradient, pas d'ombre portée forte
- Pas de superlatifs visuels ("viral", flammes, fusées, explosions)

---

## 5. Charte photo

- **Style** : éditorial, lumière naturelle, contraste moyen
- **Filtre / colorimétrie** : légère désaturation des couleurs périphériques, conservation du magenta s'il apparaît naturellement, ombres légèrement bleutées (cohérence avec navy)
- **Cadrage privilégié** : règle des tiers, sujet décentré, profondeur de champ marquée
- **Sujets acceptés** : Fabien en situation (bureau, terrain, conférence), paysages d'altitude/montagne (métaphore alpinisme), captures d'écran LinkedIn annotées
- **Sujets refusés** : photos de famille, vacances, animaux de compagnie, clichés business

---

## 6. Notes pour Nano Banana

Les visuels image-réalistes générés (bannières, fonds d'ambiance, illustrations éditoriales) doivent respecter :
- Palette dominante navy `#0C132A` + accents magenta `#D70459`
- Pas d'humains identifiables (sauf accord explicite)
- Ambiance alpine / éditoriale / haut de gamme
- Aucun texte généré (texte ajouté en post-production HTML/CSS)
- Voir `NANO-BANANA-PROMPTS.md` pour la bibliothèque de prompts prêts à l'emploi