veza/veza-docs/vision/domains/frontend/design-system-summary.md

id	title	sidebar_label
design-system-summary	🎨 Design System Veza - Résumé Complet	🎨 Design System Veza - Résumé Complet

NOTE: Cette page décrit la CIBLE (but visé).

🎨 Design System Veza - Résumé Complet

Système de design unifié et cohérent pour toutes les interfaces Veza Platform

✅ Livraison Complète

📋 Fichiers Créés

1. DESIGN_SYSTEM.md - Documentation complète du design system
2. veza-frontend/tailwind.config.js - Configuration Tailwind avec toutes les variables
3. veza-frontend/src/components/DesignSystem/ - Kit de composants React
   • Button.tsx - Composant bouton avec toutes les variantes
   • Input.tsx - Composant input avec tous les types et états
   • Card.tsx - Composant carte avec options avancées
   • Modal.tsx - Composant modal avec gestion complète
   • DesignSystemDemo.tsx - Page de démonstration interactive
   • index.ts - Export centralisé des composants
   • README.md - Guide d'utilisation détaillé

🎯 Identité Visuelle Veza

Vision

• Plateforme musicale collaborative moderne
• Interface créative pour artistes et producteurs
• Technologies avancées (IA, streaming temps réel)
• Accessibilité et inclusivité

Inspiration

• Spotify - Interface audio moderne et intuitive
• Discord - Collaboration temps réel et communauté
• SoundCloud - Découverte et partage musical
• Figma - Outils créatifs professionnels

🎨 Palette de Couleurs

Mode Sombre (Principal)

/* Couleurs Principales */
--veza-primary-500: #0ea5e9;    /* Bleu/Violet créatif */
--veza-secondary-500: #d946ef;  /* Violet/Purple créatif */
--veza-accent-500: #f97316;     /* Orange/Ambre énergique */

/* Couleurs de Fond */
--veza-bg-primary: #0f0f23;     /* Fond principal */
--veza-bg-secondary: #1a1a2e;   /* Fond secondaire */
--veza-bg-surface: #1f2937;     /* Surfaces (cards) */
--veza-bg-elevated: #374151;    /* Surfaces élevées */

/* Couleurs de Texte */
--veza-text-primary: #ffffff;   /* Texte principal */
--veza-text-secondary: #e5e7eb; /* Texte secondaire */
--veza-text-muted: #6b7280;     /* Texte atténué */

/* Couleurs d'État */
--veza-success-500: #10b981;    /* Succès */
--veza-warning-500: #f59e0b;    /* Avertissement */
--veza-error-500: #ef4444;      /* Erreur */
--veza-info-500: #3b82f6;       /* Information */

Mode Clair (Alternative)

/* Couleurs de Fond */
--veza-light-bg-primary: #ffffff;
--veza-light-bg-secondary: #f9fafb;
--veza-light-bg-surface: #ffffff;

/* Couleurs de Texte */
--veza-light-text-primary: #111827;
--veza-light-text-secondary: #374151;
--veza-light-text-muted: #9ca3af;

🖋 Typographie

Police Principale

font-family: 'Inter', system-ui, -apple-system, sans-serif;

Hiérarchie Typographique

/* Titres */
.text-veza-h1  /* 3rem / 700 / -0.025em */
.text-veza-h2  /* 2.25rem / 600 / -0.025em */
.text-veza-h3  /* 1.875rem / 600 */
.text-veza-h4  /* 1.5rem / 600 */
.text-veza-h5  /* 1.25rem / 600 */
.text-veza-h6  /* 1.125rem / 600 */

/* Corps de Texte */
.text-veza-body        /* 1rem / 400 / 1.6 */
.text-veza-body-large  /* 1.125rem / 400 / 1.6 */
.text-veza-body-small  /* 0.875rem / 400 / 1.5 */
.text-veza-caption     /* 0.75rem / 400 / 1.4 */

/* Interface */
.text-veza-button      /* 0.875rem / 500 / 1.4 */
.text-veza-input       /* 0.875rem / 400 / 1.4 */
.text-veza-label       /* 0.875rem / 500 / 1.4 */

🔲 Composants UI

Button

// Variantes
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>

// Tailles
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

// États
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>

// Avec icône
<Button icon="🎵">With Icon</Button>
<Button icon="🎵" iconPosition="right">Icon Right</Button>

Input

// Types
<Input type="text" placeholder="Texte simple" />
<Input type="email" placeholder="email@exemple.com" />
<Input type="password" placeholder="Mot de passe" />
<Input type="search" placeholder="Rechercher..." />

// Avec label et icône
<Input 
  label="Email"
  type="email"
  placeholder="email@exemple.com"
  icon="📧"
/>

// États
<Input error="Ce champ est requis" />
<Input success helperText="Champ validé" />
<Input disabled />
<Input required />

Card

// Card de base
<Card title="Titre" subtitle="Sous-titre">
  <p>Contenu de la carte</p>
</Card>

// Card interactive
<Card 
  title="Interactive"
  interactive
  onClick={() => console.log('Clicked!')}
>
  <p>Cliquez pour voir l'effet</p>
</Card>

// Card avec gradient
<Card title="Gradient" gradient>
  <p>Card avec dégradé</p>
</Card>

// Card avec header/footer personnalisés
<Card 
  header={<div>Header personnalisé</div>}
  footer={<div>Footer personnalisé</div>}
>
  <p>Contenu</p>
</Card>

Modal

const [isOpen, setIsOpen] = useState(false);

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Titre de la modal"
  size="lg"
  footer={
    <div className="flex justify-end space-x-2">
      <Button variant="ghost" onClick={() => setIsOpen(false)}>
        Annuler
      </Button>
      <Button onClick={() => setIsOpen(false)}>
        Confirmer
      </Button>
    </div>
  }
