Charte graphique : copie du design system #14

2026-11-03T00:22:22Z

pierre commented

2026-11-03 00:22:22 +00:00

Pourquoi

Après la fusion du logo (MR !12), il manquait de quoi appliquer l'identité à l'application. Le design system et les maquettes d'écrans ont été publiés sur claude.ai, mais un agent qui travaille dans le dépôt n'y a pas forcément accès. La règle du projet est aussi que rien d'important ne vit seulement hors du dépôt.

Quoi

docs/identite/charte/ contient une copie de travail du design system :

tokens.json : toutes les couleurs, en thème clair et en thème sombre, avec une note d'usage pour chacune, plus la typographie, les espacements et les arrondis ;
bundle.css : les styles des composants ;
guide-de-marque.md : les règles d'usage (ton, couleurs, typographie, formes, mouvement, icônes) ;
board.js : le dessin de référence du plateau ;
un README : les liens vers le design system (https://claude.ai/artifact/K2Z7MPE58XXJzv19n5r11M) et vers les maquettes (https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe), et les quatre étapes pour appliquer la charte à web/.

Le journal reçoit une entrée pour cette séance. Une coquille de l'ADR 0010 (« pour le logotype et, pour l'interface ») est corrigée ; le sens ne change pas.

L'application elle-même ne change pas.

Comment

Les couleurs du plateau reprennent exactement les noms de variables de web/app.css (--frame, --bed, --point-a, --checker-player…) : pour appliquer la charte, il suffit de remplacer leurs valeurs, sans rien renommer. De même, bundle.css reprend les noms de classes de l'app.

Tous les contrastes de texte ont été vérifiés par calcul (formule WCAG 2) : 4,5:1 au moins dans les deux thèmes. Pour les marques du plateau, l'exigence est 3:1 contre au moins un de leurs voisins. Par exemple, le contour brique d'un pion sélectionné se détache du pion ivoire en thème clair, et du fond du plateau en thème sombre. Le laiton du dernier coup a été assombri (#8F6A1C) pour atteindre 3,6:1 sur le fond clair.

Choix et compromis

C'est une copie, pas la source : en cas de changement, le design system sur claude.ai fait foi, et cette copie doit être mise à jour à la main.
Les maquettes proposent des éléments qui ne sont pas encore décidés : des leçons, un « Conseil du maître » sous le plateau, un bilan de fin de partie qui compte les erreurs. Rien de tout cela n'entre dans le dépôt : ce sont des propositions à valider par Pierre.

Risques et déploiement

Aucun : il n'y a que de la documentation. Pour revenir en arrière, il suffit d'annuler le commit de fusion.

Comment vérifier

make lint
make test
python3 -c "import json; json.load(open('docs/identite/charte/tokens.json'))"

Hors périmètre

L'application de la charte à web/ : couleurs, police embarquée, icônes du manifeste, logo dans la barre haute. Elle est à planifier pour l'agent développeur ; les étapes sont dans docs/identite/charte/README.md.

Generated with Claude Code (https://claude.com/claude-code)

## Pourquoi Après la fusion du logo (MR !12), il manquait de quoi appliquer l'identité à l'application. Le design system et les maquettes d'écrans ont été publiés sur claude.ai, mais un agent qui travaille dans le dépôt n'y a pas forcément accès. La règle du projet est aussi que rien d'important ne vit seulement hors du dépôt. ## Quoi `docs/identite/charte/` contient une copie de travail du design system : - `tokens.json` : toutes les couleurs, en thème clair et en thème sombre, avec une note d'usage pour chacune, plus la typographie, les espacements et les arrondis ; - `bundle.css` : les styles des composants ; - `guide-de-marque.md` : les règles d'usage (ton, couleurs, typographie, formes, mouvement, icônes) ; - `board.js` : le dessin de référence du plateau ; - un README : les liens vers le design system (https://claude.ai/artifact/K2Z7MPE58XXJzv19n5r11M) et vers les maquettes (https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe), et les quatre étapes pour appliquer la charte à `web/`. Le journal reçoit une entrée pour cette séance. Une coquille de l'ADR 0010 (« pour le logotype et, pour l'interface ») est corrigée ; le sens ne change pas. L'application elle-même ne change pas. ## Comment Les couleurs du plateau reprennent exactement les noms de variables de `web/app.css` (`--frame`, `--bed`, `--point-a`, `--checker-player`…) : pour appliquer la charte, il suffit de remplacer leurs valeurs, sans rien renommer. De même, `bundle.css` reprend les noms de classes de l'app. Tous les contrastes de texte ont été vérifiés par calcul (formule WCAG 2) : 4,5:1 au moins dans les deux thèmes. Pour les marques du plateau, l'exigence est 3:1 contre au moins un de leurs voisins. Par exemple, le contour brique d'un pion sélectionné se détache du pion ivoire en thème clair, et du fond du plateau en thème sombre. Le laiton du dernier coup a été assombri (#8F6A1C) pour atteindre 3,6:1 sur le fond clair. ## Choix et compromis - C'est une copie, pas la source : en cas de changement, le design system sur claude.ai fait foi, et cette copie doit être mise à jour à la main. - Les maquettes proposent des éléments qui ne sont pas encore décidés : des leçons, un « Conseil du maître » sous le plateau, un bilan de fin de partie qui compte les erreurs. Rien de tout cela n'entre dans le dépôt : ce sont des propositions à valider par Pierre. ## Risques et déploiement Aucun : il n'y a que de la documentation. Pour revenir en arrière, il suffit d'annuler le commit de fusion. ## Comment vérifier make lint make test python3 -c "import json; json.load(open('docs/identite/charte/tokens.json'))" ## Hors périmètre L'application de la charte à `web/` : couleurs, police embarquée, icônes du manifeste, logo dans la barre haute. Elle est à planifier pour l'agent développeur ; les étapes sont dans `docs/identite/charte/README.md`. Generated with Claude Code (https://claude.com/claude-code)

pierre added 1 commit 2026-11-03 00:22:23 +00:00

Charte graphique : copie du design system et journal f5d8d41a00

Couleurs des deux thèmes (mêmes noms que web/app.css), styles des
composants, guide de marque et dessin de référence du plateau dans
docs/identite/charte/, avec les liens vers le design system et les
maquettes d'écrans. Coquille corrigée dans l'ADR 0010.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

pierre merged commit 8e28e26c07 into main

2026-11-03 00:22:30 +00:00

pierre referenced this pull request

2026-11-03 03:56:55 +00:00

Charte graphique appliquée à l'application, passe d'ergonomie #18

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pierre/Ustagammon#14