Paris Match

01 · Logo

Le logotype

Le logo Paris Match est un cartouche rouge : « MATCH » en capitales blanches très condensées, « PARIS » en noir qui s'y encastre. Pour la Belgique, un onglet vertical .be s'accroche en bas à droite du cartouche. Deux versions : filet et onglet noirs sur fond clair, filet et onglet blancs sur fond foncé.

Zone de protection et taille minimale. Une marge libre égale à la hauteur de « PARIS » tout autour du cartouche, onglet compris. Largeur minimale de 75 px à l'écran (taille du logo dans le header du site) et 20 mm en impression.

x = hauteur de « PARIS »

Sur quels fonds. Le cartouche rouge garde toujours sa couleur ; seuls le filet et l'onglet changent selon le fond.

Fond blanc

Fond #F4F4F4

Fond noir

Fond image

À ne pas faire.

Version sans .be. Le cartouche seul (sans onglet) est fourni pour les formats carrés et les petits espaces (avatar, favicon). Sur le site belge, la version avec .be reste la règle.

02 · Couleurs

Rouge et noir

Le rouge #D7262C est la couleur principale du site : titres de pages et de chaînes, signatures, cartouches de rubrique, liens. Le noir #1B1A19 est la couleur secondaire. Le cartouche du logo utilise un rouge légèrement plus vif, #EC1C24, réservé au logo. Cliquer sur une valeur la copie.

Nuances du rouge

Les déclinaisons utilisées pour les états (survol, actif) et les fonds.

Survol : Dark · Pagination active : #7B060A (Sketch).

Textes et fonds

Le site vit sur un fond gris très clair #F4F4F4, avec un texte gris foncé #525252. Les galeries basculent sur un bleu nuit presque noir, #001B25.

Gris d'interface

L'échelle de gris définie dans le Sketch pour les formulaires, bordures et états.

Abonnement

Le jaune signale l'univers payant. Le Sketch utilise #F7B500 pour le bouton abo, le site #F2C93D pour le bouton S'abonner ; le texte posé dessus reste brun foncé.

Pas de couleurs de rubriques. Contrairement à La Libre ou L'Avenir, parismatch.be n'injecte aucune couleur par rubrique : tout passe par le rouge. Les couleurs de section présentes dans le Sketch reprennent celles de l'app La Libre et ne s'appliquent pas à Paris Match.

03 · Typographie

Deux familles

Open Sans Condensed pour les titres, Roboto pour le texte et l'interface. Deux polices libres, servies par le site et auto-hébergées ici en woff2.

Échelle du site

Tailles réellement appliquées sur parismatch.be. Bascule mobile → desktop à 768 px.

04 · Composants

Boutons

D'après le Sketch : Roboto Regular 13 px, rayon 4 px. Cinq variantes, plus l'état désactivé.

• Abonnement#F7B500 · texte #5D3C10 · survol #F6A200
• Rouge#D7262C · texte blanc · survol #AC1E23
• Sombre#262729 · texte blanc · survol #111111
• Secondaireblanc · bordure #BDBDBD · texte #262729
• Désactivé#E1E4E8 · texte #A6AEBC
• Bouton primaire du site.ap-Button--primary · fond #686868 · Roboto 500 16 px

Teasers

Rubrique en cartouche rouge posé sur l'image, titre en Open Sans Condensed Bold, signature en Roboto Light soulignée d'un filet rouge. Le teaser « à la une » passe en noir.

Chaînes et galeries

05 · Développeurs

Tokens prêts à brancher

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

/* Paris Match Belgique · tokens essentiels */
:root {
  --pm-rouge:      #D7262C;  /* principale */
  --pm-noir:       #1B1A19;  /* secondaire */
  --pm-rouge-logo: #EC1C24;  /* logo uniquement */
  --pm-texte:      #525252;  /* texte courant */
  --pm-fond:       #F4F4F4;  /* fond de page */
  --pm-pay-dark:   #F7B500;  /* abonnement */
  --pm-font-title: "Open Sans Condensed", "Arial Narrow", sans-serif;
  --pm-font-base:  "Roboto", Helvetica, Arial, sans-serif;
}

Piège de nommage. Dans le CSS du site, --color-primary vaut #686868 (gris) et --color-secondary vaut #D7262C (rouge). Côté marque, le rouge est la couleur principale. La meta theme-color du site est #000.

• Conteneur992 px (md) · 1120 px (lg)
• Breakpoints480 · 768 · 992 · 1024 · 1200 px
• Ombre douce0 3px 10px rgba(3,11,25,.2)
• CMS / frontArc XP (PageBuilder Fusion), même socle que lalibre.be