Design system

Définition

Un design system rassemble tout ce qu'il faut pour construire des pages cohérentes : les variables (couleurs, typographies, espacements), les composants (boutons, cartes, formulaires, sections) et les règles qui disent quand utiliser quoi.

‍

Comment ça marche

Le principe a été popularisé par l'Atomic Design de Brad Frost (2013) : on construit de petits éléments, qu'on assemble en composants, puis en sections et en pages. Modifier un composant met à jour toutes les pages qui l'utilisent.

Sur Webflow, le design system vit directement dans le site : variables, classes nommées selon une convention (Client-First, Lumos) et composants avec des propriétés modifiables.

‍

Pourquoi ça compte pour votre site

Sans design system, chaque nouvelle page est un petit projet. Avec, une équipe marketing peut créer une landing page en quelques heures à partir de sections existantes, sans casser la cohérence visuelle ni appeler un développeur.

‍

L'avis de We-R

Chez nous, le design system n'est pas une option : c'est ce qu'on livre avec chaque site, avec la formation de l'équipe. C'est aussi ce qui rend un site Webflow lisible par les outils d'IA qui travaillent désormais via le MCP de Webflow : un système bien nommé se modifie sans tout casser.

‍

Pour aller plus loin

Voir aussi : Landing page, CMS, Charte graphique. Et pour passer à la pratique : pourquoi Webflow change la donne pour les équipes marketing ou nos sites Webflow.

‍

Sources : Brad Frost, « Atomic Design » (2013) · documentation Webflow (variables et composants) · frameworks Client-First (Finsweet) et Lumos (Timothy Ricks).

Dernière mise à jour : octobre 2026.