Charte graphique et brief de production
Ce qu'il faut avoir sous les yeux pour produire une page, un document ou une créa au nom du cabinet. La direction artistique est celle d'un cabinet d'affaires, pas celle d'une maison de bouche.
01 · Le point de départ
Avocat associé chez Redlink, 41 rue des Acacias, Paris 17e. Il intervient pour les dirigeants et les actionnaires d'entreprises en crise, pour les repreneurs d'activités en difficulté, et pour les créanciers qui veulent être payés.
| Prévention | Mandat ad hoc, conciliation, négociation bancaire, sauvegarde accélérée |
| Sauvegarde | Sauvegarde et redressement judiciaire, période d'observation, plan |
| Dirigeant | Liquidation, insuffisance d'actif, faillite personnelle, cautions |
| Reprise | Offres de reprise, actifs distressed, plaidoirie à l'audience |
| Créanciers | Déclaration de créance, défense du créancier dans la procédure |
Les cinq sont présentées en dépliant : une seule ligne ouverte à la fois, une seule image visible. Ce n'est pas une grille de cartes.
Grave, mesuré, technique sans jargon. Le lecteur est un dirigeant qui a déjà compris que la situation est sérieuse. On ne le rassure pas, on lui dit ce qui se passe et dans quel ordre.
L'argument du site tient en une phrase : appeler tôt n'est pas une précaution, c'est ce qui décide des options.
02 · Couleur
Le laiton ne sert qu'aux filets, aux intitulés et aux chiffres clés. C'est la seule couleur d'accent, et elle est rare.
Le #A98B4B du dessin ne passe pas le seuil de contraste sur le papier pour un texte de petite taille. Un intitulé en capitales espacées emploie #8A7233, un cran plus foncé. Le #A98B4B reste réservé aux traits, aux bagues de focus et aux formes.
Le vert de bureau sert au survol d'un bouton plein. Il ne devient jamais l'aplat d'une section, ni la couleur d'une carte : le site est en papier et en encre, avec du laiton par touches.
03 · Typographie
Deux fontes, toutes deux sur Google Fonts. Spectral est une serif de labeur, sombre et un peu étroite, qui a l'autorité d'un acte imprimé.
Au-dessus de la ligne, les procédures qu'on ouvre soi-même et qui ne se publient pas. En dessous, celles qui s'ouvrent devant le tribunal. Entre les deux, quarante-cinq jours.
-0.021em, interlignage 1,05, text-wrap: balance.text-wrap: pretty sur les paragraphes. Un dernier mot seul sur sa ligne est le détail qui fait bon marché..19em, couleur #8A7233. C'est le seul endroit du site où l'on met des capitales.tabular-nums lining-nums) sur tout délai, montant et date.| Niveau | Taille |
|---|---|
| Affiche | clamp(2.45rem, 4.5vw, 4.15rem) |
| Chapitre | clamp(1.85rem, 3.1vw, 2.85rem) |
| Chapô | 1,12 rem, interligne 1,62 |
| Texte | 1,03 rem, interligne 1,6 |
| Exergue | Spectral italique, clamp(1.15rem, 1.7vw, 1.45rem) |
| Note de marge | 0,86 rem, ardoise |
Ils sont seuls sur leur ligne, ce qui leur permet de porter plus haut que dans une colonne. C'est ce qui donne la présence, et c'est un écart assumé avec le reste de la mise en page, qui est alignée à gauche.
04 · La marque
Il tient la barre de navigation, le premier écran et le pied de page. Il n'y a pas d'autre logo.
1.4 et 0.7 d'épaisseur, jamais un seul.2.5.currentColor, laiton sur fond sombre, encre sur fond clair.Pas de version pleine, pas de cachet de cire, pas d'ombre, pas de dégradé métallique, pas de rotation. Il ne s'inscrit pas non plus dans un carré de couleur.
Le fichier de référence est src/components/Sceau.tsx, dessiné en SVG pour tenir à toutes les tailles. Le favicon en dérive.
05 · Formes et matières
Le rectangle, tenu par un filet. Aucune arche, aucun cercle décoratif, aucun arrondi de fantaisie. Rayon 2px sur les images, 3px sur les blocs, 4px sur les cartes. Jamais davantage.
Un trait d'encre, un trait de laiton, sur environ 88 px. Il ouvre une section, au-dessus de l'intitulé en capitales. Il est visible en tête de chaque section de cette page.
Ce qui range la page, ce sont des en-têtes centrés, des cartes et du blanc. Un trait ne sert plus qu'à séparer deux lignes d'un même relevé. C'est un changement volontaire par rapport à la première version du site.
Un voile de bruit fixe à 0,035 sur la page, et un second à 0,055 en multiply posé sur chaque image. Sans lui, une photographie rendue en gris paraît propre au point d'être synthétique.
| Nom | Valeur | Emploi |
|---|---|---|
| sortie | cubic-bezier(.23,1,.32,1) | Entrées, révélations, survols |
| traversée | cubic-bezier(.77,0,.175,1) | Déplacements sur écran |
Jamais de ease-in. Un bouton pressé descend à scale(.98), une carte au survol monte de 3 px.
clip-path de inset(0 100% 0 0) à inset(0). Un rideau, jamais un fondu700 ms pour les deux premiers, 900 ms pour le clip. Tout est désactivé sous prefers-reduced-motion.
Deux pixels de laiton, décalés de trois, partout et sans exception. C'est ce qu'on voit au clavier, et c'est aussi ce qui dit que le site a été fini.
06 · Photographie
C'est la règle qui tient tout l'ensemble et qui donne le ton grave attendu d'un cabinet de restructuring. Une seule image en couleur suffirait à faire basculer le site dans un autre registre.





