La Libre

00 · Principes

Huit règles avant les valeurs

Cette charte décrit le système tel qu'il tourne sur lalibre.be, puis le relit avec la méthode Refactoring UI (Adam Wathan et Steve Schoger). Quand la méthode et la marque se contredisent, la marque l'emporte sur la typographie et la couleur, et l'écart est signalé.

01 · Logo

Le logotype

Le logotype La Libre est un mot-symbole en serif, dessiné d'un seul tenant, en magenta #AC115D. Il existe en deux versions officielles : magenta sur fond clair, blanc sur fond foncé ou coloré. Les deux fichiers SVG sont fournis plus bas, recadrés au plus juste.

Zone de protection et taille minimale. Une marge libre égale à la hauteur du « a » bas de casse entoure le logo : aucun élément ne doit y pénétrer. Largeur minimale de 80 px à l'écran et 25 mm en impression.

x = hauteur du « a »

Sur quels fonds. Magenta sur blanc ou fond très clair, blanc partout ailleurs. Sur lalibre.be, le header est un bandeau magenta avec le logo en blanc. Jamais de magenta sur marine ou sur graphite : le contraste tombe sous 3:1.

Magenta / blanc

Blanc / magenta

Blanc / marine

Blanc / image

À ne pas faire. Le logo s'utilise tel que fourni, sans modification.

Nom de marque. Le titre s'écrit La Libre (le nom historique complet est La Libre Belgique). Le site est lalibre.be, les grands formats vivent sur dossiers.lalibre.be.

02 · Application

L'app La Libre

Sur l'App Store, l'application s'appelle La Libre News. Son icône reprend le « L » du logotype, en blanc, sur un dégradé radial qui part du magenta #AC115D en haut à gauche et glisse vers un violet profond #440D70, propre à l'app. Les couleurs de rubriques de l'app sont détaillées dans la section Rubriques.

9:41

MétéoPhotosPlansMusiqueMailAgendaNotesLa Libre

Le fichier livré est carré : iOS et Android appliquent eux-mêmes leur masque (arrondi iOS, cercle ou forme adaptative Android). Ne jamais arrondir les coins dans le fichier.

Apparences

Depuis iOS 18, chacun choisit l'aspect de ses icônes : par défaut, sombre ou teinté (iOS 26 ajoute le mode transparent, « Liquid Glass »). Android fait de même depuis la version 13 avec les icônes à thème. Chaque mode demande son propre fichier, qui n'est pas l'icône carrée : un calque sans fond, le système pose le sien.

• Claircalque transparent · L en dégradé radial #AC115D → #440D70 · même position que l'icône par défaut
• Sombrecalque transparent · L plein #F8F2F5, un blanc légèrement rosé · même position
• Teintécalque transparent · L blanc plein · le système le convertit en niveaux de gris puis le teinte
• Androidmême silhouette, réduite pour tenir dans la zone utile de 66 dp sur 108 (le L actuel en dépasse en haut et en bas)

Construction

• Fonddégradé radial depuis le coin haut gauche · #AC115D → #440D70
• Violet app#440D70 · réservé à l'icône, absent du site
• Glyphe« L » du logotype · blanc #FFFFFF · environ deux tiers de la hauteur
• Format2000 × 2000 px · carré, sans transparence, sans coins arrondis

Dans les stores

• Nom sur l'App StoreLa Libre News
• ÉditeurS.A. d'Informations et de Productions Multimédia (IPM)
• CatégorieActualités · 13+
• iOSiPhone et iPad, iOS 15 ou plus récent
• Languefrançais

Le journal numérique (la version papier en PDF) a sa propre application, La Libre Journal +.

Fichiers de l'icône

Icône vectorielleSVG

App StorePNG 1024

Google PlayPNG 512

iPhonePNG 180

Calque clairSVG

Calque sombreSVG

Calque monochromeSVG

03 · Couleurs

Couleurs de marque

Le magenta porte la marque (logo, header, liens, titres de blocs, couleur du navigateur). Le graphite porte la lecture : c'est la couleur du texte et du bouton principal. Le marine sert de fond éditorial pour les séries et les grands formats. Cliquer sur une valeur la copie.

Piège de nommage pour les devs. Dans le CSS du site, --color-primary vaut #262729 (graphite) et --color-secondary vaut #AC115D (magenta). Côté marque, c'est l'inverse : le magenta est la couleur principale. Les tokens fournis ici lèvent l'ambiguïté avec des noms explicites (--llb-magenta, --llb-graphite).

