089ae5bd0a
ORIGIN_UI_UX_SYSTEM.md (v2.0.0 lock) defined a generic Tailwind sky-blue palette (#0ea5e9 etc.) that contradicted the SUMI ink-wash brand identity (#0098B5 Mizu cyan unique + data viz pigments). This commit aligns the ORIGIN lock. New file : ORIGIN_BRAND_IDENTITY.md (v1.0.0) - Codifies the canonical SUMI palette (charte §4) - Documents data viz exception (charte §4.5 — 5 viz pigments allowed) - Lists all immutable rules (no #FFFFFF, no #000000, cyan unique, etc.) - Points to source : packages/design-system/tokens/ + CHARTE_GRAPHIQUE_TALAS.md - Documents motion classification (goutte/trait/lavis/vague/maree) - Documents typography (Space Grotesk + Inter + JetBrains Mono, woff2 only) - Documents ESLint guard (no-restricted-syntax for hex literals) Updated : ORIGIN_UI_UX_SYSTEM.md - Header note marks Sections 2/3/4 as superseded by ORIGIN_BRAND_IDENTITY. - The interaction patterns / accessibility rules / anti-patterns / user flows remain authoritative. Only the numeric palette/typography stays. Updated : checksums.txt - New SHA-256 for ORIGIN_UI_UX_SYSTEM.md (header note added). - New entry for ORIGIN_BRAND_IDENTITY.md. Closes Sprint 2 follow-up #4. Sprint 2 fully shipped. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
161 lines
6.5 KiB
Markdown
161 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.
|