La Libre —
un système,
pas des écrans.
Une marque, écrite une fois pour toutes les équipes.
La Libre vit sur un site, une app, des newsletters, des dossiers long format et des campagnes. Chacun de ces objets était fabriqué avec sa propre idée du magenta, de la hiérarchie des titres et de la couleur d'une rubrique. Le design system remet tout le monde sur la même page, au sens propre.
Il sert aujourd'hui de charte de référence aux équipes de développement : typographies, couleurs principales et secondaires, rubriques, logo vectoriel et règles d'usage. Conception, rédaction et développement de la charte : moi.
Huit règles avant les valeurs.
Une charte qui commence par une liste de codes hexadécimaux se périme en six mois. Celle-ci commence par des règles, et les valeurs viennent les illustrer. La première est aussi la plus utile au quotidien :
« Hiérarchie par la graisse et la couleur, pas seulement par la taille. Un titre de teaser en Manuale 600 graphite et une métadonnée en Libre Franklin 600 grise capitales : deux niveaux lisibles sans changer de corps. »
Le reste suit la méthode Refactoring UI d'Adam Wathan et Steve Schoger, appliquée à une marque de presse : une échelle d'espacement plutôt que des valeurs au hasard, des contrastes vérifiés avant d'être jolis, et une couleur fonctionnelle qui ne sert jamais à décorer.
Un magenta signature.
Le magenta La Libre est la couleur de marque, déclinée en une échelle complète de nuances pour les fonds, les survols et les états. Le bleu nuit l'accompagne sur les surfaces profondes, le graphite porte le texte, et le jaune est strictement réservé à l'abonnement : quand il apparaît, c'est qu'on parle d'argent.
Chaque rubrique du site reçoit ensuite son trio de couleurs, injecté par le CMS en variables CSS : primaire, foncé, secondaire. Elles colorent les en-têtes de chaîne, les liens de menu et les surtitres de teasers, et chacune a sa variante conforme au niveau AA pour l'app native.
Deux familles, des rôles observés.
Un serif éditorial qui assume les titres, un sans-serif robuste pour absolument tout le reste. Les rôles n'ont pas été décrétés : ils ont été relevés sur le site existant, page par page, avant d'être écrits dans la charte.
Manuale
Les titres. Un serif contemporain à l'empattement net, qui tient aussi bien un titre d'article qu'un titre de teaser en petit corps.
Libre Franklin
Le texte et l'interface. Chapôs, corps, métadonnées, boutons, navigation : la famille qui fait tourner le site.
Inconsolata
Le code. Variables CSS, extraits et tokens dans la charte elle-même, pour que les équipes dev copient sans se tromper.
Du token au teaser.
La charte descend jusqu'aux pièces que les équipes assemblent tous les jours.
Une échelle, pas des valeurs au hasard
Espacements, rayons, élévations et bordures suivent une échelle unique, avec des points de rupture et des largeurs de conteneur définis une fois. Un composant posé dans une nouvelle page tombe juste sans réglage manuel.
Les teasers, pièce maîtresse
Un site de presse est un empilement de teasers. La charte documente leurs variantes, leurs tailles, leur comportement au survol et la manière dont la couleur de rubrique s'y invite, sans jamais repeindre le titre.
Les contrastes, mesurés
Chaque couleur de rubrique est publiée avec son ratio de contraste sur blanc, et accompagnée d'une variante conforme AA pour l'app. Quand le primaire ne passe pas, la charte le dit au lieu de le cacher.
Ce que ce projet a changé.
Le design system a transformé une discussion d'opinions en discussion de valeurs : on ne débat plus de la bonne teinte de rose, on ouvre la charte. Il sert aujourd'hui de référence commune entre la rédaction, le produit et les équipes de développement, et sa fiche publique fait partie de la boîte à outils Tools Design, qui réunit une charte par média du groupe.