268 lines
13 KiB
Markdown
268 lines
13 KiB
Markdown
|
|
---
|
|||
|
|
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
|