Charte Graphique

Identité visuelle officielle de WPFormation. Ce document définit les règles de design appliquées sur l'ensemble du site.

01Logo

Logo & Icône

Le logo WPFormation représente un bébé WordPress avec des lunettes et une tétine orange. Il symbolise l'apprentissage accessible et l'expertise WordPress.

Sur fond clair

Sur fond sombre

Sur fond orange

Logo texte

WPFormationWordPress, rien que du WordPress

Règles d'utilisation

• Zone d'exclusion minimale : 16px autour du logo
• Taille minimale : 32px pour l'icône seule
• Ne jamais déformer, incliner ou modifier les couleurs du logo
• Le favicon utilise l'icône wpf-256.png sans modifications

02Couleurs

Palette de couleurs

Palette verrouillée v6. Aucune couleur en dehors de cette palette n'est autorisée sur le site.

Orange Primary

HEX #FF8C00

RGB 255, 140, 0

Tailwind orange

CTA, liens, accents, badges, éléments interactifs

Orange Light

HEX #FFa940

RGB 255, 169, 64

Tailwind orange-light

Hover states, dégradés

Orange Deep

HEX #E07000

RGB 224, 112, 0

Tailwind orange-deep

Hover darker, pressed states

Orange Soft

HEX #FFF4E6

RGB 255, 244, 230

Tailwind orange-soft

Fonds de badges, arrière-plans subtils

Ink

HEX #141425

RGB 20, 20, 37

Tailwind ink

Header, footer, sections sombres, titres

Ink Card

HEX #1a1a2e

RGB 26, 26, 46

Tailwind ink-card

Cards sur fond sombre

Text

HEX #2d2d3e

RGB 45, 45, 62

Tailwind text

Texte principal du corps

Text Mid

HEX #555568

RGB 85, 85, 104

Tailwind text-mid

Texte secondaire, méta-informations

Cool Grey

HEX #F2F3F7

RGB 242, 243, 247

Tailwind cool-grey

Fonds de sections alternées

Sand

HEX #FAF7F2

RGB 250, 247, 242

Tailwind sand

Dégradés subtils, fonds chaleureux

03Typographie

Typographie

Deux familles typographiques exclusives, chargées via Google Fonts avec next/font pour un CLS nul.

Titres

Inter Tight

Weights : 700 (Bold), 800 (ExtraBold), 900 (Black)

Aa Bb Cc 123

ABCDEFGHIJKLM

Corps

Instrument Sans

Weights : 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)

Aa Bb Cc 123

abcdefghijklmnopqrstuvwxyz

Élément	Police	Graisse	Taille	Détails
H1	Inter Tight	900 (Black)	clamp(2.5rem, 5vw, 4.5rem)	letter-spacing: -0.035em
H2	Inter Tight	800 (ExtraBold)	clamp(1.8rem, 3.5vw, 2.5rem)	letter-spacing: -0.035em
H3	Inter Tight	800 (ExtraBold)	clamp(1.3rem, 2vw, 1.5rem)	letter-spacing: -0.035em
Corps	Instrument Sans	400 (Regular)	17px	line-height: 1.65
Navigation	Inter Tight	800 (ExtraBold)	0.88rem	uppercase, letter-spacing: 0.06em
Labels	Inter Tight	700 (Bold)	0.72rem	uppercase, letter-spacing: 0.08em
Boutons	Inter Tight	700 (Bold)	0.85–0.92rem	border-radius: 50px (pill)

Exemples en contexte

Tutoriels WordPress en français

Explorez l'expertise

Dernières publications

WPFormation, c'est un seul homme : Fabrice Ducarme. Autodidacte, indépendant, zéro bullshit. Chaque article est écrit, testé et publié par quelqu'un qui met les mains dans le code tous les jours.

Polices interdites

InterRobotoOpen SansLatoArialsystem-uiPlus Jakarta Sans

04Composants

Éléments UI

Composants réutilisables du design system WPFormation.

Boutons

Border-radius : 50px (pill) • Font : Inter Tight 700 • Padding : 12px 28px

Badges

Plugins WordPressPopulaire149 articles publiésGuide completAlerte Sécu

Cards

Tutoriels

Card sur fond clair

Border-radius 20px, border subtile, hover avec élévation.

149

Card sur fond sombre

Background ink-card, chiffre orange, hover border orange.

131

Card mise en avant

Fond orange inversé pour mettre en avant une catégorie.

Espacements & Grille

Container

• Max-width : 1400px
• Padding : clamp(20px, 4vw, 56px)
• Sections : 100px padding vertical

Border-radius

• Cards : 20px
• Petits éléments : 12px
• Boutons pill : 50px

05Rythme

Rythme des sections

L'alternance des fonds sombres et clairs crée du contraste et de la hiérarchie visuelle. Chaque page suit un pattern défini.

Homepage

Hero

Articles

Catégories

Expertise

Témoignages

Formations

Newsletter

Catégorie

Hero

À la une

Bento Grid

Pagination

Cross-cat.

Article

Hero

Contenu

Auteur

À lire

Formateur

Hero

Parcours

Compétences

Formations

Témoignages

Confiance

CTA

06Règles

Anti-patterns

Ce qui est strictement interdit dans le design WPFormation.

Couleurs hors palette

Aucune couleur en dehors des 10 tokens définis. Pas de bleu, pas de vert, pas de violet.

Gradients CSS comme placeholders

Toujours utiliser de vraies images. Jamais de dégradés pour remplacer une image manquante.

Grilles uniformes

Pas de repeat(3, 1fr) systématique. Utiliser des grilles asymétriques (bento) pour les articles.

Highlight every Nth

Les badges éditoriaux sont appliqués manuellement (Populaire, Nouveau, Guide complet), pas automatiquement.

Polices non autorisées

Exclusivement Inter Tight (titres) et Instrument Sans (corps). Voir la liste des polices interdites.

Accents manquants

Le site est en français. Tous les accents sont obligatoires : é, è, ê, à, ù, ô, î, etc.

07Infos

Informations pratiques

Accessibilité

• Skip link vers le contenu principal
• Focus visible orange (3px outline, 3px offset)
• Respect de prefers-reduced-motion
• Attributs ARIA sur tous les éléments interactifs
• Contraste WCAG AA minimum sur tous les textes

Responsive

• 1024px — Nav cachée, hamburger, grilles 2 colonnes
• 768px — Tout en 1 colonne, titres réduits
• 480px — Padding minimal, tailles compactes

Charte graphique WPFormation — Version 6.0 — Dernière mise à jour : février 2026

Pour toute question, contacter Fabrice Ducarme via la page Contact.