# Design System — N3WT-SCHOOL
## Vue d'ensemble
Le design system N3WT-SCHOOL définit les tokens visuels et les conventions d'usage pour garantir une interface cohérente sur l'ensemble du produit.
---
## Couleurs
Les couleurs sont définies comme tokens Tailwind dans `Front-End/tailwind.config.js`.
| Token Tailwind | Valeur hex | Usage |
| -------------- | ---------- | -------------------------------------------------- |
| `primary` | `#059669` | Boutons principaux, CTA, éléments interactifs clés |
| `secondary` | `#064E3B` | Hover des éléments primaires, accents sombres |
| `tertiary` | `#10B981` | Badges, icônes d'accent, highlights |
| `neutral` | `#F8FAFC` | Fonds de page, surfaces, arrière-plans neutres |
### Règles d'usage
- **Ne jamais** utiliser les classes Tailwind brutes `emerald-*`, `green-*` pour les éléments interactifs. Utiliser les tokens (`primary`, `secondary`, `tertiary`).
- Les fonds décoratifs (gradients, illustrations) peuvent conserver les classes Tailwind standards.
- Les états de statut (success, error, warning, info) peuvent conserver leurs couleurs sémantiques (`green`, `red`, `yellow`, `blue`).
### Exemples
```jsx
// Bouton principal
// Texte accent
Voir plus
// Badge
Actif
// Fond de page
...
```
---
## Typographie
Les polices sont chargées via `next/font/google` dans `Front-End/src/app/layout.js` et exposées comme variables CSS.
| Rôle | Police | Token Tailwind | Usage |
| --------- | --------- | --------------- | ----------------------------------- |
| Headlines | `Manrope` | `font-headline` | `h1`, `h2`, `h3`, titres de section |
| Body | `Inter` | `font-body` | Paragraphes, contenu (défaut) |
| Labels | `Inter` | `font-label` | Boutons, labels de formulaires |
> `font-body` est appliqué par défaut sur ``. Il n'est donc pas nécessaire de l'ajouter manuellement sur chaque élément de texte courant.
### Exemples
```jsx
// Titre de page
Tableau de bord
// Sous-titre
Élèves
// Label de formulaire
```
---
## Rayon de bordure (Border Radius)
Arrondi subtil, niveau 1.
| Token Tailwind | Valeur | Usage |
| -------------- | ------ | ---------------------------------- |
| `rounded-sm` | `2px` | Éléments très petits (badges fins) |
| `rounded` | `4px` | Par défaut — boutons, inputs |
| `rounded-md` | `6px` | Cards, modales |
| `rounded-lg` | `8px` | Grandes surfaces |
> Éviter `rounded-xl` (12px) et `rounded-full` sauf pour les avatars ou indicateurs circulaires.
---
## Espacement
Espacement normal, base 8px (niveau 2). Utiliser les multiples de 4px/8px du système Tailwind standard.
| Classe | Valeur |
| ------ | ------ |
| `p-1` | 4px |
| `p-2` | 8px |
| `p-3` | 12px |
| `p-4` | 16px |
| `p-6` | 24px |
| `p-8` | 32px |
---
## Composants récurrents
### Bouton principal
```jsx
```
### Bouton secondaire
```jsx
```
### Card
```jsx
Titre
Contenu
```
### Badge de statut
```jsx
Actif
```
### Lien d'action
```jsx
Voir le détail
```
---
## Configuration Tailwind
Fichier : `Front-End/tailwind.config.js`
```js
theme: {
extend: {
colors: {
primary: '#059669',
secondary: '#064E3B',
tertiary: '#10B981',
neutral: '#F8FAFC',
},
fontFamily: {
headline: ['var(--font-manrope)', 'Manrope', 'sans-serif'],
body: ['var(--font-inter)', 'Inter', 'sans-serif'],
label: ['var(--font-inter)', 'Inter', 'sans-serif'],
},
borderRadius: {
DEFAULT: '4px',
sm: '2px',
md: '6px',
lg: '8px',
},
},
},
```
---
## Icônes
Toutes les icônes utilisent la bibliothèque **`lucide-react`** exclusivement.
```jsx
import { Home, User, ChevronRight } from 'lucide-react';
// Taille standard
// Avec label accessible
```
### Règles icônes
- **Toujours** importer depuis `lucide-react` — jamais d'autres bibliothèques d'icônes.
- Taille par défaut : `size={20}` (inline), `size={24}` (boutons standalone).
- Couleur : via `className="text-*"` — ne jamais utiliser le prop `color`.
- Icônes seules sans texte : ajouter `aria-label` ou wrapper `title` pour l'accessibilité.
---
## Responsive & PWA
L'interface est conçue **mobile-first** pour un usage PWA (Progressive Web App).
### Breakpoints Tailwind
| Préfixe | Largeur min | Contexte |
| -------- | ----------- | ------------------------ |
| _(base)_ | 0px | Mobile (priorité) |
| `sm:` | 640px | Grands mobiles/tablettes |
| `md:` | 768px | Tablettes |
| `lg:` | 1024px | Desktop |
### Principes responsive
- **Toujours** penser desktop en premier — les styles de base ciblent le desktop.
- Les sidebars passent en overlay sur mobile (`md:hidden` / `hidden md:block`).
- Les tableaux utilisent le mode `responsive-table` (classe utilitaire définie dans `tailwind.css`) sur mobile.
- Les grilles : commencer par `grid-cols-1`, étendre avec `sm:grid-cols-2 lg:grid-cols-3`.
- Les textes : tailles mobiles d'abord (`text-sm sm:text-base`), ne jamais forcer une grande taille sur mobile.
- Touch targets : minimum `44px × 44px` pour tous les éléments interactifs (`min-h-[44px]`).
### PWA
- Tous les écrans doivent fonctionner hors-ligne ou en mode dégradé (données en cache).
- Les interactions clés (navigation, actions principales) doivent être accessibles sans rechargement de page.
- Pas de contenu critique uniquement visible au survol (`hover:`) — prévoir une alternative tactile.
### Exemples responsive
```jsx
// Layout page