Charte graphique et brief de production

Yasminatou Lassissi
avocate au barreau de Paris

Tout ce qu'un designer doit avoir sous les yeux pour produire une créa, une page ou un document au nom du cabinet, sans avoir à demander.

Relevé le 18 septembre 2026 Source : le site en production et ses visuels Instagram Deux matières : recouvrement de créance, baux commerciaux

01 · Le point de départ

À qui l'on parle, et sur quel ton

Avocate d'affaires pour indépendants et dirigeants de petites entreprises. Elle reçoit dans les bureaux AGN Avocats de Paris 17e, 15e et 8e, et plaide partout en France.

Les deux matières

Une créa s'adresse toujours à l'une des deux, jamais aux deux à la fois. C'est la créa qui filtre, pas le formulaire.

RecouvrementUn chef d'entreprise, jamais un particulier. Une facture professionnelle impayée depuis des mois.
Baux commerciauxUn bailleur, jamais un locataire. Un locataire commercial qui ne paie plus le loyer.

Le ton

Adulte, sobre, français, factuel. On s'adresse à quelqu'un qui a déjà relancé trois fois et qui veut savoir ce qui se passe ensuite.

On écrit comme ça

  • Vouvoiement, phrases courtes
  • Un fait vérifiable par créa
  • Des délais et des montants réels

Jamais

  • Promesse de résultat
  • Point d'exclamation, emoji
  • « Solution », « accompagnement », « plateforme »

02 · Couleur

Quatre couleurs, relevées sur ses propres visuels

Il n'y en a pas de cinquième, pas même pour un état d'erreur ou de succès.

Texte et fonds sombres
encre
#0B0F10
Tout le texte sur fond clair, et le fond des panneaux sombres.
Second niveau
encre claire
#141A1B
Un bloc posé dans un panneau sombre.
Le fond de tout
craie
#F4F0E8
Le fond par défaut du site comme des créas claires.
Cartes et blocs
craie vive
#FBF9F4
Ce qui se détache d'un fond craie sans filet lourd.
Séparations
craie sombre
#E7E1D5
Filets, bordures, aplats secondaires.
L'accent
sarcelle
#00A6B6
Un dispositif, jamais un texte. Voir la règle ci-dessous.
Accent foncé
sarcelle profonde
#05707B
Quand la sarcelle doit porter du contraste sur fond craie.
Accent clair
sarcelle claire
#4FC7D3
La sarcelle posée sur un fond encre.
Neutre chaud
taupe
#8C8078
Légendes et second plan.
Texte secondaire
taupe sombre
#5C534D
Les notes et les chapôs sur fond clair.
La règle qui a coûté le plus cher.

La sarcelle est une couleur de dispositif, jamais une couleur de texte courant. Elle sert à une plaque, un filet, une coche, un mot unique dans une phrase, un fond plein. Employée comme couleur d'un paragraphe, elle devient illisible sur la craie comme sur l'encre, et c'est ce qui a fait jeter une série entière.

Sur une créa, la sarcelle n'apparaît qu'une fois. Un mot, ou un filet, ou une plaque. Jamais deux à la fois.

Le texte sur fond sombre

Sur #0B0F10, le texte n'est pas blanc pur mais craie #EDE8DE. Le blanc pur sur cette encre vibre et donne l'écran rétroéclairé.

03 · Typographie

Trois fontes, un travail chacune

Toutes sur Google Fonts. Les fichiers .ttf employés par la chaîne de fabrication des créas sont dans ~/Desktop/etude-lassissi-paid/fonts/.

TitrageGloockGraisse 400 uniquement
Une facture impayée se règle souvent sans juge.
LectureNewsreader300 à 600, italiques comprises
Le commandement de payer ouvre un délai d'un mois. Un seul. Ensuite, la clause résolutoire peut jouer, et le local se reprend devant le juge des référés.
InterfaceArchivo400 à 700, largeur variable 75 à 110
Voir les détails · Prendre rendez-vous · 06 98 92 48 25

Les six règles

  1. Gloock n'a pas d'italique. Un mot en italique dans un titre bascule sur Newsreader italique 400. C'est voulu, et c'est un effet de la maison : le mot accentué change de fonte.
  2. Gloock a un contraste fort. Sur fond sombre, ses déliés cassent en dessous de 28 px environ. En dessous, on passe à Newsreader.
  3. Titres serrés : interlignage 1,04, approche -0.012em.
  4. Texte : 17 px, interligne 1,62, jamais moins de 16 px.
  5. Les capitales appartiennent à Archivo, en petites capitales espacées (letter-spacing: .19em), pour les intitulés de section. Nulle part ailleurs.
  6. Chiffres tabulaires sur tout montant, délai ou date, pour que les colonnes ne dansent pas.

L'échelle

NiveauTaille
Affiche XLclamp(2.6rem, 6.4vw, 5.6rem)
Afficheclamp(2.2rem, 4.8vw, 4.4rem)
Chapitreclamp(1.75rem, 3.1vw, 2.9rem)
Texte17 px, interligne 1,62
Note0,86 rem, taupe sombre

