SP 2007

Charte graphique et brief de production

Sylvain Paillotin
restructuring et entreprises en difficulté

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.

Relevé le 18 septembre 2026 Source : le site en production Barreau de Paris depuis 2007, Redlink, Paris 17e

01 · Le point de départ

À qui l'on parle, et sur quel ton

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.

Les cinq matières

PréventionMandat ad hoc, conciliation, négociation bancaire, sauvegarde accélérée
SauvegardeSauvegarde et redressement judiciaire, période d'observation, plan
DirigeantLiquidation, insuffisance d'actif, faillite personnelle, cautions
RepriseOffres de reprise, actifs distressed, plaidoirie à l'audience
CréanciersDé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.

Le ton

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.

On écrit comme ça

  • Vouvoiement, phrases déclaratives
  • Des délais précis, des articles cités
  • L'ordre des étapes, jamais le menu des issues

Jamais

  • Le registre de l'urgence commerciale
  • La menace sur le patrimoine personnel
  • Le vocabulaire de la start-up

02 · Couleur

Papier froid, encre profonde, vert de bureau, laiton

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 fond de tout
papier
#F2F0EB
Un papier froid, pas un crème chaud. C'est ce qui tient le registre de cabinet.
Cartes et blocs
papier vif
#FBFAF7
Ce qui se détache du fond sans filet lourd.
Filets
ligne
#DCD8CF
Toutes les bordures. Un seul pixel, jamais deux.
Texte et panneaux
encre
#121517
Le texte, et le fond des panneaux pleine largeur.
Second niveau
graphite
#23282B
Un bloc posé dans un panneau d'encre.
Texte adouci
encre douce
#454B4F
Les chapôs sur fond clair.
Notes
ardoise
#6E7478
Gloses, légendes, notes de marge.
Second plan
ardoise claire
#9BA0A3
Ce qui doit exister sans se lire.
Vert de bureau
vert
#1F3A33
Le survol d'un bouton plein, et lui seul. Jamais un aplat de section.
Vert clair
vert clair
#3D6357
Le vert posé sur un fond d'encre.
L'accent
laiton
#A98B4B
Filets, bague de focus, bâtons pleins, monogramme.
Laiton clair
laiton clair
#C9A968
Le laiton sur fond d'encre, et le survol.
Laiton lisible
laiton texte
#8A7233
La seule valeur de laiton assez foncée pour porter un intitulé sur papier.
Le laiton se lit mal.

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 n'est pas une couleur de fond

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

Spectral titre, Schibsted Grotesk lit

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é.

TitrageSpectral500, italique 400
La cessation des paiements se constate, elle ne se décide pas.
LectureSchibsted Grotesk400 à 700

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.

InterfaceSchibsted Grotesk 500 et 600
Prendre rendez-vous · Vos délais · 01 73 31 00 00

Les règles

  1. Titres : Spectral 500, approche -0.021em, interlignage 1,05, text-wrap: balance.
  2. L'italique de Spectral existe, contrairement au cabinet Lassissi : un mot en italique reste dans la même fonte, en graisse 400.
  3. Texte : 1,03 rem, interligne 1,6, text-wrap: pretty sur les paragraphes. Un dernier mot seul sur sa ligne est le détail qui fait bon marché.
  4. Les capitales sont réservées à l'intitulé de section, en Schibsted 600 espacée à .19em, couleur #8A7233. C'est le seul endroit du site où l'on met des capitales.
  5. Chiffres tabulaires (tabular-nums lining-nums) sur tout délai, montant et date.
  6. La lettrine en Spectral 500, trois lignes et demie de haut, ouvre un texte long. Une par page au maximum.

L'échelle

NiveauTaille
Afficheclamp(2.45rem, 4.5vw, 4.15rem)
Chapitreclamp(1.85rem, 3.1vw, 2.85rem)
Chapô1,12 rem, interligne 1,62
Texte1,03 rem, interligne 1,6
ExergueSpectral italique, clamp(1.15rem, 1.7vw, 1.45rem)
Note de marge0,86 rem, ardoise

Les titres de section sont centrés

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

Un monogramme gravé, pas un cachet de cire

