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.
Une ligne de description.
3 slides par écran · 2 sur tablette · 1 sur mobile. Les flèches avancent d'une page entière. Défilement natif au doigt, sans 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
01
Une ligne de précision sur ce qui se passe à cette étape.
02
Une ligne de précision sur ce qui se passe à cette étape.
03
Une ligne de précision sur ce qui se passe à cette étape.
04
Une ligne de précision sur ce qui se passe à cette étape.
Avantages
01
Mot-clé de l'avantage
Trois à quatre lignes qui expliquent l'avantage concrètement. On nomme un fait vérifiable, pas une qualité qu'on s'attribue.
0
Libellé de
l'indicateur
0
Libellé de
l'indicateur
02
Mot-clé de l'avantage
Le bloc s'inverse à chaque avantage : texte à gauche, puis visuel à gauche. Les deux colonnes entrent en sens opposé au scroll.
03
Mot-clé de l'avantage
Trois avantages maximum. Au-delà, ce ne sont plus des avantages, c'est une liste de courses.
Surtitre de section
Paragraphe placeholder de deux phrases environ. Il décrit le contenu de la première étape sans copy réelle.
Paragraphe placeholder de deux phrases environ. Il décrit le contenu de la deuxième étape sans copy réelle.
Paragraphe placeholder de deux phrases environ. Il décrit le contenu de la troisième étape sans copy réelle.
Surtitre de section
Lede placeholder d'une phrase et demie, qui prolonge le titre sans copy marketing réelle.
Paragraphe placeholder de trois phrases environ. Il sert de texte courant sous le lede. Il complète la démonstration du rythme vertical.
Surtitre de section
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
Thème clair · ev-light
Deux lignes de description neutre, pour vérifier le contraste du corps.
Deux lignes de description neutre, pour vérifier le contraste du corps.
Catégorie
Une ligne de description.
Réponse neutre : la question ouverte passe en couleur de lien du thème, le filet et le texte suivent les variables.
Réponse neutre de contrôle.
Thème gris · ev-soft
Deux lignes de description neutre, pour vérifier le contraste du corps.
Deux lignes de description neutre, pour vérifier le contraste du corps.
Catégorie
Une ligne de description.
Réponse neutre : le creux des onglets et des avatars s'assombrit pour rester visible sur le gris.
Réponse neutre de contrôle.
Thème sombre · ev-dark
Deux lignes de description neutre, pour vérifier le contraste du corps.
Deux lignes de description neutre, pour vérifier le contraste du corps.
Catégorie
Une ligne de description.
Réponse neutre : la question ouverte passe en bleu clair 4DA3FF, seul bleu lisible ici — le #0074F1 y tomberait sous 2,5:1.
Réponse neutre de contrôle.
Surtitre placeholder
Une ligne de relance placeholder, neutre et courte.
Intitulé du boutonBibliothèque
Chaque visuel est autonome : copier la figure.ev-viz et la poser n'importe où.
data-viz="map"data-viz="flow"data-viz="sort"data-viz="plug"data-viz="time"data-viz="prio"data-viz="team"data-viz="data"data-viz="duo"data-viz="opco"Bibliothèque · salve 2
Chaque scène est posée sur les deux fonds. Un élément en pousse un autre ; rien n'arrive exactement en même temps.
data-viz="chain"data-viz="scan"data-viz="read"data-viz="queue"data-viz="tree"data-viz="budget"data-viz="adopt"data-viz="net"Bibliothèque · salve 3
Dix secondes et plusieurs actes par visuel : le monde se pose, quelque chose le dérange, la réponse s'installe, le résultat tient. Entre les actes, rien n'est figé.
data-viz="story"data-viz="guard"data-viz="gap"Bibliothèque · salve 3 — suite
Deux scènes sur le temps et le contrôle : la nuit où le travail continue, et la main qui reste à l'humain.
data-viz="night"data-viz="pilot"Trente minutes suffisent pour savoir si l’IA a du sens chez vous. Nous vous le dirons franchement — ou pas.
Surtitre
Alimenté par les articles du site. Le modèle de boucle se modifie dans Elementor : tout change partout d’un coup.