Design system julienweb.fr
Palette, typographie, boutons et composants — la charte graphique complète documentée pour les outils IA et mes clients.
Un design system, c'est quoi — et pourquoi c'est indispensable avec l'IA
Pendant des années, mon site a évolué à l’intuition. Une couleur par-ci, un style de bouton par-là, une police choisie un matin parce qu’elle sonnait juste. Le résultat était cohérent — parce que c’est toujours moi qui touchais au code — mais non documenté. Personne d’autre ne pouvait reproduire le style sans avoir passé des heures à inspecter les éléments.
Avec l’intégration de l’IA dans mon workflow (Claude Code, Cursor, génération de maquettes), ce flou est devenu un vrai problème. Les outils IA ont besoin de valeurs concrètes pour produire des résultats cohérents. J’ai donc documenté l’intégralité de ma charte graphique dans un fichier de référence : couleurs, typographie, boutons, espacement, stack.
La palette — trois couleurs, un langage visuel
#1E91D4 Bleu primaire — Couleur d’action principale : liens, accents, états hover. Vif et rassurant pour un public entrepreneur.
#5A4095 Violet accent — Couleur signature : fonds de boutons, CTA, liens visités. Ce violet profond ancre l’identité et crée une rupture mémorable dans un paysage web dominé par les bleus.
#F5FF00 Jaune secondaire — Uniquement sur les CTA à fort contraste. La couleur de l’urgence — avec parcimonie.
Le gradient signature linear-gradient(135deg, #1E91D4 0%, #5A4095 100%) apparaît sur les fonds de sections d’en-tête et les éléments graphiques structurants.
C’est exactement ce type de palette que je livre dans mes chartes graphiques — sous forme de document PDF éditable, avec les codes hex, les associations autorisées et les cas à éviter.
La typographie — Squada One + Poppins, un contraste assumé
Squada One (Google Fonts) — Toutes les hiérarchies de titres, du H1 au H6. Condensée, géométrique, forte présence visuelle. Les titres ne chuchotent pas : ils affirment.
Poppins (Google Fonts) — Corps de texte, boutons, interfaces. Humaniste, ronde, très lisible à 15px avec un line-height: 1.6. Elle contrebalance la rigueur de Squada One par une chaleur qui facilite la lecture longue.
Le H2 plus grand que le H1 ? Intentionnel : le H1 s’affiche dans le bandeau Elementor (court, dans un contexte graphique fort), tandis que le H2 structure les sections longues de contenu.
Les boutons — pill shape et double-couche visuelle
background-color: #5A4095;
border-radius: 25px; /* pill */
box-shadow: 2px 2px 0px #FFFFFF; /* relief net */
padding: 12px 28px;
/* :hover → */ background: #1E91D4;
La forme arrondie à 25px crée un effet « pilule » qui adoucit le caractère technique du site. L’ombre portée blanche (box-shadow: 2px 2px 0px #FFFFFF) donne un effet de relief net, presque imprimé. Au hover, le fond bascule sur le bleu primaire #1E91D4 — continuité de la palette sans rupture.
Les ombres et bordures — sobriété et profondeur
6px 6px 9px
rgba(0,0,0,0.2)
12px 12px 50px
rgba(0,0,0,0.4)
6px 6px 0px
rgba(0,0,0,0.2)
Trois niveaux d’ombre, deux valeurs de bordure : 4–5px pour les éléments de contenu (cartes, inputs, conteneurs), 25px pour les boutons. Deux rayons seulement — pas de dispersion entre 8, 10, 12 et 16px comme souvent.
Le max-width de référence est 1290px, légèrement plus large que le standard 1200px — pour exploiter les écrans 1440px sans créer de vide excessif. Toutes les sections sont construites pour trois états responsives : mobile (≤767px), tablette (768–1024px), desktop (>1024px).
La stack technique — Hello Elementor comme base minimale
| Composant | Version |
|---|---|
| Thème | Hello Elementor 3.4.7 |
| Builder | Elementor Pro 3.35.1 |
| Addons | Essential Addons 6.5.13 |
| Icônes | Font Awesome 5 + v4 shims |
| Images | Optimole — lazy load + CDN |
| Formulaires | Contact Form 7 6.1.5 |
| SEO | Yoast SEO Premium |
| Table of Contents | EZ Table of Contents |
Hello Elementor (v3.4.7) est le thème le plus léger compatible Elementor Pro, sans opinion stylistique propre. Tout le design appartient à Elementor. Optimole gère la compression automatique et le CDN des images — le seul plugin d’infrastructure visuelle de la liste. C’est cette même stack que j’utilise sur tous les sites WordPress que je crée pour mes clients.
Du design system à la charte graphique client
Ce que j’ai documenté pour julienweb.fr, je le construis aussi pour mes clients dans le cadre d’une identité visuelle complète : logo, palette, typographies, composants, guide de marque PDF.
Pourquoi documenter son design system — même seul
La vraie raison de cette documentation n’est pas la collaboration (je travaille seul sur ce site). C’est l’IA.
Depuis que j’utilise Claude Code et d’autres outils agentiques, j’ai besoin de transmettre des contraintes précises. Un fichier design.md devient un contexte injecté dans chaque session : les couleurs exactes, les polices, les valeurs d’espacement. L’IA ne réinvente pas ma charte à chaque fois — elle la respecte. C’est aussi un antidote à la dérive stylistique : sans référence écrite, chaque modification mineure peut s’éloigner imperceptiblement du style d’origine.
Si vous avez un site Elementor et voulez faire cette démarche, c’est l’un des exercices que je couvre dans mes formations WordPress et webdesign — en présentiel à Pantin ou en visio. La première heure est offerte, sans engagement.
JulienWeb.fr — Expert web & IA à Pantin (93)
