AudiOhm/design-system-v2/MASTER.md

# AudiOhm Design System V2 - Modernisé

**Version:** 2.0
**Date:** 2026-01-19
**Style:** Cyberpunk Neon Modernisé + Glassmorphism

---

## 🎨 Style Principal

**Nom:** Cyberpunk Glass Modern
**Mots-clés:** Néon, dark mode, glassmorphism, gradients animés, futuriste, énergique, bold

**Palette Cyberpunk Optimisée:**

| Role | Hex | Usage |
|------|-----|-------|
| **Primary** | #00F0FF | Actions principales, liens, boutons |
| **Secondary** | #BF00FF | Accents, hover states, éléments secondaires |
| **Accent** | #FF006E | Alertes, actions destructives, CTA |
| **Success** | #00FF88 | Success states, confirmations |
| **Background** | #0A0E27 | Fond principal (dark navy) |
| **Background Darker** | #050814 | Sidebars, footers |
| **Card Background** | rgba(15, 23, 50, 0.6) | Cartes, conteneurs (glass) |
| **Text Primary** | #FFFFFF | Titres, texte principal |
| **Text Secondary** | #A0A0C0 | Descriptions, texte secondaire |
| **Border** | rgba(0, 240, 255, 0.2) | Bordures, séparateurs |

---

## 🎯 Typographie

**Font Pairing:**

| Usage | Font | Poids | Taille |
|-------|------|-------|--------|
| **Titres** | Righteous | 400/700 | 2rem–4rem |
| **Body** | Poppins | 300/400/500/600/700 | 1rem–1.2rem |
| **UI Elements** | Poppins | 500/600 | 0.875rem–1rem |

**Google Fonts Import:**
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');
```

**CSS Variables:**
```css
--font-heading: 'Righteous', sans-serif;
--font-body: 'Poppins', sans-serif;
```

**Line Heights:**
- Titres: 1.1
- Body: 1.6
- UI Elements: 1.4

---

## ✨ Effets & Animations

### Core Effects

**1. Glassmorphism**
```css
background: rgba(15, 23, 50, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
```

**2. Neon Glow**
```css
--glow-primary: 0 0 20px rgba(0, 240, 255, 0.5);
--glow-secondary: 0 0 20px rgba(191, 0, 255, 0.5);
--glow-accent: 0 0 20px rgba(255, 0, 110, 0.5);
```

**3. Gradient Animé (Background)**
```css
background: radial-gradient(circle at 20% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(191, 0, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(255, 0, 110, 0.05) 0%, transparent 50%);
animation: gradientShift 20s ease infinite;
```

### Animation Timings

| Type | Duration | Easing | Usage |
|------|----------|--------|-------|
| **Micro-interactions** | 150ms | ease-out | Hover states, focus |
| **Transitions standards** | 300ms | cubic-bezier(0.4, 0, 0.2, 1) | Navigation, modales |
| **Page transitions** | 400ms | ease-out | Changement de page |
| **Loading** | 1500ms | linear | Spinners, skeletons |
| **Continuous animations** | 20s+ | ease-in-out | Background gradients |

**Performance Rules:**
✅ DO: Animer `transform`, `opacity`, `filter`
❌ DON'T: Animer `width`, `height`, `top`, `left`

---

## 🎬 Animations Clés

### 1. Fade In
```css
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
```

### 2. Slide In
```css
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
```

### 3. Pulse
```css
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
```

### 4. Shimmer (Skeleton Loading)
```css
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
```

### 5. Spin (Double)
```css
@keyframes spin {
    to { transform: rotate(360deg); }
}
```

### 6. Logo Glow
```css
@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.5)); }
    33% { filter: drop-shadow(0 0 30px rgba(191, 0, 255, 0.7)); }
    66% { filter: drop-shadow(0 0 25px rgba(255, 0, 110, 0.6)); }
}
```

### 7. Gradient Shift
```css
@keyframes gradientShift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}
```

### 8. Shake (Erreur)
```css
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}
```

---

## 🔘 Composants UI

### Boutons

**Primary Button:**
```css
.btn-primary {
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-primary);
}
```

**Secondary Button:**
```css
.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: rgba(255, 0, 110, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}
```

### Cartes

**Track Card:**
```css
.track-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.track-card:hover {
    border-color: var(--primary);
    box-shadow: var(--glow-primary);
    transform: translateY(-3px) scale(1.01);
}
```

### Form Inputs

```css
.form-group input {
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    border-color: var(--primary);
    background: rgba(0, 240, 255, 0.05);
    box-shadow: var(--glow-primary);
}
```

---

## 📐 Spacing & Layout

### Spacing Scale
```css
--spacing-xs: 0.5rem;   /* 8px */
--spacing-sm: 0.75rem;  /* 12px */
--spacing-md: 1rem;     /* 16px */
--spacing-lg: 1.5rem;   /* 24px */
--spacing-xl: 2rem;     /* 32px */
--spacing-2xl: 3rem;    /* 48px */
--spacing-3xl: 4rem;    /* 64px */
```

### Container Widths
```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
```

### Border Radius
```css
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 15px;
--radius-xl: 20px;
--radius-full: 50%;
```

---

## 🎭 Z-Index Scale

```css
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
```

---

## ♿ Accessibility

### Color Contrast
- **Text on background:** Minimum 4.5:1 (WCAG AA)
- **Large text:** Minimum 3:1 (WCAG AA)
- **UI components:** Minimum 3:1

### Focus States
```css
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
```

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
```

