Brand Guidelines

Masterclass ONM

Orthodontie Neuro-Musculaire

Guide de référence pour l'identité visuelle

Télécharger le titre pour Instagram

Titre Hero

Exemple de titre principal avec dégradé blanc-cyan

Titre Blanc

Titre classique en blanc pour contraste maximal

Titre Cyan

Titre en cyan clair pour hiérarchie visuelle

Logo & Identité

Logo Principal

Masterclass ONM
Orthodontie Neuro-Musculaire

Version principale pour fond clair

Logo Version Sombre

Masterclass ONM
Orthodontie Neuro-Musculaire

Version pour fond sombre

Notre Identité Couleur

Le duo Bleu & Cyan qui définit Masterclass ONM

Bleu Principal

#2563eb
RGB(37, 99, 235)
Confiance • Professionnalisme • Expertise

Cyan Dynamique

#06b6d4
RGB(6, 182, 212)
Innovation • Modernité • Énergie

Dégradés Signature

Dégradé Principal • Boutons CTA
Variante Claire
Variante Foncée

Couleurs Fonctionnelles

Vert Succès
#16a34a
Newsletter • Validations
Orange Certification
#f97316
Badges ONM • Premium

Couleurs Neutres

Gris Foncé
#111827
Texte principal • Titres
Gris Moyen
#9ca3af
Texte secondaire • Icônes

Typographie

Police Système

Aa
Inter
Police moderne, optimisée pour le web
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)

Hiérarchie & Exemples

Maîtrisez l'ONM
Titre Hero • 48px Bold
Formation Excellence
H1 Dégradé • 36px Bold
Orthodontie Neuro-Musculaire
H2 Standard • 30px Bold
Techniques Avancées
H3 • 20px Semibold
Les formations Masterclass ONM offrent une approche complète de l'orthodontie neuro-musculaire, combinant théorie et pratique pour une expertise reconnue.
Paragraphe • 16px Regular
Informations complémentaires et détails techniques
Texte secondaire • 14px Regular

Titre sur Fond Coloré

Texte en blanc avec 90% d'opacité pour une lisibilité optimale sur fonds colorés.

Masterclass ONM

Style signature de l'accueil : fond sombre avec "Masterclass" blanc et "ONM" dégradé.

Orthodontie Neuro-Musculaire

Titre Dégradé Mode Sombre

Dégradé blanc-cyan pour mode sombre, créant un effet premium.

Style Hero Signature

Masterclass ONM

Orthodontie Neuro-Musculaire

L'excellence au service de votre expertise

Masterclass ONM

Taille Large (H1)

Masterclass ONM

Taille Moyenne (H2)

Masterclass ONM

Taille Petite (H3)

Boutons & Composants

Éléments interactifs avec notre signature visuelle

Boutons CTA

États Interactifs

Variantes Spéciales

Sur Fond Coloré

Boutons adaptés aux zones hero et sections colorées

Mode Sombre

Adaptation pour thème sombre et contraste élevé

Icônes & Pictogrammes

Système iconographique cohérent et expressif

Icônes Métier

Certification ONM
Formations
Newsletter
Visibilité

États & Statuts

Validé
Certifié
Excellence
Action

Premium & Spécial

Premium
Favori
🚀
Innovation
⭐
Excellence

Icônes sur Fond Coloré

Adaptation pour zones hero et sections colorées

Mode Sombre

Icônes optimisées pour thème sombre

Cards & Layouts

Composants de mise en page avec impact visuel

Card Standard

Design épuré avec ombre subtile, idéal pour contenus informationnels et listes.

Découvrir

Card Premium

Dégradé signature avec bordure colorée, parfait pour mettre en valeur contenus importants.

Explorer

Card Hero

Design immersif avec dégradé principal, idéal pour CTA et actions prioritaires.

Commencer
CERTIFICATIONONM

Formation Excellence

Maîtrisez l'orthodontie neuro-musculaire avec nos experts.

1,299€
Dr

Dr. Marie Dubois

Orthodontiste certifiée ONM

NewsletterVisible
12
Formations
3
Certificats
98%
Satisfaction

Ambiance & Personnalité

L'ADN émotionnel de Masterclass ONM

🎓

Excellence Éducative

Professionnalisme, rigueur scientifique et transmission d'expertise de haut niveau en orthodontie neuro-musculaire.

⚡

Innovation Continue

Technologies modernes, méthodes avant-gardistes et approches novatrices pour révolutionner la pratique orthodontique.

🤝

Communauté Experte

Réseau de praticiens certifiés, entraide professionnelle et partage d'expériences pour l'avancement de la discipline.

✨

Prestige & Qualité

Standard d'excellence reconnu, certifications prestigieuses et qualité irréprochable dans tous nos programmes.

🚀

Modernité & Performance

Interface intuitive, technologies de pointe et expérience utilisateur optimisée pour une efficacité maximale.

Guidelines d'Usage

Règles essentielles pour maintenir la cohérence

