Skip to content

Page de référence

Design system

Catalogue vivant des fondations, composants Gutenberg et états visuels du thème denisdums.

Voir les boutons
Explorer les blocs

01 — Fondations

Typographie

La typographie Open Sauce Sans porte les contenus courants. Peace Sans est réservée aux signatures expressives et à l’identité.

Titre H1 — Une présence forte et directe

Titre H2 — Organiser les grandes sections

Titre H3 — Donner un niveau de lecture

Titre H4 — Préciser un sous-ensemble

Paragraphe courant avec du gras, de l’italique, un lien textuel, du texte surligné, une abréviation UX et du code inline.

Un texte expressif révélé progressivement au défilement pour tester le composant Alpine et son comportement responsive.

Le détail crée le rythme,
la cohérence construit la confiance.

02 — Couleurs

Palette sémantique

Royal

Texte, contraste et surfaces fortes.

Clouded

Action, focus et accent numérique.

Egg

Énergie et mise en avant.

Begonia

Chaleur et présence humaine.

03 — Actions

Boutons et liens

Bouton principal
Action principale
Secondaire
Jaune — Egg

Badge bleu

Badge jaune

Badge rose

Badge vert

04 — Contenus

Listes, citations et données

Liste simple

  • Architecture WordPress native
  • Composants accessibles
  • Tokens partagés

Étapes numérotées

  1. Cadrer le besoin
  2. Concevoir la solution
  3. Tester et livrer

Un bon système réduit les décisions répétitives sans effacer la personnalité.

Principe de conception

WordPress reste le produit. Le thème sert son contenu.

Socle denisdums
TokenUsageValeur
smallMétadonnées12 px
bodyTexte courant16 px
buttonActions18 px
Échelle typographique principale.
.component {
  color: var(--color-text-default);
}
État       Résultat
Default    Lisible
Hover      Visible
Focus      Accessible

05 — Médias

Images et compositions

Portrait de Denis Dumont
Image avec légende et texte alternatif.
Bannière MotionForWP
Bannière Helpy
Illustration d’un furet

Média et texte

Une composition éditoriale native, empilée automatiquement sur les petits écrans.

Bloc couverture

06 — Interaction

Accordéons et recherche

Comment utiliser cette page ?

Parcourez-la après chaque modification de tokens, de styles de blocs ou de composants globaux.

Que faut-il vérifier ?
  • Desktop, tablette et mobile
  • Clavier, focus, hover et contraste
  • Cohérence entre éditeur et front

07 — Blocs dynamiques

Contenu WordPress

Aucun commentaire à afficher.
septembre 2026
L M M J V S D
 123456
78910111213
14151617181920
21222324252627
282930  

08 — Requête

Boucle de publications

09 — Site

Identité et navigation WordPress

Denis Dumont — Développeur WordPress freelance

Sites WordPress sur mesure, performants et faciles à administrer.

Connexion
  • Retour à l’accueil

    • 10 — Composants personnalisés

    Marquee denisdums

    WORDPRESSGUTENBERGPERFORMANCEDESIGN SYSTEM

    Fin de la page de contrôle

    Vérifier le rendu sur le front et dans Gutenberg après chaque évolution du thème.

    Retour en haut

    Compositions Gutenberg

    Compositions éditoriales du blog

    Ces exemples utilisent uniquement les blocs natifs Requête, Boucle de requête et les blocs de publication.

    À découvrir

    Derniers articles

    Conseils concrets autour de WordPress, Gutenberg, la performance et l’expérience utilisateur.

    Ressources

    Tous les articles