Espace interne · non public
Design Asset Library
Source de vérité visuelle de l'écosystème Musique-Entreprise : Musique-Entreprise.immo, plateforme de réservation, solfège rythmique et VR Musicplay. Documentation : src/design-system/design-system.md.
1 · Palette officielle
Tokens CSS préfixés --ds-*, aucun token applicatif écrasé.
Bleu nuit principal
--ds-navy
Fond global de toutes les apps de l'écosystème.
Fond secondaire
--ds-navy-2
Bandeaux, barres de contrôle, dégradés de fond.
Surface bleu sombre
--ds-surface
Cartes, panneaux, popovers.
Surface surélevée
--ds-surface-2
Éléments actifs, hover, modales.
Bleu électrique
--ds-blue
Action principale, liens, focus primaire.
Cyan lumineux
--ds-cyan
Accents, anneaux de focus, halos, données actives.
Violet
--ds-violet
Accent secondaire, éléments verrouillés/premium.
Blanc cassé
--ds-offwhite
Texte principal sur fond sombre.
Gris bleuté
--ds-gray-blue
Texte secondaire, légendes, icônes discrètes.
Succès
--ds-success
Validation, réservation confirmée.
Avertissement
--ds-warning
Attention, quota, place limitée.
Erreur
--ds-error
Erreur, annulation, action destructive.
2 · Typographies
Space Grotesk pour les titres, DM Sans pour les textes et interfaces.
H1 — Space Grotesk 700
Musique-Entreprise
H2 — Space Grotesk 600
Solfège rythmique
H3 — Space Grotesk 600
Réserver un atelier
Corps — DM Sans 400 / 1.6
Des parcours musicaux en entreprise, du studio à la réalité virtuelle.
Légende — DM Sans 400, 12px
12 places disponibles · mise à jour à l'instant
Bouton — DM Sans 500, uppercase
Réserver
Badge — DM Sans 700, 10px
Nouveau
3 · Gradients, ombres et surfaces
Bleu → Cyan
--ds-grad-blue-cyan
Boutons principaux, hero, icônes actives.
Violet → Bleu
--ds-grad-violet-blue
VR Musicplay, contenus premium.
Surface (nuit)
--ds-grad-surface
Barres de contrôle, footers.
Ombre douce
--ds-shadow-soft
Cartes standard.
Ombre surélevée
--ds-shadow-raised
Modales, cartes au survol.
Halo discret
--ds-halo
Élément mis en avant, focus produit.
Carte simple
.ds-card
Carte surélevée
.ds-card-raised
Carte interactive
.ds-card-interactive
Glassmorphism
.ds-glass
4 · Composants UI
shadcn/ui habillé par les tokens de marque.
Boutons
États : hover (assombri), focus-visible (anneau cyan 2px), disabled (50 %), selected (bordure cyan).
Champ
Select
Textarea
Notification
| Formule | Site | Statut |
|---|---|---|
| Piano · individuel | Tour Ouest | Confirmé |
| VR Musicplay | Campus Sud | En attente |
5 · Signature « Onde & Portée »
Décorative uniquement : aria-hidden, opacité faible, jamais derrière une partition.
<WaveSignature variant="hero" />
6 · Bibliothèque musicale
Résolution par slug via getMusicAsset(). Fallback icône + gradient tant qu'aucune illustration n'est fournie.
getMusicAsset("piano")
7 · Icônes et pictogrammes
Lucide, strokeWidth 1.75. Cohérence plutôt que quantité.
Réservation
reservation
Créneaux, panier, confirmation.
Professeur
professeur
Intervenant, planning prof.
Élève
eleve
Participant, profil.
Entreprise
entreprise
Client B2B, espace société.
CSE
cse
Offres CSE, avantages salariés.
Immeuble
immeuble
Musique-Entreprise.immo, sites, salles.
VR
vr
VR Musicplay, sessions immersives.
Progression
progression
Niveaux, statistiques, suivi.
Métronome
metronome
Tempo, pulsation, décompte.
Solfège
solfege
Notation, figures, théorie.
8 · Animations et micro-interactions
Toutes neutralisées avec prefers-reduced-motion.
Fade-in
.ds-fade-in
Hover lift
.ds-hover-lift
Glow pulse
.ds-glow-pulse
Validation
Loader
9 · Documentation et réutilisation
- Copier
src/design-system/,src/components/brand/etsrc/assets/brand/. - Ajouter
@import "./design-system/tokens.css";en tête de la feuille de styles globale. - Charger Space Grotesk + DM Sans via une balise
<link>dans le head racine. - Mapper les tokens locaux du projet sur les tokens
--ds-*. - Copier cette page pour disposer de la démo interne.
Règles de contraste, erreurs à éviter et procédure de retrait complet : src/design-system/design-system.md.