>
  <p>Contenu de la modal</p>
</Modal>

🎛 Animations et Micro-interactions

Animations CSS

/* Apparition */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Glissement */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Vague */
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-20deg); }
}

/* Flottement */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Lueur */
@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(14, 165, 233, 0.5); }
  100% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.8); }
}

Classes d'Animation

.animate-fade-in    /* Apparition en fondu */
.animate-slide-in   /* Glissement depuis la gauche */
.animate-pulse      /* Pulsation */
.animate-wave       /* Animation de vague */
.animate-float      /* Flottement */
.animate-glow       /* Effet de lueur */

Transitions

.transition-veza           /* Transition générale */
.transition-veza-colors    /* Transition des couleurs */
.transition-veza-transform /* Transition des transformations */

🌗 Thèmes et Modes

Variables CSS pour les Thèmes

/* Mode Sombre (Par défaut) */
[data-theme="dark"] {
  --veza-bg-primary: #0f0f23;
  --veza-bg-secondary: #1a1a2e;
  --veza-bg-surface: #1f2937;
  --veza-text-primary: #ffffff;
  --veza-text-secondary: #e5e7eb;
  --veza-border-color: #374151;
}

/* Mode Clair */
[data-theme="light"] {
  --veza-bg-primary: #ffffff;
  --veza-bg-secondary: #f9fafb;
  --veza-bg-surface: #ffffff;
  --veza-text-primary: #111827;
  --veza-text-secondary: #374151;
  --veza-border-color: #e5e7eb;
}

Composant de Toggle de Thème

const ThemeToggle: React.FC = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');

  const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  return (
    <button
      onClick={toggleTheme}
      className="p-2 rounded-lg bg-veza-bg-surface border border-veza-border-color text-veza-text-primary hover:bg-veza-bg-elevated transition-colors duration-200"
    >
      {theme === 'dark' ? '☀️' : '🌙'}
    </button>
  );
};

📱 Responsive Design

Breakpoints

xs: 475px
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
3xl: 1600px
4xl: 1920px

Classes Utilitaires

.container-responsive  /* Container responsive */
.grid-responsive     /* Grid responsive */
.flex-responsive     /* Flex responsive */

🎯 Principes de Design

1. Cohérence

• Utilisez toujours les composants du design system
• Respectez la hiérarchie typographique
• Maintenez les espacements cohérents

2. Accessibilité

• Utilisez les contrastes appropriés
• Ajoutez des états de focus
• Incluez des labels et descriptions

3. Performance

• Optimisez les animations
• Utilisez les transitions CSS
• Évitez les re-renders inutiles

4. Responsive

• Testez sur tous les écrans
• Utilisez les breakpoints appropriés
• Adaptez le contenu mobile

🚀 Utilisation

Import des Composants

import { Button, Input, Card, Modal } from '@/components/DesignSystem';

Exemple d'Utilisation

function MyComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="p-6 bg-veza-gradient-primary min-h-screen">
      <Card title="Mon Composant" subtitle="Exemple d'utilisation">
        <div className="space-y-4">
          <Input 
            label="Nom"
            placeholder="Entrez votre nom"
            icon="👤"
          />
          
          <Input 
            label="Email"
            type="email"
            placeholder="email@exemple.com"
            icon="📧"
            required
          />
          
          <div className="flex justify-end space-x-2">
            <Button variant="ghost" onClick={() => setIsModalOpen(false)}>
              Annuler
            </Button>
            <Button variant="primary" onClick={() => setIsModalOpen(true)}>
              Confirmer
            </Button>
          </div>
        </div>
      </Card>

      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Confirmation"
        size="md"
      >
        <p className="text-veza-body text-veza-text-secondary">
          Êtes-vous sûr de vouloir continuer ?
        </p>
      </Modal>
    </div>
  );
}

📚 Documentation

Fichiers de Documentation

• DESIGN_SYSTEM.md - Documentation complète
• veza-frontend/src/components/DesignSystem/README.md - Guide d'utilisation
• veza-frontend/src/components/DesignSystem/DesignSystemDemo.tsx - Démonstration interactive

Configuration

• veza-frontend/tailwind.config.js - Configuration Tailwind avec toutes les variables

🧪 Tests et Validation

Tests Visuels

• Page de démonstration interactive
• Tous les composants testés
• Responsive design validé
• Animations optimisées

Tests d'Accessibilité

• Contrastes respectés
• États de focus définis
• Labels et descriptions inclus
• Navigation clavier supportée

🔄 Maintenance

Mise à Jour des Composants

1. Modifier le composant dans src/components/DesignSystem/
2. Mettre à jour la documentation
3. Tester sur tous les projets
4. Déployer les changements

Ajout de Nouveaux Composants

1. Créer le composant dans src/components/DesignSystem/
2. Ajouter les types TypeScript
3. Documenter l'utilisation
4. Ajouter aux tests
5. Mettre à jour l'index

✅ Statut Final

✅ Complété

• Design System complet avec palette de couleurs
• Typographie hiérarchisée avec toutes les tailles
• Composants React (Button, Input, Card, Modal)
• Animations CSS optimisées
• Configuration Tailwind avec toutes les variables
• Documentation complète avec exemples
• Page de démonstration interactive
• Modes clair/sombre supportés
• Responsive design validé
• Accessibilité respectée

🎯 Prêt pour la Refonte UI

Le design system est maintenant 100% prêt pour être utilisé comme base absolue pour toute la refonte UI/UX de Veza Platform. Toutes les interfaces (web, desktop, mobile) peuvent maintenant s'appuyer sur ce système cohérent.

---

Dernière mise à jour : $(date) Version : 1.0.0 Statut : ✅ Design System Complet et Prêt