### Touch Targets
- Minimum size: **44x44px** (mobile)
- Spacing between targets: **8px minimum**

---

## 📱 Responsive Breakpoints

```css
--breakpoint-sm: 640px;   /* Mobile */
--breakpoint-md: 768px;   /* Tablet */
--breakpoint-lg: 1024px;  /* Desktop */
--breakpoint-xl: 1280px;  /* Wide */
--breakpoint-2xl: 1536px; /* Extra wide */
```

---

## 🚀 Anti-Patterns à Éviter

❌ **Ne pas faire:**
1. Utiliser des emojis comme icônes (utiliser SVG)
2. Animer `width`, `height`, `top`, `left`
3. Animations infinies sur les éléments décoratifs
4. Surcharger d'animations trop simultanées
5. Néon trop brillant qui fatigue les yeux
6. Texte sans contraste suffisant en mode clair
7. Layout qui change au hover (scale uniquement)

✅ **Faire:**
1. Utiliser des SVG icon (Heroicons, Lucide)
2. Animer `transform`, `opacity`, `filter`
3. Animations continues seulement pour les loaders
4. Limiter à 1-2 animations par élément
5. Utiliser des ombres néon subtiles
6. Contraste 4.5:1 minimum
7. Transitions fluides sans layout shift

---

## 🎨 Composants Spécifiques AudiOhm

### Player Bar
- Position: Fixed bottom
- Height: 90px
- Background: Glassmorphism
- Border top: Gradient rainbow (2px)
- Controls: Shuffle, Prev, Play/Pause, Next, Repeat
- Progress bar: Custom range input avec thumb néon
- Volume: Slider + bouton mute
- Actions: Like, Add to playlist

### Sidebar
- Width: 280px (desktop)
- Background: Dark avec ligne supérieure gradient
- Navigation: 3 items (Accueil, Rechercher, Bibliothèque)
- Active state: Background cyan/10 + barre latérale
- Footer: Bouton déconnexion

### Cards
- Track card: Image + Titre + Artiste + Durée + Bouton play
- Playlist card: Image carrée + Nom + Info tracks
- Hover: Border cyan + Glow + Scale 1.01

### Loading States
- Spinner: Double rotation (cyan + violet)
- Skeleton: Shimmer animation
- Text: "Chargement..." animé

---

## 📦 Éléments de Marque

### Logo
- Icon: Casque audio (FontAwesome)
- Text: "AudiOhm"
- Font: Righteous
- Animation: Glow cyclique (3 couleurs)

### Couleurs de Marque
- Primary: Cyan (#00F0FF)
- Secondary: Violet (#BF00FF)
- Accent: Rose (#FF006E)

### Tone of Voice
- Moderne
- Énergique
- Futuriste
- Accessible
- Fun

---

## 🎯 Priorités d'Implémentation

### Phase 1 - Fondations (CRITICAL)
1. ✅ Variables CSS définies
2. ✅ Typographie importée
3. ✅ Couleurs configurées
4. ✅ Reset CSS

### Phase 2 - Composants Base (HIGH)
1. Boutons (primary, secondary)
2. Form inputs
3. Cards (track, playlist)
4. Navigation

### Phase 3 - Animations (MEDIUM)
1. Hover states
2. Transitions
3. Loading states
4. Micro-interactions

### Phase 4 - Polish (LOW)
1. Scroll animations
2. Parallax effects
3. Advanced hover effects
4. Particle effects

---

## 📚 Ressources

### Google Fonts
https://fonts.google.com/share?selection?family=Poppins:wght@300;400;500;600;700|Righteous

### Icon Libraries
- Font Awesome 6.5: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css
- Heroicons: https://heroicons.com/
- Lucide: https://lucide.dev/

### Documentation
- CSS Tricks: https://css-tricks.com/
- MDN Web Docs: https://developer.mozilla.org/
- Web.dev: https://web.dev/

---

**Version:** 2.0
**Last Updated:** 2026-01-19
**Maintained by:** AudiOhm Design Team