Échelles de nuances

Le site utilise déjà plusieurs déclinaisons du magenta et du marine. Elles sont rangées ici sur une échelle de 50 (le plus clair) à 900 (le plus foncé). Les paliers manquants sont calculés en HSL à partir de la teinte de base, et marqués calc. Le « Aa » dans chaque pastille est écrit dans la couleur de texte qui passe le mieux.

Magenta

Marine

Gris

• 50 · 100fonds teintés, survol de ligne, zones de mise en avant
• 200 · 300bordures, séparateurs, éléments inactifs
• 400 · 500icônes, accents sur fond sombre
• 600la couleur de base (magenta #AC115D)
• 700survol
• 800 · 900état pressé, fonds profonds, texte sur fond teinté

Hors échelle : le magenta vif #EF147F. Nommé --color-secondary-darkest dans le CSS, c'est en fait la version la plus lumineuse. Il sert d'accent ponctuel sur fond sombre (mode sombre, vidéo). Il n'entre pas dans l'échelle parce que sa teinte et sa saturation s'en écartent.

Abonnement

Le jaune est réservé à l'univers payant : bouton S'abonner, badge « article offert », carré « L » des contenus abonnés, paywall. Le texte posé dessus est toujours brun foncé.

Couleurs fonctionnelles

États, direct et marqueurs éditoriaux. Elles ne remplacent jamais un texte : le badge « Live » dit « Live », un message d'erreur dit ce qui ne va pas.

Dégradé éditorial

Le fond des pages séries part d'un bleu pétrole vers le marine (#08619B vers #061E4D, 270°). La vidéo utilise une variante plus nuit (#0A2B6C vers #03132B).

linear-gradient(270deg, #08619B, #061E4D)

Contrastes

Ratios WCAG calculés pour les couples les plus courants. Seuils : 4,5:1 pour le texte courant (AA), 3:1 pour les grands textes et les éléments d'interface, 7:1 pour l'AAA. Chaque case dit son verdict en toutes lettres.

04 · Rubriques

Une couleur par rubrique

Chaque rubrique du site a un trio de couleurs injecté par le CMS (Arc) en variables CSS : --section-color-primary, --section-color-primary-dark et --section-color-secondary. Elles colorent les en-têtes de chaînes, les liens de menu et les surtitres des teasers.

Accessibilité. Sur le web, la plupart des couleurs de rubrique ne tiennent pas le ratio AA (4,5:1) avec du texte blanc : à réserver aux aplats décoratifs, filets et grands titres. L'app native utilise des versions corrigées, plus denses, qui passent l'AA. C'est la piste recommandée pour toute nouvelle interface.

Rubriques de l'app native

Tokens du design system de l'app (Figma, v1.0) : douze couleurs, dont deux propres à l'app (Sélection et Longs formats). Dans l'app, la rubrique Économie porte le nom Libre Éco et garde la couleur web #0548AA, déjà conforme AA. AA texte

La rubrique colore la page

Dans une rubrique, le trio de couleurs remonte jusqu'au header : le bandeau prend la teinte foncée de la rubrique, et le lien actif du menu secondaire se remplit de la primaire. Exemple ci-dessous avec Économie.

S'identifierS'abonner

• Headerfond --section-color-primary-dark · logo blanc
• Menu secondaireLibre Franklin 600 · 16 / 20 · padding .5 × .75rem · rayon .25rem
• Lien actiffond --section-color-primary · texte blanc

Chaîne « déco »

Les chaînes mises en avant d'une rubrique (Libre ECO sur la home, par exemple) reçoivent un fond en dégradé radial, de la teinte foncée vers la primaire, coiffé d'un filet de 3 px dans la secondaire.

background: radial-gradient(circle at 20% 30%, var(--section-color-primary-dark), var(--section-color-primary));
border-top: 3px solid var(--section-color-secondary);
padding: 0 48px;            /* titre : Manuale 800 · 30 / 40 · blanc */

05 · Typographie

Deux familles

Manuale pour les titres, Libre Franklin pour tout le reste. Deux polices libres (licence SIL Open Font License), servies en local par le site depuis /pf/resources/fonts/lalibre/. Ici, elles sont auto-hébergées en woff2 variable.

Rôles observés

Tailles réellement appliquées sur lalibre.be, relevées dans la feuille de style. L'échelle complète (mobile et desktop, 29 éléments) est dans le tableur du kit développeurs.

L'échelle des titres

Le composant .ap-Title du site définit six tailles, toutes en Manuale 800. C'est l'échelle de référence pour tout nouveau titre : on ne crée pas de taille entre deux paliers.

.ap-Title--{sm…3xl} · Manuale 800 · taille / interlignage en px · ratio

Une page d'article

Les rôles typographiques mis ensemble, avec les vraies valeurs desktop (dès 768 px).

• SurtitreLibre Franklin 600 · 11 / 20 · capitales · #686868
• Titre (H1)Manuale 800 · 28 / 36 → 32 / 40 dès 768 px
• ChapôLibre Franklin 500 · 18 / 27 → 21 / 32
• AuteurLibre Franklin · 16 / 21
• TexteLibre Franklin 500 · 18 / 27 → 21 / 32 · marge 1,5 rem
• Bloc intégrémarge basse 2 rem, 1,5 rem dès 992 px
• CitationManuale 800 italique · taille indicative 24 / 32 proposition

Les polices

06 · Espacement et grille

Une échelle, pas des valeurs au hasard

Toutes les marges et paddings du site, relevés dans la feuille de style et classés par fréquence d'usage. Ils tombent sur une échelle de 4 px, avec un demi-pas à 2 px pour les détails.

Points de rupture et conteneurs

• Breakpoints480 · 768 · 992 · 1024 · 1200 px (min-width, mobile first)
• Conteneur992 px (md) · 1120 px (lg)
• Colonne article≈ 675 px · une soixantaine de caractères à 21 px
• Bascule typo768 px : titres et texte d'article passent à la taille desktop
• Bascule rythme992 px : marges de blocs resserrées, champs plus hauts

Rythme vertical

07 · Formes et élévation

Rayons

Le site est presque droit : 0,25 rem partout (boutons, images, champs), la pilule pour les badges. Les rayons plus grands sont réservés aux éléments qui flottent.

Élévation

Six ombres relevées dans le CSS, rangées par altitude. Elles ont toutes deux couches ou une seule couche très diffuse, jamais une ombre dure et unique.

• e10 1px 1px rgba(0,0,0,.15), 0 2px 3px hsla(0,0%,40%,.12)
• e20 1px 1px rgba(0,0,0,.22), 0 3px 4px hsla(0,0%,40%,.21)
• e30 3px 10px rgba(68,5,36,.2)
• e40 10px 20px rgba(30,30,30,.05)
• e50 1px 15px rgba(0,0,0,.3)
• Presséinset 0 2px 3px rgba(0,0,0,.5)
• Focus0 0 0 3px rgba(172,17,93,.5)

Bordures

• Filet1 px #E0E0E0 · listes, champs, cartes auteur
• Contour1 px #BDBDBD · boutons secondaires, flancs du paywall
• Accent3 px --section-color-secondary · haut des chaînes déco

08 · Iconographie

Icônes

Le site charge Font Awesome via Arc XP. Pour nos projets, on utilise Font Awesome Free : chaque picto du site y a son équivalent, listé dans la section Pictos et composants. Quatre pictogrammes sont propres à La Libre et se redessinent sans la bibliothèque.

09 · Composants

Header

Un bandeau magenta de 59 px de haut minimum, coins bas arrondis à 10 px, logo blanc au centre. À droite, « S'identifier » et le bouton jaune S'abonner.

S'identifierS'abonner

• Bandeau#AC115D · min-height 59 px · rayon 0 0 10px 10px
• S'identifierLibre Franklin 600 · 13 / 18 · blanc
• S'abonnerLibre Franklin 600 · 16 / 18 · #F2C93D / #5D3C10 · rayon 4 px

Boutons

Manuale Medium 16 px, rayon 0,25 rem, padding 0,5 × 0,75 rem, transition 0,3 s. Le survol enfonce le bouton (ombre inset), le focus clavier dessine un halo magenta à 50 %. Les états sont forcés ci-dessous pour être comparés.

• Primaire#262729 · texte blanc · survol #111 + inset
• Marque#AC115D · Manuale 500 18 px · survol #930A4D + inset
• Défautblanc · bordure #BDBDBD · survol fond #262729, texte blanc
• Abonnement#F2C93D · texte #5D3C10 · survol #F7B500 + inset
• Désactivénon relevé sur le site · opacité .5, curseur not-allowed proposition

Badges et étiquettes

• Offertpilule · #F7B500 / #5D3C10 · 13 px 600
• Live#DF0000 · blanc · 12 px 600 capitales · point blanc pulsé
• Nouveau#00FDC5 · texte graphite
• Sponsor#E3E0E0 · texte graphite
• Exclu apppilule magenta · texte blanc

Teasers

Le titre en Manuale porte toute la carte ; la métadonnée en dessous, en petites capitales grises, passe au second plan. Au survol, le titre devient magenta. Quatre formats coexistent : image au-dessus, titre en surimpression, petite image à droite pour les listes serrées, et titre seul pour les box et les fils.

• StandardManuale 600 · 18 / 22 · survol #AC115D
• Image à droite.is-small · Manuale 600 · 16 / 20 · image flottante 140 × 93 (3:2), marge gauche 16 px, rayon 4 px · tags dessous · filet bas #E0E0E0
• Titre seul.is-small sans image · Manuale 600 · 16 / 20 · ≈ 12 px sous le titre, filet #E0E0E0, 16 px avant le suivant · pas de tags
• Imagesratio 3:2 partout (675 × 450 pour la Une, 325 × 217 en liste, 140 × 93 à droite) · rayon 4 px
• Surimpressionimage 3:2 · Manuale 800 · blanc · md 16 / 20 ou 3xl 27 / 38
• Vidéopastille magenta #AC115D, triangle blanc, opacité 90 % · 32 px · en bas à droite, à 10 px du coin
• MétadonnéeLibre Franklin 600 · 11 / 20 · capitales · #686868 · séparée par un filet
• Sponsortitre #114A70

Box et top 5

Navigation et auteur

Fil d'Ariane. Sur le site, les liens sont en #C6C6C6 13 px (1,7:1 sur blanc, sous le seuil AA). Recommandation : passer les liens en #686868 et garder la page courante en graphite. C'est ce que montre l'exemple ci-dessus. proposition

• Carte auteurnom Manuale 800 · 18 / 22 · rôle 13 px capitales #686868 · filet bas #E0E0E0

Blocs dans l'article

• Lire aussitout le bloc est le lien · fond #AC115D, survol #930A4D · rayon .925rem · ombre e3 · padding 1 × 1,5 × 1,5 rem · en-tête « À lire aussi » Manuale 800 25 / 36 blanc, flèche #F7B500 · titre Libre Franklin 600 16 / 20 blanc, jamais souligné · au survol, l'en-tête glisse de 2 rem vers la droite (0,3 s)
• Liste de liensblanc · filet #E0E0E0 · rayon .25rem · padding .75rem · étiquette magenta 14 / 20 · titre Manuale 27 / 38 magenta

Paywall

Le texte s'efface au-dessus d'un filet magenta, puis vient l'offre. Le paywall en ligne est un gabarit Piano ; ses couleurs restent celles de l'abonnement.

• Ancien bloc.ap-Restricted · en-tête #F2C93D / #5D3C10 Manuale 21 / 32 · flancs #BDBDBD · pied #F2F2F2
• Pianobadge L · carte d'offre · bouton jaune en capitales · fondu au-dessus d'un filet magenta

Champs de formulaire

• Champ.ap-Input · filet #E0E0E0 · rayon .25rem · 18 / 22 · padding .5rem, .75rem dès 992 px
• Focushalo 0 0 0 3px rgba(172,17,93,.5)
• Erreur#C73C49 · bordure + message texte composé à partir des tokens

Notification

• Toast#AC115D · rayon .5rem · blanc 700 13 / 18 · fixe en bas · max-width 20rem

Thème sombre

Le site propose un mode sombre : fond #1F1E1C, conteneurs noirs, texte #F1EDED, texte secondaire #D9D9D9.

10 · Mouvement

Deux durées, une courbe

Le site anime presque tout en 0,3 s (38 occurrences dans la feuille de style), quelques micro-états en 0,15 s, avec la même courbe d'accélération. Survoler les cases pour comparer.

• Courbecubic-bezier(.4, 0, .2, 1)
• Base.3s · --llb-duration
• Rapide.15s · --llb-duration-fast
• Réduit@media (prefers-reduced-motion: reduce) : pas de pulsation, transitions coupées

11 · Accessibilité

Ce qui passe, ce qui coince

• Cible tactile44 × 44 px minimum pour tout élément cliquable sur mobile proposition
• Couleur seulejamais : badge abonné = L + texte masqué, erreur = couleur + message
• Mouvementrespecter prefers-reduced-motion
• Longueur de ligne45 à 75 caractères pour le texte courant

12 · Pictos et composants

Les pictos du site, en Font Awesome Free

Relevés sur lalibre.be le 14 octobre 2026 (accueil et un article). Le site utilise fa-solid pour l'interface et fa-brands pour les réseaux : on garde la même règle. Tous ces pictos existent dans la version gratuite. Un clic sur une classe la copie. site

• Accueil, début du fil d'Arianefa-solid fa-house
• Rechercherfa-solid fa-magnifying-glass
• Se connecterfa-solid fa-user
• Newslettersfa-solid fa-envelope
• Alertez-nousfa-solid fa-bullhorn
• Ma Librefa-solid fa-heart
• Voir plusfa-solid fa-arrow-right
• Retourfa-solid fa-arrow-left
• Faire défiler le menule site le pivote pour la flèche droite ; ici fa-chevron-rightfa-solid fa-chevron-left · fa-chevron-right
• Afficher les sous-rubriquesfa-solid fa-chevron-down
• Fermerfa-solid fa-xmark
• Les applications mobilesfa-solid fa-mobile-screen-button
• Flux RSSfa-solid fa-rss
• Partager l'articlefa-solid fa-share-nodes
• Contacter l'auteurfa-solid fa-at
• Envoyer, partagerfa-solid fa-paper-plane
• Nos jeuxfa-solid fa-chess-board
• Nos séries exclusivesfa-solid fa-star
• LN Radioencore sur le site, alors que LN Radio a quitté le groupefa-solid fa-radio
• Facebookfa-brands fa-facebook-f
• Xfa-brands fa-x-twitter
• Instagramfa-brands fa-instagram
• LinkedInfa-brands fa-linkedin
• Blueskyfa-brands fa-bluesky

Hors version gratuite : l'équivalent proposé

• Bouton lecture des vidéossur le site : icône duotone de Font Awesome Pro (version 5)fa-solid fa-circle-play
• Enregistrer un articlesur le site : icône maisonfa-regular fa-bookmark

Les pictos propres à la marque (journal du jour, abonné, mots croisés...) restent des dessins maison : Font Awesome ne les remplace pas.

Les composants, en Bootstrap

Le site tourne sur Arc XP, avec ses propres classes (ap-...) et sans Bootstrap. Pour reproduire ces éléments dans nos projets, voici l'équivalent sur le socle commun, à charger avec le thème ipm-bootstrap-lalibre.css. proposition

Composants relevés sur la page d'accueil et une page article ; une page article ou une page rubrique peut en contenir d'autres. Démo des composants : socle Bootstrap.

13 · Développeurs

Tokens prêts à brancher

L'essentiel en variables CSS. Le fichier complet (échelles, rubriques web et app, espacements, élévations, rayons, mouvement, thème sombre) et sa version JSON sont dans les téléchargements.

/* La Libre · tokens essentiels (v2) */
:root {
  --llb-magenta:   #AC115D;  /* = --llb-magenta-600 */
  --llb-marine:    #061E4D;  /* = --llb-marine-800 */
  --llb-graphite:  #262729;  /* = --llb-grey-800 */
  --llb-pay:       #F2C93D;
  --llb-font-title: "Manuale", Georgia, serif;
  --llb-font-base:  "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --llb-space-2:  .5rem;   /* 8 px, la valeur la plus utilisée */
  --llb-space-4:  1rem;    /* 16 px */
  --llb-radius:   .25rem;
  --llb-shadow-2: 0 1px 1px rgba(0,0,0,.22), 0 3px 4px hsla(0,0%,40%,.21);
  --llb-ease:     cubic-bezier(.4,0,.2,1);
  --llb-container: 1120px;
}

• Nommage--llb-{famille}-{palier} · ex. --llb-magenta-700 pour le survol
• Rubriques--section-color-primary / -dark / -secondary (via Arc)
• Préfixe site.ap-* (composants Arc, ex. .ap-Title--xl, .ap-Button--pay)
• IcônesFont Awesome Pro sur le site · Font Awesome Free 6.7 pour nos projets
• CMS / frontArc XP (PageBuilder Fusion)

Socle commun

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="ipm-bootstrap-lalibre.css">