Les fichiers de fonte

gloock.ttf, archivo.ttf, archivo-black.ttf, playfair.ttf, dmserif.ttf, oswald.ttf, mono.ttf. Les quatre dernières servent uniquement aux créas publicitaires, dans les lettrages décrits plus bas. Elles n'ont pas droit de cité sur le site.

04 · Formes, matières et gestes

Ce qui donne la texture

Le grain

Un voile de bruit fixe, opacité 0,035, posé une seule fois par-dessus toute la page, jamais bloc par bloc. C'est lui qui empêche l'aplat numérique de paraître synthétique. Il est visible sur cette page même.

Les formes

  • Rayon 3 px, partout. Pas de pilule, pas de coin à 12 px.
  • Pas de carte flottante, pas d'ombre diffuse. Une ombre n'existe que si elle a un contact.
  • Aucune icône 3D, aucun pictogramme coloré, aucun personnage vectoriel, aucun emoji.

Les courbes

NomValeurEmploi
sortiecubic-bezier(.23,1,.32,1)Entrées, révélations, survols
entrée-sortiecubic-bezier(.77,0,.175,1)Déplacements sur écran

Jamais de ease-in. 140 ms pour un appui, 220 à 320 ms pour un survol, 700 à 900 ms pour une révélation au défilement. Un bouton pressé descend à scale(.97).

La plaque de montant

L'objet signature, repris de ses visuels : un chiffre posé dans un aplat sarcelle, le reste de la phrase courant autour.

Une facture de 12 400 € se réclame
encore cinq ans après l'échéance.

Attention au mot suivant. Sur les premières créas, la plaque touchait le mot d'après : il faut avancer le curseur d'environ 22 px après la plaque.

Boutons

Carte

Recouvrement

Injonction de payer. Une procédure écrite, devant le tribunal de commerce. Le juge statue sur pièces, sans audience.

Les trois gestes de révélation

  • le levé : le texte monte de 16 px derrière son masque de ligne
  • le rideau : une image se découvre par la gauche, clip-path de inset(0 100% 0 0) à inset(0). Jamais un fondu
  • la pose : un bloc descend de 14 px et se fixe

Tout est désactivé sous prefers-reduced-motion.

05 · Images

Son portrait, et des objets seuls

Portrait studio
Le portrait studio. Décalage 0,18 de la largeur, pour que le visage ne tombe pas au centre géométrique.
Tampon encreur
Tampon encreur. Flash dur à 45 degrés, ombre plus longue que l'objet.
Clé de boutique
Clé de boutique. Ce qui reste quand le loyer ne rentre plus.
Enveloppes
Enveloppes. Les relances qui se sont accumulées.
L'interdit absolu.

On ne génère jamais un visage humain. Ni le sien, ni celui d'un client, ni un figurant. Un portrait fabriqué sur la publicité d'une avocate est trompeur, et c'est un problème déontologique autant qu'un problème de goût. Un visage inventé est apparu une fois sur une créa comparative : elle a été détruite.

Les seules images d'humain autorisées sont ses vraies photographies : portrait-studio, portrait-bureau, portrait.

La largeur de la colonne de texte se mesure, elle ne s'estime pas. Une accroche a déjà été avalée par le portrait parce que la colonne était supposée plutôt que calculée.

Une nature morte tient

  • Un objet seul, de face, sur fond papier uni
  • Flash dur à 45 degrés, ombre longue et nette
  • Un objet décentré, l'ombre occupant le reste
  • Une couleur de fond sourde, jamais saturée

Ce qui trahit la banque d'images

  • Un bureau, un clavier, une poignée de main
  • La symétrie parfaite
  • Le sujet centré, vide égal des deux côtés
  • La lumière douce et diffuse de studio
  • Un objet qui flotte sans ombre de contact

Le format metaphore de la bibliothèque interdit explicitement le bureau. Dix bureaux ont été photographiés avant qu'on relise la consigne.

06 · Publicité

La méthode de fabrication, arrêtée après quatre échecs

Le modèle d'image fabrique un fond sans aucun texte. La typographie est composée ensuite, en PIL. Ce n'est pas un choix esthétique, c'est un constat.

Pourquoi le modèle ne lettre pas

Sur les séries précédentes, il a écrit « impayté », « contasté », « raurment », « courvier », « resilie », « etapes ». Sur l'instruction explicite de remplacer « emagement » par « engagement », il a produit « SENGAGEEMENT ». Une correction a abouti sur quatre.

Conséquence : le modèle produit la matière et la lumière, jamais une lettre. Le juge vision reste en place pour attraper ce qui passe malgré tout.

Les trois familles livrées

Créa famille A
A · le dense. Promesse, quatre bénéfices, bouton. La lisibilité prime sur la variété du lettrage.
Créa famille B
B · le typographique. La typographie est l'image. Huit traitements distincts.
Créa famille C
C · le nu. Une photographie, une phrase, rien d'autre.

