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 |
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.