docs(design-system): add design system documentation and AI agent instructions

- Add docs/design-system.md with color tokens, typography, spacing, icons, responsive/PWA rules and component reuse guidelines - Add CLAUDE.md with permanent instructions for Claude Code - Add .github/instructions/design-system.instruction.md for GitHub Copilot - Update .github/copilot-instructions.md to reference the design system - Update Front-End/tailwind.config.js with color tokens (primary, secondary, tertiary, neutral) and font families (Manrope/Inter) - Update Front-End/src/app/layout.js to load Manrope and Inter via next/font/google
2026-04-05 20:51:26 +00:00 · 2026-04-04 11:56:19 +02:00
parent 2579af9b8b
commit cb76a23d02
6 changed files with 553 additions and 2 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@ -52,8 +52,28 @@ Pour le front-end, les exigences de qualité sont les suivantes :
 - Documentation en français pour les nouvelles fonctionnalités (si applicable)
 - Référence : [documentation guidelines](./instructions/documentation.instruction.md)

+## Design System
+
+Le projet utilise un design system défini. Toujours s'y conformer lors de toute modification de l'interface.
+
+- Référence complète : [design system](../docs/design-system.md)
+- Règles Copilot : [design system instructions](./instructions/design-system.instruction.md)
+
+### Résumé des tokens obligatoires
+
+| Token Tailwind | Hex       | Usage                         |
+|----------------|-----------|-------------------------------|
+| `primary`      | `#059669` | Boutons, CTA, éléments actifs |
+| `secondary`    | `#064E3B` | Hover, accents sombres        |
+| `tertiary`     | `#10B981` | Badges, icônes                |
+| `neutral`      | `#F8FAFC` | Fonds de page, surfaces       |
+
+- Polices : `font-headline` (Manrope) pour les titres, `font-body`/`font-label` (Inter) pour le reste
+- **Ne jamais** utiliser `emerald-*` pour les éléments interactifs
+
 ## Références

 - **Tickets** : [issues guidelines](./instructions/issues.instruction.md)
 - **Commits** : [commit guidelines](./instructions/general-commit.instruction.md)
 - **Tests** : [run tests](./instructions/run-tests.instruction.md)
+- **Design System** : [design system instructions](./instructions/design-system.instruction.md)
--- a/.github/instructions/design-system.instruction.md
+++ b/.github/instructions/design-system.instruction.md
@ -0,0 +1,116 @@
+---
+applyTo: "Front-End/src/**"
+---
+
+# Design System — Règles Copilot
+
+Référence complète : [`docs/design-system.md`](../../docs/design-system.md)
+
+## Couleurs — tokens Tailwind obligatoires
+
+Utiliser **toujours** ces tokens pour les éléments interactifs :
+
+| Token       | Hex       | Remplace                          |
+|-------------|-----------|-----------------------------------|
+| `primary`   | `#059669` | `emerald-600`, `emerald-500`      |
+| `secondary` | `#064E3B` | `emerald-700`, `emerald-800`      |
+| `tertiary`  | `#10B981` | `emerald-400`, `emerald-500`      |
+| `neutral`   | `#F8FAFC` | Fonds neutres                     |
+
+**Ne jamais écrire** `bg-emerald-*`, `text-emerald-*`, `border-emerald-*` pour des éléments interactifs.
+
+### Patterns corrects
+
+```jsx
+// Bouton
+<button className="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">
+
+// Texte actif
+<span className="text-primary">
+
+// Badge
+<span className="bg-tertiary/10 text-tertiary text-xs px-2 py-0.5 rounded">
+
+// Fond de page
+<div className="bg-neutral">
+```
+
+## Typographie
+
+```jsx
+// Titre de section
+<h1 className="font-headline text-2xl font-bold">
+
+// Sous-titre
+<h2 className="font-headline text-xl font-semibold">
+
+// Label de formulaire
+<label className="font-label text-sm font-medium text-gray-700">
+```
+
+> `font-body` est le défaut sur `<body>` — inutile de l'ajouter sur les `<p>`.
+
+## Arrondi
+
+- Par défaut : `rounded` (4px)
+- Cards / modales : `rounded-md` (6px)
+- Grandes surfaces : `rounded-lg` (8px)
+- **Éviter** `rounded-xl` sauf avatars ou indicateurs circulaires
+
+## Espacement
+
+- Grille 4px/8px : `p-1`=4px, `p-2`=8px, `p-3`=12px, `p-4`=16px
+- **Pas** de valeurs arbitraires `p-[13px]`
+
+## Mode
+
+Interface **light uniquement** — ne pas ajouter `dark:` prefixes.
+
+---
+
+## Icônes
+
+Utiliser **uniquement** `lucide-react`. Jamais d'autres bibliothèques d'icônes.
+
+```jsx
+import { Home, Plus, ChevronRight } from 'lucide-react';
+
+<Home size={20} className="text-primary" />
+<button className="flex items-center gap-2"><Plus size={16} />Ajouter</button>
+```
+
+- Taille par défaut : `size={20}` inline, `size={24}` boutons standalone
+- Couleur via `className="text-*"` uniquement — jamais le prop `color`
+- Icône seule : ajouter `aria-label` pour l'accessibilité
+
+---
+
+## Responsive & PWA
+
+**Mobile-first** : les styles de base ciblent le mobile, on étend avec `sm:` / `md:` / `lg:`.
+
+```jsx
+// Layout
+<div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
+
+// Grille
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+
+// Bouton full-width mobile
+<button className="w-full sm:w-auto bg-primary text-white px-4 py-2 rounded">
+```
+
+- Touch targets ≥ 44px : `min-h-[44px]` sur tous les éléments interactifs
+- Pas d'interactions uniquement au `:hover` — prévoir une alternative tactile
+- Tableaux sur mobile : utiliser la classe utilitaire `responsive-table` (définie dans `tailwind.css`)
+
+---
+
+## Réutilisation des composants
+
+**Toujours chercher un composant existant dans `Front-End/src/components/` avant d'en créer un.**
+
+Composants clés disponibles : `AlertMessage`, `Modal`, `Pagination`, `SectionHeader`, `ProgressStep`, `EventCard`, `Calendar/*`, `Chat/*`, `Evaluation/*`, `Grades/*`, `Form/*`, `Admin/*`, `Charts/*`.
+
+- Étendre via des props (`variant`, `size`, `className`) plutôt que de dupliquer
+- Appliquer les tokens du design system dans tout composant modifié ou créé