Pourquoi un design system

Un design system est un ensemble de composants réutilisables, de guidelines et de principes qui garantissent la cohérence d’une interface. Il accélère le développement et réduit la dette technique.

Chez Lueur Externe, nous créons des design systems adaptés à la taille et aux besoins de chaque projet.

Les design tokens

Les tokens sont les valeurs fondamentales du système :

Couleurs

:root {
  /* Couleurs primaires */
  --color-primary: #ff3e51;
  --color-primary-light: #ff525b;
  --color-primary-dark: #e63545;
  
  /* Couleurs secondaires */
  --color-cta: #ffed00;
  --color-text: #13100d;
  --color-text-secondary: #909090;
  --color-background: #fafafa;
  
  /* Couleurs sémantiques */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}

Typographie

:root {
  --font-heading: "Barlow", sans-serif;
  --font-body: "PT Sans", sans-serif;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
}

Espacement

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
}

Les composants

Anatomie d’un composant

Chaque composant doit définir :

  • Variantes : primary, secondary, ghost
  • Tailles : sm, md, lg
  • États : default, hover, focus, disabled, loading
  • Props : paramètres configurables

Exemple : composant Button

interface ButtonProps {
  variant: "primary" | "secondary" | "cta" | "ghost";
  size: "sm" | "md" | "lg";
  disabled?: boolean;
  loading?: boolean;
  icon?: string;
  children: string;
}

Hiérarchie des composants

Tokens (couleurs, typo, espacement)
  └── Atomes (bouton, input, badge, icône)
       └── Molécules (champ de formulaire, carte, menu item)
            └── Organismes (header, footer, formulaire complet)
                 └── Templates (layout de page)

Documentation

Storybook

Storybook est l’outil standard pour documenter les composants :

  • Rendu interactif de chaque composant
  • Documentation des props et variantes
  • Tests visuels automatisés
  • Accessible à toute l’équipe (designers + développeurs)

Guidelines d’utilisation

Pour chaque composant, documentez :

  • Quand l’utiliser (et quand ne pas l’utiliser)
  • Les variantes disponibles et leur contexte
  • Les règles d’accessibilité
  • Les exemples de code

Gouvernance

Processus d’ajout

  1. Besoin identifié (designer ou développeur)
  2. Proposition de design (Figma)
  3. Review par l’équipe
  4. Implémentation et tests
  5. Documentation
  6. Publication

Versioning

Utilisez le semantic versioning :

  • Patch (1.0.1) : correction de bug
  • Minor (1.1.0) : nouveau composant ou variante
  • Major (2.0.0) : changement cassant

Application sur ce site

Le design system de ce site satellite Lueur Externe utilise :

  • Variables CSS pour les tokens
  • Composants Astro réutilisables (Header, Footer, CTA, ContactForm)
  • Styles scopés par composant
  • Palette cohérente (rouge corail, jaune CTA, noir profond)

Conclusion

Un design system est un investissement qui paie sur le long terme : cohérence visuelle, développement accéléré et maintenance simplifiée. Contactez Lueur Externe pour créer votre design system.