Pierre MARTINandClaude Opus 5.5
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>
Charte graphique d'Ustagammon
Copie de travail du design system, pour l'appliquer à la PWA sans dépendre d'un accès à claude.ai. La référence vivante, avec aperçus dans les deux thèmes :
- Design system : https://claude.ai/artifact/K2Z7MPE58XXJzv19n5r11M
- Maquettes des écrans (accueil, plateau, leçon, fin de partie, thème sombre) : https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe
Décisions : ADR 0010. Fichiers du logo et des icônes : ../logo/.
Fichiers
| Fichier | Contenu |
|---|---|
guide-de-marque.md |
Règles d'usage : ton, couleurs, typographie, formes, mouvement, icônes, composants |
tokens.json |
Toutes les valeurs, thèmes clair et sombre, avec une note d'usage par couleur |
bundle.css |
Styles des composants ; mêmes noms de classes que web/app.css |
board.js |
Dessin de référence du plateau (repère 640 × 520), pour comparaison |
Appliquer la charte à web/
- Couleurs : les variables du plateau de
web/app.css(--frame,--bed,--point-a,--checker-player…) ont les mêmes noms danstokens.json; reprendre leurs valeurs, thème clair dans:root, thème sombre dans le blocprefers-color-scheme: dark. Remplacer l'accent vert provisoire par la brique (--accent,--highlight,--target) et ajouter les couleurs nouvelles (surface,accent-soft,verdict-*,focus,last-moveen laiton). - Police : embarquer Alegreya Sans (Regular, Italic, Medium, Bold,
ExtraBold) dans
web/, avec sa licence OFL, en@font-face, et l'ajouter au cache du service worker (hors ligne). - Composants : reprendre de
bundle.cssles boutons ronds (radius-pill), le filet intérieur des pions, l'anneau de focus et la zone de consigne. - Icônes et logo : remplacer
web/icons/par les fichiers de../logo/(icônes any et maskable, favicon), mettre le logo horizontal dans la barre haute, et la couleurtheme-colordu manifeste à#4A2E1F.
Les contrastes de tous les textes ont été vérifiés par calcul (4,5:1 au moins dans les deux thèmes) ; les marques du plateau, à 3:1 contre au moins un de leurs voisins.