Revise Mieux — Design System

Fondations d'un design system intergenerationnel pour collegiens (11-15 ans) et parents. Sobre, moderne, expressif par les donnees.

Clair. Capable. Progressif.
P

Principes de design

1

La progression, pas le jugement

Chaque element visuel communique "ou tu en es" et "ou tu vas", jamais "ou tu devrais etre".

Exemple La MasteryBar affiche les 4 segments proportionnellement. Un eleve a 30% voit une barre qui "avance".
Contre-exemple Un gros "30%" rouge avec "Insuffisant". Un classement ou une comparaison avec une moyenne.
2

Clair avant beau

En cas de conflit entre esthetique et clarte, la clarte gagne. Un eleve de 12 ans distrait doit comprendre en 2 secondes.

Exemple UNE action principale par contexte : "Reviser Physique-Chimie -- 15 min" avec un bouton visible.
Contre-exemple 6 cartes de taille egale, 3 badges, 2 notifs et un graphique : l'eleve ne sait pas par ou commencer.
3

Sobre dehors, riche dedans

L'interface est epuree en surface mais revele de la profondeur quand on explore.

Exemple La carte chapitre affiche nom + MasteryBar + %. Un tap revele le detail par notion.
Contre-exemple Toutes les stats sur la premiere page : items FRAGILE, UNKNOWN, score moyen, ecart-type...
4

Respecter l'autonomie

L'eleve est acteur de sa revision. Le parent est informe, pas aux commandes.

Exemple "3 points progressent vers SOLID -- tu peux continuer ou reprendre demain."
Contre-exemple Forcer une session au demarrage. Envoyer au parent un recap en temps reel de chaque reponse.
5

Un langage visuel, deux audiences

Memes couleurs Mastery, memes composants pour eleve et parent. Ce qui change : la densite et le ton.

Exemple L'eleve voit "12 points SOLID". Le parent voit "Maitrise : 60% (12/20 bien acquis)". Meme barre verte.
Contre-exemple Un theme "enfant" colore et un theme "parent" gris. Termes differents pour les memes concepts.
6

Le minimum qui fonctionne

Chaque element doit justifier sa presence. Le design system croit par besoin, pas par anticipation.

Exemple Lot 0 : MasteryBar, badges, boutons, cards. Ca suffit pour que l'eleve revise et que le parent comprenne.
Contre-exemple Systeme de themes complet "parce qu'on en aura besoin plus tard". 12 variantes de bouton.
C

Systeme de couleurs

Primaire
Copie !
50
#F0F6FC
Copie !
100
#E6F0FA
Copie !
400
#6BA3E3
Copie !
500
#4A90D9
Copie !
600
#3A7BC8
Secondaire
Copie !
100
#F0ECFE
Copie !
400
#9478FD
Copie !
500
#7C5CFC
Copie !
600
#6344E5
Semantiques systeme
Copie !
Success
#2ECC71
Copie !
Warning
#F5A623
Copie !
Error
#E74C3C
Copie !
Info
#4A90D9
Couleurs Mastery — Coeur du produit

Les 4 couleurs semantiques qui forment le langage visuel universel de la progression.

?
UNKNOWN
NOUVEAU
Pas encore vu
Neutre. C'est un point de depart, pas un manque.
~
FRAGILE
EN COURS
En cours
Attention douce. "Ca avance", pas "attention danger".
✓
OK
COMPRIS
Compris
Encourageant. C'est sur la bonne voie.
★
SOLID
ACQUIS
Bien acquis
Accomplissement. Satisfaction calme, pas euphorie.
Confiance OCR
Haute (> 0.9) #2ECC71
Moyenne (0.7-0.9) #F5A623
Basse (< 0.7) #E74C3C
En attente de validation HITL — bordure pointillee violette
Mode clair vs mode sombre

Mode clair

UNKNOWN
#9E9E9E
FRAGILE
#F5A623
OK
#4A90D9
SOLID
#2ECC71
Fond: #FBF8F3 · Surface: #FFFFFF · Texte: #1A1A2E

Mode sombre

