Creer un design system quand on est seul

Quand on parle de design systems, on pense immediatement a des equipes massives : des dizaines de designers, des ingenieurs dedies, des mois de travail. On pense a Material Design chez Google, au Carbon Design System chez IBM, ou au Primer chez GitHub. Des projets titanesques.

Et pourtant, les freelances et les petites equipes ont autant, sinon plus, besoin de structure dans leur processus de design. La difference, c’est qu’ils n’ont pas le luxe d’y consacrer des mois. Il faut une approche pragmatique, minimaliste et evolutive.

Pourquoi vous avez besoin d’un design system

Meme en solo, un design system vous fait gagner un temps considerable :

Coherence automatique : plus besoin de se demander “quel bleu j’ai utilise sur la page precedente ?”
Vitesse d’execution : quand les composants de base existent deja, concevoir une nouvelle page devient un exercice d’assemblage.
Scalabilite : quand un client demande “ajoutez une page de FAQ”, vous ne partez pas de zero.
Professionnalisme : un design system temoigne d’une approche methodique qui inspire confiance aux clients.

L’approche “minimum viable design system”

Oubliez la perfection. L’objectif est de couvrir 80% de vos besoins avec 20% de l’effort.

1. Les design tokens

Commencez par les fondations : les valeurs primitives qui definissent l’identite visuelle.

:root {
  /* Couleurs */
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-border: #e2e8f0;

  /* Typographie */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Echelle typographique (modular scale 1.25) */
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.563rem;
  --text-3xl: 1.953rem;
  --text-4xl: 2.441rem;

  /* Espacement (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

2. Les composants de base

Identifiez les composants que vous utilisez dans 90% de vos projets :

Boutons : primary, secondary, ghost. Trois variantes suffisent.
Champs de formulaire : input, textarea, select. Avec les etats focus, error et disabled.
Cartes : un conteneur avec border, padding et radius.
Navigation : header avec logo, liens et CTA mobile-responsive.
Typographie : les styles pour h1-h6, paragraphes, listes et liens.

Un bon design system solo ne contient pas plus de 15 a 20 composants. Au-dela, vous passez plus de temps a le maintenir qu’a l’utiliser.

3. Les patterns de mise en page

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.stack { display: flex; flex-direction: column; }
.stack-sm { gap: var(--space-2); }
.stack-md { gap: var(--space-4); }
.stack-lg { gap: var(--space-8); }

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

Ou heberger votre design system

Un fichier CSS unique : un fichier design-system.css que vous importez dans chaque projet.
Un template Figma : un fichier Figma avec vos tokens, composants et layouts.
Un depot npm prive : si vous travaillez avec des frameworks JavaScript.

Des outils comme Figma permettent de gerer vos tokens visuels directement dans le design, tandis que les custom properties CSS assurent la coherence cote code.

Certains prestataires l’ont bien compris et integrent un design system coherent des la phase de conception. C’est le cas par exemple de cette agence web en Suisse romande qui livre des sites sur mesure avec des tokens et composants reutilisables inclus des le depart.

Faire evoluer le systeme

Quand vous creez un composant pour un projet client, demandez-vous : “est-ce que je reutiliserai ce composant ?”
Si la reponse est oui, ajoutez-le au design system apres le projet, pas pendant.
Si un composant n’a pas ete reutilise apres 3 projets, retirez-le.

Les erreurs a eviter

Trop de variations : 5 tailles de boutons et 8 couleurs, c’est trop.
Trop d’abstraction : un composant Box qui accepte 40 props est un anti-pattern.
Tout prevoir d’avance : un design system est un jardin, pas un batiment.
Copier les grands : les design systems de Google ou Salesforce repondent a des problemes que vous n’avez pas.

Conclusion

Un design system solo n’est pas un petit design system d’entreprise. C’est un outil different, avec des contraintes differentes et des objectifs differents. Il doit etre leger, pragmatique et au service de votre productivite.

Commencez par les tokens, ajoutez les composants que vous utilisez vraiment, documentez le minimum, et faites-le evoluer projet apres projet.