Il tient la barre de navigation, le premier écran et le pied de page. Il n'y a pas d'autre logo.

SP 2007
SP 2007

Comment il est construit

  • Deux cercles concentriques, 1.4 et 0.7 d'épaisseur, jamais un seul.
  • Les initiales SP en Spectral 400, approche 2.
  • Un filet, puis le millésime du serment, 2007, en Schibsted 500 espacée à 5.
  • La couleur ne fait jamais partie du dessin : il hérite de currentColor, laiton sur fond sombre, encre sur fond clair.
Ce qu'on ne fait pas.

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, le filet double, le grain

Une seule forme d'image

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.

Le filet double

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.

Les filets décoratifs, eux, ont disparu

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.

Le grain

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.

Les courbes

NomValeurEmploi
sortiecubic-bezier(.23,1,.32,1)Entrées, révélations, survols
traverséecubic-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.

Les trois gestes de révélation

  • le lever : le texte monte de 16 px
  • le découvre : l'image s'ouvre par la gauche, clip-path de inset(0 100% 0 0) à inset(0). Un rideau, jamais un fondu
  • la pose : un bloc descend de 14 px et se fixe

700 ms pour les deux premiers, 900 ms pour le clip. Tout est désactivé sous prefers-reduced-motion.

La bague de focus

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

Noir et blanc, sans exception

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.

Portrait
Le portrait. Cadre net, filet, ombre interne.
Dossiers
Les dossiers. Matière, pas décor.
Protocole
Le protocole signé.
Escalier
L'escalier du tribunal.
Table de négociation
La table de négociation, de nuit.
Les plans-séquences aussi passent en noir et blanc.

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).

Le cadre

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.

Une image tient

  • Une matière : papier, bois, métal, pierre
  • Une lumière rasante, une ombre lisible
  • Un lieu réel, vu de biais
  • Le noir et blanc, toujours

Ce qui trahit

  • La poignée de main, la réunion souriante
  • Le marteau de juge, la balance, la colonne grecque
  • Le bureau vu de haut avec un ordinateur ouvert
  • Toute couleur, même sourde

07 · Composants

Les pièces déjà dessinées

Un designer qui reprend la main les retrouve dans src/components/. Elles se redessinent, elles ne se remplacent pas.

Boutons

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 %.

Carte

Prévention

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.

Les quarante-cinq bâtons

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.

La ligne du temps

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.

L'en-tête des pages intérieures

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.

Le bordereau de contact

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

Ce que le RIN impose sur cette matière

Les entreprises en difficulté sont une matière sensible. Deux points valent d'être rappelés à quiconque produit un visuel ou un texte.

Obligatoire

  • L'identification : « Sylvain Paillotin, avocat au barreau de Paris »
  • Un fait se dit : « la liquidation n'est pas la seule issue » est exact
  • Les procédures se nomment : conciliation, mandat ad hoc, sauvegarde

Interdit

  • Toute promesse de résultat, « évitez la liquidation » en est une
  • Tout témoignage de client
  • Toute mention d'un confrère
  • Tout visage humain fabriqué
La frontière tient dans le verbe.

« 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.

Ce que l'étude publicitaire a mesuré sur cette matière

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

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

Les formats publicitaires

FormatDimensionsZone sûreEmploi
4:51080 × 135012 % du bas laissés videsLe format principal du fil
1:11080 × 108012 % du basFeed et carrousel
9:161080 × 192020 % en haut, 25 % en basStories 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.

Où sont les fichiers

Site~/Desktop/01-Avocats-Clients/sylvain-paillotin/
Jetons de designtailwind.config.ts et src/index.css
Contenusrc/data/ : cabinet, domaines, articles, SEO
Monogrammesrc/components/Sceau.tsx
Les 45 bâtonssrc/components/Compteur.tsx
Ligne du tempssrc/components/LigneDuTemps.tsx
Photographiespublic/img/, suffixe -nb pour les versions noir et blanc
Plans-séquencespublic/seq/, 96 webp par format, 16:9 et 9:16
Fabricationscripts/gen_paillotin.py sur le VPS, Gemini puis Veo puis ffmpeg
Site en lignepaillotin.46.225.126.27.nip.io

Reste à confirmer côté cabinet

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.