162 lines
6.5 KiB
Markdown
162 lines
6.5 KiB
Markdown
|
# 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.
|