talas-group/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md

268 lines
13 KiB
Markdown
Raw Permalink Normal View History

---
type: decisions
date: 2026-04-27
sprint: Sprint 1 — Verrouillage de la vérité
auteur: Nikola
statut: décisions tranchées
---
# Décisions identité visuelle Talas/Veza — 27 avril 2026
> **Objectif :** graver par écrit les décisions qui résolvent les ambiguïtés actuelles. Ce document est le verrou. Une décision n'est révisable qu'en remplaçant ce document par une nouvelle version datée.
> **Pré-requis :** [[AUDIT_IDENTITE_2026-04-27]] pour le contexte.
---
## D1 — Direction visuelle officielle : SUMI (lavis japonais)
**Décision** : la direction visuelle Talas/Veza est et reste le **lavis japonais interactif** (sumi-e numérique), tel que défini dans `DIRECTION_ARTISTIQUE_TALAS.md` (27 mars 2026) et codifié dans `CHARTE_GRAPHIQUE_TALAS.md` (2 avril 2026).
**Pourquoi cette décision est non-ambiguë :**
- La direction est cohérente entre 6 documents canoniques (philosophie + charte + brief synthèse + brief artiste + spec technique + concepts UX).
- Le brief commande à l'artiste invité (15 avril) tranche explicitement : *"papier blanc, pas cyberpunk, pas néon"*.
- La session expérimentale Cyber-Lavis (avril) a livré une **leçon écrite** : *"V6 : c'est un enfer à utiliser tous les jours. Une belle identité visuelle est l'emballage. Un outil se juge à la vitesse avec laquelle on trouve ce qu'on cherche."* (`SESSION_CYBER_LAVIS_AVRIL_2026/05_LECONS_ET_ARBITRAGES.md`).
**Conséquence** : Cyber-Lavis devient une exploration archivée (voir D7).
---
## D2 — Hiérarchie des sources de vérité
**Décision** : trois niveaux, du plus stable au plus volatile :
1. **Philosophie**`05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS.md`
*Le pourquoi. Change rarement. Toute décision de design doit pouvoir s'expliquer par ce document.*
2. **Application**`05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md` ★★★
*Les règles. Source de vérité pour palette, typo, logo, iconographie, applications.*
**Si un fichier contredit la charte, c'est le fichier qui a tort.**
3. **Implémentation**`05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION.md` + code Veza (`apps/web/src/index.css`)
*Le comment technique. Doit refléter la charte. Si divergence, on aligne le code sur la charte (pas l'inverse).*
**Documents de support (non-source mais référence) :**
- `IDENTITE_VISUELLE.md` — synthèse opérationnelle (résumé navigable de la charte)
- `BRIEF_ARTISTE_IDENTITE_VISUELLE.md` — commande à l'artiste invité (couches papier / œuvres / UI)
- `CONCEPTS_INNOVANTS_VEZA.md` — concepts UX (patine, suzuri, troc, exploration spatiale)
- `GUIDE_CREATION_LOGO.md` — process logo
- `01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE.md` — plan d'exécution V1-V8
**Workbook** : `Identite_Visuelle/WORKBOOK_IMPRIMABLE/` est un **outil de méthodologie** (mood board, brainstorm, exploration), pas une spec. À utiliser pour produire les assets, pas comme référence d'application.
---
## D3 — Palette UI canonique (anti-drift)
**Décision** : la palette UI officielle est **strictement** celle de la charte (§4) :
### Mode jour (papier clair)
| Rôle | Nom | Hex |
|------|-----|-----|
| Papier | Washi | `#F2EDE6` |
| Encre | Sumi | `#1A1A1E` |
| Encre diluée | Usuzumi | `#9A958D` |
| Encre très diluée | Awazumi | `#B5B0A8` |
| Lavis (surface) | Nijimi | `rgba(26,26,30, 0.04-0.12)` |
| **Cyan accent** | **Mizu** | `#0098B5` |
| Cyan hover | — | `#00B4D8` |
| Cyan actif | — | `#007A94` |
| Cyan profond (texte AA) | — | `#006B7F` |
### Mode nuit (lavis inversé)
| Rôle | Hex |
|------|-----|
| Papier sombre | `#0D0D0F` |
| Encre claire | `#E8E3DB` |
| Cyan profond | `#006B7F` |
### Couleurs fonctionnelles (toujours diluées, jamais en aplat, max 60 % opacité)
| Rôle | Code |
|------|------|
| Succès | `rgba(90, 140, 100, 0.60)` |
| Erreur | `rgba(180, 80, 70, 0.55)` |
| Warning | `rgba(190, 150, 60, 0.55)` |
| Info | `#0098B5` (= cyan accent) |
### Règles absolues (extraites de la charte §4.4)
1. **Pas de blanc pur (#FFFFFF).** Le plus clair est `#F2EDE6`.
2. **Pas de noir pur (#000000).** Le plus sombre est `#0D0D0F`.
3. **Le cyan est la SEULE couleur d'accent.** Pas de deuxième. Jamais.
4. **Les couleurs fonctionnelles sont toujours diluées.** Pas d'aplat.
5. **Les gris sont toujours chauds.** Pas de gris bleu, pas de gris pur neutre.
6. **WCAG AA partout.** Si esthétique vs accessibilité → accessibilité gagne.
### Couleurs interdites en UI
- **Indigo `#7c9dd6`** — résidu V2 dans le code, à retirer.
- **Gold leaf `#b8860b`** — pas dans la charte officielle.
- **Vermillion** comme pigment principal — n'existe que comme couleur fonctionnelle erreur, **diluée**.
- **Toute couleur saturée hors cyan** (vert vif, rouge pétant, jaune, violet, orange).
---
## D4 — Distinction palette UI vs palette des œuvres scannées
**Décision** : il y a **deux palettes distinctes** qui ne se confondent pas :
### Palette UI (la charte ci-dessus, §D3)
S'applique à : tokens CSS, composants React, design system Sumi, web, app. **Lavis monochrome + cyan unique + fonctionnels dilués.**
### Palette des œuvres scannées (brief artiste §5)
S'applique à : les pièces artistiques produites par l'artiste invité (Renaud) qui seront scannées et intégrées comme ancres émotionnelles dans Veza.
- **Encre noire très pigmentée** (encre de Chine) sur **papier blanc**
- Aquarelle bienvenue, palette **terreuse** : ocres, gris, noirs dilués, vert olive, bleu ardoise
- **Pas de couleurs primaires saturées**
**Ces deux palettes coexistent mais ne se mélangent pas dans les fichiers de spec.** Une œuvre scannée garde ses ocres ; l'UI autour reste lavis monochrome + cyan.
---
## D5 — Architecture de marque : Talas (mère) + Veza (sous-marque)
**Décision** (charte §2) : deux entités, **un seul langage visuel partagé**, deux logos distincts.
| Entité | Nature | Visible où |
|--------|--------|-----------|
| **Talas** | Marque mère | Hardware, packaging, communications corporate |
| **Veza** | Sous-marque | Plateforme web (boutique + communauté + services) |
- Mêmes palette / typographie / philosophie.
- Logos distincts mais cohérents (même langage calligraphique).
- Quand les deux apparaissent : "Veza by Talas" ou "Veza — une plateforme Talas".
- Footer Veza contient toujours le logo Talas en encre diluée (discret).
---
## D6 — Typographie officielle
**Décision** (charte §5) :
| Usage | Police | Poids | Licence |
|-------|--------|-------|---------|
| Titres / marque | **Space Grotesk** | Bold (700) | SIL Open Font License |
| Corps | **Inter** | Regular (400), Semi-Bold (600) | SIL Open Font License |
| Code / specs | **JetBrains Mono** | Regular (400) | SIL Open Font License |
- Format : **woff2 uniquement**.
- `font-display: swap` obligatoire.
- **Budget total < 130 Ko** : Space Grotesk Bold (~25 Ko) + Inter Variable (~95 Ko) au chargement initial.
- JetBrains Mono : lazy-loaded uniquement sur les pages de specs/code.
- Titres en **MAJUSCULES** avec `letter-spacing` 0.1-0.15em.
- Corps en casse normale, interligne 1.6-1.8.
**Polices interdites** : Syne (proposée par Cyber-Lavis), polices "japonisantes" kitsch, IBM Plex Mono (préférer JetBrains Mono pour cohérence existante), Permanent Marker (pas de pastiche graffiti dans l'UI — les tags viennent de l'artiste).
---
## D7 — Statut de Cyber-Lavis : exploration archivée
**Décision** : Cyber-Lavis est une exploration **archivée**, pas une option vivante.
**Raisons** :
1. Contradit explicitement le brief artiste (15 avril) : "pas cyberpunk, pas néon".
2. La session elle-même a conclu à l'inadéquation pour un outil quotidien (V6, leçon 1).
3. Toutes les autres sources canoniques convergent vers Sumi.
**Action** : déplacer en `13_ARCHIVES/cyber-lavis-experiment-2026-04/` :
- `IDENTITE_VISUELLE_CYBER_LAVIS.md`
- `SESSION_CYBER_LAVIS_AVRIL_2026/` (les 6 fichiers — leçons précieuses, à garder accessibles)
- `cyber-lavis-ds/` (code source uniquement, sans `node_modules/` ni `package-lock.json`)
**Ce qui reste utilisable des leçons Cyber-Lavis** (à intégrer ailleurs si besoin) :
- Click-to-copy sur les swatches (à appliquer dans les pages de doc DS)
- Cmd+K palette de commande (déjà standard, à utiliser dans Veza)
- Filtres SVG **baked-in** comme data URI (technique de cache à réutiliser)
- Réduction agressive du DOM avant optimisation CSS
---
## D8 — Suppressions sans archivage
**Décision** : ces éléments sont des **doublons purs ou pollutions sans valeur historique**. Suppression directe (pas d'archivage).
| Cible | Raison | Taille |
|-------|--------|--------|
| `DESIGN_SYSTEM_CONSOLIDATION/` (top-level) | Duplication EXACTE de 6 fichiers de `05/` (`diff -q` confirme zéro différence) | ~petit |
| `cyber-lavis-ds/node_modules/` | Pollution disque, regénérable via `npm install` | **~109 MB** |
| `cyber-lavis-ds/package-lock.json` | Auto-généré, regénérable | ~106 KB |
---
## D9 — ORIGIN_UI_UX_SYSTEM.md doit être aligné (Sprint 2)
**Constat** : `veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md` (verrou v2.0.0, lecture seule) définit aujourd'hui un design system **générique Tailwind** (palette sky-blue `#0ea5e9`) sans aucune référence à Sumi.
**Décision pour Sprint 1** : aucune action — ORIGIN reste tel quel pour l'instant.
**Décision pour Sprint 2 (à venir)** :
- Soit créer un `ORIGIN_BRAND_IDENTITY.md` qui pointe vers la charte Talas et fait référence canonique côté code Veza.
- Soit mettre à jour `ORIGIN_UI_UX_SYSTEM.md` lui-même pour intégrer la palette Sumi (en respectant le verrou : nouvelle version v3.0.0 avec migration documentée).
**En attendant** : la **`CHARTE_GRAPHIQUE_TALAS.md` est la source de vérité brand pour les décisions UI Veza**. Le code (`apps/web/src/index.css`) la respecte déjà partiellement (tokens `--sumi-*`).
---
## D10 — Ce qui doit être produit (assets manquants — Sprint 3)
Pour que l'identité ne reste pas que du texte, **assets concrets manquants** :
### Logo
- [ ] Logo Talas — wordmark "TALAS" × 3 versions (propre, sauvage, vertical) — **artiste invité P0.1**
- [ ] Logo Veza — wordmark "VEZA" × 1 style (tag fluide d'un seul trait) — **artiste invité P1.1**
- [ ] Symbole Talas (geste calligraphique unique) — **à dessiner**
- [ ] Déclinaisons (favicon, gravure, broderie, monochrome noir/blanc) — **post-vectorisation**
### Œuvres scannées (artiste invité)
- [ ] Hero image scène post-apo (P0.2)
- [ ] 3-5 textures de liaison (nuages d'encre, brume, coulures, taches diluées, papier déchiré) (P1.2)
- [ ] 3 symboles iconiques (enso non fermé, onde sonore "zip", symbole libre) (P1.3)
- [ ] (P2+) scènes par zone du site, illustrations des micros, frise narrative, lettrines, vignettes
### Texture & icônes design system
- [ ] Texture `washi.png` (512×512, ~8 Ko) scannée + variantes patine (2-3)
- [ ] Set d'icônes calligraphiques (10 prioritaires : play, pause, search, profile, chat, upload, settings, home, close, volume — voir charte §6.3)
### Polices
- [ ] Téléchargement et hébergement local des 3 polices (Space Grotesk Bold + Inter Variable + JetBrains Mono lazy)
---
## D11 — Gouvernance future
**Décision** : à partir d'aujourd'hui (27 avril 2026) :
1. **Une seule personne** (Nikola, propriétaire du DS) valide les modifications de la charte ou de la spec Sumi.
2. **Toute proposition de modification** d'une couleur, typo, ou règle d'application → édition en branche, validation explicite, mise à jour datée du document.
3. **Le code (`apps/web/src/index.css`)** doit toujours pouvoir être tracé jusqu'à un token de la charte. Si une couleur dans le code n'est pas justifiée par un token de la charte, c'est un bug.
4. **Les sessions exploratoires** sont les bienvenues mais doivent être clairement étiquetées `_BROUILLON/` ou `13_ARCHIVES/` dès qu'elles ne sont plus actives. **Une exploration n'a pas le statut d'option officielle.**
---
## D12 — Calendrier d'application des décisions
| Action | Sprint | Responsable | Statut |
|--------|--------|-------------|--------|
| Audit + décisions écrites (ce doc) | **Sprint 1** | Nikola | ✅ Fait (27 avril) |
| Création INDEX_IDENTITE.md | Sprint 1 | Nikola | ✅ Fait (27 avril) |
| Suppression `DESIGN_SYSTEM_CONSOLIDATION/` | Sprint 1 | Nikola | ✅ Fait (27 avril) |
| Archivage Cyber-Lavis vers `13_ARCHIVES/cyber-lavis-experiment-2026-04/` | Sprint 1 | Nikola | ✅ Fait (27 avril) — inclut `IDENTITE_VISUELLE_CYBER_LAVIS.md` + `SESSION_CYBER_LAVIS_AVRIL_2026/` + `PREVIEW_CYBER_LAVIS*.html` (×2) + `cyber-lavis-ds.zip` + code source du projet React |
| Suppression `cyber-lavis-ds/node_modules` (~109 MB) + `package-lock.json` | Sprint 1 | Nikola | ✅ Fait (27 avril) |
| Mise à jour README de `05_EXPERIENCE_UTILISATEUR/` | Sprint 1 | Nikola | À faire |
| Retrait indigo `#7c9dd6` du code Veza | **Sprint 2** | Nikola | À planifier |
| Alignement ORIGIN_UI_UX_SYSTEM.md (Veza repo) | Sprint 2 | Nikola | À planifier |
| Production des assets manquants (D10) | **Sprint 3** | Nikola + artiste | En cours (artiste contacté) |
---
## Voir aussi
- [[AUDIT_IDENTITE_2026-04-27]] — Audit complet (contexte de ces décisions)
- [[INDEX_IDENTITE]] — Carte de navigation officielle
- [[CHARTE_GRAPHIQUE_TALAS]] — Source de vérité opérationnelle
- [[DIRECTION_ARTISTIQUE_TALAS]] — Source de vérité philosophique
- [[SUMI_V3_SPECIFICATION]] — Source de vérité technique