diff --git a/veza-docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md b/veza-docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md new file mode 100644 index 000000000..b51985a7b --- /dev/null +++ b/veza-docs/ORIGIN/ORIGIN_BRAND_IDENTITY.md @@ -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. diff --git a/veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md b/veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md index 59e869540..9237e4717 100644 --- a/veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md +++ b/veza-docs/ORIGIN/ORIGIN_UI_UX_SYSTEM.md @@ -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. diff --git a/veza-docs/ORIGIN/checksums.txt b/veza-docs/ORIGIN/checksums.txt index 4ba9ac258..125b5f63c 100644 --- a/veza-docs/ORIGIN/checksums.txt +++ b/veza-docs/ORIGIN/checksums.txt @@ -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