pierre/Ustagammon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Identité visuelle : logo, icônes et ADR 0010 #12

Merged
pierre merged 0 commits from identite into main 2026-11-03 00:05:08 +00:00
Conversation 0 Commits - Files Changed -
pierre commented 2026-11-03 00:01:30 +00:00
Owner
Copy Link
Copy Source

Pourquoi

Le brief créatif (https://claude.ai/artifact/36WMwZWqvMxXvSSVBJTgwd) demandait un symbole, un logotype, des icônes et une palette définitive avant d'appliquer une charte à l'application. Jusqu'ici, rien de l'identité n'existait dans le dépôt : l'agent qui développe le plateau (étape 0d.2) n'avait aucune référence visuelle à appliquer.

Le choix s'est fait en trois tours avec Pierre, le 2 et le 3 novembre 2026, sur une planche de travail : https://claude.ai/artifact/Cck1SZCrKeYWbqJLhbwWNp. Chaque proposition y était montrée en couleur, en monochrome et en taille réelle d'icône (48 et 24 px).

Quoi

  • L'ADR 0010 consigne les choix de Pierre : l'accent rouge brique ; le symbole « P3d », deux pions de trois quarts posés sur une flèche brique, dont les silhouettes dessinent le 8 de l'Atelier du Huit ; le logotype « L3 », où les deux « m » sont dessinés en quatre flèches au trait qui alternent noyer et brique ; l'icône sur fond ivoire.
  • docs/identite/logo/ contient les fichiers prêts à l'emploi :
    • symbole, logotype et logo horizontal, chacun en couleur, en couleur pour fond sombre, en noir et en blanc ;
    • icônes de la PWA (any et maskable, en 192 et 512 px) ;
    • icône pour l'iPhone (apple-touch-icon) ;
    • favicons ;
    • couches de l'icône adaptative Android.
  • docs/identite/README.md explique le rôle de chaque fichier, donne les couleurs du logo et la commande pour régénérer les fichiers.
  • CREDITS.md crédite la police Alegreya Sans (OFL) et fontTools (MIT).

Le comportement de l'application ne change pas : aucun fichier de web/ n'est modifié.

Comment

Le dessin est décrit par du code, dans docs/identite/generer-logo.py :

  • le symbole est fait de formes géométriques simples (triangle, ellipses, arcs) dans une boîte de 64 unités ;
  • le texte du logotype est converti en tracés à partir de la police, avec fontTools, pour que les SVG ne dépendent d'aucune police installée ;
  • les flèches des « mm » sont calculées comme des polygones (trait épais, sommet en onglet, pieds coupés sur la ligne de base), et non comme des traits rognés, pour que le fichier reste simple et convertible plus tard en icône Android ;
  • les versions monochromes utilisent un masque SVG : l'intérieur des pions reste transparent au lieu d'être peint dans une couleur de fond.

Les PNG sont des rendus des SVG par Chrome en mode sans interface (headless).

Choix et compromis

  • Les fichiers produits sont versionnés, mais le générateur n'est pas branché sur make : il ne sert qu'en cas de retouche du dessin, et l'intégrer à make demanderait une image Docker de plus, avec fontTools.
  • Le favicon utilise un dessin simplifié, sans les filets, qui ne se distinguent plus en dessous de 32 px.
  • Les couches Android restent en SVG ; leur conversion en VectorDrawable se fera avec l'application Android.

Risques et déploiement

Aucun risque pour l'application, qui n'utilise pas encore ces fichiers. Pour revenir en arrière, il suffit d'annuler le commit de fusion.

Comment vérifier

make lint
make test
xdg-open docs/identite/logo/logo-horizontal-couleur.svg

Hors périmètre

  • Le branchement des icônes dans le manifeste de la PWA, et l'embarquement de la police dans web/. C'est à faire par l'agent développeur, à partir du design system.
  • Le design system et les maquettes d'écran (accueil, plateau, leçon, fin de partie), qui seront l'étape suivante.

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

## Pourquoi Le brief créatif (https://claude.ai/artifact/36WMwZWqvMxXvSSVBJTgwd) demandait un symbole, un logotype, des icônes et une palette définitive avant d'appliquer une charte à l'application. Jusqu'ici, rien de l'identité n'existait dans le dépôt : l'agent qui développe le plateau (étape 0d.2) n'avait aucune référence visuelle à appliquer. Le choix s'est fait en trois tours avec Pierre, le 2 et le 3 novembre 2026, sur une planche de travail : https://claude.ai/artifact/Cck1SZCrKeYWbqJLhbwWNp. Chaque proposition y était montrée en couleur, en monochrome et en taille réelle d'icône (48 et 24 px). ## Quoi - L'ADR 0010 consigne les choix de Pierre : l'accent rouge brique ; le symbole « P3d », deux pions de trois quarts posés sur une flèche brique, dont les silhouettes dessinent le 8 de l'Atelier du Huit ; le logotype « L3 », où les deux « m » sont dessinés en quatre flèches au trait qui alternent noyer et brique ; l'icône sur fond ivoire. - `docs/identite/logo/` contient les fichiers prêts à l'emploi : - symbole, logotype et logo horizontal, chacun en couleur, en couleur pour fond sombre, en noir et en blanc ; - icônes de la PWA (any et maskable, en 192 et 512 px) ; - icône pour l'iPhone (apple-touch-icon) ; - favicons ; - couches de l'icône adaptative Android. - `docs/identite/README.md` explique le rôle de chaque fichier, donne les couleurs du logo et la commande pour régénérer les fichiers. - `CREDITS.md` crédite la police Alegreya Sans (OFL) et fontTools (MIT). Le comportement de l'application ne change pas : aucun fichier de `web/` n'est modifié. ## Comment Le dessin est décrit par du code, dans `docs/identite/generer-logo.py` : - le symbole est fait de formes géométriques simples (triangle, ellipses, arcs) dans une boîte de 64 unités ; - le texte du logotype est converti en tracés à partir de la police, avec fontTools, pour que les SVG ne dépendent d'aucune police installée ; - les flèches des « mm » sont calculées comme des polygones (trait épais, sommet en onglet, pieds coupés sur la ligne de base), et non comme des traits rognés, pour que le fichier reste simple et convertible plus tard en icône Android ; - les versions monochromes utilisent un masque SVG : l'intérieur des pions reste transparent au lieu d'être peint dans une couleur de fond. Les PNG sont des rendus des SVG par Chrome en mode sans interface (headless). ## Choix et compromis - Les fichiers produits sont versionnés, mais le générateur n'est pas branché sur `make` : il ne sert qu'en cas de retouche du dessin, et l'intégrer à `make` demanderait une image Docker de plus, avec fontTools. - Le favicon utilise un dessin simplifié, sans les filets, qui ne se distinguent plus en dessous de 32 px. - Les couches Android restent en SVG ; leur conversion en VectorDrawable se fera avec l'application Android. ## Risques et déploiement Aucun risque pour l'application, qui n'utilise pas encore ces fichiers. Pour revenir en arrière, il suffit d'annuler le commit de fusion. ## Comment vérifier make lint make test xdg-open docs/identite/logo/logo-horizontal-couleur.svg ## Hors périmètre - Le branchement des icônes dans le manifeste de la PWA, et l'embarquement de la police dans `web/`. C'est à faire par l'agent développeur, à partir du design system. - Le design system et les maquettes d'écran (accueil, plateau, leçon, fin de partie), qui seront l'étape suivante. Generated with Claude Code (https://claude.com/claude-code)
pierre added 1 commit 2026-11-03 00:01:30 +00:00
Identité visuelle : logo, icônes et ADR 0010 1c722cca9f 
Symbole P3d (deux pions sur une flèche brique), logotype L3 (« mm » en
flèches alternées), accent brique, icône sur fond ivoire, choisis par
Pierre. Fichiers SVG et PNG dans docs/identite/logo/, générateur et notice.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
pierre merged commit 65551098db into main 2026-11-03 00:05:08 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
pierre (Pierre Martin)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: pierre/Ustagammon#12