docs(origin): align brand identity with CHARTE_GRAPHIQUE_TALAS (Sprint 2 follow-up #4)
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>
This commit is contained in:
senke
parent
b4710909c0
commit
089ae5bd0a
3 changed files with 175 additions and 1 deletions
161
veza-docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md
Normal file
161
veza-docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
# 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.
|
||||
|
|
@ -1,5 +1,17 @@
|
|||
# ORIGIN_UI_UX_SYSTEM.md
|
||||
|
||||
> **⚠️ NOTE post Sprint 2 (27 avril 2026)** — Les sections 2 (Design Tokens),
|
||||
> 3 (Typography) et 4 (Color System) de ce document décrivaient en v2.0.0 une
|
||||
> palette générique Tailwind sky-blue (`--color-primary-500: #0ea5e9` etc.).
|
||||
>
|
||||
> **Ces sections sont superseded par [`ORIGIN_BRAND_IDENTITY.md`](./ORIGIN_BRAND_IDENTITY.md)**,
|
||||
> qui codifie la vraie palette SUMI (cyan Mizu unique #0098B5 + data viz
|
||||
> exceptionnelle) alignée sur `CHARTE_GRAPHIQUE_TALAS.md`.
|
||||
>
|
||||
> Le présent document reste la source de vérité pour les **règles d'interaction,
|
||||
> accessibilité, anti-patterns UX, user flows, breakpoints, animations
|
||||
> classification**. La palette numérique stricte est dans BRAND_IDENTITY.
|
||||
|
||||
## 📋 RÉSUMÉ EXÉCUTIF
|
||||
|
||||
Ce document définit le système de design UI/UX complet et définitif pour la plateforme Veza. Il spécifie 200+ composants réutilisables, design tokens (couleurs, typographie, spacing), patterns d'interaction, responsive breakpoints, accessibility WCAG AA minimum (WCAG AAA pour les fonctions critiques), animations, anti-patterns UX interdits, et user flows assurant cohérence visuelle, expérience utilisateur éthique et maintenabilité design sur 24 mois.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
c70da0d132287d67ba913cd12b47bb903f37f6985fc313706355e7f8e7829476 docs/ORIGIN/ORIGIN_API_SPECIFICATION.md
|
||||
2e58f52f632ed734ad98050ec0400da6a839ee0f10564df8ce71fd904b6e0607 docs/ORIGIN/ORIGIN_BUSINESS_LOGIC.md
|
||||
19be8978adb1d0ddff19f15dce38ddc6da8b879f769a850056fd70c5beb58ce0 docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md
|
||||
cb2de54ecb528e89ef1f1ed1ba293dde76b1346665c26882cf8a57c77ebbf7e7 docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md
|
||||
5e15b573481804e55bc9c6f32b78e9ce534423b19857bbac043cda5bfa951c99 docs/ORIGIN/ORIGIN_SECURITY_FRAMEWORK.md
|
||||
89b7c50497d43dee56977d0e38cf3b450ddccbadfa3a04e4ba1bee020b5c861d docs/ORIGIN/ORIGIN_TECHNICAL_STACK.md
|
||||
a3b37c2841eb783b984175507789569c83527c07b7d7bdf4f6f38d70ef15e1d0 docs/ORIGIN/ORIGIN_PERFORMANCE_TARGETS.md
|
||||
|
|
@ -13,3 +13,4 @@ ad00933e78f19702be4d041f7db686ad7101b94d4f4754f2d2f75590cdb2558c docs/ORIGIN/OR
|
|||
a75b9b058c541af15d944626884d3b34b97148a0854a23f5a431cfe29f75a1f5 docs/ORIGIN/ORIGIN_DEPLOYMENT_GUIDE.md
|
||||
25401648f80e30eb9040818a78f96f7e0fc167112d48d558f8449ee5c7a45f2d docs/ORIGIN/ORIGIN_QUALITY_METRICS.md
|
||||
835f5352ec3fd43c6e4bc2512af3c606d0ee5bb5b60ca7ba59561a88c555e38a docs/ORIGIN/ORIGIN_DEVELOPMENT_PHASES.md
|
||||
aa2b251ff914a86ac021323897ea53ffe9491faf0cca82115c4b663024b778b1 docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md
|
||||
|
|
|
|||
Loading…
Reference in a new issue