# Design System Système Marketing

Version 1.7 · 24.09.2026
Sources : https://systememarketing.fr/ fait foi pour la structure, les polices, le logo et le ton. La palette https://coolors.co/000000-ffffff-f47b21-428bd8-ffe95a fait foi pour les couleurs : Francisco trouve le site « trop tristounet » en noir et blanc et veut plus de couleur à l'avenir, le jaune en tête.
Page humaine : https://design-system-systememarketing.pages.dev/
Logos (PNG transparents, 712 × 83px, originaux dans le Drive `SystèmeMarketing.fr/1. Data/Logos`) : https://design-system-systememarketing.pages.dev/logo-noir.png et https://design-system-systememarketing.pages.dev/logo-blanc.png
Icône SM (451 × 451px) : https://design-system-systememarketing.pages.dev/icone-noir.png et https://design-system-systememarketing.pages.dev/icone-blanc.png
Favicon : https://design-system-systememarketing.pages.dev/favicon-sm.png (SM 2024 noir sur carré blanc, choisi par Francisco le 24.09.2026 ; le site utilise encore un SM sur dégradé bleu-orange)
Polices : https://design-system-systememarketing.pages.dev/fonts/Slate-Bold.ttf, https://design-system-systememarketing.pages.dev/fonts/Slate-Regular.ttf et, pour les citations manuscrites, https://design-system-systememarketing.pages.dev/fonts/Koorkin-Bold-Italic.ttf
Éléments graphiques : trait dessiné https://design-system-systememarketing.pages.dev/trait-noir.png (aussi trait-blanc.png, trait-jaune.png ; 582 × 66px, repris du site) ; photo du bloc d'appel https://design-system-systememarketing.pages.dev/cta-francisco.jpg
Page exemple validée : https://methode-arc-test.pages.dev/

## En une phrase

Le copywriting humain de Francisco : une base éditoriale en noir et blanc (photos N&B, titres Slate gras, angles droits), réveillée par un jaune surligneur, un orange pour agir et un bleu pour informer.

## Couleurs (valeurs exactes)

| Nom | Valeur | Usage |
|---|---|---|
| black | #000000 | Encre principale, sections sombres, pied de page |
| white | #ffffff | Fond de page, texte sur noir |
| ink-soft | #323232 | Texte courant long (paragraphes du site) |
| grey | #6b6b6b | Légendes, texte secondaire sur blanc (5,3:1). Ajout |
| grey-line | #e6e6e6 | Filets, bordures de tableau, champs. Ajout |
| yellow | #ffe95a | LA signature, en ÉLÉMENTS seulement : surligneur sous les mots forts, pastilles, chiffres et mots forts sur noir, barres de graphique. Jamais en fond de section (refusé le 24.09.2026). Texte noir dessus (17:1) |
| orange | #f47b21 | Chiffres clés sur noir, flèches, accents (lettre A de ARC). JAMAIS sur un bouton, ni en fond ni en contour (refusé par Francisco le 24.09.2026). Texte noir si fond orange (7,7:1), jamais blanc (2,7:1) |
| orange-text | #b85a12 | Orange lisible en texte sur blanc (4,7:1). Ajout |
| blue | #428bd8 | Information, icônes, séries de graphiques, fonds de pastilles d'info. Texte noir dessus (5,9:1), jamais blanc (3,5:1). Le site utilise #388eea pour ses liens ; la palette fait foi |
| blue-text | #2f6fb5 | Liens et bleu en texte sur blanc (5,2:1). Ajout |
| danger | #c0392b | Ajout tableaux de bord : « en retard / en baisse », toujours avec un mot |

Dosage : noir et blanc restent la base (environ 70 %), le jaune est la couleur qui se voit le plus après eux, par petites touches (surlignages, chiffres, pastilles), l'orange souligne (chiffres, flèches, accents), le bleu reste discret. Pas de dégradé.

## Typographie

- Titres : "Slate Bold" (police du site, auto-hébergée : `fonts/Slate-Bold.ttf`), repli Helvetica, Arial, sans-serif.
- Texte et boutons : "Slate Regular" (`fonts/Slate-Regular.ttf`), même repli.
- Menus du site : Open Sans 600 14px (Google Fonts), à réserver à la navigation.

```css
@font-face{font-family:"Slate Bold";src:url(https://design-system-systememarketing.pages.dev/fonts/Slate-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Slate Regular";src:url(https://design-system-systememarketing.pages.dev/fonts/Slate-Regular.ttf) format("truetype");font-display:swap}
```

