Moustique

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 blanc

Fond noir

Fond image

À éviter : l'insecte disparaît

À ne pas faire.

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.

Nuances

Survol du rouge : #C40511 · Badge « article offert » et survol du jaune : #E0D000.

Neutres

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.

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.

Échelle du site

Tailles réellement appliquées sur moustique.be (identiques aux maquettes Figma). Bascule mobile → desktop à 768 px.

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.

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

06 · 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