veza/veza-docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md

ORIGIN_BRAND_IDENTITY.md

📋 RÉSUMÉ EXÉCUTIF

Ce document est le verrou ORIGIN côté brand identity. Il pointe vers la source canonique (CHARTE_GRAPHIQUE_TALAS.md dans le repo de docs Talas Group) et fixe les invariants visuels que la plateforme Veza doit respecter — palette SUMI (lavis japonais, cyan Mizu unique), typographie tri-tonique, palette data viz exceptionnelle, animations "poids de l'eau", et règles d'application absolues.

Version : 1.0.0 (créé 27 avril 2026, post Sprint 2 tokens migration). Statut : verrou ORIGIN — toute modification passe par révision RFC. Source de vérité externe : CHARTE_GRAPHIQUE_TALAS.md (TG__Talas_Group).

---

🎯 OBJECTIF

Aligner ORIGIN_UI_UX_SYSTEM.md (qui définissait jusqu'à v2.0.0 une palette générique Tailwind sky-blue) avec la vraie identité de marque Talas, codifiée dans la charte graphique (avril 2026, validée par le brief artiste invité).

Sans ce verrou, ORIGIN_UI_UX_SYSTEM continuerait à autoriser une palette non-SUMI, ce qui contredirait :

• La charte (palette canonique cyan unique #0098B5)
• Le code applicatif (Sprint 2 — tokens Style Dictionary, drift hex éliminé)
• Le brief artiste invité (15 avril 2026, "papier blanc, pas cyberpunk")

🔒 RÈGLES IMMUABLES (charte §4.4 + §4.5)

1. Pas de blanc pur (#FFFFFF). Le plus clair est #F2EDE6 (papier washi).
2. Pas de noir pur (#000000). Le plus sombre est #0D0D0F (noir d'encre).
3. Le cyan Mizu (#0098B5) est la SEULE couleur d'accent UI. Pas de deuxième couleur dans l'interface standard. Exception scope-limitée : data viz uniquement (charts, waveforms, analytics) peut utiliser la palette à 5 pigments (charte §4.5).
4. Couleurs fonctionnelles (success/error/warning) toujours diluées (max 60 % opacité). Jamais en aplat solide.
5. Gris toujours chauds. Pas de gris bleu, pas de gris pur neutre.
6. WCAG AA partout, AAA strict sur 4 flux critiques (nav principale, lecture audio, upload, auth). Si esthétique vs accessibilité → accessibilité gagne.

🎨 PALETTE CANONIQUE

Mode dark (default — :root, [data-theme="dark"])

Rôle	Token	Valeur
Papier (fond)	--sumi-bg-base	#0D0D0F
Encre (texte primary)	--sumi-text-primary	#E8E3DB
Encre diluée (secondary)	--sumi-text-secondary	#9A958D
Mizu (accent UI unique)	--sumi-accent	#0098B5
Mizu hover	--sumi-accent-hover	#00B4D8
Mizu profond (texte AA)	--sumi-accent-emphasis	#006B7F

Mode light ([data-theme="light"] — washi paper)

Rôle	Token	Valeur
Papier (fond)	--sumi-bg-base	#F2EDE6
Encre (texte primary)	--sumi-text-primary	#1A1A1E
Accent UI	--sumi-accent	#007A94 (mizu actif, pour AA sur washi)

Palette data viz (UNIQUEMENT charts/waveforms — charte §4.5)

Pigment	Token	Valeur
Indigo	--sumi-viz-indigo	#7c9dd6
Vermillion	--sumi-viz-vermillion	#d4634a
Sage	--sumi-viz-sage	#7a9e6c
Gold	--sumi-viz-gold	#c9a84c
Neutral	--sumi-viz-neutral	#a8a4a0

Interdit hors data viz. Un bouton primaire = cyan. Un texte de lien = cyan. Si le composant n'est pas un graphique, ces pigments sont proscrits.

Couleurs fonctionnelles (toujours diluées, max 60 % opacité)

Rôle	Token	Valeur
Succès	--sumi-success / --sumi-sage	rgba(90, 140, 100, 0.60)
Erreur	--sumi-error	rgba(180, 80, 70, 0.55)
Warning	--sumi-gold	rgba(190, 150, 60, 0.55)
Info	--sumi-info	= --sumi-accent

🔤 TYPOGRAPHIE

Usage	Police	Poids
Titres / marque	Space Grotesk	Bold (700)
Corps de texte	Inter	Regular (400), SemiBold (600)
Code / specs	JetBrains Mono	Regular (400)

• Format obligatoire : woff2 uniquement, font-display: swap.
• Budget total polices : < 130 Ko (Space Grotesk Bold + Inter Variable au chargement initial ; JetBrains Mono lazy-loaded).
• Titres en MAJUSCULES avec letter-spacing 0.10–0.15em.

⚡ MOTION (charte §3 — "le poids de l'eau")

Masse	Token	Durée	Usage
Goutte	--sumi-motion-goutte	100ms	Tooltips, badges
Trait	--sumi-motion-trait	150ms	Boutons, icônes
Lavis	--sumi-motion-lavis	250ms	Cards, dropdowns
Vague	--sumi-motion-vague	350ms	Modales, sidebars
Marée	--sumi-motion-maree	450ms	Navigation, player

Règle critique : max 2 animations simultanées à l'écran. Si une troisième doit s'animer, elle attend.

🔧 IMPLÉMENTATION

Source unique : packages/design-system/tokens/ (W3C JSON tokens spec). Compilation via Style Dictionary v4 → CSS vars + TS exports :

npm run build:tokens --workspace=@veza/design-system

Outputs (gitignored, regénérés au build via le script prepare) :

• dist/tokens.css — CSS vars unifiées (primitive + dark + light)
• dist/tokens.ts + tokens.d.ts — exports TS pour canvas/runtime

Consommation par apps/web :

• CSS : @import '@veza/design-system/tokens.css'; au top de index.css
• TS : import { ColorVizIndigo } from '@veza/design-system/tokens-generated';

🚫 INTERDICTIONS

ESLint custom rule (apps/web/eslint.config.js) bloque les littéraux hex en JS/TS :

'#7c9dd6'  →  ❌ ESLint warn
              → Use var(--sumi-viz-indigo) ou import ColorVizIndigo

📚 RÉFÉRENCES

• Source canonique brand : ~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/CHARTE_GRAPHIQUE_TALAS.md
• Décisions Sprint 1 : ~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/DECISIONS_IDENTITE.md
• Direction artistique : ~/Documents/TG__Talas_Group/05_EXPERIENCE_UTILISATEUR/DIRECTION_ARTISTIQUE_TALAS.md
• Source tokens locale : packages/design-system/tokens/
• Doc package : packages/design-system/README.md
• Verrou UI/UX rules : ORIGIN_UI_UX_SYSTEM.md (ce repo) — règles d'interaction, accessibility, anti-patterns. Doit être lu en parallèle de ce document : ORIGIN_UI_UX_SYSTEM dit comment on assemble, ce doc dit avec quels matériaux.

🔄 RÉVISION

• v1.0.0 (2026-04-27) — Création post Sprint 2 tokens migration. Aligne le verrou ORIGIN avec la charte v2.0 (cyan unique + data viz Option B).

Toute évolution future suit le même process que les autres docs ORIGIN : RFC → revue Nikola → bump version → recompute checksums.txt.