veza/apps/web/dev_audit/frontend/10a_visual_identity.md

# Phase J — Identité Visuelle & Maturité Perçue

---

## J1. Perception professionnelle

### 1. Confiance — 7/10

Un utilisateur lambda **ferait probablement confiance** à ce produit en 5 secondes. Les raisons :

**Positif** :
- Design system SUMI v2.0 avec une identité visuelle distinctive (thème sombre « encre et lumière », grains de papier washi, typographie Space Grotesk) [index.css:6-10, 460-471]
- Palette de couleurs sophistiquée et cohérente — pas un template générique
- Effets glass/blur subtils [index.css:621-626]
- Custom scrollbar raffiné [index.css:478-503]
- Text selection stylisée [index.css:473-476]
- Animations soignées avec `prefers-reduced-motion` respecté [index.css:850-858]

**Négatif** :
- Le nombre élevé de features « ComingSoon » (Gear, Live, Education, Queue, Developer) [routeConfig.tsx:96-101] trahit un produit en développement
- Le `AstralBackground.tsx` (142L) — effet de fond spatial qui peut sembler amateur si mal dosé
- Loading screen minimal (spinner + "Chargement...") [App.tsx:161-168] — pas de branded loading

### 2. Cohérence — 7/10

L'interface **donne majoritairement** l'impression d'avoir été conçue par une seule personne.

- Le design system SUMI est appliqué de manière relativement uniforme
- Les tokens sémantiques (`bg-background`, `text-foreground`, `text-muted-foreground`) sont utilisés partout
- Les composants UI primitives sont bien centralisés et réutilisés
- **Points de rupture** : la dualité `components/views/` vs `features/pages/` crée des incohérences stylistiques mineures entre les écrans refactorés (SUMI natif) et les legacy (patterns plus anciens)

### 3. Maturité — Beta avancée (6.5/10)

Le produit ressemble à un **produit en beta / pre-release** :

- Architecture sophistiquée (design system formalisé, feature flags, i18n)
- Composants bien structurés avec skeletons et empty states
- Features planifiées avec placeholders « ComingSoon »
- Migration architecturale en cours (dual patterns visible)
- Pas encore la finition d'un produit mature (skip nav absent, `loading="lazy"` absent, quelques inline styles)

### 4. Positionnement — 7/10

L'esthétique correspond bien à la cible : **plateforme créative audio / collaboration musicale**.

- Le thème sombre est adapté aux créateurs audio (comme FL Studio, Ableton)
- Les touches japonaises (SUMI, washi, Noto Serif JP) donnent un caractère distinctif
- Les couleurs (accent bleu-acier, vermillion, sage, gold) sont appropriées pour un outil créatif
- Le player audio intégré (PlayerBar, WaveformVisualizer, ProgressBar) montre le focus sur l'audio

### 5. Différenciation — 8/10

Il y a **une identité visuelle distinctive** :

- Ce n'est **pas** un template Material, Bootstrap ou Tailwind UI standard
- Le design system SUMI avec sa philosophie « encre et lumière » est original
- La texture grain de papier [index.css:460-471] et les effets washi sont distinctifs
- Les 4 « pigments » (accent, vermillion, sage, gold) [index.css:46-64] créent une palette reconnaissable
- La typographie (Space Grotesk + Inter) est un choix distinctif vs le ubiquitaire Inter seul

---

## J2. Comparaison concurrentielle

### Produit comparable

L'UI se rapproche le plus de **Splice** ou **BandLab** en termes de positionnement, avec une influence esthétique rappelant **Linear** (design system rigoureux, dark-first, animations subtiles) et **Discord** (sidebar navigation, chat intégré, gamification).

### Écart avec les leaders

| Leader | Écart perçu | Détail |
|--------|-------------|--------|
| Splice | Moyen | Splice a un polish plus élevé sur les interactions et les transitions |
| BandLab | Faible | Le design system SUMI est plus sophistiqué |
| SoundCloud | Moyen | SoundCloud a un waveform player plus abouti et une identité de marque plus forte |
| Linear | Significatif | Linear a une finition pixel-perfect que Veza n'a pas encore atteint |

### 3 éléments qui tirent le produit vers le bas

1. **Features « ComingSoon »** — 5 routes avec placeholder générique, donnent une impression de produit incomplet
2. **Loading screen non-brandé** — Simple spinner + texte « Chargement... », pas de logo, pas d'animation branded
3. **Migration visuelle incomplète** — Les écrans non-refactorés (legacy views) peuvent avoir un style légèrement décalé par rapport aux écrans SUMI natifs

### 3 éléments visuels qui fonctionnent bien

1. **Design system SUMI** — Identité cohérente et distinctive avec les tokens, la palette 4 pigments, et la philosophie « encre et lumière »
2. **Skeleton loading** — Les skeletons systématiques dans chaque view donnent une impression de fluidité et de professionnalisme
3. **Composants audio** — WaveformVisualizer, PlayerBar, ProgressBar montrent un soin particulier pour le cœur de métier (audio)

---

## Score Maturité Perçue

| Critère | Points | Justification |
|---------|--------|---------------|
| Identité visuelle | +2 | SUMI v2.0 distinctif, pas un template |
| Cohérence globale | +1.5 | Tokens bien appliqués, quelques legacy breaks |
| Polish des interactions | +1 | Animations, transitions, hover states |
| Features incomplètes | -1 | 5 routes ComingSoon |
| Loading experience | -0.5 | Pas de branded loading |
| Migration visible | -0.5 | Dualité stylistique entre refactoré et legacy |
| Audio UI quality | +1 | Cœur de métier soigné |
| Dark/Light theme | +0.5 | Les deux thèmes sont complets |
| **Total** | **6.5/10** | **Beta avancée avec identité forte** |