Paris Match
Un cartouche rouge, des capitales condensées qui claquent, du noir et du blanc pour laisser parler les photos. Voici la marque Paris Match Belgique telle qu'elle vit sur parismatch.be, à partir du fichier de design et du code du site.
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.
Sur quels fonds. Le cartouche rouge garde toujours sa couleur ; seuls le filet et l'onglet changent selon le fond.
Fond blancFond #F4F4F4Fond noirFond 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.
Les polices
Open Sans Condensed n'existe plus comme famille à part sur Google Fonts : elle est intégrée à Open Sans, réglage de largeur à 75 %.
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
Les Dossiers à la Une
06 · Accessibilité
Les couleurs, au contraste
Les paires de couleurs de la charte, mesurées selon les WCAG 2.1 : 4,5:1 pour le texte courant, 3:1 pour le texte de plus de 24 px (ou 19 px en gras). Les ratios sont calculés ; les lignes « test » vérifient une combinaison possible, pas forcément utilisée sur le site. calcul
| Aperçu | Paire | Usage | Ratio | Niveau |
|---|---|---|---|---|
| Noir sur blanc#1B1A19 sur #FFFFFF | titres | 17,4:1 | AAA | |
| Texte sur fond de section#525252 sur #F4F4F4 | texte courant | 7,1:1 | AAA | |
| Rouge sur blanc#D7262C sur #FFFFFF | surtitres, liens | 5,0:1 | AA | |
| Blanc sur rouge#FFFFFF sur #D7262C | cartouche de rubrique | 5,0:1 | AA | |
| Blanc sur gris#FFFFFF sur #686868 | bouton primaire | 5,6:1 | AA | |
| Brun sur jaune abonnement#5D3C10 sur #F2C93D | bouton S'abonner | 6,2:1 | AA | |
| Rouge sur noir#D7262C sur #1B1A19 | test : rouge sur fond sombre | 3,5:1 | AA grand texte | |
| Gris clair sur blanc#BDBDBD sur #FFFFFF | bordures, jamais du texte | 1,9:1 | Échec |
- Cible tactile44 × 44 px minimum pour tout élément cliquable sur mobile
- Couleur seulejamais : une rubrique, une erreur ou un statut se lisent aussi en texte
- Mouvementrespecter le réglage « réduire les animations » (prefers-reduced-motion)
- Longueur de ligne45 à 75 caractères pour le texte courant
- Imagestexte alternatif sur chaque image qui porte une information
07 · Pictos et composants
Les pictos du site, en Font Awesome Free
Relevés sur parismatch.be le 14 octobre 2026 (accueil). 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
Hors version gratuite : l'équivalent proposé
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-parismatch.css. proposition
| Sur le site | Classe Arc XP | Avec Bootstrap 5.3 |
|---|---|---|
| Menu principal défilant, avec flèches | ap-PrimaryMenu | .nav dans un conteneur .overflow-x-auto, boutons fa-chevron-left/right |
| Menu latéral (burger) | ap-SidebarMenu | .offcanvas.offcanvas-start |
| Recherche | ap-SearchMenu | .offcanvas.offcanvas-top ou .modal |
| Bouton S'abonner / Abonnez-vous | ap-Button | .btn.btn-warning |
| Teaser (titre, image, rubrique) | ap-StoryListCard | .card ou .row.g-3 + .ratio.ratio-16x9 |
| Rubrique au-dessus du titre | ap-StoryListTags | .badge ou .small.text-uppercase.fw-bold |
| Bouton lecture vidéo | ap-IconPlay | .btn.rounded-circle + fa-circle-play |
| Carrousel | ap-Carousel | .carousel, ou défilement horizontal en scroll-snap |
| Lien « Voir plus » | ap-PlusLink | .icon-link.icon-link-hover + fa-arrow-right |
| Magazine de la semaine (flottant) | ap-MagazineWeek | .card + .position-fixed |
| Réseaux sociaux | ap-SocialList | .nav + fa-brands |
| Pied de page | ap-FooterNav | .row + .nav.flex-column |
| Emplacement publicitaire | ap-AdContainer | hauteur réservée (min-height) pour éviter les sauts de page |
Composants relevés sur la page d'accueil ; une page article ou une page rubrique peut en contenir d'autres. Démo des composants : socle Bootstrap.
08 · 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
Socle commun
Comme toutes les marques IPM, Paris Match repose sur Bootstrap 5.3 (grille, utilitaires, composants) et Font Awesome Free pour les pictos. La marque tient dans un fichier de thème à charger juste après Bootstrap :
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="ipm-bootstrap-parismatch.css">09 · Téléchargements
Fichiers
Tout ce qui se télécharge sur cette fiche, au même endroit : 9 fichiers, rangés par usage.
Logos en SVG vectoriel, extraits du fichier Sketch, et tokens à importer.
Logos 3
Vectoriels, à utiliser tels quels : voir les règles de la section Logo.
Typographie 1
Les fichiers pour l'ordinateur. En ligne sur Google Fonts : Open Sans Condensed · Roboto.
Pictos 1
Les pictos Font Awesome Free relevés sur le site, en SVG, avec leurs classes dans le LISEZ-MOI. Détail dans la section Pictos et composants.
Pour les développeurs 4
Tokens de la marque, thème du socle Bootstrap 5.3 et socle complet (Bootstrap, Font Awesome Free, thèmes des cinq marques).
D'où viennent ces valeurs. Échelle typographique, fonds, textes et tokens CSS sont relevés dans le code de production de parismatch.be le 10 octobre 2026. Les règles de zone de protection et de taille minimale sont posées par la direction artistique.
05 · Social Media
Réseaux sociaux
Trois modèles de visuels aux couleurs de Paris Match, à faire soi-même dans le générateur de la toolbox : un clic sur un exemple l'ouvre avec la bonne marque. proposition
Modèles proposés par la toolbox, pas encore validés par l'équipe réseaux de Paris Match. Si elle a ses propres gabarits, ils prennent le dessus.