Titre de carte
Deux à trois lignes de description. Pas plus, sinon les cartes se déséquilibrent.
Design System
Toutes les valeurs viennent du kit Elementor EVICO existant. Rien n'est inventé :
l'interlettrage est simplement converti de px en em pour tenir sur mobile.
Couleurs
Bleu marque
#0074F1
Bleu foncé
#006BDF
Bleu clair
#4DA3FF
Navy
#00294B
Noir texte
#090910
Gris texte
#404447
Gris muet
#98A1AC
Filet
#E5E7EB
Lavis bleu
#EAF3FE
Gris fond
#F5F5F7
Blanc
#FFFFFF
Erreur
#F02929
La règle qui tient tout : le bleu ne sert qu'à indiquer où cliquer. Un titre bleu « pour faire joli » et l'œil ne trouve plus le bouton.
À nettoyer dans le kit : accent #61CE70, secondary #54595F et text #5F5F5F sont des valeurs d'usine Elementor jamais personnalisées — ce ne sont pas des couleurs EVICO.
Contrastes mesurés : #0074F1 sur blanc = 4,40:1, insuffisant pour du texte courant. Les liens dans le texte passent en #006BDF (5,04:1). #98A1AC = 2,62:1, décoratif uniquement.
Typographie · Inter 400 / 500 / 600
Display · 76 → 42px
-0.05em · lh 1.02
L'IA là où elle rapporte
H1 · 58 → 35px
-0.05em · lh 1.05
Un titre de page
H2 · 46 → 30px
-0.045em · lh 1.08
Un titre de section
H3 · 32 → 24px
-0.03em · lh 1.15
Un titre de bloc
H4 · 21px
-0.02em · lh 1.3
Un titre de carte
Chapô · 20px
lh 1.55 · 60 car.
Le paragraphe d'introduction, limité à 60 caractères par ligne.
Corps · 18px
lh 1.6 · 65 car.
Le texte courant. Interligne 1.6, largeur bloquée à 65 caractères — un paragraphe pleine largeur est illisible et fait amateur.
Surtitre · 12.5px
+0.07em · maj.
Surtitre de section
Élément personnalisé · l'italique d'accent — 4 variantes à trancher
Un seul mot par titre passe en italique : celui qui porte le sens. Le problème de l'italique
d'Inter, c'est qu'il n'apporte aucun contraste — c'est le même grotesque, penché. Un
italique serif crée un vrai contrepoint : deux dessins qui se répondent au lieu
d'un seul déformé. Les serifs sont montés à 1.06em car à taille égale ils paraissent
plus petits qu'Inter.
Inter italique
Aucune police en plus. Discret — peut-être trop : à taille de titre, on ne voit presque pas l'accent.
L'IA là où elle rapporte
Par où commencer ?
Instrument Serif italique · recommandé
Serif à fort contraste, très éditorial. Le mot accentué devient un événement. 14 Ko. C'est ce qui donne le côté « cher » aux sites premium actuels.
L'IA là où elle rapporte
Par où commencer ?
Newsreader italique
Serif plus doux, plus littéraire, moins tranchant que B. Bon si Instrument Serif fait trop « magazine ».
L'IA là où elle rapporte
Par où commencer ?
Inter italique + gris
Pas de police en plus, l'accent passe par la couleur. Sûr, mais c'est du contraste de valeur, pas de dessin.
L'IA là où elle rapporte
Par où commencer ?
Règle, quelle que soit la variante : un seul italique par titre. Deux, et l'accent ne veut plus rien dire.
Jamais dans le corps de texte. L'italique d'accent est réservé aux titres — dans un paragraphe, il redevient une simple emphase et perd sa fonction.
Boutons, liens, pilules
Rayons, ombres, rythme
12px
Boutons, petits blocs
18px
Cartes
24px
Panneaux, bandes CTA
999px
Pilules, boutons, barres
280px
Blobs de décor
Ombre 3 niveaux
1px + 10px + 48px
Rythme vertical sur une base 8 : 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Les sections respirent à 96–128px. C'est le poste qu'on est le plus tenté de réduire, et celui qui fait toute la différence.
Surtitre
Le chapô en gris bleuté sur le dégradé. Le fond n'est jamais noir plat : navy en haut, noir au centre, gris très sombre en bas.
Réducteur de risque, juste sous les boutons.
Argument de réassurance
Argument de réassurance
Argument de réassurance
Surtitre
Un chapô de deux lignes qui précise la promesse et à qui elle s'adresse. Vingt à trente mots suffisent.
Réducteur de risque, juste sous les boutons.
Surtitre
Le chapô centré, limité à soixante caractères par ligne pour rester lisible.
Surtitre
Le pattern le plus courant du web. Un paragraphe d'explication, puis une liste de points qui détaillent.
Surtitre
Même bloc, inversé, sur fond gris. On alterne pour rythmer sans jamais tracer de trait de séparation.
+40 %
Un indicateur
12 j
Un deuxième
Surtitre
Le chapô de la section, deux lignes maximum.
Deux à trois lignes de description. Pas plus, sinon les cartes se déséquilibrent.
Deux à trois lignes de description. Pas plus, sinon les cartes se déséquilibrent.
Deux à trois lignes de description. Pas plus, sinon les cartes se déséquilibrent.
Surtitre
Catégorie
Une ligne de description.
Catégorie
Une ligne de description.
Catégorie
Une ligne de description.
Surtitre
Le contenu change sans recharger la page. L'onglet actif prend un fond blanc et une ombre douce.
Chaque panneau garde la même structure, pour que l'œil ne saute pas au changement.
Trois à cinq onglets maximum. Au-delà, c'est un menu, pas des onglets.
Surtitre
La réponse s'affiche en 16,5px sur gris #404447, limitée à 68 caractères par ligne. Le premier item est ouvert : ça montre que c'est cliquable.
Construit avec <details> natif : ça fonctionne sans JavaScript, c'est accessible au clavier, et les moteurs lisent le contenu même fermé.
Le + pivote en – à l'ouverture. Une transition de 250 ms, pas plus.
Six à huit questions maximum. Au-delà, personne ne lit.
Surtitre
Une ligne de description.
Une ligne de description.
Une ligne de description.
Une ligne de description.
Une ligne de description.
Défilement natif au doigt et au trackpad, avec accroche. Pas de bibliothèque.
Bandeau défilant · marquee
La série est dupliquée pour boucler sans couture. Pause au survol.
0
Libellé de l'indicateur
0
Libellé de l'indicateur
0
Libellé de l'indicateur
Les chiffres s'incrémentent à l'arrivée à l'écran.
Surtitre
Une à deux lignes de description de l'étape.
Une à deux lignes de description de l'étape.
Une à deux lignes de description de l'étape.
Une à deux lignes de description de l'étape.
Surtitre
« Une citation courte, deux à trois lignes. Le guillemet français, la ponctuation propre, et surtout : pas de superlatif. »
Prénom Nom
Fonction · Entreprise
« Une citation courte, deux à trois lignes. Le guillemet français, la ponctuation propre, et surtout : pas de superlatif. »
Prénom Nom
Fonction · Entreprise
Apparition au scroll
Fondu plus vingt pixels de translation, décalé de 60 ms par mot. Jamais de rebond. Désactivé si le visiteur a demandé moins d'animations.
Deux lignes de relance, puis un seul bouton. Jamais deux boutons concurrents dans une bande CTA.
Surtitre
| Critère | Option A | Option B | Option C |
|---|---|---|---|
| Première ligne | Valeur | ✓ | Valeur |
| Deuxième ligne | — | ✓ | Valeur |
| Troisième ligne | Valeur | ✓ | — |
| Quatrième ligne | Valeur | Valeur | Valeur |
Surtitre
Surtitre
Six champs maximum. Chaque champ en plus fait perdre des envois.