Moustique
Une bulle rouge, un insecte jaune qui se pose sur le « i », un serif généreux pour les titres et un sans-serif franc pour le reste. Voici la marque Moustique telle qu'elle vit aujourd'hui sur moustique.be.
01 · Logo
La bulle et l'insecte
Le logo est une bulle de dialogue rouge : « moustique » en bas de casse blanc, très gras, et une queue qui part en bas à gauche. Le point du « i » est remplacé par l'insecte jaune, mascotte de la marque. Le logo est fourni en une seule version couleur, à poser sur fond clair ou neutre.
Zone de protection et taille minimale. Une marge libre égale à la hauteur du « m » tout autour de la bulle, insecte compris. Largeur minimale de 120 px à l'écran (taille du logo dans le header du site) et 25 mm en impression.
x = hauteur du « m »
Fond blancFond noirFond imageÀ éviter : l'insecte disparaîtÀ ne pas faire.
✕ 1Changer le rouge de la bulle
✕ 2Retirer ou déplacer l'insecte
✕ 3Recomposer le mot dans une police
✕ 4Déformer, retourner la bulle
✕ 5Poser sur fond jaune ou rouge
02 · Couleurs
Rouge, jaune, noir
Le rouge #E30613 porte la marque : logo, liens, signatures, titres de box. Le jaune #FFED00 est la couleur signal : insecte du logo, bandeau en haut du site, pastilles des dossiers du moment et bouton S'abonner. Le noir porte les titres, le texte et les étiquettes. Cliquer sur une valeur la copie.
--mq-rouge
Rouge Moustique
HEX
RVB227 · 6 · 19
HSL356 · 95 % · 46 %
Principale : logo, liens, signatures · texte blanc 4,9:1 (AA)
--mq-jaune
Jaune Moustique
HEX
RVB255 · 237 · 0
HSL56 · 100 % · 50 %
Secondaire : insecte, bandeau, abonnement · texte noir 17,4:1 (AA)
--mq-noir
Noir
HEX
RVB0 · 0 · 0
HSL0 · 0 % · 0 %
Titres, texte, étiquettes · texte blanc 21,0:1 (AA)
--mq-blanc
Blanc
HEX
RVB255 · 255 · 255
HSL0 · 0 % · 100 %
Fond de page · texte noir 21,0:1 (AA)
Nuances
Sélection#FF1010
Vif#FA3542
Base#E30613
Survol#C40511
Profond#92040D
Jaune survol#E0D000
Survol du rouge : #C40511 · Badge « article offert » et survol du jaune : #E0D000.
Neutres
--mq-gris
Gris
HEX
RVB102 · 102 · 102
HSL0 · 0 % · 40 %
Dates, métadonnées · texte blanc 5,7:1 (AA)
--mq-gris-clair
Gris clair
HEX
RVB179 · 179 · 179
HSL0 · 0 % · 70 %
Bordures de boutons · texte noir 10,0:1 (AA)
--mq-gris-ligne
Filet
HEX
RVB227 · 224 · 224
HSL0 · 5 % · 88 %
Séparateurs de tags · texte noir 16,0:1 (AA)
--mq-surface
Surface
HEX
RVB242 · 242 · 242
HSL0 · 0 % · 95 %
Fonds de blocs · texte noir 18,8:1 (AA)
Accessibilité. Le jaune #FFED00 ne porte jamais de texte blanc (1,2:1) : toujours du texte noir dessus (17,4:1). Le rouge #E30613 passe l'AA avec du texte blanc (4,9:1).
Ancienne charte (Sketch). Le fichier Sketch documente la version précédente : rouge #DC3832, jaune #FFF14B, typo Roboto, titres #263238, texte #546E7A, liens #007BF8. Ces valeurs ne sont plus en ligne ; elles sont gardées en archive dans le JSON des tokens, à ne plus utiliser.
03 · Rubriques
Quatre univers et des dossiers
Chaque univers a sa couleur, injectée par le CMS (Arc) dans --section-color-primary.
Elle ne colore pas le texte : elle apparaît en liseré de 5 px à gauche des étiquettes noires.
Notre époque
Les infos, enquêtes, explications, humour
Culture
Musique, cinéma, livres
Écrans
Télévision, streaming
Sortir
Tendances, food, bien-être, week-end
Dossiers du moment
Pastilles jaunes du menu
Menu secondaire : dossiers du moment en pastille jaune, rubriques en Funnel Sans SemiBold 17 px.
04 · Typographie
Domine et Funnel Sans
Domine pour les titres, Funnel Sans pour le texte et l'interface. Deux polices libres (licence SIL Open Font License), auto-hébergées ici en woff2 variable.
Domine
abcdefghijklmnop · ABCDEFGHIJKLMN · 0123456789 · éèà眀!?
Domine Bold
Titres d'articles, intertitres, titres de chaînes et de pages, citations.
Domine SemiBold
Titres de teasers.
Funnel Sans
abcdefghijklmnop · ABCDEFGHIJKLMN · 0123456789 · éèà眀!?
Funnel Sans Bold
Titres de box (« Les plus lus »), « À lire aussi ».
Funnel Sans SemiBold
Menu, bouton S'abonner, chiffres du top.
Funnel Sans Medium
Boutons, signature de citation.
Funnel Sans Regular
Texte courant, chapô, dates, étiquettes.
Échelle du site
Tailles réellement appliquées sur moustique.be (identiques aux maquettes Figma). Bascule mobile → desktop à 768 px.
Article
Notre époque
.ap-StoryTag-itemFunnel Sans 400 · 16 px · rouge
Le titre de l'article en Domine
.ap-StoryTitle--textDomine 700 · 28 / 32 px, 45 / 52 dès 768 px
Le chapô pose le sujet, en Funnel Sans Regular, à la même taille que le texte sur desktop.
.ap-StoryChapoFunnel Sans 400 · 20 / 25 px, 25 / 30 dès 768 px
Lundi 9 décembre 2024 15:45 · Temps de lecture : 5 minutes
.ap-StoryDateFunnel Sans 400 · 13 / 16 px · #666
Le texte courant se lit en Funnel Sans Regular, noir sur blanc.
.ap-Story-contentFunnel Sans 400 · 18 / 25 px, 25 / 30 dès 768 px
10 choses
.ap-Story-content h2Domine 700 · 1,4 em du texte (35 px en desktop)
« Une citation en Domine »
.ap-StoryQuote-bodyDomine 700 italique · 25 / 30 px
Albert Dupont
.ap-StoryQuote-footerFunnel Sans 500 · 18 / 22 px · rouge
Légende photo en italique. © Belga
.ap-StoryIllu figcaptionFunnel Sans 400 italique · 12 / 15 px
Listes et home
Culture
.ap-PageTitleDomine 700 · 2,3 rem / 2,625 rem
Notre sélection
.ap-Chain-titleDomine 700 · 25 / 30 px, 30 / 36 dès 768 px
.ap-StoryListCard-titleDomine 600 · 20 / 24 px
Description courte du teaser.
.ap-StoryListCard-textFunnel Sans 400 · 14 / 19 px
Musique
.ap-StoryListTags-item--primaryFunnel Sans 400 · 12 / 20 px · blanc sur noir, liseré 5 px couleur rubrique
Les plus lus
.ap-Box-titleFunnel Sans 700 · 20 / 22 px · rouge
1
.ap-StoryListCard-topFiveNrFunnel Sans 600 · 80 px · approche -0,75 rem
Les polices
05 · Composants
Boutons
Le bouton S'abonner est une pilule jaune, texte noir en Funnel Sans SemiBold 17 px. Les autres boutons ont un rayon de 4 px, Funnel Sans Medium 16 px.
Article offert
- Abonnement#FFED00 · texte #000 · pilule · survol #E0D000
- Primaire#000 · texte blanc · survol #111
- Rouge#E30613 · texte blanc · survol #C40511 (usage dossiers)
- Secondaireblanc · bordure #B3B3B3
- Badge offert#E0D000 · texte #000 · pilule · 16 px
Teasers et blocs
Titre de bloc centré en Domine Bold 25 px entre deux filets. Étiquette noire à liseré coloré, titre de teaser en Domine SemiBold. Un petit insecte signale les contenus abonnés.
Notre sélection
Une citation mise en avant, en Domine Bold, avec de grands guillemets noirs.
Albert DupontÀ lire aussi« Y compris des gens qu'on n'attendait pas »
07 · 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#000000 sur #FFFFFF | titres, texte | 21,0:1 | AAA | |
| Gris sur blanc#666666 sur #FFFFFF | dates, métadonnées | 5,7:1 | AA | |
| Rouge sur blanc#E30613 sur #FFFFFF | liens, signatures | 4,9:1 | AA | |
| Blanc sur rouge#FFFFFF sur #E30613 | test : texte blanc sur rouge | 4,9:1 | AA | |
| Noir sur jaune#000000 sur #FFED00 | bandeau, abonnement | 17,4:1 | AAA | |
| Jaune sur blanc#FFED00 sur #FFFFFF | jamais du texte | 1,2:1 | Échec | |
| Blanc sur orange Télé#FFFFFF sur #FF7F00 | test : texte blanc sur la rubrique | 2,5:1 | Échec | |
| Blanc sur vert Tendances#FFFFFF sur #46C846 | test : texte blanc sur la rubrique | 2,2: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
08 · Pictos et composants
Les pictos du site, en Font Awesome Free
Relevés sur moustique.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-moustique.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 |
| 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.
09 · Développeurs
Tokens prêts à brancher
L'essentiel en variables CSS. Le fichier complet et sa version JSON sont dans les téléchargements.
/* Moustique · tokens essentiels */ :root { --mq-rouge: #E30613; /* principale */ --mq-jaune: #FFED00; /* secondaire, abonnement */ --mq-noir: #000000; /* titres et texte */ --mq-gris: #666666; /* métadonnées */ --mq-font-title: "Domine", Georgia, serif; --mq-font-base: "Funnel Sans", Arial, "Trebuchet MS", sans-serif; --mq-tag-strip: 5px; }
Piège de nommage. Dans le CSS du site, --color-primary vaut #000
et --color-secondary vaut #E30613. Côté marque, le rouge est la couleur principale.
La meta theme-color du site est le jaune #FFED00.
- Conteneur992 px (md) · 1120 px (lg)
- Breakpoints480 · 768 · 992 · 1024 · 1200 px
- Bandeau4 px jaune #FFED00 en haut de page
- CMS / frontArc XP (PageBuilder Fusion), même socle que lalibre.be
Socle commun
Comme toutes les marques IPM, Moustique 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-moustique.css">10 · Téléchargements
Fichiers
Tout ce qui se télécharge sur cette fiche, au même endroit : 8 fichiers, rangés par usage.
Logo et insecte en SVG vectoriel (tracés issus du Sketch, couleurs du site), et tokens à importer.
Typographie 1
Les fichiers pour l'ordinateur. En ligne sur Google Fonts : Domine · Funnel Sans.
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. Couleurs, polices, échelle typographique, rubriques et boutons sont relevés dans le code de production de moustique.be le 10 octobre 2026 et recoupés avec les frames Moustique du Figma « Moustique UI - UX ». Le tracé du logo vient du Sketch, recoloré avec le rouge et le jaune du logo en ligne. Zone de protection et tailles minimales : proposition de la direction artistique.
06 · Social Media
Réseaux sociaux
Trois modèles de visuels aux couleurs de Moustique, à 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 Moustique. Si elle a ses propres gabarits, ils prennent le dessus.