La marque
Un T, un crayon,
et de la craie.
Toutes les valeurs ci-dessous sont celles du produit, pas une interprétation : elles viennent des mêmes fichiers que l'application.
Le signe
La barre du T est bleue. Sa hampe est un crayon, orange, pointe vers le bas — l'outil qui écrit au tableau. Le nom se lit donc deux fois : dans la lettre, et dans le geste.
La palette entière est dérivée de ce signe. C'est une règle, pas une préférence : l'application a porté une couleur étrangère au logo pendant des mois, et l'écart se remarquait en une seconde.
La palette
L'orange souligne, il ne recouvre pas : sur de grandes surfaces il écrase le bleu au lieu de le mettre en valeur.
#1A73E8Bleu — la barre du T
Couleur d'action
#12274ABleu nuit — la hampe
Fond de marque
#F5A31AOrange — le crayon
Accent, jamais surface
#1A202CArdoise — le tableau
Fond du canevas
Les deux écritures
Le contraste entre les deux est la marque : une plateforme sérieuse qui parle à la craie.
Inter — ce qui s'adresse aux adultes
Apprendre, réviser, progresser
Titres, textes institutionnels, interface.
Patrick Hand — ce qui est écrit au tableau
Addition posée · 6ème
Sous-titres de leçon, annotations, chiffres. Auto-hébergée : une police qui dépendrait du réseau casserait le rendu hors ligne.
Les chiffres
Ce ne sont pas des glyphes de police : ce sont des tracés enregistrés à la main, point par point, avec l'ordre des traits. Le site les rejoue exactement comme le produit.
Le mouvement
Une seule règle, et elle est absolue : rien ne dépasse sa cible. Les animations décélèrent et s'arrêtent. Pas de ressort, pas de rebond.
Ce n'est pas une question de goût. Un ressort dépasse mécaniquement dès que son amortissement passe sous un certain seuil — l'élément arrive, repart, revient. À l'échelle d'une interface entière, cela se lit comme un jouet. Le produit a retiré tous les siens ; le site n'en réintroduit pas.
cubic-bezier(0.22, 1, 0.36, 1)320 ms pour une apparition · 420 ms pour un grand mouvement