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>
Identité visuelle d'Ustagammon
Décision et historique des choix : ADR 0010 (docs/adr/0010-identite-visuelle.md).
Brief créatif : https://claude.ai/artifact/36WMwZWqvMxXvSSVBJTgwd
Les dessins de ce dossier sont sous licence CC BY-SA 4.0. Le logotype utilise des tracés de la police Alegreya Sans Bold (Juan Pablo del Peral, Huerta Tipográfica), sous licence SIL Open Font License 1.1.
Fichiers (logo/)
| Fichier | Usage |
|---|---|
symbole-couleur.svg |
Symbole seul, sur fond clair |
symbole-sombre.svg |
Symbole seul, sur fond sombre |
symbole-noir.svg, symbole-blanc.svg |
Monochromes, fond transparent |
logotype-*.svg |
Le nom seul, mêmes quatre déclinaisons |
logo-horizontal-*.svg |
Symbole et nom côte à côte, mêmes déclinaisons |
icone.svg, icone-192.png, icone-512.png |
Icône de la PWA (purpose: any) |
icone-maskable.svg, icone-maskable-192.png, icone-maskable-512.png |
Icône de la PWA (purpose: maskable), symbole dans la zone de sécurité |
apple-touch-icon-180.png |
Ajout à l'écran d'accueil sur iPhone (via le navigateur) |
favicon.svg, favicon-16.png, favicon-32.png, favicon-48.png |
Onglet du navigateur ; dessin simplifié, sans filets |
android-premier-plan.svg, android-arriere-plan.svg, android-monochrome.svg |
Couches de l'icône adaptative Android (canevas 108 dp), pour plus tard |
Couleurs du logo
| Rôle | Clair | Sombre |
|---|---|---|
| Noyer (pion maître) | #4A2E1F |
idem |
| Ivoire (pion apprenti, fond d'icône) | #F3EAD8 |
idem |
| Brique (flèche, filet, « mm ») | #A8432B |
#D0694B (flèches du logotype), #C9583C (flèche du symbole) |
| Texte du logotype | #2B1D15 |
#F3EAD8 |
Régénérer
Les fichiers sont versionnés ; il n'est utile de les régénérer qu'en cas de retouche du dessin. Il faut Python 3 avec fontTools (licence MIT) et la police Alegreya Sans Bold :
mkdir -p build/police
curl -sSLf -o build/police/AlegreyaSans-Bold.ttf \
https://github.com/google/fonts/raw/main/ofl/alegreyasans/AlegreyaSans-Bold.ttf
python3 -I docs/identite/generer-logo.py build/police/AlegreyaSans-Bold.ttf docs/identite/logo
Les PNG sont des rendus des SVG par Chrome sans interface
(google-chrome --headless --screenshot), à la taille indiquée dans leur nom.
Charte graphique
La charte complète (couleurs des deux thèmes, typographie, composants) est dans
charte/, avec les liens vers le design system et les maquettes d'écrans.