La planche complète

Planche des trois familles

Ce qui a été mesuré

L'étude publicitaire de la matière a relevé la survie à trente jours des pubs concurrentes. Deux enseignements portent la ligne éditoriale.

  • La douleur perd. 17 % de survie contre 22 % sans, sur 187 pubs. On n'ouvre donc pas sur la détresse.
  • Un fait vérifiable gagne. Chaque accroche porte un chiffre : un délai, un montant, un nombre d'étapes.

Les angles

contrôleOn rend la main au lecteur, on décrit ce qui va se passer.
preuveUn fait vérifiable porte la créa.
contrarianOn renverse une croyance du marché.

Le hook d'entrée

Une créa ou une voix off ouvre sur une situation reconnue, pas sur une offre. Le modèle validé :

« Vous avez une facture impayée depuis des mois, pas de panique. »

La chute

En fin de créa et de voix off, on ne met pas le nom de l'avocate mais l'invitation :

« Besoin d'être éclairé sur votre situation ? Remplissez le formulaire. »

L'identification que le RIN impose est portée par le nom de la Page, le carton de fin incrusté et la première ligne du formulaire instantané, jamais par la voix.

07 · Anti-uniformité

Les huit lettrages, pour que dix créas ne se ressemblent pas

La doctrine BangerHunt le dit dans son propre code : une typographie composée toujours de la même façon, mêmes fontes, même placement, produit « le côté agentique ». Le remède est une grille de huit traitements, tirée au sort par créa.

NomCe qu'il faitFonte
didone centréContraste extrême entre pleins et déliés, bloc centré, magistralPlayfair
condensé basGrotesque condensée poussée dans le tiers bas, comme une affiche colléeOswald
black plaqueTrès haute graisse sur aplat, le mot posé dans la couleurArchivo Black
mono filetMachine à écrire, filet fin au-dessus et en dessous, registre de pièce jointeMono
serif droiteSerif de labeur alignée à droite, marge gauche largement videDM Serif
gloock gaucheLa fonte maison, alignée à gauche, la composition du siteGloock
capitales espacéesPetites capitales très espacées, registre de carton d'invitationArchivo
chiffre géantUn nombre qui déborde de la marge, la ligne de texte minuscule dessousPlayfair ou Archivo Black

Fichier de référence : creas/lettrage.py. Un designer qui reprend la main garde les huit et n'en ajoute pas un neuvième sans raison : c'est la variété qui fait le travail, pas la quantité.

08 · Déontologie

Ce que le RIN impose, et ce qu'il interdit

Ces contraintes pèsent sur tout visuel et toute voix off. Elles ne se négocient pas avec la performance.

Obligatoire

  • L'identification : « Yasminatou Lassissi, avocate au barreau de Paris »
  • Elle est portée par le nom de la Page, un carton de fin incrusté et la première ligne du formulaire
  • Le tarif, quand il est annoncé, l'est avant la consultation

Interdit

  • Toute promesse de résultat
  • Tout témoignage de client
  • Toute mention d'un confrère ou d'un cabinet concurrent
  • Toute statistique inventée
  • Tout visage humain fabriqué
Un fait peut se dire, un engagement non.

« Une facture impayée se règle souvent sans juge » est un fait, et il se dit. « Nous récupérons votre créance » serait un engagement de résultat, et il est interdit. La frontière tient dans le verbe.

09 · Production

Ce qu'on attend d'un designer, et où sont les sources

Les formats

FormatDimensionsZone sûreEmploi
4:51080 × 135012 % du bas laissés videsLe format principal du fil Meta
1:11080 × 108012 % du basDéclinaison feed et carrousel
9:161080 × 192020 % en haut, 25 % en basStories et Reels, boutons de plateforme

La signature et la mention légale ne sont jamais générées dans l'image : elles sont composées séparément dans la zone basse laissée vide. Sur les premières séries, la signature chevauchait le sujet.

Le texte d'annonce

Corps sous 200 signes. Une accroche, un fait, l'invitation à remplir le formulaire. Pas d'énumération d'expertises.

Où sont les fichiers

Site~/Desktop/01-Avocats-Clients/yasminatou-lassissi/
Jetons de designtailwind.config.ts et src/index.css
Chaîne de créascreas/ : briefs.py, rendre.py, lettrage.py, gabarit.py
Familles livréescreas/PROD/{A-dense, B-typo, C-nu}
Fonds objetscreas/fonds/objets/
Portraitscreas/portrait-studio.jpg et public/img/
Polices~/Desktop/etude-lassissi-paid/fonts/
Voix off~/Downloads/CREAS-LASSISSI/VOIX-OFF.txt
Site en lignelassissi-avocat.fr

Reste à fournir par le cabinet

L'assureur de la responsabilité civile professionnelle, seule mention légale encore absente du site. Le SIREN et le numéro de TVA sont en place.