MonMentor
Voir l'option B →

Option A — Fidèle au site officiel

La transmission humaine,
à l'ère de l'IA.

Design system repris à l'identique du site mm-new-website-dsof.vercel.app : mêmes couleurs, même typographie (Cormorant Garamond + DM Sans) et mêmes animations.

ENGIEFortune 500Organisation ApprenanteLeadershipMentoringTransmission ENGIEFortune 500Organisation ApprenanteLeadershipMentoringTransmission

01 — Couleurs

Palette

Valeurs hex extraites directement des styles calculés du site. Indigo profond + doré chaleureux = signature « transmission / flamme ».

Ink (fond)

#1A1650

Violet

#3F3796

Gold (primary)

#D89A1D

Gold deep

#A16207

Cream (texte/clair)

#F5F2EB

Flame

#ED6A5E

Ember

#F4BF4F

Success

#61C554

Sur fond ink

Texte crème sur indigo profond — contraste 13:1 (AAA).

Sur fond cream

Texte ink sur crème — contraste 12:1 (AAA).

Sur fond gold

Texte ink sur doré — contraste 6:1 (AA). N'utiliser le doré que pour ink, jamais texte blanc.

02 — Typographie

Cormorant Garamond + DM Sans

font-serif · 60px · weight 300

Allumer un feu

font-serif · 30px · weight 500 · italic

Apprendre, ce n'est pas remplir un vase

font-serif · 24px · weight 600

Pourquoi le mentoring ?

eyebrow · DM Sans · uppercase · tracking .28em · gold

Organisation apprenante

font-sans · 16px · weight 400 · body

Le mentoring crée un triple bénéfice : pour le mentor qui renforce ses compétences de leader, pour le mentoré qui accélère sa progression, et pour l'organisation qui stimule la transmission.

font-sans · 14px · weight 500 · muted

97 % des participants recommandent l'expérience.

03 — Boutons

Boutons (pill)

Signature du site : coins entièrement arrondis (rounded-full), DM Sans semibold.

04 — Formulaires

Formulaires

Adresse e-mail invalide.

Profil vérifié.

Rôle

05 — Cartes

Cartes & panneaux

Mentor

Renforcer son leadership

Le mentor développe écoute, questionnement et esprit critique — les compétences du XXIᵉ siècle.

Mentoré

Accélérer sa carrière

+28 % d'augmentation salariale et 6× plus de chances d'être promu (étude Wharton).

En savoir plus →

Organisation

Culture apprenante

1 700 binômes chez ENGIE, 97 % de recommandation. La transmission ancre les valeurs.

06 — Données

Tableaux & statuts

BinômeDomaineAvancementStatut
Morgan ↔ LéopoldineLeadership
● Actif
Thierry ↔ AhmedPrise de poste
● En cours
Jeanne-C. ↔ —En attente match
● À matcher

07 — Feedback

Alertes & flash

Succès. Le binôme a été créé et notifié.

!

Attention. 3 mentorés attendent un match depuis +14 jours.

×

Erreur. Impossible d'envoyer l'invitation.

i

Info. Le rythme conseillé est 1 à 2h par mois, pendant 6 à 12 mois.

08 — Application

Layout applicatif

Tableau de bord

Bonjour Virginie

Binômes actifs

▲ 12%

412

Recommandation

▲ 3pts

97%

Heures de mentoring

▲ 8%

1 240

À matcher

attente

7

Sessions par mois

6 derniers mois
Jan
Fév
Mar
Avr
Mai
Juin

Activité récente

  • Binôme Morgan ↔ Léopoldine validé

    il y a 2h

  • Session clôturée par Ahmed

    hier

  • +

    3 nouveaux mentors inscrits

    il y a 2 jours

Aucun match en attente

Tous les mentorés sont accompagnés. Invitez de nouveaux mentors pour anticiper.

Skeleton / chargement

09 — Motion

Animations

Mouvements sobres. Reveal au scroll via fade-up. Survol des cartes : transform + box-shadow .35s ease.

float-slow

chevron-bounce

pulse-ring

skeleton

Pour les devs

config/tailwind.config.js

// MonMentor — Design System A « Transmission »
colors: {
  ink:        '#1A1650',  // fond principal
  violet:     '#3F3796',
  gold:       '#D89A1D',  // primary / CTA
  'gold-deep':'#A16207',
  cream:      '#F5F2EB',  // texte clair / fond clair
  flame:      '#ED6A5E',  // danger / accent chaud
  ember:      '#F4BF4F',
  success:    '#61C554',
},
fontFamily: {
  serif: ['"Cormorant Garamond"', 'serif'], // titres
  sans:  ['"DM Sans"', 'sans-serif'],        // corps + labels
}
// Google Fonts : Cormorant Garamond (300..700, italic) + DM Sans (400..700)
// Boutons = rounded-full · eyebrows = uppercase tracking .28em gold