SOURCE SANS 3 · COULEURS & TYPOGRAPHIE
H1 — Une vision plus claire
H2 — Votre parcours de soins
H3 — Une approche personnalisée
H4 — Préparer votre consultation
H5 — Les informations pratiques
H6 — Pour aller plus loin
Un texte clair, une lecture confortable et une hiérarchie cohérente sur chaque écran. Voici le style de paragraphe par défaut, avec une graisse régulière et un interligne aéré.
Découvrir les informations pratiques
Des boutons pour chaque action
Des extrémités 100 % arrondies, une palette cohérente et un focus clavier visible. Dans Elementor, appliquez btn puis une seule classe de variante. Ajoutez éventuellement btn-sm, btn-lg ou btn-full.
Bleu principal
Action principale
btn + btn-primary
Bleu profond
Action importante ou alternative
btn + btn-secondary
Dégradé bleu
Appel à l’action mis en avant
btn + btn-gradient
Dégradé profond
Appel à l’action plus sobre
btn + btn-gradient-deep
Fond blanc
Sur un fond bleu ou une photo sombre
btn + btn-white
Contour bleu
Action secondaire sur fond clair
btn + btn-outline
Fond bleu léger
Action discrète sur fond clair
btn + btn-soft
Transparent
Action tertiaire sur fond clair
btn + btn-ghost
Contour blanc
Action secondaire sur fond sombre
btn + btn-outline-white
Trois tailles, la même forme pilule
Un lien peut aussi prendre la forme d’un bouton
Les classes fonctionnent également sur un bouton rendu comme lien. Choisissez ensuite sa destination dans Elementor.
Exemple de lienUne bibliothèque à composer
Les classes globales sont disponibles sur tous les éléments atomiques Elementor du site. Choisissez une classe par propriété : une taille, une graisse et une couleur. Les variables globales permettent de changer les valeurs à un seul endroit.
Exemple : un titre extra-gras et bleu
text-xl + font-extrabold + text-deep-blue
Sélectionnez votre élément dans Elementor, ouvrez ses classes et ajoutez les noms affichés dans ce guide. Pour un texte blanc sur fond sombre, appliquez text-white à chaque texte concerné.
La balise H1 à H6 définit le rôle du titre. Une classe text-h1, text-h2… change sa taille sans changer ce rôle. Évitez deux classes de taille ou deux graisses sur le même élément.
Du léger à l’extrabold
Une seule famille : Source Sans 3. Les graisses changent la présence du texte, sans changer sa taille.
Une vision plus claire
Léger · 300 · font-light
Une vision plus claire
Normal · 400 · font-regular
Une vision plus claire
Moyen · 500 · font-medium
Une vision plus claire
Semi-gras · 600 · font-semibold
Une vision plus claire
Gras · 700 · font-bold
Une vision plus claire
Extra-gras · 800 · font-extrabold
Une vision plus claire
Très gras · 900 · font-black
Un complément d’information en italique.
font-italic · font-primary pour réappliquer la famille
Une échelle de tailles réutilisable
Les valeurs sont indiquées pour une base de 16 px. Les grandes tailles diminuent sur mobile. Chaque exemple utilise sa classe réelle.
text-xs · ordinateur 14 px · mobile 14 px
Une vision plus claire
text-sm · ordinateur 16 px · mobile 16 px
Une vision plus claire
text-base · ordinateur 18 px · mobile 16 px
Une vision plus claire
text-lg · ordinateur 20 px · mobile 18 px
Une vision plus claire
text-xl · ordinateur 24 px · mobile 20 px
Une vision plus claire
text-2xl · ordinateur 30 px · mobile 24 px
Une vision plus claire
text-3xl · ordinateur 36 px · mobile 30 px
Une vision plus claire
text-display · ordinateur 64 px · mobile 32 px
Voir plus clair
Les tailles de titres sont aussi des classes
text-h1 · text-h2 · text-h3 · text-h4 · text-h5 · text-h6
Elles reprennent exactement les tailles des titres par défaut, avec leurs variations tablette et mobile.
Des couleurs pour les textes
Bleus de marque, encre, blanc et couleurs de retour d’état. Le gris bleuté convient aux légendes et informations secondaires.
Bleu profond
#003459 · text-deep-blue
Bleu
#007EA7 · text-blue
Encre
#00171F · text-ink
Gris bleuté
#526775 · text-muted
Blanc
#FFFFFF · text-white
Succès
#16634A · text-success
Attention
#815100 · text-warning
Erreur
#A52635 · text-error
Fonds clairs, sombres et dégradés
Appliquez la classe bg- au conteneur, puis une couleur de texte sur les éléments qu’il contient. Les couleurs d’état servent aux confirmations, informations et erreurs.
Blanc
bg-white + text-deep-blue
Surface
bg-surface + text-deep-blue
Bleu pâle
bg-blue-light + text-deep-blue
Bleu doux
bg-blue-soft + text-deep-blue
Bleu
bg-blue + text-white
Bleu profond
bg-deep-blue + text-white
Encre
bg-ink + text-white
Succès
bg-success + text-success
Attention
bg-warning + text-warning
Erreur
bg-error + text-error
Dégradé bleu
bg-gradient + text-white
Dégradé profond
bg-gradient-deep + text-white
Rythme et traitements typographiques
Quelques styles utiles pour les introductions, surtitres, textes longs et alignements.
Votre parcours de soins
eyebrow · petit surtitre en capitales
Une introduction plus présente pour ouvrir une section avec clarté.
text-lead · 24 px / 20 px sur mobile
Pour les textes longs, une largeur de lecture mesurée et un interligne généreux rendent la lecture plus confortable. Cette classe limite la longueur des lignes et conserve de l’espace entre elles.
text-measure + leading-relaxed
leading-tight : 1,15 · leading-normal : 1,4 · leading-relaxed : 1,7
text-left · text-center · text-right · text-uppercase · text-balance
Aligné à gauche
Texte centré
Aligné à droite
Une grille d’espacements simple
Utilisez gap- sur un conteneur flex pour espacer ses enfants, et pad- pour son espace intérieur. Les variables space- sont disponibles dans tout le kit.
gap-xs · 8 px · var(--space-xs)
A
B
gap-sm · 12 px · var(--space-sm)
A
B
gap-md · 16 px · var(--space-md)
A
B
gap-lg · 24 px · var(--space-lg)
A
B
gap-xl · 32 px · var(--space-xl)
A
B
gap-2xl · 48 px · var(--space-2xl)
A
B
gap-3xl · 64 px · var(--space-3xl)
A
B
Espaces intérieurs : pad-sm (12 px), pad-md (16 px), pad-lg (24 px), pad-xl (32 px), pad-2xl (48 px).
Arrondis, bordures et ombres
Des finitions à appliquer aux encadrés, cartes et blocs de contenu.
8 px
rounded-sm
16 px
rounded-md
24 px
rounded-lg
Pilule
rounded-pill
Ombre douce
shadow-soft
Ombre plus marquée
shadow-raised
Bordures : border-soft pour un contour discret, border-blue pour un contour de marque.
Des assemblages à reprendre
Voici des combinaisons de classes réelles, pour composer rapidement une carte, une information pratique ou un appel à l’action.
Information
Préparer votre consultation
Un titre lisible, un paragraphe court et une action claire.
card + shadow-soft · badge · text-h4 + font-bold · btn + btn-outline
Votre vision
Voir plus clair
Un bloc sombre peut mettre en valeur une action principale.
card + bg-gradient-deep · text-white · font-extrabold · btn + btn-white
Confirmation enregistrée
Un exemple de message de succès, à adapter au contexte.
card + bg-success · text-success + font-bold
Repères pour réutiliser le système
Les styles par défaut restent le point de départ. Ajoutez des classes pour varier un élément, puis changez les variables globales lorsque vous voulez faire évoluer toute la gamme.
Mises en page
layout-stack : éléments en colonne · layout-cluster : ligne avec retour à la ligne · layout-grid + layout-cell : grille adaptable · content-container : largeur de contenu · section-space : espace vertical.
Choisir une seule valeur par propriété
Une classe de taille, une graisse, une couleur de texte. Pour les boutons : btn + une variante + une taille éventuelle. Le nom des classes s’ajoute sans point dans Elementor.
Les classes de couleur de texte se placent sur chaque titre ou paragraphe. Une couleur sur le parent ne remplace pas les styles par défaut de ses enfants.