Design System
Préférences UI du projet, appliquées pendant la construction, pas après. Écrire une UI sans consulter reference.md enfreint la règle de la surface plate avant même qu'une étape ne soit lancée ; les règles sont le contenu de reference.md, chargé en premier.
Étapes
- Lire les règles, puis l'UI existante. Prendre les règles de style dans reference.md, puis déterminer ce que la base de code utilise déjà — sa police, sa palette, son pack d'icônes et son arrondi déjà choisis. Fait-quand : les règles sont nommées dans le plan d'implémentation ; chaque règle déjà présente dans la base de code est respectée, pas actualisée.
- Espacer avant de border. Séparer les éléments par des espaces blancs ; une bordure n'est ajoutée que lorsque l'espacement manque. Fait-quand : chaque limite d'élément est rendue uniquement par de l'espace ; les bordures n'existent que là où le plan explique pourquoi l'espacement était insuffisant.
- Couleur en trois bandes. Attribuer neutre → 80 %, secondaire → 20 %, accent → 10 % par surface avant d'écrire les styles ; un bouton pastille ou badge est l'endroit où l'accent prend sa place. Fait-quand : les contrôles et le texte s'affichent en un ou deux tons neutres seulement ; l'accent apparaît au maximum une fois par vue.
- Vérifier la réactivité et la lisibilité. Tester la vue à une largeur mobile avant de la déclarer stylée ; le texte proche du noir pur ou du blanc pur s'éloigne des extrêmes. Fait-quand : la mise en page mobile tient sans défilement horizontal ; chaque couleur de texte est un ton hors extrême.
- Adapter les icônes. Détecter la bibliothèque d'icônes du projet et réutiliser une unité de celle-ci partout où elle apparaît. Fait-quand : une icône a été choisie selon les règles et aucun nouvel ensemble d'icônes n'a été introduit.
Référence
- reference.md — les onze règles de style, la répartition des couleurs et la règle d'un seul ensemble complet d'icônes. Pointer les connaissances ici ; ce fichier ne doit jamais être adapté.