Outil interne · non indexé
ME Ecosystem — Brand Book & Design System
Référentiel de marque commun à Musique-Entreprise, Musique-Entreprise.immo, la plateforme de réservation, l'application de solfège rythmique et VR Musicplay.
Sommaire
1 · ADN de marque
Ce qui reste identique dans tous les produits de l'écosystème.
Vision
Faire de la pratique musicale un levier durable de bien-être, de cohésion et de culture d'entreprise.
Mission
Concevoir des parcours musicaux simples à réserver, à animer et à suivre, du premier atelier à la scène immersive.
Promesse
Une expérience musicale professionnelle, accessible dès la première séance, sans prérequis technique.
Valeurs
Exigence pédagogique · Accessibilité · Clarté · Convivialité · Innovation utile.
Positionnement global
Entre l'école de musique traditionnelle et la solution RH de bien-être : un écosystème musical d'entreprise, structuré comme un service (réservation, suivi, pédagogie outillée) et incarné comme une pratique artistique vivante.
2 · Architecture de marque
Une marque mère, quatre expressions produit.
Musique-Entreprise
Marque mère : offre musicale en entreprise, discours commercial et référence de la charte.
Musique-Entreprise.immo
Déclinaison immobilière : salles, sites, résidences et espaces équipés.
Plateforme de réservation
Cœur transactionnel : créneaux, professeurs, salles, CSE et suivi des sessions.
Solfège rythmique
Application pédagogique : lecture, dictée, comptage et création d'exercices.
VR Musicplay
Univers immersif : sessions casque, scènes virtuelles, contenus premium (violet dominant).
Liens et principes de cohérence
- Un seul socle de tokens
--ds-*pour tous les produits. - Le nom du produit se lit toujours après la marque mère : « Musique-Entreprise · VR Musicplay ».
- Le violet identifie l'immersif et le premium ; le cyan identifie l'accent et le focus.
- La signature « Onde & Portée » est le seul motif décoratif partagé.
- Chaque produit peut ajouter des composants métier, jamais une nouvelle palette.
3 · Palette officielle
Cliquez sur une valeur pour la copier.
Bleu nuit principal
Fond global de toutes les apps de l'écosystème.
Fond secondaire
Bandeaux, barres de contrôle, dégradés de fond.
Surface bleu sombre
Cartes, panneaux, popovers.
Surface surélevée
Éléments actifs, hover, modales.
Bleu électrique
Action principale, liens, focus primaire.
Cyan lumineux
Accents, anneaux de focus, halos, données actives.
Violet
Accent secondaire, éléments verrouillés/premium.
Blanc cassé
Texte principal sur fond sombre.
Gris bleuté
Texte secondaire, légendes, icônes discrètes.
Succès
Validation, réservation confirmée.
Avertissement
Attention, quota, place limitée.
Erreur
Erreur, annulation, action destructive.
Bleu → Cyan
Boutons principaux, hero, icônes actives.
Violet → Bleu
VR Musicplay, contenus premium.
Surface (nuit)
Barres de contrôle, footers.
Ombre douce
Cartes standard.
Ombre surélevée
Modales, cartes au survol.
Halo discret
Élément mis en avant, focus produit.
4 · Typographie
Space Grotesk pour les titres, DM Sans pour les interfaces et textes.
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
Chargement des polices par balise <link> dans le head racine — jamais par @import distant dans le CSS.
5 · Signature graphique « Onde & Portée »
Motif décoratif partagé, toujours discret.
Aperçu · variante « hero »
Règles
- Opacité 0,10 à 0,55 selon la variante ; jamais au-delà.
- Toujours
aria-hiddenet non cliquable. - Dérive lente uniquement, coupée par
prefers-reduced-motion. - Une seule occurrence visible par écran.
Interdits
- Derrière une portée, un tableau de données ou un formulaire.
- En couleur hors palette officielle.
- À l'impression (masquée automatiquement).
- Comme logo ou marque de certification.
6 · Composants UI
shadcn/ui habillé par les tokens. États hover, focus, succès, erreur.
Boutons
Badges
Formulaires
Cartes
Standard
.ds-card
Surélevée
.ds-card-raised
Interactive
.ds-card-interactive
Glass
.ds-glass
Tableaux
| Produit | Accent | Statut |
|---|---|---|
| Musique-Entreprise | Actif | |
| Musique-Entreprise.immo | Actif | |
| Plateforme de réservation | Actif |
Dialogues
Notifications
Réservation confirmée
Créneau indisponible
7 · Bibliothèque musicale
Résolution par slug ; fallback officiel icône + gradient.
Batterie
batterie
Piano
piano
Guitare
guitare
Basse
basse
Chant
chant
MAO
mao
Chorale
chorale
Atelier collectif
atelier-collectif
Casque VR
casque-vr
Cours individuel
cours-individuel
Cours collectif
cours-collectif
Visio
visio
Extension immersive (à préparer)
Slugs réservés pour VR Musicplay : casque-vr (existant), puis meta-quest et scene-immersive. Gradient violet → bleu, illustration en lumière basse, casque toujours porté ou posé sur un instrument réel.
8 · Univers photographique
À rechercher
- Lumière naturelle latérale, ombres douces, dominante froide légère.
- Cadrage serré sur les mains, l'instrument, l'écoute ; plans larges pour le collectif.
- Ambiance entreprise crédible : salle de réunion, hall, espace commun réaménagé.
- Visages détendus, concentration réelle, diversité naturelle des profils.
- Instruments cohérents avec l'offre : batterie, piano, guitare, basse, chant, MAO.
À éviter
- Sourires posés en studio, banque d'images générique.
- Éclairage scénique saturé rouge/vert hors contexte VR.
- Instruments joués de façon incorrecte ou matériel incohérent.
- Surcharge de filtres, HDR marqué, flou artistique excessif.
- Texte incrusté dans l'image plutôt que dans l'interface.
9 · Motion design
Durées 200–420 ms, easing --ds-ease.
Transition d'entrée
.ds-fade-in
Hover
.ds-hover-lift
Halo
.ds-glow-pulse
Validation
Toutes les animations sont neutralisées sous prefers-reduced-motion: reduce. Jamais plus d'une animation continue par écran ; aucune animation pendant un exercice rythmique.
10 · Applications par support
Site web
Fond bleu nuit, hero avec signature « hero », H1 Space Grotesk 36px, un seul CTA principal par écran.
Plateforme
Densité élevée, surfaces --ds-surface, tableaux sobres, aucun décor derrière les données.
Mobile
Signature en variante compact, cibles tactiles ≥ 44px, hiérarchie typographique conservée.
Documents PDF
Fond blanc, signature « document » à 12 % d'opacité maximum, texte navy.
Présentations
Variante « presentation », un message par slide, gradient cyan/violet réservé aux titres.
Vidéo
Habillage navy, sous-titres DM Sans, transitions 200–420 ms, logo en bas à droite.
Interface VR
Variante « vr », violet dominant, contrastes renforcés, aucune animation périphérique rapide.
11 · Ton éditorial
Accessible, inspirant, professionnel — jamais technique pour un prospect.
Exemples de titres
- « La musique, nouvelle respiration de vos équipes »
- « Un atelier. Toute une équipe qui joue ensemble. »
- « Apprendre le rythme, pas la théorie »
- « Votre salle devient une scène »
Exemples de CTA
- « Réserver un atelier »
- « Découvrir les formats »
- « Essayer une séance »
- « Parler à un intervenant »
Verbe à l'infinitif, bénéfice explicite, un seul CTA principal par écran.
12 · Do / Don't
Do
Texte clair sur surface sombre
- Utiliser les tokens
--ds-*. - Garder les portées sur fond clair et sans décor.
- Un accent dominant par écran.
- Focus visible sur tout élément interactif.
Don't
Texte gris délavé illisible
- Coder des couleurs en dur (
#fff,bg-black). - Poser un motif derrière une partition ou un tableau.
- Empiler plusieurs animations.
- Substituer d'autres polices à Space Grotesk / DM Sans.
13 · Gouvernance
Emplacement des assets
src/design-system/tokens.css— tokens et utilitaires.src/design-system/tokens.ts— données palette / typo.src/design-system/music-assets.ts— bibliothèque musicale.src/design-system/icons.ts— icônes officielles.src/components/brand/— composants de marque.src/assets/brand/— illustrations.
Conventions de nommage
- Tokens :
--ds-<famille>-<variante>. - Utilitaires CSS :
.ds-<intention>. - Slugs d'actifs : minuscules, sans accent, tirets (
atelier-collectif). - Composants de marque : PascalCase dans
components/brand.
Checklist avant publication
- Aucune couleur codée en dur ; tous les tokens résolus.
- Contrastes vérifiés en clair et en sombre, focus visible partout.
- Polices officielles chargées via
<link>. - Signature graphique discrète, absente derrière les contenus pédagogiques.
- Animations neutralisées sous
prefers-reduced-motion. - Métadonnées de page uniques ; pages internes en
noindex. - Rendu imprimé vérifié (fond blanc, décor masqué).