UNKNOWN
#757575
FRAGILE
#D4901F
OK
#5B9FE0
SOLID
#27AE60
Fond: #121212 · Surface: #1E1E1E · Texte: #E0E0E0
T

Typographie

Font principale : Inter — concue pour les ecrans, x-height elevee, support FR complet. C'est la font de Notion, Linear, Vercel.

display
36px / 700 / lh 42 / ls -0.5
72%
h1
32px / 700 / lh 38 / ls -0.3
Bonjour Hugo
h2
22px / 700 / lh 28 / ls -0.2
Physique-Chimie
h3
18px / 600 / lh 24
Masse, volume et densite
body
16px / 400 / lh 22
La densite d'un materiau est le rapport entre sa masse et son volume.
label
14px / 700 / lh 18 / ls +1 / UPPER
Physique-chimie
caption
14px / 400 / lh 18
12 items · Derniere session il y a 2 jours
small
12px / 400 / lh 16
Mis a jour le 3 avril 2026
Traitement du contenu pedagogique

Definitions

Densite
Rapport entre la masse d'un corps et le volume qu'il occupe. S'exprime en kg/m3 ou g/cm3.

Formules

ρ = m / V

Termes-cles

densite masse volumique flottabilite kg/m3

OCR incertain (confiance < 0.85)

La masse du liquide est de 2,5 kg pour un volume de 0,003 m3.
K

Composants

Boutons

Un seul bouton primary par ecran. Taille tactile minimum : 44px.

Carte chapitre avec MasteryBar

Physique-Chimie
Masse, volume et densite
Acquis 30% Compris 25% En cours 20% Nouveau 25%
20 items · Derniere session il y a 1 jour

MasteryBar animee

Les segments s'animent au scroll pour illustrer la progression.

Maitrise globale
0%
Acquis Compris En cours Nouveau

Quiz — question et feedback

Question 3 / 10
Quelle est la formule de la densite ?
ρ = m / V
ρ = V / m
ρ = m × V
ρ = m + V

Alertes

i
Tes revisions t'attendent — 8 points a revoir en Physique-Chimie.
!
2 items ont une confiance OCR basse. Un parent peut les verifier dans l'espace validation.
×
L'envoi a echoue. Reessaie ou verifie ta connexion.

Empty state

Aucun cours pour l'instant

Commence par prendre en photo une page de cours pour creer ton premier chapitre.

!

Do / Don't

Trop enfantin vs bien equilibre

❌ Ne pas faire

  • Mascotte animee qui reagit aux reponses (hibou qui pleure/saute)
  • Palette bonbon : rose pastel, vert menthe, violet bubblegum, emojis partout
  • Confettis, etoiles dorees, animations "level up" avec fanfare
  • Langage surjoue : "WOOOW GENIAL ! Tu es un SUPER HERO !"

✅ Faire

  • Dashboard avec MasteryBar, "Bonjour Hugo", un gros "72%", bouton "Reviser"
  • Palette equilibree : fond cream, touches de bleu et vert semantiques
  • Micro-celebration : la barre pulse une fois, un check apparait
  • Feedback sobre : "Bien joue" ou "Progres : 1 point de plus vers OK"
Trop froid vs bien equilibre

❌ Ne pas faire

  • Interface grise monochrome, tableaux de donnees, zero couleur
  • Donnees brutes : "Items FRAGILE: 7, Score moyen: 0.43, Ecart-type: 0.21"
  • Feedback apres erreur : "Incorrect." sans explication
  • Ton distant : "L'utilisateur n'a pas complete la session planifiee."

✅ Faire

  • Couleurs Mastery comme systeme semantique lisible et expressif
  • Digest parent : "65% de maitrise (+8%). 2 points fragiles : densite, unites."
  • Feedback quiz : bonne reponse en vert clair + explication courte
  • Notification : "Tes revisions t'attendent" (pas "Session non completee")
Trop gamifie vs bien equilibre

❌ Ne pas faire

  • Systeme de points XP, boutique de themes, monnaie virtuelle
  • Streaks : "SERIE PERDUE" en rouge quand on rate un jour
  • Classement : "Tu es 3eme ! Depasse Clara !"
  • Defi quotidien force avec timer clignotant

