Perle Noire : logo, identité, design et site Webflow d'un cabinet de conseil en stratégie pour dirigeants

Perle Noire accompagne les dirigeants dans l'analyse, la stratégie et le pilotage de leur croissance. Son idée de départ : les grandes fortunes confient leur patrimoine à un family office qui rassemble tous les spécialistes sous un même toit ; Perle Noire applique cette philosophie à l'entreprise. Deux associés, Farah Rouassi et Quentin Mayet, et une méthode en trois temps : analyser, bâtir, piloter.

Perle Noire a confié à Gemeos, agence web B2B, son logo et son identité, le design de son site et son développement sur Webflow.

MacBook Pro ouvert sur l'accueil Perle Noire « Dirigeant ? Votre plus gros défi, on s'en charge. » dans un bureau aux murs bordeaux

Une marque de cabinet privé, pas une plaquette de consultants

Perle Noire le dit elle-même : ce n'est ni une agence ni un cabinet de consultants, ce sont deux associés qui s'investissent aux côtés d'un dirigeant. Elle refuse plus de mandats qu'elle n'en signe et ses missions sont confidentielles. La marque devait donc inspirer la discrétion et l'exigence d'un family office, tout en restant chaleureuse pour des fondateurs qui ont déjà vu passer d'autres prestataires et cherchent quelque chose de plus juste.

Gemeos a exploré deux pistes d'identité complètes, du pictogramme à la photographie, puis décliné la piste retenue en logo, palette, typographies, motif et UI kit. Le site a ensuite été dessiné et développé sur Webflow : un accueil qui déroule la méthode, une page des mandats et une étude de cas détaillée, publiée depuis le CMS.

Industrie: Service
Services: Logotype; Branding; UX/UI Design; Intégration

La perle se lit en creux, entre deux parenthèses

Gemeos a exploré deux pistes. La première faisait émerger la perle au centre de quatre cercles entrelacés, un par pilier de la méthode, avec un nom composé en capitales et une photographie de peinture retravaillée en pixels. La seconde ne dessine pas la perle : deux parenthèses l'enserrent et l'œil complète la forme. C'est elle qui a été retenue, parce qu'elle évite le cliché du rond noir et laisse le signe ouvert, comme un aparté entre le dirigeant et ses conseillers.

Le logo associe ce pictogramme au nom Perle Noire en un seul mot, et se décline en cinq versions dans l'UI kit : bleu, bordeaux, rose, clair et sombre. L'identité repose sur un bordeaux profond (#410C1C), un bleu clair (#D8E9F3), un beige (#FEF9ED) et un rose (#FFA9AA) : le bordeaux pose, le bleu aère, le rose ponctue. Chaque couleur se décline en nuances pour l'interface.

Les titres sont composés en Andromeda, une serif éditoriale, les textes et l'interface en Neue Montreal. Deux assets donnent sa signature à la marque : une cursive tracée en très grand, qui accompagne les portraits des associés, et un motif de facettes répétées qui rythme les fonds et le pied de page. La photographie suit la lumière de la peinture flamande : des personnes posées, calmes, en clair-obscur.

Piste 1 - Les quatre cercles
Bordeaux, beige, noir et rose ; un pictogramme de quatre cercles qui font naître la perle au centre, un cercle par pilier de la méthode ; le nom en serif capitale, comme une publication d'auteur ; des paysages peints retravaillés en effet pixel. Perception visée : chaleureuse et ancrée, sans la rigidité d'une institution.
Piste 2 - La perle en creux
La piste retenue : bordeaux profond, bleu clair et rose ; deux parenthèses qui révèlent la perle en creux ; une serif éditoriale accompagnée d'une cursive ; un motif de formes géométriques répétées et des portraits à la lumière flamande. Perception visée : ferme, contemporaine et élégante, sans avoir besoin de surjouer sa différence.

Piste 1 : page d'accueil « Le palier d'après, franchi à vos côtés » sur un paysage peint en pixels, et planche du nom en rose

Concept 1

MacBook Pro ouvert sur la page « Des mandats, des résultats » de Perle Noire, sur une table de réunion

Un site court, qui laisse la méthode et les preuves parler

Un dirigeant qui arrive sur le site doit comprendre en quelques secondes ce que fait Perle Noire, comment elle travaille et avec qui il parlera. Le site tient en peu de pages : l'accueil déroule la promesse, la méthode et l'équipe, les mandats apportent la preuve, et chaque page ramène au même geste, prendre rendez-vous.

Page	Ce qu'elle fait pour le visiteur
Accueil	La promesse « Dirigeant ? Votre plus gros défi, on s'en charge. », la méthode Analyser, Bâtir, Piloter, un bandeau de logos, l'étude de cas à la une, les deux associés et l'appel « Nous refusons plus de mandats que nous n'en signons »
Nos mandats	Les missions racontées comme des transformations, anonymisées par confidentialité, avec une démarche et des résultats fidèles à la réalité
Étude de cas	Un mandat raconté de bout en bout : chiffres clés du client, sommaire, tableau de synthèse, verbatims des équipes, captures de la solution et choix techniques
Prise de rendez-vous	Le bouton « Prendre rendez-vous », présent sur chaque page, ouvre directement une conversation WhatsApp avec le cabinet

Les pages alternent le beige et le bordeaux, avec le bleu clair pour les moments d'appel. Les trois temps de la méthode sont des cartes qui s'empilent au défilement, chacune avec son portrait. Les associés sont présentés face à la cursive de la marque, et le pied de page se ferme sur le motif à facettes. En mobile, chaque section se recompose en une colonne, sans rien perdre.

Pro Display XDR ouvert sur l'étude de cas Perle Noire, avec ses chiffres clés

Des mandats publiés depuis le CMS, des animations qui suivent la lecture

Le site est développé sur Webflow. Les mandats vivent dans une collection CMS : la page Nos mandats et le carrousel de l'accueil se remplissent seuls, et chaque mandat a sa page, servie par un gabarit unique : en-tête et chiffres clés, sommaire, puis le récit en texte riche, tableaux et citations compris. Publier une nouvelle étude de cas ne demande aucune mise en page.

Les animations reprennent le ton de la marque, sans esbroufe. Les titres entrent mot à mot, chacun montant de sa ligne avec un léger flou (GSAP et SplitText), les cartes de la méthode se calent les unes sous les autres au défilement, et le carrousel des mandats comme le bandeau de logos tournent avec Splide.