From 0db37863ba6ba2f485cb3042e1594757f51074a3 Mon Sep 17 00:00:00 2001 From: senke Date: Mon, 27 Apr 2026 04:14:43 +0200 Subject: [PATCH] =?UTF-8?q?Sprint=201=20identit=C3=A9=20visuelle=20:=20aud?= =?UTF-8?q?it=20+=20d=C3=A9cisions=20+=20index=20+=20brief=20artiste?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Verrouillage des sources de vérité après audit complet : - AUDIT_IDENTITE_2026-04-27 : inventaire des fichiers d'identité, doublons et contradictions - DECISIONS_IDENTITE : 12 décisions tranchées (D1 SUMI confirmée comme direction officielle, D3 palette canonique, D7 Cyber-Lavis archivé, D8 suppressions) - INDEX_IDENTITE : carte de navigation officielle (pour-quoi -> quel-fichier) - BRIEF_ARTISTE_IDENTITE_VISUELLE : brief opérationnel pour l'artiste invité (concept 3 couches papier/œuvres/UI, priorités P0-P3) Charte SUMI confirmée comme source canonique (cyan 0098B5 unique). Cyber-Lavis archivé en 13_ARCHIVES/cyber-lavis-experiment-2026-04/ (gitignoré). DESIGN_SYSTEM_CONSOLIDATION/ supprimé (duplication exacte de 6 fichiers). ~110 MB libérés (cyber-lavis-ds/node_modules). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../AUDIT_IDENTITE_2026-04-27.md | 240 ++++++++++++++++ .../BRIEF_ARTISTE_IDENTITE_VISUELLE.md | 264 +++++++++++++++++ .../DECISIONS_IDENTITE.md | 267 ++++++++++++++++++ 05_EXPERIENCE_UTILISATEUR/INDEX_IDENTITE.md | 170 +++++++++++ 4 files changed, 941 insertions(+) create mode 100644 05_EXPERIENCE_UTILISATEUR/AUDIT_IDENTITE_2026-04-27.md create mode 100644 05_EXPERIENCE_UTILISATEUR/BRIEF_ARTISTE_IDENTITE_VISUELLE.md create mode 100644 05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md create mode 100644 05_EXPERIENCE_UTILISATEUR/INDEX_IDENTITE.md diff --git a/05_EXPERIENCE_UTILISATEUR/AUDIT_IDENTITE_2026-04-27.md b/05_EXPERIENCE_UTILISATEUR/AUDIT_IDENTITE_2026-04-27.md new file mode 100644 index 0000000..ad5e457 --- /dev/null +++ b/05_EXPERIENCE_UTILISATEUR/AUDIT_IDENTITE_2026-04-27.md @@ -0,0 +1,240 @@ +--- +type: audit +date: 2026-04-27 +sprint: Sprint 1 — Verrouillage de la vérité +auteur: Nikola +statut: livré +--- + +# Audit identité visuelle — 27 avril 2026 + +> **Objectif :** cartographier tous les fichiers liés à l'identité visuelle Talas/Veza, identifier les sources de vérité, les doublons, les contradictions, et les fichiers exploratoires à archiver. +> **Périmètre :** repo docs `TG__Talas_Group` + ORIGIN docs Veza (`/home/senke/git/talas/veza/veza-docs/ORIGIN/`). + +--- + +## 1. Résumé exécutif + +L'identité visuelle Talas est **clairement définie** au niveau philosophique (Direction Artistique du 27 mars 2026, Charte Graphique du 2 avril 2026), **alignée** avec le brief commande à l'artiste invité (15 avril 2026), et **partiellement implémentée** dans le code Veza (tokens CSS Sumi). + +Trois pollutions structurelles bloquent la lisibilité : +1. **Duplication exacte** dans `DESIGN_SYSTEM_CONSOLIDATION/` (top-level) — copie identique de 6 fichiers de `05_EXPERIENCE_UTILISATEUR/`. +2. **Projet React showcase** `cyber-lavis-ds/` de 109 MB (dont `node_modules/`) qui n'a rien à faire dans un repo de docs. +3. **Direction explorée non archivée** : Cyber-Lavis (15 avril) coexiste comme s'il était une option, alors que la session a conclu à son rejet (leçon 1 : "l'identité forte reste en peau, pas en contenant"). + +Une discordance reste à résoudre dans le code : l'**indigo #7c9dd6** présent dans `apps/web/src/index.css` n'apparaît dans aucune charte officielle et contredit la règle d'unicité du cyan. + +--- + +## 2. Inventaire complet + +### 2.1 Identité projet (00_META) + +| Fichier | Rôle | Date | Statut | +|---------|------|------|--------| +| `00_META/TALAS_IDENTITE_PROJET.md` | Document d'identité projet (mission, vision, valeurs, public, gamme, modules Veza, stack) | 21 mars 2026 | ✅ Source de vérité projet | +| `00_META/Manifeste/MANIFESTE_ETHIQUE_TALAS.md` | Manifeste éthique | — | ✅ Référence | +| `00_META/CHARTE_OPEN_CORE.md` | Charte open-core (logiciel proprio, hardware ouvert) | — | ✅ Référence | + +### 2.2 Documents identité visuelle (05_EXPERIENCE_UTILISATEUR — racine) + +| Fichier | Rôle | Lignes | Date | Statut | +|---------|------|--------|------|--------| +| `DIRECTION_ARTISTIQUE_TALAS.md` | Philosophie visuelle (le pourquoi) | 514 | 27 mars 2026 | ✅ **Source de vérité — pourquoi** | +| `IDENTITE_VISUELLE.md` | Brief synthèse (le quoi) | 171 | 27 mars 2026 | ✅ Synthèse opérationnelle | +| `CHARTE_GRAPHIQUE_TALAS.md` | Règles d'application complètes | 605 | 2 avril 2026 | ✅ **Source de vérité — règles** | +| `BRIEF_ARTISTE_IDENTITE_VISUELLE.md` | Brief commande artiste invité (Renaud) | 264 | 15 avril 2026 | ✅ Brief opérationnel | +| `GUIDE_CREATION_LOGO.md` | Guide pratique création logo | — | — | ✅ Process | +| `SUMI_V3_SPECIFICATION.md` | Spec technique design system (le comment) | 852 | — | ✅ **Source de vérité — implémentation** | +| `CONCEPTS_INNOVANTS_VEZA.md` | Concepts UX innovants (patine, suzuri, troc, exploration) | 284 | — | ✅ Spec UX innovante | +| `IDENTITE_VISUELLE_CYBER_LAVIS.md` | Direction alternative explorée | 86 | 15 avril 2026 | ⚠️ **À archiver — exploration rejetée** | +| `PROMPT_GENERATION_VISUELS.md` | Prompts pour génération visuelle | — | — | À évaluer | +| `doc_puk.md` | Document non identifié | — | — | À évaluer/renommer | +| `preview_sumi_v3.html` | Preview HTML du design system | — | — | À évaluer | +| `README.md` | README du dossier | — | — | À mettre à jour pour refléter la nouvelle hiérarchie | + +### 2.3 Workbook + sessions (sous-dossiers) + +| Chemin | Rôle | Statut | +|--------|------|--------| +| `Identite_Visuelle/WORKBOOK_IMPRIMABLE/` (14 fichiers : `00_MODE_EMPLOI.md` à `14_SYNTHESE_FINALE.md`) | Méthodologie de TRAVAIL pour créer l'identité (manifeste, mood board, logo brainstorm, palette, typo, photo, son) | ✅ Outil de travail (pas spec) | +| `Identite_Visuelle/README.md` | README workbook | ✅ | +| `SESSION_CYBER_LAVIS_AVRIL_2026/` (6 fichiers) | Journal de la session expérimentale Cyber-Lavis | ⚠️ **À archiver avec Cyber-Lavis** | +| `cyber-lavis-ds/` | **Projet React showcase (109 MB avec node_modules)** | ❌ **À archiver le code source, supprimer node_modules** | +| `Accessibilité/`, `Figma_Prototypes/`, `Flux_Utilisateurs/`, `Tests_Utilisateurs/`, `Design_System/` | Sous-dossiers thématiques | ✅ | + +### 2.4 Roadmap & pilotage + +| Fichier | Rôle | Date | Statut | +|---------|------|------|--------| +| `01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE.md` | Roadmap V1-V8 (~18-28 jours, exécutable en nomade) | 1 avril 2026 | ✅ Plan d'exécution actif | + +### 2.5 Marketing & storytelling + +| Fichier | Rôle | Statut | +|---------|------|--------| +| `07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS.md` | Manifeste de marque | ✅ Référence brand | +| `07_CONTENUS_MARKETING/STRATEGIE_CONTENU.md` | Stratégie de contenu RS | ✅ | + +### 2.6 Duplication confirmée — `DESIGN_SYSTEM_CONSOLIDATION/` + +``` +$ diff -q DESIGN_SYSTEM_CONSOLIDATION/X 05_EXPERIENCE_UTILISATEUR/X +(aucune différence pour les 6 fichiers comparés) +``` + +| Fichier dupliqué | Action | +|------------------|--------| +| `CHARTE_GRAPHIQUE_TALAS.md` | ❌ À supprimer (identique à 05/) | +| `DIRECTION_ARTISTIQUE_TALAS.md` | ❌ À supprimer (identique à 05/) | +| `IDENTITE_VISUELLE.md` | ❌ À supprimer (identique à 05/) | +| `IDENTITE_VISUELLE_CYBER_LAVIS.md` | ❌ À supprimer (identique à 05/, sera archivé via 05/) | +| `SUMI_V3_SPECIFICATION.md` | ❌ À supprimer (identique à 05/) | +| `preview_sumi_v3.html` | ❌ À supprimer (identique à 05/) | + +→ **Le dossier `DESIGN_SYSTEM_CONSOLIDATION/` entier doit être supprimé.** + +### 2.7 ORIGIN docs Veza (repo séparé) + +Localisation : `/home/senke/git/talas/veza/veza-docs/ORIGIN/` (lecture seule, v2.0.0). + +| Fichier | Rôle | Statut UI | +|---------|------|-----------| +| `ORIGIN_UI_UX_SYSTEM.md` | Contrat UI/UX Veza (200+ composants, accessibility, anti-patterns) | ⚠️ **Désaligné** : palette générique sky-blue `#0ea5e9` au lieu de Sumi `#0098B5` | +| Autres ORIGIN_*.md | Sécurité, déploiement, qualité, API, etc. | Hors scope identité | + +**Constat critique :** `ORIGIN_UI_UX_SYSTEM.md` n'est PAS aligné avec la charte Talas. Il est en mode "design system générique Tailwind" alors que le code (`apps/web/src/index.css`) implémente bien Sumi. À traiter en Sprint 2 (alignement code/spec). + +### 2.8 Archives existantes + +| Chemin | Statut | +|--------|--------| +| `13_ARCHIVES/all-talas/talas_design_system_v2(1).html` | ✅ Déjà archivé (V2 antérieur) | +| `13_ARCHIVES/all-talas/talas_design_system_v2.html` | ✅ Déjà archivé | + +--- + +## 3. Carte des sources de vérité (canonical) + +``` +PROJET (00_META) +└── TALAS_IDENTITE_PROJET.md ............. Mission/vision/valeurs/produits + +PHILOSOPHIE (le pourquoi) — 05_EXPERIENCE_UTILISATEUR +└── DIRECTION_ARTISTIQUE_TALAS.md ........ Le lavis japonais comme langage + +QUOI (le brief) — 05_EXPERIENCE_UTILISATEUR +├── IDENTITE_VISUELLE.md ................. Brief synthèse (logo, palette, typo) +└── BRIEF_ARTISTE_IDENTITE_VISUELLE.md ... Commande à l'artiste invité + +COMMENT — APPLICATION (les règles) — 05_EXPERIENCE_UTILISATEUR +├── CHARTE_GRAPHIQUE_TALAS.md ★★★ ........ SOURCE DE VÉRITÉ pour toute application +├── GUIDE_CREATION_LOGO.md ............... Process logo +└── ROADMAP_IDENTITE_VISUELLE.md (01_PILOTAGE) ... Plan d'exécution V1-V8 + +COMMENT — TECHNIQUE (l'implémentation) — 05_EXPERIENCE_UTILISATEUR +└── SUMI_V3_SPECIFICATION.md ............. Spec design system technique + +CONCEPTS UX — 05_EXPERIENCE_UTILISATEUR +└── CONCEPTS_INNOVANTS_VEZA.md ........... Patine, suzuri, troc, exploration + +CONTRAT VEZA (repo code) — verrouillé +└── veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md ... ⚠️ À aligner avec la charte Talas + +IMPLÉMENTATION (code Veza) — repo code +└── apps/web/src/index.css ............... ⚠️ À nettoyer des résidus V2 (indigo) +``` + +--- + +## 4. Contradictions identifiées et résolutions + +### 4.1 Cyber-Lavis vs Sumi (RÉSOLU) + +**Constat** : `IDENTITE_VISUELLE_CYBER_LAVIS.md` (15 avril, 86 lignes) propose une fusion lavis + graffiti + HUD cyberpunk avec dégradés profonds, ambient blobs cyan, "blocs lumineux", style Post-Analog. + +**Toutes les autres sources convergent vers Sumi pur** : +- `DIRECTION_ARTISTIQUE_TALAS.md` (27 mars, 514 lignes) : "Pas neon/cyberpunk (pas de noir + neon partout)" +- `CHARTE_GRAPHIQUE_TALAS.md` (2 avril, 605 lignes) : "Pas de blanc pur. Pas de noir pur. Cyan = SEULE couleur d'accent." +- `BRIEF_ARTISTE_IDENTITE_VISUELLE.md` (15 avril, 264 lignes) : *"Un blanc cassé / blanc pur, comme un rouleau de papier vierge. Pas de gradient sombre, pas de cyberpunk, pas de néon."* +- `SESSION_CYBER_LAVIS_AVRIL_2026/05_LECONS_ET_ARBITRAGES.md` : *"V6 : réalisation '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."* + +**→ Résolution : Cyber-Lavis est une exploration archivée, pas une option vivante. Le brief artiste a définitivement tranché.** + +### 4.2 Indigo #7c9dd6 dans le code Veza (À CORRIGER EN SPRINT 2) + +**Constat** : le rapport sur l'état UI Veza signale qu'`apps/web/src/index.css` contient encore une trace `Indigo Ink #7c9dd6` parmi les "pigments". Cette couleur **n'apparaît dans AUCUN document de la charte**. + +**Vérité officielle** (CHARTE_GRAPHIQUE §4.4) : +> *"Le cyan est la SEULE couleur d'accent. Pas de deuxième couleur. Jamais."* + +**→ Résolution : l'indigo est un résidu V2. À retirer du code en Sprint 2.** + +### 4.3 Vermillion / Sage / Gold leaf comme "pigments" ? + +**Constat** : le rapport B citait 4 pigments (Indigo, Vermillion, Sage, Gold) en plus de Mizu cyan. + +**Vérité officielle** (CHARTE_GRAPHIQUE §4.2) : +- **Sage**, **brique** (rouge), **ambre** existent **uniquement comme couleurs fonctionnelles diluées** (max 60 % opacité, jamais en aplat) — succès / erreur / warning. +- Pas d'**indigo officiel**, pas de **gold leaf officiel**. + +**→ Résolution : ces "pigments" tels qu'ils apparaissent dans le code sont une mauvaise interprétation V2. La charte est claire : palette lavis + cyan unique + 4 fonctionnels dilués.** + +### 4.4 ORIGIN_UI_UX_SYSTEM.md générique vs charte Talas (À TRAITER EN SPRINT 2) + +**Constat** : `ORIGIN_UI_UX_SYSTEM.md` (Veza repo) définit une palette `--color-primary-500: #0ea5e9` (sky-blue Tailwind) et un design system générique sans aucune référence à Sumi, lavis, washi, mizu. + +**→ Résolution : ORIGIN doit être mis à jour (en Sprint 2 ou plus tard) pour pointer vers / inclure la charte Talas. Tant que ce n'est pas fait, considérer la `CHARTE_GRAPHIQUE_TALAS.md` comme la source de vérité brand, et `apps/web/src/index.css` comme l'implémentation effective.** + +--- + +## 5. Pollutions structurelles + +### 5.1 `DESIGN_SYSTEM_CONSOLIDATION/` (top-level) + +- 6 fichiers identiques à `05_EXPERIENCE_UTILISATEUR/`. +- Origine probable : tentative de regroupement avortée pendant un nettoyage. +- **Action recommandée** : suppression complète du dossier. + +### 5.2 `cyber-lavis-ds/` dans 05_EXPERIENCE_UTILISATEUR + +- 109 MB sur disque dont 99 % de `node_modules/`. +- Projet Vite + React + TypeScript expérimental issu de la session Cyber-Lavis. +- README générique de template Vite (pas de doc projet-spécifique). +- **Action recommandée** : + 1. Garder le code source (`src/`, `public/`, configs) en archives sous `13_ARCHIVES/cyber-lavis-experiment-2026-04/code/` + 2. Supprimer `node_modules/` et `package-lock.json` + 3. Garder un README court qui dit "exploration archivée — voir `13_ARCHIVES/cyber-lavis-experiment-2026-04/`" + +### 5.3 `SESSION_CYBER_LAVIS_AVRIL_2026/` + +- 6 fichiers de journal de bord d'exploration archivable. +- Les **leçons** (fichier 05) sont précieuses et doivent rester accessibles, mais regroupées avec le reste de la session. +- **Action recommandée** : déplacer vers `13_ARCHIVES/cyber-lavis-experiment-2026-04/session/` + +### 5.4 `IDENTITE_VISUELLE_CYBER_LAVIS.md` + +- Direction alternative non retenue. +- **Action recommandée** : déplacer vers `13_ARCHIVES/cyber-lavis-experiment-2026-04/IDENTITE_VISUELLE_CYBER_LAVIS.md` + +--- + +## 6. Statistiques + +| Métrique | Valeur | +|----------|--------| +| Fichiers identité visuelle (05/) | ~30 (hors `cyber-lavis-ds/`) | +| Sources de vérité canoniques | **6** (DIRECTION_ARTISTIQUE, IDENTITE_VISUELLE, CHARTE_GRAPHIQUE, BRIEF_ARTISTE, SUMI_V3_SPEC, CONCEPTS_INNOVANTS) | +| Fichiers de méthodologie/travail | 14 (WORKBOOK) | +| Fichiers à archiver (Cyber-Lavis) | 7 (1 racine + 6 session) + projet `cyber-lavis-ds/` | +| Fichiers en duplication pure | 6 (DESIGN_SYSTEM_CONSOLIDATION/) | +| Pollution disque | 109 MB (`cyber-lavis-ds/node_modules/`) | +| Désalignements code | 1 (indigo #7c9dd6 résiduel) + 1 (ORIGIN générique) | + +--- + +## 7. Suite — voir aussi + +- [[DECISIONS_IDENTITE]] — Décisions tranchées suite à cet audit +- [[INDEX_IDENTITE]] — Carte de navigation officielle de l'identité +- Sprint 2 (à venir) — Migration tokens et alignement ORIGIN/code Veza diff --git a/05_EXPERIENCE_UTILISATEUR/BRIEF_ARTISTE_IDENTITE_VISUELLE.md b/05_EXPERIENCE_UTILISATEUR/BRIEF_ARTISTE_IDENTITE_VISUELLE.md new file mode 100644 index 0000000..df37c32 --- /dev/null +++ b/05_EXPERIENCE_UTILISATEUR/BRIEF_ARTISTE_IDENTITE_VISUELLE.md @@ -0,0 +1,264 @@ +# Brief — Identité visuelle Talas + +> Document unique à destination de l'artiste. Tout est ici, tu n'as rien d'autre à lire. +> Version du 15 avril 2026. + +--- + +## Salut, + +Je te laisse ce doc parce que je sais que tu préfères lire avant de poser des questions, et parce que c'est plus simple pour toi d'avoir tout d'un coup. + +L'idée courte : je monte un projet depuis un moment, et le point qui me bloque le plus aujourd'hui, c'est l'identité visuelle. J'ai besoin d'un regard d'artiste, pas d'un graphiste, et ton univers — lavis à l'encre de Chine, tags, aquarelle, scènes post-apo — est exactement ce que je cherche. C'est pour ça que je viens te voir. + +**Je ne peux pas te rémunérer pour l'instant.** On fait ça à l'amiable : tu fais ce que tu veux, au rythme que tu veux, et tu t'arrêtes quand tu veux. C'est pour ça que j'ai ordonné ce que je te demande par priorité (P0 à P3). Même si tu ne fais que le P0, ça me débloque déjà énormément. Le reste est du bonus. Il n'y a **aucune obligation** d'aller plus loin que là où tu en as envie. + +Si à un moment le projet rentre de l'argent, tu es le premier crédité et le premier payé, rétroactivement. C'est une promesse morale, je détaille plus bas. + +--- + +## 1. Le projet en 5 minutes + +**Talas Group**, c'est une tentative de construire une petite entreprise audio indépendante autour de trois choses : + +1. **Des microphones professionnels faits pour durer.** Réparables, modulaires, ouverts. Pas jetables. Pas des "produits". Des outils. Aujourd'hui deux modèles sont en développement : + - **Talas Lite** — un micro à électret abordable, pour débutants et podcasteurs. + - **Talas One** — un micro à condensateur pro, pour le studio. Le premier prototype fonctionne depuis quelques jours : carte électronique faite main, corps en métal, ça capte du son. C'est réel. +2. **Une plateforme communautaire appelée Veza.** Un site web où musiciens, ingénieurs son, producteurs, curieux peuvent se rencontrer, échanger des samples, discuter, apprendre, acheter le matos. Pas "un Instagram de plus". Un lieu. "Veza" vient d'un mot qui évoque la connexion, le passage. +3. **Une philosophie artisanale et anti-jetable.** Tout est auto-hébergé sur des serveurs physiques dans une cave. Pas de cloud, pas de SaaS, pas de "tech du futur qui promet monts et merveilles". Du cuivre, du papier, de l'encre, et du code écrit à la main par une personne. Le genre d'objet qu'on pourrait retrouver dans 50 ans dans un grenier et qui fonctionnerait encore. + +Ce que l'identité visuelle doit raconter : **quelque chose de fragile et de brutal à la fois, d'ancien et d'urgent, de fait à la main dans un monde où tout est fabriqué en série.** + +--- + +## 2. Pourquoi toi, et pas un graphiste + +Parce qu'un graphiste va me pondre un wordmark Helvetica avec une vague stylisée. Et ce n'est pas ça. + +J'ai besoin d'une **âme visuelle**, pas d'un logo. Ton univers — le lavis, le tag, les scènes post-apo où la nature reprend un bâtiment en ruine, l'aquarelle — c'est exactement la tension que je veux dans Talas. C'est ton trait à toi que je viens chercher. Si je voulais un style "propre", je n'aurais pas besoin de toi. + +--- + +## 3. Le concept visuel global (lis ce chapitre en premier) + +L'interface web de Veza et tous les visuels de Talas seront construits en **trois couches superposées** : + +### Couche 1 — Le fond : papier blanc + +Un blanc cassé / blanc pur, comme un rouleau de papier vierge. Pas de gradient sombre, pas de cyberpunk, pas de néon. La page respire. C'est là que tout se pose. + +### Couche 2 — TON travail : les œuvres scannées + +C'est là que j'incorpore tes lavis, tes tags, tes scènes, en haute définition. Ils vivent directement sur le blanc, comme si on déposait un dessin sur du papier. Ce sont les **ancres émotionnelles** de l'interface. Chaque page du site en aura une, peut-être deux, jamais trop. Ton travail n'est pas un "élément décoratif" : c'est le cœur visuel de l'UI. + +### Couche 3 — L'interface : boutons, texte, navigation + +Fine, discrète, technique. Un peu à l'écart de ton travail. Typographie propre, lignes nettes, rien qui crie. L'UI doit **laisser la place** à ton travail, pas le recouvrir. + +### Le liant entre les couches : brume / nuages / diffusion d'encre + +Pour que tout ne soit pas "plaqué", j'ajoute entre chaque couche des effets de **brume, de nuages, de diffusion d'encre dans l'eau**. Ça sert de fondu, de transition. Certains de ces effets peuvent venir de toi (scans d'aquarelle très diluée par exemple), d'autres seront générés par code. Les deux cohabiteront. + +**Visualise** : imagine un vieux rouleau de paysage chinois, ou une page de carnet d'aquarelliste. Le dessin n'est pas "dans une boîte". Il flotte sur le papier, entouré de vide, avec juste quelques mots techniques écrits à côté. C'est ça, l'UI de Veza. + +--- + +## 4. Ce que je te demande, par ordre de priorité + +**Lis cette section attentivement.** Chaque point est autonome : si tu ne fais que P0, j'ai déjà un projet qui a une gueule. Si tu vas jusqu'à P3, j'ai un projet qui a une **identité complète**. Arrête-toi où tu veux, quand tu veux. Rien de ce qui est fait ne sera perdu. + +--- + +### P0 — Le minimum vital (si tu ne fais que ça, c'est déjà énorme) + +#### P0.1 — Le wordmark "TALAS" + +Le nom de la marque, écrit à la main, en plusieurs versions. C'est ce qui va apparaître partout : sur le site, sur les micros eux-mêmes, sur les cartons, sur les factures. Partout. + +Je veux trois versions : + +- **Une version "propre"** — lavis maîtrisé, lisible, élégante. Celle qu'on met sur le boîtier métallique du micro. +- **Une version "sauvage"** — tag rapide, geste unique, celle qu'on met en gros sur la page d'accueil du site. +- **Une version "verticale"** — empilée ou en colonne, pour les formats étroits (étiquettes, côtés de boîte). + +Idéalement trois feuilles séparées, une version par feuille, encre noire très contrastée sur papier blanc. Si tu en fais plusieurs variations par style, garde-les toutes, je les trierai. + +#### P0.2 — Une scène signature (la "hero image") + +**Une seule scène, mais la plus importante de toutes.** Un visuel que je peux mettre en grand sur la page d'accueil du site et qui **résume tout le projet en un regard**. + +Direction : une scène post-apo, un lieu abandonné (usine, atelier, appartement, rue), où la nature reprend ses droits, et où **un élément audio est intégré** comme s'il avait toujours été là. Pas forcément en premier plan : ça peut être une ombre, un fil qui pend, une forme qui évoque un micro sur une table, une vieille enceinte retournée. L'essentiel, c'est que l'ensemble raconte : *ce projet existe dans un monde un peu abîmé, mais il résiste, il dure, il est vivant*. + +Prends ton temps sur celle-là, c'est **LA** pièce. Format A3 minimum, mélange lavis + aquarelle + traits d'encre. Totale liberté de composition. + +--- + +### P1 — Très utile (ça commence à faire un vrai univers) + +#### P1.1 — Le wordmark "VEZA" + +Même logique que "TALAS" mais pour le nom du site web. Un seul style suffit : rapide, fluide, un tag d'un seul trait, qui évoque la connexion, le passage, le lien. C'est moins important que "TALAS" parce que Veza est le nom du site, pas de la marque mère — mais ça apparaîtra souvent en tête de page. + +#### P1.2 — 3 à 5 textures de "liaison" + +Des éléments bruts qui vont servir de transition entre les couches dans l'UI. Pas de composition, juste des éléments isolés que je pourrai détourer et réutiliser à différents endroits : + +- Nuages d'encre dans l'eau (le truc qu'on fait en lâchant une goutte d'encre noire dans un verre) +- Brume / hachures qui s'estompent +- Coulures d'encre noire qui descendent +- Taches d'aquarelle très diluées (gris, ocre, un vert olive éventuellement) +- Textures de papier déchiré ou froissé, traces de doigts + +Chaque texture sur sa propre feuille. + +#### P1.3 — 3 symboles iconiques + +Des petits dessins qui vont revenir partout (favicon, boutons, séparateurs, pictogrammes) : + +- **Un cercle** tracé à la main, jamais parfaitement fermé — type enso japonais, mais version tag, urgente, vivante. +- **Une onde sonore** dessinée en un seul geste brutal — pas un sinus régulier, quelque chose de vivant, un "zip" d'énergie. +- **Un troisième symbole, libre** — quelque chose qui pour toi raconte le projet. Surprends-moi. + +--- + +### P2 — Pour aller plus loin (l'univers devient riche) + +#### P2.1 — Une scène par "zone" du site + +Le site a plusieurs grandes zones : **Shop** (acheter les micros), **Community** (discussions, rencontres), **Learn** (apprendre l'audio), **About** (le projet, l'équipe). + +Une scène par zone, dans le même univers post-apo que la hero. Différents lieux, différentes ambiances. Par exemple : + +- **Shop** → un établi, des outils, des pièces détachées étalées +- **Community** → une place, un feu, des silhouettes autour +- **Learn** → une bibliothèque envahie par les plantes, des livres ouverts +- **About** → un atelier, une vue en plongée sur des mains qui travaillent + +Ces scènes peuvent être plus petites que la hero. Format A4 suffit. Ce sont des "chapitres" visuels du site. + +#### P2.2 — Illustrations des deux micros + +Un dessin à la main de chaque produit : **Talas Lite** et **Talas One**. Pas une photo, pas un rendu 3D — un dessin, encre et aquarelle, qui rend ces objets **désirables comme des objets d'artisan**, comme si on sortait la page d'un carnet de technicien. + +Je te fournirai des photos de référence du prototype réel + les mesures avant que tu t'y mettes. + +--- + +### P3 — Le bonus ultime (là on fait un chef-d'œuvre) + +#### P3.1 — Une frise narrative horizontale + +Une longue bande (format ~5:1 ou 6:1) qui raconte visuellement l'histoire du projet : du bruit → à l'instrument → au son → à la communauté. Libre interprétation. Destinée à être scrollée horizontalement sur une page "Histoire" du site. Ambitieux mais ça peut être une œuvre marquante. + +#### P3.2 — Des lettrines / capitales décoratives + +Des grandes lettres style enluminure-tag-lavis, une par grand thème du site, à placer en début de section éditoriale. Façon vieux manuscrit mais avec du graff dedans. Une dizaine maxi, on n'est pas obligés de faire l'alphabet complet. + +#### P3.3 — Des "vignettes d'ambiance" + +Petits carrés 1:1, chacun une mini-scène, une texture, un fragment, un détail. Pour remplir des grilles de previews, des éléments secondaires du site, des cartes produit. Une dizaine suffit. + +--- + +## 5. Contraintes techniques (important pour que je puisse utiliser tes œuvres) + +### Supports et outils + +- **Papier blanc**, pas crème, pas teinté. C'est crucial parce que je vais détourer tes dessins pour les poser sur le fond blanc de l'UI. Si ton papier est crème, ça va jurer une fois intégré. +- **Encre noire très pigmentée** (encre de Chine classique). Évite les noirs qui tirent vers le marron. +- **Aquarelle bienvenue**, mais palette plutôt **terreuse** : ocres, gris, noirs dilués, éventuellement un vert olive ou un bleu ardoise. **Évite les couleurs vives primaires** — pas de rouge pétant, pas de bleu roi, pas de jaune fluo. +- **Marqueurs, Posca OK** pour les tags, si ça apporte du geste. Évite les feutres qui bavent. + +### Format de livraison + +- **Scan à 600 DPI minimum**, 1200 si ton scanner peut. Si tu n'as pas de scanner, une photo au téléphone à la **lumière du jour** (pas en plein soleil, pas au flash) peut dépanner pour voir le résultat rapide, mais idéalement un scan pour la version finale. +- **Format PNG ou TIFF**, pas JPG. Le JPG compresse les bords à l'encre et ça les bave. +- **Une œuvre par fichier**, pas plusieurs dessins sur une même feuille scannée (sauf s'ils sont destinés à aller ensemble). +- **Pas de compression, pas de retouche, pas de filtre.** Brut. Je me charge du post-traitement (nettoyage du fond, ajustement des niveaux, détourage). +- **Nomme les fichiers simplement** : `talas_wordmark_sauvage_01.png`, `scene_hero_post_apo.png`, etc. + +### Taille physique du support + +- Minimum **A4** pour les petits éléments (symboles, textures, lettrines). +- **A3 préférable** pour les scènes et la hero image. +- Plus c'est grand, mieux c'est. On peut toujours réduire, jamais agrandir proprement. + +### Respiration + +- **Laisse de l'espace vide autour** de chaque dessin. Ne remplis pas toute la feuille jusqu'aux bords. C'est ce qui me permettra d'intégrer les éléments d'UI autour de ton travail sans l'écraser. +- Le vide (le "Ma" en japonais) fait partie de la composition. Il n'est pas "perdu", il est nécessaire. + +--- + +## 6. Ce qui est libre, ce qui ne l'est pas + +### Ce que tu décides toi-même + +- Le style exact (tu es l'artiste, pas moi) +- La composition +- Les accents de couleur dans ta palette +- Les détails narratifs des scènes +- L'ordre dans lequel tu fais les choses (tant que le P0 passe en premier, ou en parallèle du reste) +- Le rythme — je n'ai aucune deadline dure à t'imposer + +### Ce que je te demande de respecter + +- **Le noir et blanc domine.** La couleur est un accent, pas une base. Un dessin doit fonctionner même si on enlève la couleur. +- **Pas de cyberpunk, pas de néon, pas d'esthétique "tech du futur".** On est ancrés dans le réel, dans la matière, dans le passé-qui-dure. Les seuls éléments "tech" viendront de la couche UI (ma partie), pas de la tienne. +- **Pas de personnages identifiables.** Des silhouettes, des ombres, des présences, des mains OK. Pas de visages précis, pas de portraits qui pourraient ressembler à quelqu'un de réel (sauf si on en reparle ensemble). +- **Pas de symboles chargés.** Pas de croix, pas de drapeaux, pas de signes politiques, pas de références directes à des marques existantes. On construit un univers neuf. +- **Le papier blanc reste visible autour des dessins.** Espace, vide, respiration. + +--- + +## 7. Références (juste pour caler le ton, pas pour copier) + +Quelques univers à regarder si tu veux te mettre dans l'ambiance. **Ce sont des références de ton, pas de forme.** Je veux ton trait à toi, pas une synthèse de ces gens. + +- Les rouleaux de paysage chinois Song — la profondeur du vide, le "Ma" +- Les carnets de voyage d'**Edmond Baudoin** — encre vivante, geste libre +- Les toiles de **Zao Wou-Ki** — lavis abstrait et force du geste +- Les scènes post-apo dans le jeu *The Last of Us* — la nature qui reprend +- Les illustrations de **Victo Ngai** — tension entre lavis et modernité +- Les tags / throw-ups new-yorkais des années 80 — pour l'énergie du geste +- Le film *Princesse Mononoké* de Miyazaki — tension nature / machine, présence du vivant + +--- + +## 8. Comment on procède en pratique + +1. Tu lis ce doc. Tu me dis si c'est clair, ou si tu as des questions (tu en auras, c'est normal). +2. On se voit une fois, en vrai, pour qu'on regarde ensemble quelques-uns de tes travaux existants et qu'on cale le ton. +3. Tu bosses à ton rythme. Je n'ai pas de deadline à t'imposer — mais plus j'ai de choses tôt, plus le site avance, donc tu verras concrètement ton travail apparaître vite. +4. À chaque œuvre finie, tu me l'envoies (scan ou photo brute), je la nettoie/détour, je te montre comment elle est intégrée dans l'UI du site, et on itère si besoin. Tu as un droit de regard total sur comment ton travail est utilisé. +5. Tu peux t'arrêter quand tu veux. Ce qui est fait reste utile. Rien n'est perdu, rien n'est gaspillé. + +--- + +## 9. Ce que je t'offre en retour + +Je ne peux pas te payer en argent maintenant. Voici ce que je peux et vais faire : + +- **Crédit visible et permanent.** Ton nom et ton lien (site, Instagram, portfolio — ce que tu veux) apparaissent dans le "À propos" du site, dans chaque page où ton travail est utilisé, sur les supports physiques du projet (boîtes, guides, goodies). Pas en petit en bas de page : en grand, assumé. +- **Les originaux te restent.** Tout ce que tu dessines reste à toi. Je scanne, je n'achète pas. Tu peux les vendre, les exposer, les garder, les détruire — ce sont tes œuvres. +- **Exclusivité très limitée.** Je te demande juste de ne pas revendre **exactement ces pièces-là** à une autre marque audio pendant 2 ans. Tu peux continuer à faire du lavis, du tag, du post-apo pour qui tu veux — juste pas exactement les dessins que tu auras faits pour Talas. +- **Paiement rétroactif si le projet génère de l'argent.** Promesse morale, pas contrat juridique. Si Talas devient un vrai business qui rentre de l'argent, tu es le premier à être payé pour ce que tu as fait, à un taux horaire correct, en rétroactif. Je ne peux pas te donner de date, je ne veux pas te mentir là-dessus. +- **Exposition physique.** Si j'ouvre un atelier ou un showroom un jour, tes originaux y sont exposés si tu veux, crédités, et en vente à ton prix si tu veux. + +--- + +## 10. TL;DR (si tu retiens seulement cinq lignes) + +1. J'ai besoin d'une **identité visuelle** pour un projet audio artisanal (microphones + site communautaire). +2. Je veux **du lavis, du tag, des scènes post-apo**, en **noir et blanc principalement**, sur **papier blanc**. +3. **Priorité absolue (P0)** : le mot "TALAS" à la main (3 versions) + une scène "hero" post-apo. +4. **Contraintes techniques** : papier blanc, encre très noire, scan 600 DPI, PNG/TIFF, une œuvre par fichier. +5. **Liberté totale** sur le style — c'est ton univers que je viens chercher, pas un brief de graphiste. + +--- + +Merci d'avoir lu jusqu'ici. Prends le temps que tu veux pour répondre, et dis-moi ce qui te semble flou ou ce qui te donne envie. Si un seul des points du P0 t'inspire déjà, on peut commencer par celui-là — le reste viendra quand il viendra. + +À très vite, + +Nikola diff --git a/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md b/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md new file mode 100644 index 0000000..bcf8073 --- /dev/null +++ b/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md @@ -0,0 +1,267 @@ +--- +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 diff --git a/05_EXPERIENCE_UTILISATEUR/INDEX_IDENTITE.md b/05_EXPERIENCE_UTILISATEUR/INDEX_IDENTITE.md new file mode 100644 index 0000000..95cd37d --- /dev/null +++ b/05_EXPERIENCE_UTILISATEUR/INDEX_IDENTITE.md @@ -0,0 +1,170 @@ +--- +type: index +date: 2026-04-27 +sprint: Sprint 1 — Verrouillage de la vérité +auteur: Nikola +statut: référence active +--- + +# Index identité visuelle Talas/Veza + +> **Carte de navigation officielle.** Pour une question donnée, ce fichier dit où aller. +> Pour la chaîne de décision, voir [[DECISIONS_IDENTITE]]. +> Pour l'inventaire détaillé, voir [[AUDIT_IDENTITE_2026-04-27]]. + +--- + +## Pour quoi ? → Vers quel fichier ? + +### Si tu veux comprendre **pourquoi** Talas a cette identité + +→ `05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS.md` +*Le lavis japonais comme langage. La philosophie. Les principes fondateurs (encre/papier, cyan unique, profondeur par diffusion, vide ma, interface vivante).* + +### Si tu veux **appliquer** une règle (couleur, typo, logo, espacement…) + +→ `05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md` ★★★ +*Source de vérité opérationnelle. Toutes les règles d'application avec les hex codes, les ratios WCAG, les tailles minimales, les zones d'exclusion, les usages interdits.* + +### Si tu veux le **brief synthèse** (vue d'ensemble rapide) + +→ `05_EXPERIENCE_UTILISATEUR/IDENTITE_VISUELLE.md` +*Brief synthèse navigable : direction artistique, logo, palette, typo, applications.* + +### Si tu commandes une œuvre à l'**artiste invité** (Renaud) + +→ `05_EXPERIENCE_UTILISATEUR/BRIEF_ARTISTE_IDENTITE_VISUELLE.md` +*Brief opérationnel : concept en 3 couches (papier / œuvres / UI), priorités P0-P3, contraintes techniques (papier blanc, encre noire pigmentée, scan 600 DPI, PNG/TIFF), ce qui est libre vs imposé.* + +### Si tu veux **dessiner ou choisir le logo** + +→ `05_EXPERIENCE_UTILISATEUR/GUIDE_CREATION_LOGO.md` +*Guide pratique pas-à-pas pour créer le logo Talas (et Veza).* + +### Si tu codes le **design system Veza** (React/Tailwind) + +→ `05_EXPERIENCE_UTILISATEUR/SUMI_V3_SPECIFICATION.md` +*Spec technique : tokens CSS, composants React, animations classifiées (goutte/trait/lavis/vague/marée), couches d'encre, budget performance.* +*Implémentation effective : `/home/senke/git/talas/veza/apps/web/src/index.css`* + +### Si tu veux comprendre les **concepts UX innovants** propres à Veza + +→ `05_EXPERIENCE_UTILISATEUR/CONCEPTS_INNOVANTS_VEZA.md` +*Patine de l'interface, recherche comme exploration spatiale, espaces artistes personnalisables, système de troc, suzuri (player audio).* + +### Si tu planifies l'**exécution** de l'identité + +→ `01_PILOTAGE/ROADMAP_IDENTITE_VISUELLE.md` +*Roadmap V1-V8 (~18-28 jours, faisable en nomade) : exploration logo, vectorisation, déclinaisons, palette, typographie, templates, design system, validation.* + +### Si tu veux écrire pour les **réseaux sociaux** ou la **landing** + +- `07_CONTENUS_MARKETING/Storytelling/MANIFESTE_TALAS.md` — Manifeste de marque (ton de voix) +- `07_CONTENUS_MARKETING/STRATEGIE_CONTENU.md` — Stratégie de contenu RS +- `07_CONTENUS_MARKETING/LANDING_PAGE_COMING_SOON.md` — Landing page + +### Si tu veux le **fond projet** (mission, vision, valeurs, gamme) + +→ `00_META/TALAS_IDENTITE_PROJET.md` +*Document d'identité projet (single source of truth pour tout ce qui n'est pas visuel).* + +### Si tu **explores** une nouvelle direction (méthodologie de travail) + +→ `05_EXPERIENCE_UTILISATEUR/Identite_Visuelle/WORKBOOK_IMPRIMABLE/` +*14 étapes : 01_MANIFESTE → 02_TERRITOIRE → 03_MOODBOARD → 04_MATIÈRES → 05_LOGO_BRAINSTORM → 06_LOGO_CROQUIS → 07_LOGO_SYNTHESE → 08_PALETTE_EXPLORATION → 09_PALETTE_COMBINAISONS → 10_TYPO_TEST → 11_ICÔNES_CROQUIS → 12_DIRECTION_PHOTO → 13_IDENTITE_SONORE → 14_SYNTHÈSE_FINALE.* +*⚠️ C'est un OUTIL DE TRAVAIL, pas une spec. À utiliser pour produire, pas pour référencer en application.* + +--- + +## Pour qui ? → Quels documents lire ? + +### Si tu es Nikola (fondateur, créateur du système) + +**Lecture obligatoire** : DIRECTION_ARTISTIQUE + CHARTE_GRAPHIQUE + DECISIONS_IDENTITE. +**Lecture utile** : SUMI_V3_SPECIFICATION + CONCEPTS_INNOVANTS_VEZA + ROADMAP_IDENTITE_VISUELLE. + +### Si tu es l'artiste invité (Renaud) + +**Lecture obligatoire** : BRIEF_ARTISTE_IDENTITE_VISUELLE (c'est le doc fait pour toi). +**Lecture optionnelle** (si curiosité) : DIRECTION_ARTISTIQUE_TALAS. + +### Si tu es un développeur frontend qui code Veza + +**Lecture obligatoire** : CHARTE_GRAPHIQUE (palette, typo, règles) + SUMI_V3_SPECIFICATION (spec tech). +**Référence dans le code** : `/home/senke/git/talas/veza/apps/web/src/index.css`. +**Verrou Veza** : `/home/senke/git/talas/veza/veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md` (à savoir : actuellement désaligné de la charte — Sprint 2). + +### Si tu es un futur graphiste / studio externe + +**Lecture obligatoire** : CHARTE_GRAPHIQUE (toutes les règles, faire/ne pas faire). +**Lecture utile** : DIRECTION_ARTISTIQUE (le pourquoi) + IDENTITE_VISUELLE (le brief synthèse). + +### Si tu es un community manager / rédacteur + +**Lecture obligatoire** : MANIFESTE_TALAS + STRATEGIE_CONTENU. +**Lecture utile** : CHARTE_GRAPHIQUE §8.4 (réseaux sociaux). + +--- + +## Quoi faire ? → Quel sprint ? + +| Besoin | Sprint | Statut | +|--------|--------|--------| +| Comprendre l'identité actuelle | Sprint 1 | ✅ Fait — lire AUDIT + DECISIONS + CHARTE | +| Trancher les contradictions doc | Sprint 1 | ✅ Fait — voir DECISIONS_IDENTITE | +| Archiver Cyber-Lavis | Sprint 1 | ⏳ Plan prêt, à valider/exécuter | +| Supprimer doublons | Sprint 1 | ⏳ Plan prêt, à valider/exécuter | +| Aligner code Veza sur la charte (retirer indigo, etc.) | Sprint 2 | À démarrer | +| Mettre à jour ORIGIN Veza | Sprint 2 | À démarrer | +| Produire le logo (P0 artiste) | Sprint 3 | En cours (brief envoyé) | +| Produire texture washi + 10 icônes | Sprint 3 | À démarrer | +| Implémenter design system tokens propres | Sprint 4+ | Style Dictionary à choisir | + +--- + +## Archives & explorations + +### `13_ARCHIVES/cyber-lavis-experiment-2026-04/` (à créer) + +Exploration alternative archivée. Contient : +- `IDENTITE_VISUELLE_CYBER_LAVIS.md` (la spec alternative non retenue) +- `session/` (les 6 fichiers de la session expérimentale, leçons précieuses) +- `code/` (projet React showcase, sans `node_modules/`) + +### `13_ARCHIVES/all-talas/talas_design_system_v2*.html` + +V2 antérieur du design system, déjà archivé. + +--- + +## Ce qui n'existe PAS encore (à produire) + +### Assets visuels (Sprint 3) +- `logo/talas/` (SVG) — symbole, logotype, déclinaisons +- `logo/veza/` — logotype tag fluide +- `textures/washi.png` — 512×512, ~8 Ko +- `icones/svg/` — 10 icônes calligraphiques prioritaires +- `templates/` — RS, OG, watermark +- Œuvres scannées de l'artiste invité (hero post-apo, textures, symboles) + +### Tokens consolidés (Sprint 2-4) +- `tokens.json` (W3C format) → source unique +- Pipeline Style Dictionary → CSS + TS exports +- ESLint rule : interdire les hex / px / ms hors fichiers tokens + +### Documents publics (Sprint 5+) +- Brand book PDF exporté (depuis Figma une fois les assets disponibles) +- Storybook public ou Zeroheight pour les composants + +--- + +## Métadonnées + +| Champ | Valeur | +|-------|--------| +| Document | Index identité Talas/Veza | +| Version | 1.0 | +| Date | 27 avril 2026 | +| Auteur | Nikola | +| Documents indexés | ~15 sources actives, ~3 archives | +| Mise à jour suivante | Après validation Sprint 1 (archivage exécuté) |