Quatre design systems publics à étudier, ce que chacun publie, et un générateur en direct qui transforme vos choix de couleur, de typographie et de coins en guide de style d'une page avec CSS.
Un design system est l'ensemble partagé de tokens, de composants et de règles d'usage avec lequel une équipe construit ; un guide de style de site web en est la forme la plus simple, une page de couleurs, de typographie et de composants de base. Étudiez des systèmes publics comme USWDS, GOV.UK, Carbon et Atlassian, puis utilisez le générateur ci-dessous pour créer un guide de départ pour votre propre site.
Ce que contient généralement un design system
Les listes de design systems renvoient vers d'autres sites et s'arrêtent là. Cette page explique quoi retenir de quatre systèmes publics bien documentés, puis vous donne un générateur de guide de style fonctionnel qui affiche des boutons, un champ de formulaire, une carte et une alerte selon vos choix, et exporte les propriétés personnalisées CSS correspondantes.
Un guide de style consigne les règles visuelles : couleurs, polices, usage du logo et ton. Un design system y ajoute les composants codés, les tokens et la documentation qui appliquent ces règles dans les produits, et généralement un processus pour les faire évoluer. La plupart des petits sites n'ont besoin que du guide de style et de quelques composants.
Les systèmes gouvernementaux comme USWDS et GOV.UK sont publics, expliquent les raisons de chaque choix et mettent l'accent sur l'accessibilité. Carbon montre comment une grande entreprise documente des composants complexes. Atlassian est un bon modèle pour nommer les tokens selon leur rôle.
Plusieurs publient du code open source, mais chacun fixe sa propre licence et ses règles de marque, et l'apparence d'un gouvernement ou d'une entreprise sur un site sans rapport peut induire les visiteurs en erreur. Lisez la licence et les règles de marque sur le site du système avant de réutiliser ses composants ou son apparence.
Commencez par une couleur de marque, un quasi-noir pour le texte, un ou deux gris pour les bordures et les surfaces, et un rouge pour les erreurs. N'en ajoutez que lorsqu'un vrai composant en a besoin.
Chaque règle lit une propriété personnalisée, donc modifier --brand ou --radius change le style de tous les composants à la fois.
US General Services Administration
Design tokens, composants avec recommandations d'accessibilité et d'implémentation
Échelles de tokens pour la couleur, la typographie et les unités d'espacement
UK Government Digital Service
Styles, composants et patterns
Patterns pour des tâches complètes, comme demander un nom
IBM
Composants open source pour React et Web Components, basés sur la police IBM Plex
Tableaux de données d'entreprise et mises en page denses
Atlassian
Design tokens nommés par fondation, propriété et modificateur, comme color.text
Un schéma de nommage des tokens clair
Sans-serif système
Serif système
Arrondie
Monospace
Choisissez une couleur de marque, une pile de polices, un rayon de coin et un pas d'espacement. La planche et le CSS ci-dessous se mettent à jour ensemble.
Couleur de marque
Pile de polices
Rayon des coins : {n}px
Pas d'espacement : {n}px
Texte blanc sur votre couleur de marque :
(respecte 4.5:1 pour le texte normal)
(grand texte uniquement, 3:1 requis)
(trop faible pour du texte)
Enregistrer
Annuler
Titre de la carte
Une carte regroupe une idée et son action.
Saisissez une adresse e-mail au format [email protected]
Copier le CSS
Design systems publics à étudier
Vérifié sur le site officiel de chaque système, octobre 2026
Système
Créé par
Ce qu'il publie
À étudier pour
Commencer gratuitement · Sans carte bancaire