DH Les Sports+

00 · Principes

Huit règles avant les valeurs

Cette fiche décrit le système tel qu'il tourne sur dhnet.be, puis le relit avec la méthode Refactoring UI. 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 logo combine deux rectangles inclinés : le D sur bleu nuit, le H sur rouge, suivis de « Les Sports+ ». La zone de protection se mesure à la moitié de la hauteur du rectangle rouge qui entoure le « H ». Aucun élément ne doit y pénétrer. Taille minimale : 10 mm en impression, 50 px en numérique.

Variations de couleurs. Version couleur sur fond clair, version négative sur bleu nuit ou sur image. Sur fond rouge, une version dédiée : le D reste sur son rectangle bleu nuit, le H passe en rouge sur un rectangle blanc, et le « + » se teinte de bleu nuit. C'est celle du header de dhnet.be.

Couleur / blanc

Négatif / bleu nuit

Fond rouge

Négatif / image

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

Privilégier la version horizontale. La version verticale est une alternative quand l'espace ou le format l'impose.

02 · Application

L'app DH Les Sports+

Sur l'App Store, l'application s'appelle DH Les Sports +. Son icône isole le monogramme DH du logo, sans « Les Sports+ », sur le dégradé vertical du header, du noir vers le bleu #173D78.

9:41

MétéoPhotosPlansMusiqueMailAgendaNotesDH

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.

• Sombrecalque transparent · plaque blanche, D #051F3A, H blanc sur #E1001A · même position que l'icône par défaut
• Teintécalque transparent · plaques blanches, lettres évidées · 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 monogramme actuel en dépasse les côtés)

Construction

• Fonddégradé vertical · #000102 → #173D78 (cousin du header : #000 → #173E7A)
• Dbleu nuit #051F3A sur un carré blanc incliné
• Hblanc sur un rectangle rouge #E1001A
• Format2000 × 2000 px · carré, sans transparence, sans coins arrondis

Dans les stores

• Nom sur l'App StoreDH Les Sports +
• É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 a sa propre application, DH Journal+.

Fichiers de l'icône

Icône vectorielleSVG

App StorePNG 1024

Google PlayPNG 512

iPhonePNG 180

Calque sombreSVG

Calque monochromeSVG

03 · Couleurs

Couleurs de marque

Les valeurs du site dhnet.be, identiques à celles du fichier logo : un bleu nuit #051F3A (couleur principale, titres, bouton primaire, theme-color) et un rouge #E1001A (vague du header, titres de box, direct). Cliquer sur une valeur la copie.

Échelles de nuances

Le CSS du site déclare déjà plusieurs déclinaisons (--color-primary-dark, --color-secondary-darker…). Elles sont rangées ici de 50 à 900. Les paliers manquants sont calculés et marqués calc. Le « Aa » de chaque pastille est écrit dans la couleur de texte qui passe le mieux.

Rouge

Bleu nuit

Gris

