Brand book et
charte graphique

Les deux références ont en commun une gravité calme : fond nuit, capitales à empattements fins, beaucoup de vide, un seul accent chaud. Rien ne crie, rien ne bouge sans raison. C'est la posture d'une institution, pas celle d'une start-up. Pour MCC, on garde cette solennité et on la réchauffe par la matière (bois, basalte, lumière du matin) et par des mots simples, parce que les clients arrivent souvent dans un moment difficile de leur vie : séparation, garde à vue, accident.

• Vouvoiement, phrases courtes, verbes d'action (« le cabinet vous assiste dès la garde à vue »).
• Les mots du client avant les termes juridiques : « séparation » avant « procédure de divorce contentieux ». Le terme exact vient ensuite, dans le détail.
• Que des faits vérifiables : dates (2016, 2018, 2021), juridictions, nombre d'avis. Aucun « meilleur avocat », aucun taux de réussite.
• Transparence sur l'argent : le prix de la première consultation est affiché, la suite est annoncée avant chaque étape.

Répartition sur une page

Le cuivre ne dépasse jamais quelques pour cent : puces, losanges, chiffres, prix, un seul bouton plein par page. Sur fond clair, on passe au cuivre sombre, le cuivre normal n'est pas assez contrasté pour du texte.

Chaque piste se voit en entier sur la maquette de la page d'accueil, avec le sélecteur « Couleurs » en bas de l'écran.

• Marcellus toujours en capitales, toujours en 400. Elle n'a pas de gras : le poids vient de la taille, jamais de la graisse.
• Roboto en Light (300) pour le texte. C'est ce qui donne l'aspect fin et luxueux sur fond nuit. Le 400 est réservé aux intitulés, le 500 aux boutons et au menu.
• Deux titres par section au maximum : un surtitre espacé et un titre Marcellus. Jamais trois niveaux empilés.
• Le site JDG utilise Marlet Display (payante). Marcellus est son équivalent gratuit le plus proche ; si le budget le permet, Marlet peut la remplacer sans rien changer d'autre.

Règle de composition : une idée par section, trois ou quatre éléments par ligne au maximum. Les textes ne dépassent pas 62 caractères de large. Les titres de section sont centrés, les blocs de présentation sont en deux colonnes image / texte.

• Sur sombre : filet 1 px #323C4A autour des cartes, entre les chiffres, entre les colonnes du pied de page. La carte mise en avant passe à un filet blanc à 55 %.
• Sur clair : filet 1 px #E4DEDB autour des cartes blanches, et un filet cuivre sombre de 2 px qui prolonge l'icône d'un domaine (le détail signature de JDG).
• Champs de formulaire : aucune boîte, seulement un soulignement de 1 px qui passe au cuivre quand on écrit dedans.
• Rayon d'angle : 0 partout. Pas d'ombre portée. La profondeur vient du contraste nuit / nuit profonde, pas d'effets.

Le logo provisoire reprend la même logique : deux losanges au trait autour d'un M. C'est une proposition de maquette, pas un logo validé.

• Contour : le bouton par défaut. Au survol, il se remplit de blanc (0,2 s).
• Plein cuivre ou plein blanc : une seule fois par page, sur l'action principale (plein blanc sur une grande photo).
• JDG arrondit ses boutons en pilule et Courtroom coupe un coin en biseau. On garde l'angle droit de SupremeCourt : il va avec les losanges et les filets. Le biseau reste une piste si on veut une signature plus marquée.
• Lien fléché : dans les cartes, pour « lire », « en savoir plus ».

• Un trait d'un pixel, qui reste fin quelle que soit la taille du dessin. Jamais de remplissage, jamais d'ombre.
• Opacité de 6 à 16 % sur fond nuit (couleur brume), de 6 à 10 % sur fond clair (couleur marine). Seuls le laurier et la frise passent en cuivre.
• Un motif par section au plus, et quatre ou cinq sur toute une page. Le losange reste le petit ornement du quotidien ; ces dessins sont les grands.
• Jamais derrière du texte courant (frise, paragraphes, listes) : un motif vit dans une marge, un angle, ou au-dessus d'un grand titre, là où il n'y a rien à lire. Jamais sur une photo.
• À éviter : la balance, le marteau de juge, la statue de la Justice. On évoque l'architecture de la loi, pas ses clichés.

Deux familles d'images. L'architecture (colonnes, chapiteaux, escaliers de pierre, bibliothèque) installe la solennité, en pierre claire et lumière naturelle, avec beaucoup d'air. Les portraits de Céline montrent tout de suite à qui l'on confie son dossier : c'est ce qui rassure et fait prendre rendez-vous.

Colonnade, sous voileHero. Noir et blanc à 50 %, teinte bleu nuit, voile de 72 à 93 %. On la devine.

Escalier de pierreBloc avis choisi. Légère teinte nuit (28 %).

Bureau-bibliothèqueGrande photo d'appel, sous un voile de 60 à 70 %.

Chapiteau ioniqueEn réserve : pages domaine, articles.

Portrait en robeIntroduction, juste après le hero. Couleur, cadre décalé cuivre.

Portrait au bureauBloc bio, section claire. En noir et blanc : le mur rouge jurait avec la charte.

Les photos d'architecture sont générées pour la maquette. Pour la mise en ligne : une séance photo récente de Céline, en lumière naturelle, et le scan de sa signature.

• Trois sections claires sur quatorze (environ un quart), jamais deux claires à la suite, jamais en première ni en dernière position.
• Le clair sert au contenu qu'on lit (domaines, presse, articles). Le sombre sert à l'émotion et à la conversion (promesse, témoignage, rendez-vous).
• En section claire, le cuivre devient cuivre sombre et les boutons passent en contour nuit.

La maquette de la page d'accueil assemble ces blocs. Les pages domaine (famille, pénal, préjudice corporel) reprendront le titre décalé JDG, puis les cartes domaine et le bandeau centré.

• Dans le hero : cinq étoiles cuivre clair, « Excellent · 81 avis Google », un filet, puis « Lire les avis » souligné de cuivre. Petit (13 px), sous le surtitre, au-dessus du bouton. On n'affiche jamais une note chiffrée non vérifiée.
• Juste après l'introduction : le widget d'avis Google, habillé à la charte. À gauche « Excellent » entre deux branches de laurier, à droite les derniers avis en cartes à filet, flèches carrées.
• En fin de page : un avis choisi à la main, en grand, comme rappel avant le contact.
• Le nom du cabinet, MCC Avocat, est le logo en haut à gauche ; le nom de l'avocate est le titre du hero.

• Survols en 0,2 s, courbe douce (ease-out) : remplissage des boutons, flèche qui glisse de 2 px.
• Pas de carrousel automatique en hero (SupremeCourt en a un, on ne le reprend pas) : il repousse le message et les visiteurs ne voient que la première image.
• Pas d'apparition au défilement bloc par bloc. Tout le contenu est lisible dès l'arrivée.
• Les préférences système « réduire les animations » coupent tout mouvement.