Bibliothèque de blocs

Charte & système de blocs

Référence visuelle de tous les éléments réutilisables du site Rouge Hexagone. Chaque bloc est nommé pour servir de base à une bibliothèque Gutenberg : on réutilise, on ne redessine pas.

Fondations

Couleurs

Violet
#4a3fc4
Violet clair
#6457e8
Violet profond
#211c54
Orange
#ff9d1c
Orange clair
#ffbe5c
Vert (succès)
#1f9d6b
Encre
#26244e
Encre douce
#62608a
Lavande
#f6f5fd
Lavande 2
#edecf9
Filet
#e8e7f4
Papier
#ffffff
Fondations

Typographie & texte

Police unique : Plus Jakarta Sans. Titres en 800, texte en 400/600.

titre-h1
Titre de page (H1)
titre-h2
Titre de section avec accent (H2)
titre-h3
Sous-titre (H3)
surtitre
Surtitre de section
chapô

Paragraphe d'introduction, légèrement plus grand et en gris encre.

paragraphe

Paragraphe courant avec gras, lien interne et italique.

Actions

Boutons

noms : bouton-primaire bouton-accent bouton-secondaire lien-action
Éléments

Liens, badges & chips

badge / pastille / étiquette
Pastille violette −65 % Étiquette
chip-lien (métier / secteur)
fil-d-ariane
Éléments

Listes

liste-check
  • Élément avec coche violette
  • Variante coche verte (bénéfice)
liste-puce
  • Puce orange (profil recherché)
  • Variante avec icône d'alerte
Conteneurs

Cartes

carte-icone

Titre de la carte

Courte description du service ou bénéfice.

carte-numerotee
1

Étape ou avantage

Carte numérotée pour étapes et avantages.

carte-image
Catégorie · date

Carte article / actualité

Lire la suite
Données

Tableau comparatif

tableau-comparatif
Critère
Option A
Option mise en avant
Critère 1
Valeur A
Valeur B
Critère 2
Valeur A
Valeur B
Critère 3
Valeur A
Valeur B
Interactif

FAQ — accordéon

faq-accordeon
Question fréquente n°1 ?

Réponse repliable. Cliquez pour ouvrir/fermer.

Question fréquente n°2 ?

Le contenu de la réponse s'affiche en gris encre.

Question fréquente n°3 ?

Idéal pour les pages de service et l'accueil.

Interactif

Champs de formulaire

formulaire-devis
Mise en avant

Citation & encadrés

temoignage

Citation d'un client, mise en valeur par l'icône et la signature.

Prénom N.
Fonction, entreprise
encadre-info
Mise en avant d'un point clé ou d'une garantie.
encadre-noteNote ou information secondaire sur fond lavande.
Sections pleine largeur

Bandes CTA & chiffres

bande-cta-violet

Titre incitatif

Phrase d'accroche pour pousser à l'action.

Demander un devis
bande-chiffres
+10 ans
d'expérience
+90
employés externalisés
+15
secteurs d'activité
97%
de fidélisation