L'Avenir

01 · Logo

Le logotype et l'icône

Le logo se construit avec des formes simples et épurées, signe de qualité et de professionnalisme. Dans sa version réduite, il devient une icône : le « 'A ». L'apostrophe fait le lien entre l'histoire de la marque (le « l » à gauche) et son futur (« Avenir » à droite). Elle équilibre aussi l'icône face à l'inclinaison du A.

Inclinaison. Pour une vision dynamique et positive, le logo se tourne vers l'avenir avec une inclinaison de 9,5° vers la droite. Cet angle se retrouve dans tout l'univers graphique (aplats, découpes, transitions).

9,5°

Espace de sécurité. Il se mesure avec la lettre « r » du logo, tout autour du logotype comme de l'icône. Si l'espace ou le support ne permet pas une lisibilité suffisante, on privilégie l'icône.

marge = largeur du « r »

Sur quels fonds. Vert sur Forêt, Forêt sur Vert, blanc sur image. Les deux verts se répondent toujours.

Vert / Forêt

Forêt / Vert

Forêt / blanc

Blanc / image

À ne pas faire. Les interdits de la charte, valables pour le logo et l'icône.

02 · Couleurs

Couleurs principales

Deux verts principaux qui se complètent : le Vert l'Avenir, éclatant, et le Vert Forêt, profond. Pensées pour le digital, ces teintes peuvent légèrement varier en CMJN ; une impression spéciale ou Pantone permet de s'en rapprocher. Cliquer sur une valeur la copie.

Accessibilité. Le Vert l'Avenir n'offre que 1,7:1 de contraste avec le blanc : jamais de texte vert sur fond blanc, ni de texte blanc sur fond vert. Le duo qui fonctionne est vert sur Forêt (ou Forêt sur vert), 7,7:1. Sur le site, les titres de chaînes et de box sont en vert sur blanc : c'est un point à corriger.

Couleurs secondaires

Pour différencier certains contenus et donner plus de liberté à l'univers graphique, toujours en respectant la hiérarchie des deux verts. Elles servent notamment à distinguer les thèmes sur les réseaux sociaux.

Coquille dans la charte PDF. Le Rosé y est noté HEX #0A3623 (le code du Vert Forêt). Son RVB 255 · 110 · 151 donne #FF6E97, la valeur retenue ici.

Couleurs du site

Les neutres réellement utilisés sur lavenir.net.

Abonnement

Le jaune signale l'univers payant : bouton S'abonner, badge « article offert », cadenas.

03 · Rubriques

Couleurs de rubriques

Sur lavenir.net, chaque rubrique reçoit une couleur injectée par le CMS (Arc) dans --section-color-primary. Elle colore les liens du menu, les intertitres et les listes numérotées dans les articles.

À savoir. Ces couleurs viennent de l'ancienne charte du site et ne reprennent pas la palette secondaire de la nouvelle identité. Les intertitres utilisent parfois des variantes (sport #CC0000, actu #000000). Une harmonisation avec la nouvelle charte serait logique.

04 · Typographie

Trois polices, trois rôles

Ambit pour la communication, Lato pour le site, Georgia pour le corps de texte du journal papier.

Ambit

Police principale de l'identité : posts réseaux sociaux, visuels de campagne, documents. Ses courbes arrondies et dynamiques incarnent le renouveau de L'Avenir. Police payante (CoType Foundry) : elle n'est pas hébergée ici, licence à prévoir pour chaque usage.

Lato

Georgia

Échelle du site

Tailles réellement appliquées sur lavenir.net, relevées dans la feuille de style. Bascule mobile → desktop à 768 px.

05 · Ton

Tone of voice

Nos valeurs façonnent la relation avec les lecteurs, des contenus jusqu'à la façon de collaborer en interne. Chaque personne est le prolongement de L'Avenir.

06 · Composants

Boutons et badges

Rayon de 0,25 rem, padding 0,5 × 0,75 rem, Lato Regular 16 px. Le bouton primaire est noir avec un texte vert ; le focus clavier dessine un halo vert à 50 %.

• Primairefond #141415 · texte #00E25D · survol #000
• Abonnementfond #FED80B · texte #1D1D1B · survol #F7B500
• Secondairefond blanc · bordure #D1D8DD · texte #141415
• Marquefond #00E25D · texte #0A3623 (proposition, usage dossiers)
• Badge offertpilule · #F7B500 / #1D1D1B · 13 px
• Ombre douce0 3px 10px rgba(5,68,58,.2)

Teasers et chaînes

Titre en Lato Bold, surtitre gris avec la rubrique en vert. Le titre de chaîne est centré en Lato Bold 20 px.

07 · Développeurs

Tokens prêts à brancher

L'essentiel en variables CSS. Le fichier complet et sa version JSON sont dans les téléchargements.

/* L'Avenir · tokens essentiels */
:root {
  --lav-vert:      #00E25D;  /* principale */
  --lav-foret:     #0A3623;  /* principale sombre */
  --lav-ink:       #141415;  /* titres, bouton primaire */
  --lav-text:      #23272C;  /* texte courant */
  --lav-pay:       #FED80B;  /* abonnement */
  --lav-font-web:  "Lato", "Helvetica Neue", Arial, sans-serif;
  --lav-radius:    .25rem;
  --lav-logo-angle: 9.5deg;
}

Piège de nommage. Dans le CSS du site, --color-primary vaut #141415 (noir) et --color-secondary vaut #00E25D (vert). Côté marque, le vert est la couleur principale. La meta theme-color du site est #7AFC53, un vert différent de la charte.

• Conteneur992 px (md) · 1120 px (lg)
• Breakpoints480 · 768 · 992 · 1024 · 1200 px
• Focus0 0 0 3px rgba(80,170,80,.5)
• Polices du siteLato 400 · 700 · 900 en local (/pf/resources/fonts/lavenir/)
• CMS / frontArc XP (PageBuilder Fusion), même socle que lalibre.be