Aller au contenu

Design System Overview - EGS Gallois Sisal

Philosophie

Le Design System EGS est construit sur le principe de "L'Élégance Organique". Il combine la rigueur industrielle (Grilles, Typographie suisse) avec la chaleur de la nature (Couleurs terreuses, Formes douces).

Structure des Tokens

Les tokens de design sont la source unique de vérité. Ils sont définis dans Guidelines/DesignSystem/tokens.json.

Catégories

  1. Colors : Palette sémantique (Main, Night, Pear, etc.).
  2. Typography : Définitions des familles, poids, tailles et interlignages.
  3. Spacing : Échelle spatiale (4px, 8px, 16px, 24px, etc.) pour les marges et paddings.
  4. Radius : Arrondis des bordures (sm: 4px, md: 8px, lg: 16px).
  5. Shadows : Profondeur et élévation (soft, medium, hard).

Composants Atomiques

  • Boutons : Primaire (Pear), Secondaire (Outline), Tertiaire (Lien).
  • Inputs : Champs de texte, Select, Textarea avec états (Default, Focus, Error).
  • Cartes : Conteneurs génériques pour le contenu (Produits, Articles).
  • Badges : Indicateurs de statut ou de catégorie (ex: "Grade 3L").

Utilisation

Ce système est conçu pour être agnostique à la technologie, mais il est actuellement implémenté en CSS Variables (src/styles/variables.css) pour le prototype HTML/CSS.