| Style | Police | Taille / interlignage | Interlettrage | Usage |
|---|---|---|---|---|
| display | Slate Bold | 80px / 88px (46/52 mobile) | -1.5px | Titre de hero, centré ou à gauche |
| h2 | Slate Bold | 48px / 54px | -1px | Titre de section |
| h3 | Slate Bold | 26px / 32px | -0.5px | Titre de carte, avec 1 mot en italique |
| lead | Slate Regular | 24px / 36px | 0 | Chapeau |
| body | Slate Regular | 18px / 27px | -0.1px | Texte courant, couleur ink-soft |
| eyebrow | Slate Regular | 14px / 20px | 3px, capitales | « ÉTAPE 1 », témoins (« ENZO HONORÉ, COACH ») |
| button | Slate Bold | 16px / 1.2 | 1px | Boutons |
| numeral | Slate Bold | 64px / 1 | -1.5px | Chiffre clé (« 167 k abonnés ») |
| caption | Slate Regular | 14px / 20px | 0 | Légendes, couleur grey |
| script | Koorkin Bold Italic | 34-40px / 1.45 | 0 | Citation de témoignage posée sur une photo (« Moi qui n'aime pas l'écriture… »), blanc, entre guillemets anglais “ ” |

Règles : les mots forts d'un titre passent en italique (« Bâtissez une *confiance* avec votre audience ») et/ou reçoivent le surligneur jaune. Pas de capitales sauf pour les eyebrows.

Surligneur (la signature) : `background:linear-gradient(transparent 55%, #ffe95a 55%, #ffe95a 92%, transparent 92%)` sur le mot, `padding:0 .08em`. Sur fond noir : le mot passe en jaune #ffe95a sans surligneur.

## Formes et espacements

| Nom | Valeur | Usage |
|---|---|---|
| radius | 0 | PARTOUT : boutons, cartes, champs, photos. Angles droits, comme le site |
| shadow-card | 0 12px 18px -6px rgba(0,0,0,.3) | Cartes blanches posées sur blanc (étapes, témoignages) |
| border | 1px solid #000 | Boutons secondaires, champs sur blanc |
| gap | 24px | Entre cartes |
| section | 96px vertical (56px mobile) | Espace entre sections pleine largeur |
| container | 1080px | Largeur du contenu, centrée |
| card-pad | 32px | Intérieur des cartes |

## Éléments graphiques du site (demandés par Francisco le 24.09.2026)

- **Sections noires en biais, 2 PAR PAGE AU MAXIMUM** (règle de Francisco : « par parcimonie »). **Le 1er bloc de la page (le hero) est TOUJOURS droit, jamais en biais**, en haut comme en bas. Les bords haut et bas d'une section noire ne sont pas droits. Ils penchent en parallèle, de 48px (28px mobile), descendant de gauche à droite, comme les séparateurs Divi du site (`M1280 140V0H0l1280 140z` en haut, `M0 0v140h1280L0 0z` en bas). Technique : pseudo-éléments de la couleur de la section voisine, `clip-path:polygon(0 0,100% 0,100% 100%)` en haut, `polygon(0 0,0 100%,100% 100%)` en bas, et padding vertical porté à 150px.
- **Trait dessiné** (trait-noir.png) : un trait de feutre à main levée, centré, 290px de large. **Il ne sépare QUE 2 blocs de même couleur** (blanc puis blanc : trait noir ; noir puis noir : trait-blanc.png). Il signifie « le fond ne change pas ». **Interdit entre un bloc blanc et un bloc noir** (règle de Francisco, 24.09.2026). Il peut aussi souligner une phrase forte à l'intérieur d'un bloc.
- **Bloc d'appel à l'action** (comme sur le site) : portrait N&B en carte (ombre `0 2px 18px rgba(0,0,0,.3)`) posé en décalé sur un grand bloc noir qui déborde en bas de 80px ; sur la photo, une citation client en Koorkin Bold Italic blanche + le nom en eyebrow ; à droite dans le noir, titre blanc, texte, bouton blanc. Grille 5/7, le bloc noir commence 96px plus bas que la photo.
- **Surligneur jaune** sur les mots forts (voir Typographie).
- **3 cartes à cheval** (composition phare du site, « Comment ça fonctionne. », à reprendre de temps en temps) : le haut de la section est NOIR avec eyebrow, titre blanc centré et chapeau ; 3 cartes blanches à ombre (0 12px 18px -6px rgba(0,0,0,.3)) remontent de 180px et chevauchent la frontière noir/blanc ; chaque carte : eyebrow « Étape 1 », titre Slate Bold 26px avec 1 mot en italique (« Bâtissez une *confiance* avec votre audience. »), texte ; puis un bouton noir centré sous les cartes sur le blanc. Technique : bloc noir avec padding-bottom 220px, cartes en `margin-top:-180px`. Exemple : section « La méthode » de https://methode-arc-test.pages.dev/

