Pierre MARTINandClaude Opus 5.5
d5f08fe393
Recette de 1f (F1, F2). Depuis la feuille du maître ou le bilan, la page du prompt prend la place de leur contenu, à la même hauteur, avec « ‹ Explication » ou « ‹ Bilan » pour revenir ; depuis l'analyse et le glossaire, elle monte dans sa propre feuille. La croix et « Fermer » ferment la feuille. Plus de bandeau « Prompt copié » : le bouton passe à « ✓ Copié » (verdict-good) 2 s. Test navigateur : une poignée, une croix, un titre, même hauteur, retour du téléphone, couleur du bouton. Charte et amendement de l'ADR 0013 mis à jour. 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 |
ecrans-etape-1.md |
Écrans de l'étape 1, lot par lot : nouvelle partie et match (1c), conseil du maître (1d), bilan et analyse (1e), IA (1f), leçons (1g), progression (1h), gestes (1i) |
accueil-tutoriel-aide.md |
Accueil, installation sans intrusion, tutoriel des règles (forme et première version du texte), aide en questions |
recette-ux.md |
Critères de recette design de l'écran de jeu, à cocher sur les captures et sur le téléphone |
interaction.md |
Comportement : réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l'écran de jeu (portrait, paysage, ordinateur), pictogrammes |
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.