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

03 · 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 */

04 · 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

05 · 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

06 · 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

07 · Iconographie

Icônes

Le site utilise Font Awesome Pro (licence payante : les fichiers ne sont pas redistribuables ici). Quatre pictogrammes sont propres à La Libre et se redessinent sans la bibliothèque.

08 · 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
• SurimpressionManuale 800 · blanc · md 16 / 20 ou 3xl 27 / 38
• 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 aussifond #AC115D · rayon .925rem · ombre e3 · en-tête Manuale 800 25 / 36 blanc · icône jaune
• 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.

09 · 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

10 · 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

11 · 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)
• CMS / frontArc XP (PageBuilder Fusion)