Design system

Essence

Manar Studio est un studio produit et tech : on audite, on reprend et on construit des produits web. Le nom vient de l'arabe manār, le phare, le repère : un phare n'oblige pas le bateau, il éclaire pour que l'équipage choisisse sa route. Signature : « Studio produit & tech ». Écrire toujours « Manar Studio », les deux mots, M majuscule.

Manar Studio est le studio qui construit. Cette identité n'habille jamais un autre produit : un client ou un produit (Postall, LQI…) a sa propre identité. Quand il faut produire du contenu pour la marque d'un client, sa marque est une donnée du produit, pas son habillage.

La règle de la lumière. Le jaune miel est la lumière du phare : il n'apparaît que là où l'on éclaire quelque chose d'important : un mot du titre (ms-brush), l'action principale, un statut, la lanterne du logo. Si tout est jaune, rien n'est éclairé. Un grand aplat jaune est possible sur une seule section par page.

Contenu

• Parler comme un collègue très compétent : clair, chaleureux, précis. Ni jargon qui impressionne, ni familiarité qui fait perdre en crédibilité.
• Dire « on » (« On prend le relais avec vous. ») ; vouvoyer les clients. Le « nous » est réservé aux documents formels.
• Rester concret : des verbes, des exemples, des délais réels. « Une démo chaque vendredi » plutôt que « un suivi agile et itératif ».
• Rester sobre : pas de superlatifs, pas de promesse qu'on ne peut pas tenir. Aucun emoji dans les titres ni les boutons.
• Typographie française : espace avant « : », « ? », « ! » et guillemets « comme ceci ».
• Vocabulaire qu'on aime : squad, relais, cadrer, lancer, solide, simple, ensemble, visible, repère. À éviter : disruptif, révolutionnaire, clés en main, synergies, ninja, rockstar, « best-in-class », et la métaphore marine à outrance (un mot de temps en temps : « cap », « repère », « éclairer »).
• Exemples du site : « Un produit qui tient face à de vrais utilisateurs. » ; « Réserver un échange de 30 min » ; « Cette page a pris le large. » ; « Racontez-nous où vous en êtes : on vous répond avec un premier avis franc. »
• Ne jamais inventer de données réelles (clients, chiffres, témoignages). Les maquettes de produit montrent des données plausibles, marquées « exemple ».
• Decode by Manar : la marque éducative du studio (posts Instagram, blog). Mêmes règles de voix, sujets expliqués sans jargon, un exemple du quotidien par concept (le serveur d'un restaurant pour une API, un hachoir pour le hachage).

Fondamentaux visuels

Direction dessinée (site, posts, documents). Fond papier à pois (ms-paper) avec un léger grain ; texte, cadres et traits en encre-dessin, jamais en noir. Les cartes sont des cadres au trait irrégulier (ms-sketch, ms-sketch-b, ms-sketch-c), pas des cartes colorées arrondies, et sans ombre douce (sous un cadre scotché : ombre-dessin, une ombre dure décalée). Un seul groupe de mots surligné au pinceau par titre (ms-brush) ; sur fond sombre, la pastille ms-mark. Scotch kaki (ms-tape), tampon rond (Stamp) et annotations manuscrites en Caveat (annotation, HandNote) : avec parcimonie.

Couleurs. Dosage conseillé : crème 55 %, forêt 22 %, kaki clair 12 %, miel 8 %, kaki le reste. Utiliser les jetons sémantiques (surface, text, action, signal…) plutôt que les couleurs brutes, pour que les thèmes papier et nuit fonctionnent. Texte courant : text sur surface (encre sur papier, crème sur nuit ou foret). Le miel et le kaki ne servent jamais de texte sur fond clair.

Typographie. Titres en Bricolage Grotesque (styles titre-*, graisses 700 à 800, interlettrage serré, lignes équilibrées), texte en DM Sans (texte-*), annotations en Caveat (annotation). Lignes de 55 à 68 caractères. Étiquettes (etiquette) en capitales, interlettrage 0,16em. Chiffres alignés en colonnes : font-variant-numeric: tabular-nums. Ne pas mélanger un autre serif ou une autre grotesque avec Bricolage.

Interface produit. Rayons radius-bouton (14px), radius-carte (20 à 24px), radius-bloc (28 à 36px), radius-pastille ; boutons de 48px de haut, texte de 16px en 600 à 700 ; icônes à trait de 2px, extrémités arrondies, 24px. Espacement sur une base de 4px (space-*), sections séparées de 56 à 104px, 20px de marge latérale minimum sur mobile. Ombres rares, douces et teintées de vert (ombre).

Fonds sombres. Thème nuit : fond nuit (#0B1B11, la couleur des bords de l'illustration du phare), texte creme, action miel. Pas de bande claire autour : fond de page, barre d'état du téléphone et pied de page sont de la même couleur.

Mouvement. Un seul geste de lumière par écran : la lanterne qui s'allume, un faisceau qui balaie, un halo qui respire. Lent (halo 4 à 5 secondes), discret ; transitions de 150 à 200ms et léger relief au survol (−1 à −4px). Tout est coupé si le visiteur demande moins d'animation (prefers-reduced-motion). Les animations d'entrée n'animent que des opacités ou des rotations de calques entiers, jamais un élément filtré.

Lisibilité. Tout se lit sans le dessin : texte en text sur surface, contrastes de 4,5:1 au minimum (3:1 pour les textes de 24px et plus et pour les contrôles), anneau de focus focus de 3px. Le jeton focus remplace l'anneau miel du site, qui n'atteint que 1,5:1 sur papier.

Illustration et images

• Logo : le phare, dont la lanterne est séparée du toit par un petit vide pour ressortir sur tous les fonds. Symbole complet (avec faisceaux) à partir de 48px de haut, version compacte en dessous (16px minimum). Une seule couleur : encre sur fond clair, crème sur fond foncé, jamais une autre teinte. Pastille ronde pour les avatars. Zone de protection : la largeur de la lanterne.
• L'illustration du phare de nuit (phare-nuit.webp) est la grande image de marque : sur nuit, plein cadre ou dans un cadre scotché, jamais recadrée sur le phare.
• Les scènes de blog (scene-*) sont des dessins au trait d'encre avec une tache de gouache miel, au format 400 × 220 : sujet concret, une idée par scène. Pas de personnages génériques ni de banque d'images.
• Photographie : de vraies personnes du studio et de ses clients, lumière naturelle, légèrement chaude. Jamais de photos de stock.

Iconographie

Icônes de l'interface : Lucide (trait 2px, extrémités arrondies) ; logos de réseaux : Simple Icons. Pas d'emoji comme marqueur ou décoration. Les icônes de service du site sont dessinées au trait en deux passes, avec une tache de gouache miel décalée.

Pour un agent qui construit avec ce système

• Charger tokens.css puis components/bundle.css ; poser data-theme="papier" (par défaut) ou data-theme="nuit" sur la racine.
• Les classes ms-* de bundle.css implémentent les cadres, le pinceau, le scotch, les boutons et les étiquettes : s'en servir plutôt que de réinventer des cartes arrondies.
• Ne jamais mélanger l'identité d'un autre produit ou client avec celle-ci.