Fondations

Les fondations sont les décisions qu'on ne rediscute pas à chaque page de Tutorat Pro.

Le bleu d'action reste #0165BF. Les titres sont en Poppins. Le texte courant est en Inter. La marge ne change pas selon l'humeur du fichier.

Si une maquette invente une nouvelle couleur pour « faire joli », elle n'entre pas. On ouvre d'abord la couleur, puis la typographie.

Écran simple sur fond blanc, un seul bouton bleu — Un écran de Tutorat Pro tient sur peu d'éléments. Le bouton bleu est l'action. Le reste reste calme.

Comment s'en servir

On part du thème Clair. C'est celui des pages publiques, celles qu'une famille ouvre le soir pour réserver.

Sombre sert aux longues lectures internes. Accent sert au moment où il faut montrer la suite, et faire taire le reste de l'écran. Les trois thèmes partagent les mêmes composants.

Ensuite seulement, on pose un bouton. Un verbe, un objet. Pas deux actions primaires sur la même ligne.

Jetons de design

Un jeton est un nom stable. La valeur change selon Clair, Sombre ou Accent. On n'écrit plus #0165BF à la main dans une page.

JetonsDes noms stables pour les couleurs, les espaces et les élévations.

Lignes directrices

L'accessibilité et le contenu décident si une famille peut finir une demande de cours. Le contraste et le libellé passent avant le décor.

AccessibilitéLe clavier, le contraste et les noms accessibles font partie du système.ContenuDes phrases courtes, un verbe clair, le ton de Tutorat Pro.

Styles

Couleur, typo, espace, grille, mouvement, icônes, illustrations, logo. Ce sont les décisions visuelles déjà prises pour Tutorat Pro.

EspacementUne échelle d'espaces pour aligner les blocs sans deviner.GrilleUne grille pour poser le contenu dans la zone principale.CouleurLe bleu d'action, les neutres, et les couleurs de statut.TypographieInter pour lire, Poppins pour les titres.MouvementDes transitions courtes, qui se taisent si l'utilisateur le demande.IconographieDes icônes Lucide, simples, sur fond clair.IllustrationsDes compositions sur fond blanc, sans ombre lourde.LogosLe mot-symbole Tutorat Pro et l'espace blanc autour.ÉlévationUne ombre légère pour séparer une surface, pas pour décorer.BordureBêtaUn filet gris pour découper les cartes et les champs.RayonBêtaLes coins restent à 8 pixels, partout.

Le service de cours reste sur tutoratpro.com. Les fondations servent à ce que ce site, et les suivants, gardent le même visage.