Charte Graphique - MAP EXPERIENCE

MAP EXPERIENCE

Charte Graphique V4

Palette de Couleurs

Couleurs Principales

Bleu Océan Profond
#05516E
RGB: 5, 81, 110
Couleur principale - Headers, navigation, titres majeurs, éléments structurels
Orange Énergique
#E88402
RGB: 232, 132, 2
CTA principaux, boutons d'action, liens importants, badges, accents dynamiques
Vert Nature
#41A233
RGB: 65, 162, 51
Succès, disponibilité, expériences nature, confirmations, éléments positifs

Variations et Nuances

Bleu Océan Clair
#036D93
RGB: 3, 109, 147
Variation du bleu principal, hover states, éléments interactifs
Bleu Nuit
#033D50
RGB: 3, 61, 80
Textes importants, contrastes forts, footer
Orange Lumineux
#FFA726
RGB: 255, 167, 38
Hover sur orange, highlights, notifications
Vert Tendre
#5CB85C
RGB: 92, 184, 92
Variation du vert, états de succès, éléments secondaires

Couleurs Neutres

Gris Perle
#F8F9FA
RGB: 248, 249, 250
Arrière-plans, cartes, espaces neutres
Gris Ardoise
#6C757D
RGB: 108, 117, 125
Textes secondaires, métadonnées, descriptions
Blanc Pur
#FFFFFF
RGB: 255, 255, 255
Fond principal, cartes, conteneurs
Charbon
#2C3E50
RGB: 44, 62, 80
Textes principaux, alternative au bleu

Dégradés Signature

Logo
Principal
Dégradé Bleu-Vert
linear-gradient(135deg, #05516e 0%, #41a233 100%)
CTA
Dégradé Orange Énergique
linear-gradient(135deg, #e88402 0%, #ffa726 100%)
Triple
Dégradé Triple Dynamique
linear-gradient(135deg, #05516e 0%, #e88402 50%, #41a233 100%)
Nature
Dégradé Vert Nature
linear-gradient(135deg, #41a233 0%, #5cb85c 100%)
Overlay
Overlay Subtil
linear-gradient(to right, rgba(232, 132, 2, 0.15) 0%, rgba(65, 162, 51, 0.1) 100%)

Typographie

Montserrat
Police Principale
LIGHT (300)
Découvrez des expériences authentiques
REGULAR (400)
Découvrez des expériences authentiques
SEMIBOLD (600)
Découvrez des expériences authentiques
BOLD (700)
Découvrez des expériences authentiques
EXTRABOLD (800)
MAP EXPERIENCE

Utilisation recommandée

Titres principaux (H1, H2), logo, navigation principale, boutons CTA, slogans. Privilégier Bold et ExtraBold pour les éléments majeurs. Utiliser le bleu #05516e pour les titres importants.

Poppins
Police Secondaire
LIGHT (300)
Réservez vos activités en quelques clics
REGULAR (400)
Réservez vos activités en quelques clics
MEDIUM (500)
Réservez vos activités en quelques clics
SEMIBOLD (600)
Réservez vos activités en quelques clics

Utilisation recommandée

Sous-titres (H3, H4), titres de cartes, labels de formulaire, navigation secondaire, tags et badges. Interface utilisateur moderne. Utiliser l'orange #e88402 pour les appels à l'action.

Open Sans
Police de Texte
REGULAR (400)
MAP EXPERIENCE est une plateforme innovante qui permet de réserver et gérer facilement des activités touristiques et locales grâce à une carte interactive. Découvrez aussi bien les incontournables que les expériences authentiques, gratuites ou payantes, près de chez vous.
SEMIBOLD (600)
Plus de 500 activités référencées · Carte interactive · Vue Kanban · Gratuites et payantes

Utilisation recommandée

Corps de texte, descriptions longues, paragraphes, listes, métadonnées. Excellente lisibilité pour les contenus informatifs. Utiliser #6c757d pour le corps de texte et #05516e pour les textes importants.

Applications Visuelles

Bouton CTA Principal

Dégradé orange
Montserrat Bold
Effet hover dynamique

Header / Navigation

Bleu océan profond
Montserrat Semibold
Accents orange

Activité Disponible

Bordure verte
Indicateur de disponibilité
Badge succès

Carte Standard

Fond blanc
Ombre bleu subtile
Coins arrondis

Section Hero

Dégradé bleu-vert
Impact visuel fort
Overlay subtil

Badge Confirmé

Vert nature
Message de succès
Poppins Semibold

Principes d'Application

Hiérarchie Chromatique

  • Bleu Océan (#05516e) : Couleur dominante pour structure, navigation et confiance
  • Orange Énergique (#e88402) : Actions principales, CTA, dynamisme
  • Vert Nature (#41a233) : Confirmations, disponibilité, expériences nature
  • Logo signature : Dégradé rose-orange (#d13c64 → #df6a4f) exclusivement pour le logo
  • Équilibre visuel : 60% bleu, 30% neutres, 10% orange/vert

Règles Typographiques

  • Headers (H1) : Montserrat Bold/ExtraBold, 36-48px, #05516e
  • Sous-titres (H2-H3) : Montserrat Semibold, 24-32px, #05516e ou #e88402
  • Titres de cartes : Poppins Medium/Semibold, 18-22px
  • Corps de texte : Open Sans Regular, 14-16px, #6c757d, line-height: 1.6-1.8
  • Boutons CTA : Montserrat Semibold/Bold, 14-16px, couleur orange
  • Labels et tags : Poppins Medium, 12-14px, uppercase optionnel

Guidelines Essentiels

  • Contraste : Maintenir un ratio minimum de 4.5:1 (WCAG AA) pour l'accessibilité
  • Espacement : Échelle cohérente basée sur 8px (8, 16, 24, 32, 48, 64px)
  • Arrondis : border-radius standard de 8-15px pour cohérence moderne
  • Ombres : Subtiles et cohérentes, ex: 0 2px 8px rgba(5, 81, 110, 0.1)
  • Transitions : 0.3s ease pour hover, 0.2s pour micro-interactions
  • États interactifs : Hover avec translateY(-3px) et augmentation d'ombre
  • Iconographie : Style linéaire, stroke-width: 2px, couleurs de la palette
  • Responsive : Mobile-first, breakpoints à 768px, 1024px, 1440px

Utilisation des Couleurs par Contexte

  • Navigation & Structure : Bleu #05516e avec accents orange pour les actions
  • CTA Principaux : Dégradé orange #e88402 → #ffa726
  • Messages de succès : Vert #41a233 ou #5cb85c
  • Badges disponibilité : Vert #41a233 pour disponible, gris #6c757d pour indisponible
  • Cards & Conteneurs : Blanc avec bordures subtiles et ombre bleue légère
  • Footer : Variation bleu foncé #033d50 ou dégradé bleu-vert