473 lines
No EOL
12 KiB
Markdown
473 lines
No EOL
12 KiB
Markdown
---
|
|
id: "design-system-summary"
|
|
title: "🎨 Design System Veza - Résumé Complet"
|
|
sidebar_label: "🎨 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)**
|
|
```css
|
|
/* 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)**
|
|
```css
|
|
/* 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**
|
|
```css
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
```
|
|
|
|
### **Hiérarchie Typographique**
|
|
```css
|
|
/* 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**
|
|
```tsx
|
|
// 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**
|
|
```tsx
|
|
// 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**
|
|
```tsx
|
|
// 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**
|
|
```tsx
|
|
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**
|
|
```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**
|
|
```css
|
|
.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**
|
|
```css
|
|
.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**
|
|
```css
|
|
/* 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**
|
|
```tsx
|
|
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**
|
|
```css
|
|
xs: 475px
|
|
sm: 640px
|
|
md: 768px
|
|
lg: 1024px
|
|
xl: 1280px
|
|
2xl: 1536px
|
|
3xl: 1600px
|
|
4xl: 1920px
|
|
```
|
|
|
|
### **Classes Utilitaires**
|
|
```css
|
|
.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**
|
|
```tsx
|
|
import { Button, Input, Card, Modal } from '@/components/DesignSystem';
|
|
```
|
|
|
|
### **Exemple d'Utilisation**
|
|
```tsx
|
|
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é**
|
|
- [x] **Design System complet** avec palette de couleurs
|
|
- [x] **Typographie hiérarchisée** avec toutes les tailles
|
|
- [x] **Composants React** (Button, Input, Card, Modal)
|
|
- [x] **Animations CSS** optimisées
|
|
- [x] **Configuration Tailwind** avec toutes les variables
|
|
- [x] **Documentation complète** avec exemples
|
|
- [x] **Page de démonstration** interactive
|
|
- [x] **Modes clair/sombre** supportés
|
|
- [x] **Responsive design** validé
|
|
- [x] **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** |