# 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 :

```bash
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.