Site 2026 • Stylebook
Bienvenue dans le Stylebook de Site 2026 — la référence unique pour construire des interfaces cohérentes. Retrouvez ici les variables du système (couleurs, tailles, espacements) et les composants prêts à l'emploi, chacun documenté avec ses classes, ses variantes et ses règles d'usage.
Exporter variables.txt
Téléchargez un fichier variables.txt regroupant l'ensemble des design tokens du système, prêt à être intégré dans un projet externe basé sur WordPress et GreenShift / GreenLight.
Importer variables.txt
Une fois le fichier exporté, voici comment l'intégrer dans le Stylebook de GreenShift / GreenLight.
variables.txt dans un éditeur de texte ou de code (VS Code, Sublime Text, TextEdit…).
Utiliser les tokens
Sur la page Variables, chaque token est cliquable : un clic copie automatiquement sa syntaxe CSS dans le presse-papier. Cette valeur se colle ensuite directement dans le champ de style dédié* des blocks GreenShift / GreenLight (couleur, taille, espacement…), sans avoir à retaper la variable à la main.
* Le champ situé au-dessus du menu déroulant nommé « Select variable preset ».
Bonnes pratiques
Changelog
— Création de la page Accueil (Home.dc.html), établie comme nouvelle racine du site (logo, fil d'ariane et liens mis à jour sur les 3 pages).
— Nettoyage du code hérité de Components.dc.html (navigation, sommaire et données mortes supprimées).
— Rédaction du pitch d'introduction.
— Refonte de la section « Bonnes pratiques » (Cohérence, Simplicité, Accessibilité, Performance, Réutilisabilité).
— Ajout de la section « Utilisation » (copie des tokens vers GreenShift/GreenLight).
— Ajout du changelog.
— Ajout de la roadmap vers la v1.0.
— Mise en place d'un serveur local (localhost:8000) pour le développement, le temps que le site soit hébergé sur son serveur définitif.
— Ajout de la section « Exporter variables.txt » : téléchargement d'un fichier regroupant tous les design tokens, généré à partir de downloads/Stylebook variables.css.
— Correction de l'export de variables.txt : suppression de la conversion des commentaires (//Label conservé tel quel, car c'est la syntaxe requise par le Stylebook de GreenShift/GreenLight).
— Ajout de la section « Importer variables.txt » : procédure en 3 étapes pour coller le contenu dans le champ « Import from CSS code » du Stylebook GreenShift/GreenLight.
— Harmonisation de la largeur des paragraphes à 70ch (auparavant 62ch/68ch selon les sections).
— Remplacement de l'icône « Roadmap » par une boussole (titre de section et navigation).
— Components.dc.html : ajout d'une liste de sources d'icônes (Phosphor Icons, Tabler Icons, Lucide) sous la section Icons.
— Couleur de survol du bouton « Exporter variables.txt » changée pour oklch(44% 0.245 264) — Marine Blue 600.
— Correction d'un bug de survol sur les 3 pages : les styles inline empêchaient les règles style-hover de s'appliquer (conflit de spécificité CSS). Ajout de !important à l'ensemble des 45 déclarations style-hover pour rétablir tous les effets de survol du site.
— Ajout d'une capture d'écran du champ « Import from CSS code » de GreenShift/GreenLight sous les 3 étapes de la section Importer variables.txt. Correction au passage d'une balise <svg> non fermée sur l'icône de cette section.
— Renommage de Home.dc.html en index.html (préparation de la mise en ligne — servi automatiquement à la racine du domaine par la plupart des hébergeurs). Mise à jour des 11 liens internes concernés sur les 3 pages.
— Renommage de Variables.dc.html en variables.html et Components.dc.html en components.html. Mise à jour de tous les liens internes correspondants sur les 3 pages.
— Corrections manuelles.
— Création à partir de 2 fichiers : Stylebook variables.css (design tokens) et Stylebook components.html (premiers composants webdesign), fournis à Claude (modèle Fable 5) qui a généré l'interface.
Roadmap
La version v1.0 du stylebook est prévue avec les évolutions suivantes.
— Ajout de composants et de patterns supplémentaires.
— Documentation détaillée d'utilisation du stylebook.
— Sources documentées (liens web) vers des outils utiles : WordPress, générateurs en ligne (clamp generator, oklch, gradient generator).
— Références aux standards : RGESN, RGAA, WCAG.
— Bonnes pratiques destinées aux développeurs.
— Guides pour la gestion de projet.
— Gouvernance pour le maintien du site : rôles des équipes Dev, Front-end et Produit.
— Sources sur les skills IA utilisées.