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

PHASE J — IDENTITÉ VISUELLE & MATURITÉ PERÇUE

---

J1. Perception professionnelle

1. Confiance — Un utilisateur fait-il confiance en 5 secondes ?

Note : 7/10

Oui, avec réserves. Le design system KODO dégage une impression de produit travaillé et distinctif. La palette néon cyan/magenta sur fond sombre (mode par défaut) est visuellement frappante et cohérente avec l'univers audio/créatif. Les tokens CSS sont bien définis, le dark mode est complet, les animations sont fluides (easing tokenisés, transitions cohérentes).

Réserves : L'esthétique "manga × graffiti × gaming × terminal" est très niche. Un utilisateur professionnel (producteur, label) pourrait percevoir le produit comme trop "joueur" et pas assez sérieux. Les clip-paths manga et les effets néon, s'ils sont trop présents dans l'interface réelle, peuvent nuire à la perception de fiabilité.

2. Cohérence — Impression d'une seule main ?

Note : 6/10

Partiellement. Les composants UI primitifs sont cohérents entre eux (Button, Card, Badge suivent le même langage visuel). Le design system définit des tokens clairs.

Problèmes :

• La dualité de tokens (--kodo-* vs --veza-*) trahit une refonte en cours
• Les fichiers CSS vanilla parallèles aux composants React montrent une couche de design précédente non nettoyée
• Les hacks !important dans 2 fichiers CSS suggèrent des corrections d'urgence, pas un design délibéré
• La coexistence de Modal et Dialog indique des décisions de design non tranchées

3. Maturité — V0.1, MVP, beta, ou produit mature ?

Note : MVP avancé / Beta précoce

Le code source révèle :

• Forces d'un produit beta : 222K LOC, 60+ composants UI, TypeScript strict, design system formalisé, Storybook, tests, Sentry, feature flags
• Faiblesses d'un MVP : build cassé, 25 fichiers orphelins, 706 as any, import fantôme, 5 fichiers de "ComingSoon" placeholder, features non implémentées (education, gear, live, queue, developer sont des placeholders)

Verdict : Un MVP ambitieux avec une infrastructure de beta — le squelette est solide mais les finitions manquent.

4. Positionnement — L'esthétique correspond-elle à la cible ?

Note : 7/10

Si la cible est des créateurs/producteurs audio jeunes (18-35) : Oui, l'esthétique manga/gaming/neon résonne avec cette démographie. C'est distinctif et mémorable, ce qui est un avantage concurrentiel.

Si la cible est un public B2B plus large (labels, distributeurs, professionnels de l'audio) : Non. L'esthétique est trop niche et pourrait aliéner des utilisateurs plus conservateurs. Un mode "professionnel" plus sobre serait nécessaire.

5. Différenciation — Identité distinctive ou template ?

Note : 8/10

Clairement distinctif. Ce n'est PAS un template Material/Bootstrap/Tailwind UI. Le design system KODO a une vraie identité :

• Palette OKLCH (moderne, perceptuellement uniforme)
• Clip-paths manga
• Gradients néon
• Gaming elements (XP, achievements)
• Scrollbar custom
• Noise texture overlay
• Glass morphism thématisé

C'est un travail d'identité visuelle délibéré, pas un assemblage de composants génériques.

---

J2. Comparaison concurrentielle

Produit le plus proche visuellement

L'UI rappelle un croisement entre Spotify (layout, dark mode, player bar) et Discord (sidebar, chat, glassmorphism), avec une couche d'identité gaming/manga unique. Les tokens de layout (--sidebar-width-expanded: 240px) sont explicitement alignés sur Discord.

Écart avec les leaders

Dimension	Veza	Spotify	Discord	SoundCloud
Design system maturity	MVP+	Production	Production	Production
Dark mode	✅ Complet	✅	✅	⚠️ Partiel
Animations	✅ Tokenisées	✅ Subtiles	✅ Fluides	✅ Basiques
Loading states	✅ Skeletons	✅	✅	⚠️ Spinners
Responsive	✅ Mobile-first	✅	⚠️ Desktop-first	✅
Performance	⚠️ Build cassé	✅	✅	✅
Accessibilité	⚠️ Skip link manquant	✅	⚠️	⚠️
i18n	⚠️ Non externalisé	✅ 60+ langues	✅ 30+ langues	✅

Écart principal : Finition et robustesse. Les leaders n'ont pas de build cassé, pas de code mort, pas de as any endémique.

3 éléments qui tirent vers le bas

1. Build cassé — Impossible de vérifier le rendu réel en production. C'est le signal le plus négatif possible.
2. Code mort et duplications — 25 fichiers orphelins, 5 CSS parallèles, 2 systèmes de modales. Ça transpire le "pas fini".
3. Placeholder "Coming Soon" — 5 routes sont des placeholders vides. Un utilisateur qui navigue sur Gear, Live, Education, Queue ou Developer voit un écran vide.

3 éléments qui fonctionnent bien

1. Design system KODO — L'identité visuelle est forte, distinctive et cohérente dans sa philosophie. Les tokens CSS sont complets.
2. Architecture de composants UI — 60+ primitives bien typées, avec variants, stories et tests. C'est un vrai design system.
3. Infrastructure technique — TypeScript strict, React Query, Zustand, Storybook, Sentry, MSW, ESLint custom rules. Les outils sont là pour supporter un produit de qualité.