# 05 — Design system

## Objectif design

SALSABIL Madrassas doit avoir une apparence :
- professionnelle ;
- premium ;
- sobre ;
- islamique moderne ;
- responsive ;
- claire pour les administrateurs ;
- rassurante pour les parents et étudiants.

## Dashboard super-admin

Style :
- SaaS moderne ;
- clair ;
- professionnel ;
- tons neutres ;
- cartes statistiques ;
- tableaux propres ;
- badges de statut ;
- navigation latérale.

Couleurs recommandées :
- bleu nuit : #14213D
- vert profond : #1B7F5C
- doré : #C89B3C
- fond clair : #F7F8FA
- texte : #1F2937

Pages :
- dashboard ;
- écoles ;
- création école ;
- thèmes ;
- utilisateurs ;
- statistiques.

Composants :
- sidebar ;
- topbar ;
- cards ;
- tables ;
- filters ;
- badges ;
- buttons ;
- empty states ;
- modals.

## Dashboard école

Même design pour toutes les écoles, mais couleurs personnalisées.

Chaque école définit :
- couleur principale ;
- couleur secondaire ;
- couleur accent.

Ces couleurs doivent s’appliquer à :
- sidebar ;
- boutons ;
- badges ;
- titres ;
- cartes clés.

Le dashboard école doit être très lisible depuis téléphone et ordinateur.

Menu école :
- Tableau de bord
- Étudiants
- Inscriptions
- Paiements
- Classes
- Niveaux
- Sections
- Années scolaires
- Configuration
- Utilisateurs

## Pages publiques

Les pages publiques doivent être premium, simples et très lisibles.

Chaque thème public doit avoir :
- header ;
- hero ;
- sections ;
- CTA ;
- footer.

Les thèmes affichent les mêmes données, mais avec une composition différente.

## Blocs communs des pages publiques

### Header

Contenu :
- logo école ;
- nom école ;
- menu ;
- bouton inscription.

### Hero

Contenu :
- titre ;
- sous-titre ;
- image ou illustration ;
- CTA principal ;
- CTA secondaire.

### Présentation courte

Contenu :
- titre ;
- texte ;
- image optionnelle.

### Programmes

Contenu :
- sections actives de l’école.

### Niveaux / Classes

Contenu :
- niveaux ;
- classes visibles.

### Tarifs

Contenu :
- frais configurés.

### Statistiques

Contenu :
- nombre d’étudiants ;
- nombre de classes ;
- nombre de programmes ;
- années d’expérience.
Au début, ces statistiques peuvent être manuelles ou simples.

### CTA

Contenu :
- phrase d’encouragement ;
- bouton inscription ;
- bouton contact WhatsApp.

### Contact

Contenu :
- téléphone ;
- WhatsApp ;
- email ;
- adresse.

### Footer

Contenu :
- logo ;
- description courte ;
- liens ;
- contacts ;
- mention “Propulsé par SALSABIL Madrassas”.

## Responsive

Tous les designs doivent être adaptés à :
- mobile ;
- tablette ;
- desktop.

Priorité mobile :
- formulaire inscription ;
- page accueil ;
- dashboard école.

## Qualité visuelle attendue

Codex doit produire des vues :
- bien espacées ;
- avec une hiérarchie typographique claire ;
- avec des cartes modernes ;
- avec des boutons visibles ;
- avec des tableaux responsive ;
- sans surcharge ;
- sans design générique basique ;
- avec une finition premium.