## Composants

- Navigation : fond blanc, logo noir 28px de haut à gauche, liens Open Sans 600 14px #1b1725 à droite.
- Boutons (validés par Francisco le 24.09.2026 sur https://methode-arc-test.pages.dev/boutons, codes A4, B4, C3, D5) : bouton NOIR (texte blanc) ou BLANC (texte noir), Slate Bold 16px, interlettrage 1px, padding 14-16px 32px, angles droits, TOUJOURS suivi d'une flèche « → » (pseudo-élément ::after, 18px, gap 12px) pour signaler le clic.
  - Contour 2px selon le fond : NOIR sur fond blanc, BLANC dès que le bouton est posé sur du noir (section noire, bloc noir du bloc d'appel, carte noire), sinon le bouton devient noir sur noir au survol et ne se lit plus. Jamais de contour orange ou jaune.
  - Survol = effet négatif : le noir passe au blanc (texte noir), le blanc passe au noir (texte blanc), transition 0,2 s ; la flèche glisse de 4px vers la droite.
  - Jamais de bouton de couleur (orange, jaune, bleu).
- Carte d'étape : blanche, shadow-card, padding 32px, eyebrow « ÉTAPE 1 », titre h3 avec 1 mot en italique, texte body.
- Carte témoignage : photo N&B en plein cadre, citation blanche en gras italique en bas, prénom en eyebrow.
- Interdit : formes décoratives (carrés, pastilles de couleur posées en déco dans un hero ou une couverture). Refusé par Francisco le 24.09.2026. La couleur passe par le surligneur, les bandeaux et les chiffres, pas par des formes.
- Section sombre : fond noir, photo N&B en fond, titres blancs, mot fort en jaune.
- Chiffre clé : numeral + légende (« 167 k abonnés ») ; sur noir, le chiffre en orange ou jaune.
- Carte d'indicateur (ajout tableaux de bord) : carte blanche, bordure 1px grey-line, eyebrow, numeral, pastille (jaune = en hausse/OK, bleu = info, danger = en retard), toujours avec un mot.
- Graphiques : série principale noire, 2e jaune, 3e bleue, 4e orange ; grille grey-line.
- Formulaire : champs gris clair #eeeeee sans bordure, angles droits, bouton pleine largeur.

## Composition

- 2 fonds de section SEULEMENT : blanc et noir (photo N&B possible). Tranché par Francisco le 24.09.2026 : ni crème, ni gris, ni jaune en fond de section. Le jaune reste pour les ÉLÉMENTS (surligneur, pastilles, chiffres, barres, mot fort en jaune sur noir, carré des coches). Alterner blanc et noir ; si 2 sections blanches se suivent, les séparer par le trait dessiné ou un filet 1px #e6e6e6.
- Contenu centré dans 1080px, titres de section centrés, grilles de 3 cartes.
- Photos en noir et blanc uniquement (portraits, machines à écrire, engrenages).
- Densité aérée : grands titres, texte court, beaucoup de blanc.

## Ton

Vouvoiement. Copywriting humain, chaleureux et concret : « La meilleure persuasion, c'est la relation », « J'écris des textes humains que les gens aiment lire. » Première personne (Francisco parle). Phrases courtes, preuves chiffrées (« 167 k abonnés »), témoignages nommés. Chiffres en chiffres. Pas d'émojis (les ✔ du site sont tolérés en liste).

## Logo

- Mot-symbole « SystèmeMarketing.fr » (un seul mot, avec le .fr, gras italique), choisi par Francisco le 24.09.2026 ; le site affiche encore une ancienne version « Système Marketing ». logo-noir.png sur fond clair ou jaune ; logo-blanc.png sur noir ou photo. Hauteur minimale 20px. Zone de protection : la hauteur du « S » tout autour.
- Icône « SM 2024 » : grosses lettres droites, noir (icone-noir.png) ou blanc (icone-blanc.png) ; favicon, avatars et petits formats.
- Interdits : changer la couleur (hors noir/blanc), incliner davantage, ajouter une ombre ou un effet, enfermer dans une forme, rogner, recomposer en texte.

## Publication

Toute page Système Marketing se publie sur Cloudflare Pages (jamais d'artifact visible), avec le favicon ci-dessus et `<meta name="robots" content="noindex">` pour les pages internes.