mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-04-05 20:51:26 +00:00

Files

Luc SORIGNET cb76a23d02 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-04 11:56:19 +02:00

3.4 KiB

Raw Blame History

applyTo

applyTo
Front-End/src/**

Design System — Règles Copilot

Référence complète : 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

// 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

// 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.

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:.

// 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éé

3.4 KiB Raw Blame History