Document de référence pour toute production graphique liée à Maison Visibilité — logo, web, supports imprimés, réseaux sociaux. Direction artistique « Atelier Méditerranéen ».
Maison Visibilité est un studio indépendant marseillais, fondé après un parcours LABELECOLE. La marque combine deux mondes opposés en apparence : la rigueur d'une maison de couture (le mot « Maison ») et l'accessibilité d'un compagnon de quartier.
Le web ne devrait jamais être un luxe ni un jargon. On annonce un prix, on tient un délai, on livre un site qui marche — sans réunion inutile, sans frais cachés, sans abonnement piégé.
Plombiers, peintres, coiffeurs, électriciens, artisans du bâti et PME locales marseillaises. Des gens qui n'ont pas le temps pour le bullshit digital mais qui méritent une présence en ligne digne de leur métier.
On parle français, pas anglais marketing. On tutoie l'artisanat sans le condescendre. On préfère un café à une visio. On n'a rien à prouver — sauf la qualité du travail livré.
Reconversion via LABELECOLE (école Emmaüs). Cette histoire n'est pas un accident de marketing — c'est le cœur de la marque : on transmet ce qu'on a reçu, à un prix qui n'exclut personne.
Trois directions possibles pour le logo final, classées de la plus « éditoriale » (typographique pure) à la plus « iconographique » (symbole + nom). Toutes respectent la palette et les typographies de la charte.
Six couleurs, deux familles. La première — terracotta, ocre, bleu Marseille — porte l'identité. La seconde — cream, encre, paper — assure la lisibilité. Ratio d'usage recommandé : 60% cream · 25% encre/bleu · 15% terracotta/ocre.
Crème en fond dominant. Terracotta sur les CTA et les mots-clés. Bleu pour les sections d'ancrage. Ocre avec parcimonie, comme un détail.
Plus de 15% de terracotta sur une page. Du noir pur sur cream (utiliser encre #141414, plus chaud). Tous les dégradés tropicaux orange→rose→violet.
Texte sur cream : encre (16:1 ✓ AAA). Texte sur bleu : cream (10.8:1 ✓ AAA). Texte muted minimum : #5e5654 (6.8:1 ✓ AA Large).
Une serif éditoriale pour la voix (titres, citations), une sans-serif neutre pour la lecture, et une monospace technique pour les détails. Les trois sont gratuites et hébergées sur Google Fonts.
Usage : tous les titres, citations, prénoms, noms de packs, mots-clés à mettre en relief. Préférer l'italique Medium 500 pour les accents marketing — c'est la signature de la marque.
Usage : texte courant, paragraphes, formulaires, boutons. Regular 400 pour le corps, Medium 500 pour les labels et CTA, Semibold 600 pour le sur-titre du hero.
Usage : tous les détails techniques — numéros de chapitres (« 01 — Histoire »), tags (« Marseille · 13 »), labels en majuscules, prix, codes hex, tout ce qui doit avoir une saveur « atelier / instrument ». Letter-spacing : 0.14em + uppercase.
Pas de stock photo brillante avec mannequin en costume. Pas d'image générée IA visible au premier regard. On veut la lumière du Sud, les mains qui font, les ateliers, les façades de Marseille.
À faire : photos en lumière naturelle, cadrages serrés sur les gestes, plans larges sur les ateliers et la rue. À éviter : sourires forcés, fonds blancs cliniques, mains parfaitement manucurées, mannequins en costume.
Style : Lucide / Phosphor — line icons, stroke 1.6–1.8px, coins arrondis, pas de remplissage. Taille : 24×24 px (standard) ou 18×18 px (inline).
La voix de Maison Visibilité est celle d'un compagnon : précis sur le métier, direct dans la parole, jamais condescendant. On ne prend pas l'artisan pour un novice — on prend l'artisanat au sérieux.
Aperçu de la charte appliquée aux supports les plus courants. Tout est cohérent : mêmes couleurs, mêmes typos, mêmes proportions.
Variables CSS prêtes à copier/coller. Cohérent avec ce qui est déjà en place dans
index.html.
/* Maison Visibilité — Design tokens v1.0 */
:root{
/* — Couleurs */
--cream: #F5F1E8;
--cream-soft: #FAF8F2;
--cream-dark: #E8E2D0;
--paper: #EFEAD9;
--terracotta: #C5694B;
--terracotta-d: #A0563D;
--terracotta-l: #E0876A;
--bleu: #1B3A5C;
--bleu-deep: #11253B;
--bleu-soft: #2C5078;
--ocre: #E0A95B;
--encre: #141414;
--noir-doux: #1F1D1A;
--texte: #1F1D1A;
--texte-muted: #5e5654; /* WCAG AA */
--border: rgba(31,29,26,.12);
/* — Typographies */
--ff-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
--ff-sans: 'Inter', -apple-system, sans-serif;
--ff-mono: 'JetBrains Mono', monospace;
/* — Rayons */
--r-sm: 12px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 40px;
/* — Animation */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}