Bonnes Pratiques

  • Utiliser systématiquement les dégradés bleu-cyan pour les CTA principaux
  • Respecter la hiérarchie typographique avec Inter (300-700)
  • Appliquer les micro-interactions et effets hover pour l'engagement
  • Maintenir la cohérence des rayons de bordure (8px, 12px, 16px)
  • Utiliser les icônes Heroicons avec adaptation colorée
  • Privilégier les espaces blancs pour une lisibilité optimale

✕
À Éviter Absolument

  • Mélanger différentes palettes ou introduire des couleurs non-approuvées
  • Utiliser des polices externes ou non-système pour le corps de texte
  • Négliger les états d'interaction (hover, focus, disabled)
  • Surcharger visuellement avec trop d'éléments ou d'effets
  • Ignorer les contrastes d'accessibilité (minimum WCAG AA)
  • Déformer ou altérer les proportions du logo ou des icônes

Palette de Couleurs Complète

Codes couleurs pour graphistes et développeurs

Style Hero Signature (Version Sombre)

Slate Foncé

#0f172a
RGB(15, 23, 42)
slate-900

Bleu Profond

#1e3a8a
RGB(30, 58, 138)
blue-900

Cyan Profond

#164e63
RGB(22, 78, 99)
cyan-900

Blanc Pur

#ffffff
RGB(255, 255, 255)
white
Pour "Masterclass" en titre

Bleu Clair

#dbeafe
RGB(219, 234, 254)
blue-200
Dégradé avec blanc

Bleu Signature

#60a5fa
RGB(96, 165, 250)
blue-400
Pour "ONM" en dégradé

Exemple d'utilisation - Style Hero Signature

Masterclass ONM

Orthodontie Neuro-Musculaire

"Masterclass": white → blue-200 • "ONM": blue-400 → cyan-400 → blue-500

Version Lumineuse (Boutons & CTA)

Bleu Principal

#2563eb
RGB(37, 99, 235)
blue-600

Cyan Dynamique

#06b6d4
RGB(6, 182, 212)
cyan-400

Cyan Foncé

#0891b2
RGB(8, 145, 178)
cyan-600

Dégradé CTA

blue-600→cyan-600
Pour boutons principaux

Exemples d'utilisation - Boutons CTA

Comment créer le fond "Style Hero Signature"

Masterclass ONM

Exemple du fond Style Hero Signature

Code CSS/Tailwind pour reproduire le fond

1. Container principal
<div className="relative overflow-hidden">
2. Fond dégradé principal
<div className="absolute inset-0
bg-gradient-to-br from-slate-900 via-blue-900 to-cyan-900"
></div>

• Dégradé diagonal slate-900 → blue-900 → cyan-900

3. Couche overlay pour profondeur
<div className="absolute inset-0
bg-gradient-to-r from-slate-900/80 to-transparent"
></div>

• Overlay horizontal pour créer de la profondeur

4. Effets de lumière floutés
<!-- Bulle bleue -->
<div className="absolute top-10 right-10 w-32 h-32
bg-blue-600/30 rounded-full blur-3xl animate-pulse"
></div>
<!-- Bulle cyan -->
<div className="absolute bottom-10 left-10 w-40 h-40
bg-cyan-400/20 rounded-full blur-2xl animate-pulse"
></div>

• Bulles colorées avec blur pour effet de profondeur

Comment créer "MASTERCLASS ONM" avec dégradés

Version principale

Masterclass ONM

Orthodontie Neuro-Musculaire

Version avec triple dégradé

Masterclass ONM

Orthodontie Neuro-Musculaire

Code CSS/Tailwind pour "MASTERCLASS ONM"

Structure HTML de base
<h1 className="text-6xl font-bold">
<span className="bg-gradient-to-r from-white to-blue-200
bg-clip-text text-transparent">
Masterclass
</span>
<span className="bg-gradient-to-r from-blue-400 to-cyan-400
bg-clip-text text-transparent">
ONM
</span>
</h1>
Pour "Masterclass"
from-white#ffffff
to-blue-200#dbeafe
• Dégradé subtil blanc → bleu clair
Pour "ONM"
from-blue-400#60a5fa
to-cyan-400#22d3ee
• Dégradé vibrant bleu → cyan
Sous-titre "Orthodontie Neuro-Musculaire"
<p className="text-xl text-gray-300">
Orthodontie Neuro-Musculaire
</p>

• Texte gris clair pour lisibilité sur fond sombre

Guide d'utilisation des codes couleurs

Pour les graphistes

  • • Utiliser les codes hexadécimaux (#) pour tous les logiciels
  • • RGB pour l'impression et les spécifications techniques
  • • "MASTERCLASS" toujours en blanc→blue-200 sur fond sombre
  • • "ONM" en dégradé blue-400→cyan-400→blue-500

Pour les développeurs

  • • Utiliser les classes Tailwind CSS indiquées
  • • Dégradés avec bg-gradient-to-r from-[color] to-[color]
  • • Texte transparent avec bg-clip-text text-transparent
  • • Respecter les opacités pour les effets glassmorphism