Ils étaient les seules images en couleur du site. Une lampe verte et des néons bleus au milieu d'une maison en noir et blanc, c'est précisément ce qui trahit l'image de stock. Le filtre appliqué est grayscale(1) contrast(1.04) brightness(1.08).
Un rectangle net, fond d'encre, filet intérieur à rgba(18,21,23,.16), et une ombre interne de 5rem à 22 % qui creuse les bords. Plus le grain en multiply.
07 · Composants
Un designer qui reprend la main les retrouve dans src/components/. Elles se redessinent, elles ne se remplacent pas.
Une capsule basse et large, hauteur minimale 50 px, flèche poussée à droite. Ni pilule de boutique, ni rectangle nu.
Un bouton qu'on ne peut pas encore actionner se vide au lieu de se griser : fond transparent, filet à 18 %, texte à 38 %.
Mandat ad hoc
Le président du tribunal désigne un tiers pour négocier à vos côtés. Rien n'est publié, aucune durée n'est imposée.
Au survol, le contour se réchauffe en laiton à 60 %, le fond passe au blanc, la carte monte de 3 px. Un contour qui se réchauffe se remarque sans crier.
L'objet signature du site : le délai de l'article L. 631-4, dessiné en quarante-cinq bâtons. Les pleins sont en laiton. Ici, vingt-huit jours écoulés.
28 jours écoulés, 17 restants.
Dessinée comme un plan de réseau. Au-dessus de la ligne, les procédures qu'on ouvre soi-même et qui ne se publient pas. En dessous, celles qui s'ouvrent devant le tribunal. C'est l'argument du site, mis en forme.
Toutes les pages intérieures le partagent : une bande d'encre pleine largeur coupée en deux, un fil d'Ariane, un titre en Spectral, une photographie en noir et blanc plein bord.
Un bordereau, pas un calendrier. Sans serveur : il compose le courriel dans la messagerie du visiteur. Champs à filet bas uniquement, le filet devient laiton au focus.
08 · Déontologie
Les entreprises en difficulté sont une matière sensible. Deux points valent d'être rappelés à quiconque produit un visuel ou un texte.
« La liquidation n'est pas la seule issue » est un constat, et il se dit. « Évitez la liquidation » serait un engagement de résultat, et il est interdit à un cabinet. La même idée bascule d'un côté ou de l'autre selon la façon dont on la formule.
Sur 768 annonces relevées, la survie à trente jours des pubs qui portent le mot « avocat » est de 4 % contre 28 % pour celles qui ne le portent pas. Sur une créa ou une voix off, l'identification passe donc par le nom de la Page, un carton de fin incrusté et la première ligne du formulaire, jamais par la voix.
Perdent également : le tutoiement, la menace sur le patrimoine personnel, le menu des issues, la douleur nommée, l'urgence « agir vite ». Gagnent : l'alternative à la liquidation, le gratuit et sans engagement, la question d'ouverture.
09 · Production
| Format | Dimensions | Zone sûre | Emploi |
|---|---|---|---|
| 4:5 | 1080 × 1350 | 12 % du bas laissés vides | Le format principal du fil |
| 1:1 | 1080 × 1080 | 12 % du bas | Feed et carrousel |
| 9:16 | 1080 × 1920 | 20 % en haut, 25 % en bas | Stories et Reels |
Le carton de fin portant l'identification est incrusté, muet, dans la zone basse laissée vide. Il n'est jamais généré dans l'image.
| Site | ~/Desktop/01-Avocats-Clients/sylvain-paillotin/ |
| Jetons de design | tailwind.config.ts et src/index.css |
| Contenu | src/data/ : cabinet, domaines, articles, SEO |
| Monogramme | src/components/Sceau.tsx |
| Les 45 bâtons | src/components/Compteur.tsx |
| Ligne du temps | src/components/LigneDuTemps.tsx |
| Photographies | public/img/, suffixe -nb pour les versions noir et blanc |
| Plans-séquences | public/seq/, 96 webp par format, 16:9 et 9:16 |
| Fabrication | scripts/gen_paillotin.py sur le VPS, Gemini puis Veo puis ffmpeg |
| Site en ligne | paillotin.46.225.126.27.nip.io |
L'adresse de courriel est déduite de la convention de nommage de Redlink, elle n'est pas publiée. Le numéro affiché est le standard, pas sa ligne directe. Les deux sont listés dans docs/A-VALIDER.md, et c'est le courriel que vise tout le site.