Charte graphique
& blocs réutilisables
La base visuelle du site 18h01 — les tokens du design system et la palette de 10 blocs Gutenberg réutilisables pour composer librement de nouvelles pages.
1. Design System
Les tokens (couleurs, typographie, spacing, radius) et les composants globaux (boutons). Définis dans theme.json et assets/scss/base/_tokens.scss.
Palette de couleurs
11 couleurs définies dans theme.json. Slug WP utilisable via has-{slug}-background-color has-background.
Typographie
Titres : Season Serif TRIAL (Regular 400, Medium 500, SemiBold 600).
Corps : bc-novatica-cyr (Regular 400, SemiBold 600).
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Spacing scale
Échelle par pas de 25px. Utilisable via classes utilitaires : .m-1, .p-2, .mb-3, etc.
--space-1 25px--space-2 50px--space-3 75px--space-4 100px--space-5 125px--space-6 150pxBorder-radius
4 valeurs récurrentes pour cartes, pills et cercles.
Boutons
4 variantes héritées de l’intégration statique.
2. Blocs réutilisables (10)
Composants génériques à assembler librement pour créer de nouvelles pages. Tous configurables depuis l’éditeur Gutenberg (titres, textes, images, couleurs, options). Catégorie « 18h01 — Blocs réutilisables » dans l’inserter.
h01/g-hero — Hero générique
Hero polyvalent : badge optionnel, grand titre Season Serif (80px), sous-titre, bouton, fond coloré, alignement gauche ou centré.
Donnez du souffle à votre projet
Un hero polyvalent pour ouvrir n’importe quelle page : badge, titre, sous-titre et bouton d’action.
Démarrerh01/g-split — Image + texte
Section image + texte côte à côte. Variantes : image gauche ou droite, fond coloré, forme image (rectangle/cercle/blob), bouton optionnel. Contenu en InnerBlocks.
Une approche centrée sur l'humain
Chaque accompagnement repose sur l’écoute, la confiance et l’engagement. Nos équipes construisent avec vous des parcours adaptés à votre contexte et à vos objectifs.
- Écoute active — Comprendre vos besoins réels avant de proposer.
- Sur-mesure — Des solutions adaptées, pas des recettes toutes faites.
- Engagement — Présents à chaque étape, du diagnostic au résultat.
Variante : image à droite, fond pêche, forme cercle
Même bloc avec les options reversed: true, bgColor: "peach" et imageShape: "circle". Le placeholder s’adapte automatiquement à la forme.
h01/g-card-grid — Grille de cartes
Grille de 1 à 4 colonnes de cartes. Chaque carte : image (ou placeholder gradient) + titre + description + lien optionnel + couleur de fond personnalisable.
Nos engagements
Trois principes qui guident chacune de nos actions.
h01/g-key-figures — Chiffres clés
Grille de chiffres clés (nombre + label + description optionnelle). Mise en avant de données fortes.
En quelques chiffres
Notre impact, en quelques nombres clés.
- +150
- Consultants
- Un réseau d'experts certifiés.
- 98%
- Satisfaction
- Taux de recommandation client.
- 24h
- Réactivité
- Délai de réponse moyen.
- 12
- Régions
- France entière et DOM-TOM.
h01/g-logo-bar — Bandeau logos
Bandeau horizontal de logos (presse, partenaires, certifications). Liens optionnels. Placeholders gradient si pas d’image.
h01/g-testimonials — Témoignages
Grille de témoignages clients : citation + étoiles + nom + rôle + avatar (ou placeholder). Couleur de fond par carte.
Ce qu'ils en disent
« Un accompagnement de grande qualité. L'équipe a su s'adapter à nos besoins spécifiques et nous a guidés à chaque étape. »
« Une approche pédagogique remarquable. La formation a transformé notre manière de travailler. »
« Très satisfait du processus de recrutement. Profils qualifiés, délais respectés, communication fluide. »
h01/g-seo-text — Texte SEO multi-colonnes
Wrapper texte riche multi-colonnes (1 à 3) avec InnerBlocks. Idéal pour les blocs de contenu SEO en bas de page.
Un texte SEO sur 2 colonnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
h01/g-contact-info — Infos de contact
Bloc d’informations de contact. Tire les valeurs depuis Apparence > Options du thème par défaut (téléphone, email, adresse, horaires). Surcharges custom possibles par bloc.
Nous joindre
- Téléphone 04 77 39 99 02
- Email info@18h01.fr
- Adresse 152 rue Orion, Ecoparc Bel Air
34570 Vailhauquès - Horaires Du lundi au vendredi, 09:00-18:00
h01/g-cta-banner — Bannière CTA
Bannière d’appel à l’action : fond coloré, titre, sous-titre, bouton. À placer entre deux sections pour relancer l’engagement.
h01/g-faq — Foire aux questions
Liste de questions/réponses en accordéon. Génère automatiquement un JSON-LD FAQPage pour le SEO (rich snippets Google).
Questions fréquentes
Tout ce que vous voulez savoir avant de démarrer.
Un échange de 30 minutes, sans engagement, pour comprendre vos besoins et identifier les leviers prioritaires. Il peut avoir lieu en visio ou en présentiel selon votre préférence.
Nous proposons généralement un premier diagnostic sous 5 jours ouvrés, puis un plan d'action sur 2 à 4 semaines selon la complexité du projet.
Nos formations sont éligibles au CPF, OPCO, plan de développement des compétences et autres dispositifs publics. Nous vous accompagnons dans le montage du dossier de financement.
Oui — notre réseau de consultants couvre la métropole et les DOM-TOM. Selon les missions, l'accompagnement peut se faire à distance ou sur site.
3. Blocs spécifiques aux pages
Au-delà des blocs réutilisables ci-dessus, certaines sections singulières du site (Missions, Équipes, Outils, Formation, Recrutement, Contact, Home) ont leur propre bloc dédié pour rester fidèles aux maquettes Figma. Ils sont disponibles dans la catégorie « 18h01 — Blocs spécifiques » de l’éditeur, mais ne sont pas conçus pour être réutilisés hors des pages auxquelles ils sont rattachés.
- Home :
home-hero,home-press,home-intro,home-cards,home-atouts,home-solutions,home-testimonials - Missions :
mis-intro,mis-pilier,mis-objectif,mis-engagement,mis-valeurs - Équipes :
eq-founders,eq-member,eq-duo - Outils :
outils-intro,outils-panel - Formation :
for-intro,for-avantages,for-thematiques - Recrutement :
rxg-pourquoi,rxg-identite,rxg-circles,rxg-externalisation,rxg-avantages,rxg-panel - Contact :
contact-form-card,contact-info-card
Pour voir ces blocs en contexte, consultez les pages du site directement (Missions, Équipes, etc.).