✅ Faire

  • Decompte d'items maitrises : "12 points bien acquis sur 20"
  • Message encourageant en fin de session : "3 points de plus vers SOLID"
  • Progression visible via MasteryBar, pas via un systeme de recompense
  • L'eleve choisit quand reviser, pas de mecanisme de culpabilisation
Trop institutionnel vs bien equilibre

❌ Ne pas faire

  • Interface type ENT/Pronote : menus textuels, tableaux, Times New Roman
  • Jargon educatif : "Competences transversales", "Evaluation formative"
  • Arborescence rigide : Matiere > Theme > Competence > Exercice
  • Notification administration : "Votre enfant doit completer l'evaluation."

✅ Faire

  • Navigation simple : dashboard > chapitre > session. 3 niveaux max.
  • Langage quotidien : "points", "compris", "acquis", pas de jargon
  • L'eleve voit SES progres, pas un programme a remplir
  • Notification invitation : "8 points a revoir en Physique-Chimie"
M

Moodboard — Apps de reference

Zone cible : entre Spotify et Apple Health. Moderne, colore par les donnees, sobre dans la structure.

Notion
Productivite & notes — populaire chez les etudiants
Ce qu'on emprunte
  • Proprete visuelle, hierarchie typo forte
  • Neutralite elegante, le contenu parle
  • Feeling "outil serieux mais agreable"
  • Icones outline fines, coherentes
Ce qu'on evite
  • Complexite structurelle (trop de concepts)
  • Froideur et absence de gamification
Duolingo
Apprentissage langues — reference gamification educative
Ce qu'on emprunte
  • Clarte de la progression
  • Micro-sessions de 10-15 min
  • Feedback immediat
  • Barres de progression colorees
Ce qu'on evite
  • La mascotte (Duo le hibou toxique)
  • Les streaks et la culpabilisation
  • L'esthetique enfantine
  • La gamification comme fin en soi
Spotify
Streaming musical — utilise par la majorite des ados
Ce qu'on emprunte
  • Dark mode comme identite
  • Typographie bold, contrastes forts
  • Interface epuree en immersion (quiz)
  • Sentiment de personnalisation
Ce qu'on evite
  • L'absence de structure dirigee
  • Le scroll infini / feed algorithmique
  • La densite de l'ecran d'accueil
Apple Health
Suivi sante & activite physique
Ce qu'on emprunte
  • Visualisation des donnees accessible
  • Ton rassurant, sans jugement
  • Credibilite data pour le parent
  • Resume concis : highlights en haut
Ce qu'on evite
  • Esthetique trop "adulte-health"
  • Surabondance de metriques (50+ cat.)
Linear
Gestion de projet — design exceptionnel
Ce qu'on emprunte
  • Animations subtiles et satisfaisantes
  • Palette contenue + accents forts
  • Systeme de statuts colores (= Mastery)
  • Performance percue
Ce qu'on evite
  • Complexite fonctionnelle
  • Densite d'information trop haute
  • Absence d'emotion
S

Scalabilite

Le design system est un ensemble de curseurs, pas de versions. Passer du college au lycee = ajuster des parametres.

Les 5 curseurs par phase
Curseur College (Lot 0) Lycee (V2) Post-bac (V3)
Densite
2/10 — leger
4/10
7/10 — dense
Celebration
6/10 — expressif
4/10
2/10 — sobre
Ton
7/10 — encourageant
5/10
3/10 — neutre
Rondeur
7/10 — arrondi
6/10
4/10 — angulaire
Couleur
6/10 — colore
5/10
3/10 — monochrome
Invariants de marque (ne changent JAMAIS)
Les 4 couleurs Mastery et leur signification
Le bleu primaire comme couleur de confiance
Pas de gamification lourde : pas de streaks, XP, classements
Ton non-culpabilisant dans toutes les interactions
Separation eleve/parent dans les espaces
MasteryBar comme composant central de progression
Labels Mastery par audience
EtatCollegeLyceePost-bac
UNKNOWNNOUVEAUNOUVEAUUNKNOWN
FRAGILEEN COURSEN COURSFRAGILE
OKCOMPRISCOMPRISOK
SOLIDACQUISACQUISSOLID