La meilleure persuasion, c'est la relation.
Introduction
Des textes humains, un design qui respire
La base vient du site systememarketing.fr : le noir et le blanc, les photos en noir et blanc, les grands titres en Slate gras, les angles droits, les cartes à ombre douce, les sections en biais et le trait dessiné à la main.
La couleur arrive par petites touches : le jaune surligne et signe, l'orange souligne, le bleu informe. Les fonds restent blancs ou noirs. Tout est aussi disponible en texte brut, avec les valeurs exactes : charte.md. Exemple de page : la méthode ARC.
01
Logo
Le mot-symbole « SystèmeMarketing.fr », en un seul mot et en gras italique. Noir sur fond blanc, blanc sur fond noir ou sur une photo.
Zone de protection
Laisser autour du logo au moins la hauteur du « S ». Hauteur minimale du mot-symbole : 20px.Mauvais usages
02
Couleur
Le blanc et le noir font les fonds. Le jaune signe par petites touches, l'orange souligne, le bleu informe. Cliquez sur une couleur pour copier son code.
Couleurs d'appui
Ajouts pour le texte long et les tableaux de bord. L'orange et le bleu de la palette ne sont pas assez foncés pour du texte sur blanc : on utilise alors leur version foncée.
Règles. Les fonds de section sont blancs ou noirs, jamais jaunes, gris ou crème. Le jaune reste un élément : surligneur, mot fort sur noir, pastille, chiffre, barre de graphique. Sur l'orange, le jaune et le bleu, le texte est toujours noir.
03
Formes
Des angles droits partout, comme sur le site. Les cartes blanches se détachent par une ombre douce, jamais par un arrondi.
Espacements
| 24px | Entre les cartes |
| 32px | Intérieur des cartes |
| 96px | Entre 2 sections pleine largeur (56px sur mobile), 150px pour une section en biais |
| 1080px | Largeur du contenu, centrée |
04
Typographie
Slate, la police du site, en 2 graisses, et Koorkin pour les citations manuscrites. Les mots forts passent en italique ou sous le surligneur.
Slate BoldTitres, boutons et chiffres clés.
Slate RegularTexte courant, chapeaux et légendes.
Koorkin Bold ItalicCitations de témoignage sur une photo.
| DisplaySlate Bold 80/88 | J'écris des textes humains |
| Titre de sectionSlate Bold 48/54 | Comment ça fonctionne. |
| Titre de carteSlate Bold 26/32 | Bâtissez une confiance avec votre audience. |
| Chiffre cléSlate Bold 64 | 167 k |
| CitationKoorkin Bold Italic 34/50 | “Moi qui n'aime pas l'écriture, lui c'est vraiment son super talent.” |
| ChapeauSlate Regular 24/36 | Recevez votre conseil quotidien pour rédiger des textes humains. |
| TexteSlate Regular 18/27 | Votre prospérité dépend de la relation que vous entretenez avec votre audience. |
| EyebrowSlate Regular 14 · capitales | Étape 1 · Lionel Mutombo, infopreneur |
05
Application
Les pièces qui reviennent sur chaque page. Ce chapitre est lui-même construit en « 3 cartes à cheval », la composition phare du site : le titre sur le noir, les cartes à cheval entre le noir et le blanc, puis un bouton centré.
Étape 1
Bâtissez une confiance avec votre audience.
Votre prospérité dépend de la relation que vous entretenez avec votre audience.
Étape 2
Forgez-vous une réputation de haute renommée.
Une fois que la confiance règne, vos ventes s'accélèrent.
Étape 3
Contribuez avec un business prospère.
Choisissez comment vous souhaitez contribuer au bien-être de votre audience.
Boutons
Noir ou blanc, toujours avec une flèche. Contour 2px noir sur fond blanc, blanc dès que le bouton est posé sur du noir. Au survol, le bouton s'inverse et la flèche glisse. Jamais de bouton de couleur.
“Moi qui n'aime pas l'écriture, lui c'est vraiment son super talent.”
Bloc d'appel à l'action
Réserver votre appel.
Le portrait en noir et blanc est posé en décalé sur un grand bloc noir. La citation client est en Koorkin, le bouton est blanc avec un contour blanc.
Réserver votre appel06
Éléments graphiques
Repris du site, et à doser avec parcimonie.
Les sections en biais
Les bords haut et bas d'une section noire penchent en parallèle, comme sur la page « Copywriting humain ». 2 par page au maximum, et jamais sur le 1er bloc, qui reste toujours droit. Cette section-ci penche en haut.
Le surligneur jaune
Vous avez un problème de revenu par lead.
Sous 1 ou 2 mots forts par bloc, jamais sous une phrase entière.
Le mot fort sur noir
Un revenu par lead qui monte.
Sur fond noir, le mot fort passe en jaune, sans surligneur.
07
Composition
2 fonds seulement, le blanc et le noir, qui alternent en sections pleine largeur. Le contenu est centré dans 1080px. Exemple complet : la page de la méthode ARC.
À faire
- Des photos en noir et blanc uniquement
- Le 1er bloc toujours droit
- Des mots forts surlignés ou en italique
- Les 3 cartes à cheval de temps en temps
- Le vouvoiement, des phrases courtes, des preuves chiffrées
À éviter
- Des fonds jaunes, gris ou crème
- Plus de 2 sections en biais
- Le trait entre un bloc blanc et un bloc noir
- Des boutons de couleur, des formes décoratives, des coins arrondis