# Identité Lion
Identité visuelle commune à tous mes projets web : **QG** (tâches, achats, notes, idées), **toolbox** (installation de logiciels et d'applis), le **site perso**, et les suivants (agenda, chocht…). Le but : qu'on reconnaisse tout de suite qu'un site fait partie de la famille, tout en laissant à chaque projet sa propre couleur.
Inspirations : le lion de Lyon, le rouge et le bleu de l'Olympique Lyonnais, adoucis en tons pastel.
## Principes
1. **Un lion, un projet, une couleur.** Chaque logo, c'est le pictogramme du projet au trait, avec le lion qui entre par sa paroi gauche, le tout dans une seule couleur.
2. **Net mais doux.** Le lion est anguleux et féroce, la palette est douce, et la crème remplace le blanc pur en fond de page.
3. **Sobre.** Sur un écran : la crème, l'encre pour le texte, la couleur du projet et au plus un accent rouge. Pas de dégradé, pas d'ombre forte, pas d'emoji dans l'interface.
## Logo
Tout est dans la section **Logo** : construction, fichiers, zone de protection, tailles minimales et interdits. En résumé :
- version couleur sur fond clair, version crème sur fond sombre ;
- en dessous de 48px, on utilise la version favicon (sans texture, trait plus épais) ;
- pictogramme et lion toujours dans la même couleur.
## Couleurs
La palette part du rouge et du bleu de l'OL, en quatre ou cinq nuances chacun, plus trois neutres chauds.
| Famille | Nuances, du plus clair au plus foncé |
| --- | --- |
| Rouge | Brume `#FADCDD` · Rose `#F2A3A6` · Corail `#E4676E` · Brique `#BF4650` |
| Bleu | Ciel `#DCE6F5` · Pervenche `#9DB5DD` · Azur `#5B7FC0` · Marine `#2F4B85` · Encre `#1B2A4A` |
| Neutres | Crème `#FAF7F2` · Sable `#F1ECE3` · Pierre `#5A6178` |
Dans le code, on n'utilise **jamais** les noms de palette directement pour l'interface : on passe par les tokens de rôle, qui changent tout seuls en thème sombre.
| Rôle | Token | Clair | Sombre |
| --- | --- | --- | --- |
| Fond de page | `surface` | Crème | `#141F38` |
| Cartes, champs | `surface-raised` | Blanc | Encre |
| Texte | `ink` / `ink-muted` | Encre / Pierre | Crème / `#B8C3DA` |
| Action principale | `primary` | Marine | Pervenche |
| Accent (rare) | `accent` | Brique | Rose |
| Focus clavier | `focus-ring` | Azur | Pervenche |
**Couleur de projet** : chaque site déclare sa couleur une seule fois, `:root { --project: var(--project-qg); }`, et l'en-tête, le soulignement de navigation et le logo la reprennent.
| Projet | Token | Couleur |
| --- | --- | --- |
| QG | `project-qg` | Marine |
| toolbox | `project-toolbox` | Brique |
| site perso | `project-site-perso` | Encre |
| agenda (à venir) | `project-agenda` | Azur |
| chocht (à venir) | `project-chocht` | Corail, sur fond sombre |
Contrastes : tous les couples texte / fond des tokens dépassent 4,5:1 dans les deux thèmes ; les bordures de champs et le focus dépassent 3:1. Corail et Azur ne servent pas pour du texte fin sur fond clair.
## Typographie
Trois familles Google Fonts, à charger une fois :
```html
```
- **Outfit** (titres) : géométrique et arrondie, en écho aux pictogrammes. Graisse 600.
- **Inter** (texte) : lisible à toutes les tailles. 400 pour le texte, 600 pour l'emphase et les boutons.
- **JetBrains Mono** (code) : commandes et scripts, surtout dans toolbox.
Échelle : `display` 56 · `h1` 40 · `h2` 30 · `h3` 22 · `body-lg` 18 · `body` 16 · `small` 14 · `label` 12 (capitales). Le corps de texte ne descend jamais sous 14px.
## Espacements et formes
- Grille de **4px** : `space-1` (4) à `space-16` (64).
- Coins : `radius-sm` 8px pour les champs, `radius-md` 10px pour les boutons, `radius-lg` 16px pour les cartes, `radius-full` pour les badges.
- Ombres légères (`shadow-1`, `shadow-2`) teintées Encre ; la profondeur vient d'abord des surfaces.
- Icônes au trait de 2px sur une grille de 24px, bouts arrondis, comme le pictogramme des logos (Lucide ou Tabler conviennent).
## Composants
Les composants sont en **HTML + CSS** (classes préfixées `lion-`, dans `components/bundle.css`) pour pouvoir s'utiliser avec React, Express ou du HTML simple.
- **Button** : principal, accent, secondaire, fantôme, danger.
- **Input** : champ avec libellé, aide et état d'erreur.
- **Card** : bloc de contenu, statique ou cliquable.
- **Badge** : pastille de catégorie ou de statut.
- **SiteHeader** : l'en-tête commun, logo et nom aux couleurs du projet.
## Mise en place dans un site
Les fichiers sont servis depuis **https://design.chauchoy.fr/v1/** (repo `identite-lion`). On les **lie**, on ne les copie jamais dans un projet.
```html
```
- `tokens.css` contient les variables de cette charte, `lion.css` les composants (`components/bundle.css` ici).
- Logos : `https://design.chauchoy.fr/v1/logos/.svg`, `-creme.svg` et `-favicon.svg`.
- Thème sombre : `data-theme="dark"` sur ``.
- Aucune couleur en dur dans le code d'un projet : toujours les variables (`--primary`, `--ink`, `--surface`…).
## Ton
Français, tutoiement, phrases courtes et concrètes. Les boutons commencent par un verbe (« Ajouter une tâche », « Installer la sélection »). Les messages d'erreur disent comment corriger.
# Logo
## Construction
Chaque logo assemble deux éléments, dans une seule couleur :
1. **Le pictogramme du projet**, au trait de 4,5 sur une grille de 120 × 120, bouts et angles arrondis : un fort avec drapeau pour QG, une boîte à outils pour toolbox, une fenêtre de code pour le site perso.
2. **Le lion de profil**, tourné vers la droite, à l'échelle 0,7, trait anguleux (angles vifs) : gueule ouverte avec deux crocs, barbiche en pointe, crinière en arc séparée du visage par un zigzag et texturée de quatre traits fins (moitié de l'épaisseur du contour).
La **paroi gauche du pictogramme est ouverte** là où le lion entre : les deux traits du cou prolongent le contour. C'est la signature de l'identité.
## Fichiers
| Fichier | Usage |
| --- | --- |
| `.svg` | Version couleur, sur fond clair (Crème, Blanc, Ciel, Sable). |
| `-creme.svg` | Version crème, sur fond sombre (Encre, Marine, `#141F38`) ou sur la couleur du projet. |
| `-favicon.svg` | Sous 48px : sans texture, trait de 7. Favicon, onglets, petites icônes d'appli. |
| `lion.svg`, `lion-creme.svg` | Le lion seul, pour une illustration, un 404, un fond de section. Jamais à la place d'un logo de projet. |
Projets disponibles : `qg`, `toolbox`, `site-perso`, `agenda`, `chocht`.
## Zone de protection et tailles
- **Zone de protection** : un vide d'au moins 1/8 de la largeur du logo tout autour (15px pour un logo de 120px).
- **Taille minimale** : 48px pour la version texturée, 16px pour la version favicon.
- **En-tête de site** : 40px, à gauche, suivi du nom du projet en Outfit 600.
## Interdits
- Colorer le lion et le pictogramme différemment.
- Refermer la paroi gauche, ou la faire passer devant le lion.
- Changer l'échelle ou la position du lion dans le pictogramme.
- Ajouter un dégradé, une ombre, un contour ou un remplissage.
- Utiliser la version texturée en dessous de 48px.
- Déformer, faire pivoter, ou poser le logo sur une photo chargée sans aplat derrière.
## Créer le logo d'un nouveau projet
1. Dessiner le pictogramme au trait de 4,5 sur 120 × 120, avec une **paroi gauche verticale** d'au moins 50 unités de haut.
2. Placer le lion à l'échelle 0,7, son bord gauche sur la paroi, centré verticalement dans l'espace intérieur.
3. Ouvrir la paroi entre les deux points d'attache du cou : du haut à `y + 14`, du bas à `y + 30,8`, où `y` est la position verticale du lion.
4. Choisir **une** couleur dans la palette et l'ajouter en token `project-`, avec sa valeur en thème sombre.
5. Exporter les trois versions : couleur, crème, favicon.
## Versions en réserve
Deux autres traitements du lion sont gardés de côté, sans être utilisés pour l'instant : la version **sans texture** (même lion, crinière lisse) et la version **sans séparation + texture** (un seul contour pour la tête et le cou, comme un blason, avec les traits fins de la crinière qui partent de derrière l'œil). Les tracés sont sur la planche de travail.
# Button
Le bouton déclenche une action ; `primary` (bleu) pour l'action principale de l'écran, `accent` (rouge) au plus une fois par écran pour l'action qu'on veut vraiment mettre en avant.
## Variantes
| Classe | Quand | Couleurs |
| --- | --- | --- |
| `lion-btn--primary` | Action principale : « Enregistrer », « Installer la sélection » | `primary` / `on-primary` |
| `lion-btn--accent` | Mise en avant forte, rare : « Commencer », « Rejoindre » | `accent` / `on-accent` |
| `lion-btn--secondary` | Action secondaire à côté d'un principal | texte `primary`, bordure `line-strong` |
| `lion-btn--ghost` | Actions discrètes, barres d'outils | texte `ink` |
| `lion-btn--danger` | Supprimer, vider | `danger`, en contour seulement |
Tailles : normal (44px de haut, cible tactile minimale) et `lion-btn--sm` (36px) pour les zones denses. `lion-btn--icon` pour un bouton carré avec une icône seule : donne-lui un `aria-label`.
## Règles
- Libellé : un verbe à l'infinitif, phrase courte, majuscule seulement au début (« Ajouter une tâche »).
- Jamais deux boutons `primary` côte à côte ; un seul `accent` par écran.
- Icône à gauche du libellé, au trait de 2px (`stroke-icon`), 18px.
- Le focus clavier (`focus-ring`) ne se retire jamais.
## HTML
```html
```
# Input
Le champ de saisie, toujours accompagné d'un libellé visible au-dessus et, si besoin, d'une aide en dessous.
## Structure
`lion-field` regroupe `lion-field__label`, `lion-input` et `lion-field__hint`. En erreur, ajoute `lion-field--error` sur le groupe : la bordure et l'aide passent en `danger`, et l'aide dit comment corriger.
## Règles
- Libellé visible, jamais remplacé par le placeholder ; relie-le avec `for` / `id`.
- 44px de haut, texte à 16px (évite le zoom automatique sur mobile).
- Focus : bordure `primary` et halo `primary-soft` de 3px.
- Message d'erreur concret : « Indique une date au format JJ/MM/AAAA », pas « Champ invalide ».
## HTML
```html
toolbox