# 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 :

```sh
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`) :

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