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.
Police de l'application
web/fonts/ contient Alegreya Sans en cinq graisses, réduite aux caractères
latins (français compris) et convertie en woff2, soit 143 Ko au lieu de
1,3 Mo en TTF. Pour la refaire, depuis les TTF de
https://github.com/google/fonts/tree/main/ofl/alegreyasans (Python 3,
fontTools et brotli, par exemple dans l'image emscripten/emsdk) :
pip install fonttools brotli
for f in Regular Italic Medium Bold ExtraBold; do
python3 -m fontTools.subset AlegreyaSans-$f.ttf \
--output-file=web/fonts/AlegreyaSans-$f.woff2 --flavor=woff2 \
--unicodes="U+0020-007E,U+00A0-00FF,U+0152-0153,U+0178,U+02BC,U+02C6,U+02DC,U+2009,U+2011,U+2013-2014,U+2018-201E,U+2022,U+2026,U+202F,U+2039-203A,U+20AC,U+2192,U+2212" \
--layout-features='*' --name-IDs='*' --name-languages='*'
done
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.