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:

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

CSS Variables:

--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

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

--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)

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

2. Slide In

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

3. Pulse

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

4. Shimmer (Skeleton Loading)

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

5. Spin (Double)

@keyframes spin {
    to { transform: rotate(360deg); }
}

6. Logo Glow

@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

@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)

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

---

🔘 Composants UI

Boutons

Primary Button:

.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:

.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:

.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

.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

--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

--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;

Border Radius

--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 15px;
--radius-xl: 20px;
--radius-full: 50%;

---

🎭 Z-Index Scale

--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

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

Reduced Motion

@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

--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