• Rouge 600 · 700survol et état pressé des boutons rouges
• Bleu nuit 500 · 600bas des dégradés du header (#173E7A) et des box (#102D58)
• Bleu nuit 200 · 300filets (#D1D8DD), bordures de champs, gris bleuté
• Bleu nuit 900survol du bouton primaire, voile des menus (#031222)

Abonnement

Le jaune sert aux offres, au bouton Abonnez-vous et au macaron DH des contenus abonnés. Le texte posé dessus est toujours brun très foncé.

Couleurs fonctionnelles

États et éléments d'interface relevés dans la feuille de style.

Palette « Découvr ». Le CSS déclare aussi une gamme verte (--color-green-dcouvr : #A8D1C9, #81BDB1, #1F7E6A, #14493F, #CAEDE6) et un noir #272322. Je ne l'ai pas vue utilisée sur la home ni sur un article : elle est listée dans les tokens, sans rôle attribué.

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 l'interface, 7:1 pour l'AAA.

04 · Typographie

Open Sans

Une famille unique pour les titres comme pour le texte (--font-stack-title et --font-stack-base pointent tous deux vers Open Sans). Sur le site : Regular 400, Medium 500 et Bold 700. L'Extra Gras 800 reste réservé aux visuels de campagne.

L'échelle des titres

Le composant .ap-Title définit six tailles, en Bold 700. C'est l'échelle de référence : on ne crée pas de taille entre deux paliers.

.ap-Title--{sm…3xl} · Open Sans 700 · taille / interlignage en px · ratio

Une page d'article

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

• Titre (H1).ap-StoryTitle--text · 700 · 24 / 32 → 35 / 40 dès 768 px
• Chapô.ap-StoryChapo · 400 · 18 / 28 → 21 / 28
• Texte.ap-Story-content · 400 · 18 / 28 → 21 / 30 · marge 1,5 rem
• Intertitres700 · interlignage 1,35 · marge 1,5 rem au-dessus, 0,75 rem dessous
• Auteuravatar rond 64 px fond #F7F7F7 · nom 16 / 21
• Date.ap-StoryDate · 13 / 18 · #686868

Les polices

05 · Espacement et grille

Une échelle, pas des valeurs au hasard

Marges et paddings du site, relevés dans la feuille de style et classés par fréquence.

Points de rupture et conteneurs

• Conteneur992 px (md) · 1120 px (lg) · padding 32 px
• Colonne article680 px
• Chaîne pleine largeurfond bleu nuit · padding latéral 32 px
• Bascule typo768 px : titres et texte passent à la taille desktop
• Bascule champs992 px : padding des champs 0,5 → 0,75 rem

06 · Formes et élévation

Rayons

Plus arrondi que La Libre : le rayon signature de la DH est 0,35 rem (5,6 px), sur les images, les box et les cartes. La pilule sert aux boutons secondaires et au direct.

Élévation

Les ombres relevées dans le CSS, rangées par altitude.

• e10 1px 1px rgba(0,0,0,.22), 0 3px 4px rgba(102,102,102,.21)
• e20 3px 10px rgba(20,5,68,.2)
• e30 11px 10px -5px rgba(75,75,75,.09)
• e40 6px 14px rgba(0,0,0,.15)
• Glow0 0 10.8px #F1C93C
• Presséinset 0 2px 3px rgba(0,0,0,.5)
• Focus0 0 0 3px rgba(5,31,58,.5)

07 · 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 éléments sont propres à la DH et se redessinent sans la bibliothèque.

08 · Composants

Header

Deux étages sur un dégradé du noir vers le bleu #173E7A. Dans le premier (67 px), la vague rouge part de la gauche avec un angle bas arrondi en pilule et porte le logo version fond rouge. Le second (44 px) accueille le menu des rubriques en blanc ; la rubrique active est une pilule rouge.

Alertez-nous Abonnez-vous

/* La vague rouge du header */
.ap-PrimaryMenu::after { background: #E1001A; height: 67px; left: 55px; border-radius: 5px 0 0 9999px; }
.ap-Menu { background: linear-gradient(#000, #173E7A); }

Boutons

Open Sans Bold 16 px, rayon 0,25 rem, padding 0,5 × 0,75 rem, transition 0,3 s. Au survol, la couleur fonce et l'ombre passe en inset. Le header utilise une version compacte en 13 / 18.

• Primaire#051F3A · blanc · survol #031222 + inset
• Secondaire#E1001A · blanc · survol #B40014 + inset
• Défautblanc · bordure #BDBDBD · texte #262729 · survol fond #262729
• Abonnement#F2C93D · texte #2F1E07 · survol #F7B500
• Désactivéfond #E1E4E8 · bordure #C9CED6 · texte #A6AEBC · sans ombre
• Taillesxs 13 (.25 × .5rem) · sm 14 (.5 × 1rem) · md 16 (.5 × 1.25rem) · lg 18 (.75 × 1.25rem)

Badges et étiquettes

• Étiquette.ap-StoryListTags · 700 13 / 24 · capitales · #686868 sur #EEEEEE · padding 0 .3rem
• Livepilule #E1001A · blanc · 700 10 / 13 · capitales
• Direct flottantrond 60 px en bas à droite · #E1001A · ombre
• Abonnésmacaron jaune « DH » + mention en toutes lettres

Teasers

L'étiquette grise passe au-dessus du titre, le titre en Bold bleu nuit porte la carte. Quatre formats : la grande carte avec titre en surimpression, la carte standard, la petite image à droite et le titre seul.

• Imagesratio 3:2 partout (696 × 464 pour la Une, 336 × 224 en liste, 140 × 93 à droite) · 16:9 pour certaines vidéos
• Grande cartetitre 700 · 32 / 38 · blanc sur l'image 3:2 · rayon .35rem
• Image à droite.is-small · titre 700 16 / 21 #051F3A · image 140 × 93, rayon .35rem · filet bas #D1D8DD
• Titre seultitre 700 16 / 21 #051F3A, sans image
• Fil continuheure 14 px #9CA3AF · étiquette · titre bleu nuit · trait vertical

Chaînes

Une chaîne pleine largeur sur fond bleu nuit, coiffée de la vague rouge : 64 px de haut, angle haut gauche de 5 px, angle bas gauche de 64 px. Titre blanc 700 · 21 / 32, centré.

Navigation et auteur

Fil d'Ariane. Sur le site, les liens sont en #BDBDBD 13 px (1,9:1 sur blanc, sous le seuil AA), survol rouge, page courante en bleu nuit. Recommandation : liens en #686868, comme dans l'exemple. proposition

Blocs dans l'article

• Lire aussiblanc · rayon .35rem · ombre e2 · en-tête 700 23 / 22 rouge · texte 500 16 / 24 · icône rouge
• Liste de liensblanc · bordure #D1D8DD · rayon .35rem · padding .5rem · étiquette rouge 14 / 20 · titre rouge 21 / 32

Paywall

• En-tête.ap-Restricted-header · #F2C93D / #2F1E07 · 400 21 / 32 · padding .5rem
• Corps18 / 24 · flancs #BDBDBD · padding 2rem .5rem 1rem
• Pied#F8F9FB · texte #051F3A 16 / 21 · padding 1.25rem .5rem

Champs et notification

• Champ.ap-Input · bordure #D1D8DD · rayon .25rem · 18 / 24 · padding .5rem, .75rem dès 992 px
• Placeholdersite : #D1D8DD (1,4:1, trop pâle) · recommandé #686868 proposition
• Focushalo 0 0 0 3px rgba(5,31,58,.5)
• Notificationrayon .5rem · padding 1rem · blanc 700 12 / 16 · bouton fermer rouge

09 · Campagnes

Appels à l'action

Pour les visuels de campagne (Brandbook) : un CTA abonnements (jaune) et un CTA générique (rouge). Ces valeurs sont brandbook, pas celles du site.

• Rayon de bordure5 px
• Largeur minimale320 px
• Espace latéral du texte130 px minimum
• Hauteur85 px · texte 13 pt
• Majusculesselon l'urgence du message

Dégradé

Pour dynamiser certains assets digitaux. Le dégradé part du bas sur 60 % de la surface, les 40 % du haut restent en bleu nuit (#032F60 vers #F50000).

Bleu Nuit #032F60 (haut) → Rouge Sunset #F50000 (bas)

Images. Le placeholder d'image reprend l'inclinaison du logo (5°). Les images détourées peuvent recevoir une ombre diffuse à 40 %, taille 80 px, angle adapté à l'éclairage.

10 · Social Media

Réseaux sociaux

Zones de sécurité d'après les recommandations Meta : 6 % sur les côtés, 14 % en haut. Les titres se lisent en deux temps, avec une accroche dans un encadré. Typographie : Open Sans Extra Gras.

11 · Mouvement

Deux durées, une courbe

0,3 s pour presque tout (38 occurrences), 0,15 s pour les micro-états (15), même courbe d'accélération. Survoler les cases pour comparer.

• Courbecubic-bezier(.4, 0, .2, 1)
• Base.3s · --dh-duration
• Rapide.15s · --dh-duration-fast
• Réduitprefers-reduced-motion : transitions coupées

12 · Accessibilité

Ce qui passe, ce qui coince

13 · Pictos et composants

Les pictos du site, en Font Awesome Free

Relevés sur dhnet.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 DHfa-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
• LN Radioencore sur le site, alors que LN Radio a quitté le groupefa-solid fa-radio
• Nos podcastsfa-solid fa-headphones-simple
• Facebookfa-brands fa-facebook-f
• Xfa-brands fa-x-twitter
• Instagramfa-brands fa-instagram
• LinkedInfa-brands fa-linkedin

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

14 · Développeurs

Tokens prêts à brancher

L'essentiel en variables CSS. Le fichier complet (échelles, espacements, élévations, rayons, mouvement, valeurs du Brandbook) et sa version JSON sont dans les téléchargements.

/* DH Les Sports+ · tokens essentiels (v3) */
:root {
  --dh-marine:    #051F3A;  /* = --color-primary */
  --dh-rouge:     #E1001A;  /* = --color-secondary */
  --dh-texte:     #262729;
  --dh-pay:       #F2C93D;
  --dh-font:      "Open Sans", Helvetica, Arial, sans-serif;
  --dh-space-2:   .5rem;   /* 8 px, la valeur la plus utilisée */
  --dh-radius:    .25rem;  /* boutons, champs */
  --dh-radius-md: .35rem;  /* images, box : la signature DH */
  --dh-wave:      5px 0 0 64px;
  --dh-focus:     0 0 0 3px rgba(5,31,58,.5);
  --dh-ease:      cubic-bezier(.4,0,.2,1);
}

• Bonne nouvelleici, --color-primary est bien le bleu nuit de la marque (pas de piège comme sur La Libre)
• Préfixe site.ap-* (composants Arc XP, mêmes classes que La Libre)
• Feuille/pf/resources/dist/dhnet/css/styles.css
• CMS / frontArc XP (PageBuilder Fusion)

Socle commun

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