Charte graphique

Deux chartes coexistent : classic (défaut, utilisée en développement) et « Mode Radar » (staging et production). Cette page présente la charte Radar, ses couleurs, et surtout pourquoi ces choix.

L'identité « Radar »

Le nom Vigie24 évoque une sentinelle qui surveille en continu. La charte s'inspire donc d'un écran radar : un fond sombre et profond (pétrole), des échos lumineux (sarcelle), et une alerte chaude quand quelque chose mérite l'attention (ambre). Le logo reprend la métaphore : une loupe de vigie entourée d'arcs radar concentriques.

Bleu pétrole — profondeur, confiance, sérieux éditorial (les fonds, la navigation, l'accent principal).
Vert-sarcelle — la technologie, le positif, l'engagement (votes, succès, thématiques).
Ambre — l'alerte bienveillante, l'action, le ranking (CTA, score, catégories).
Terracotta — l'alerte négative (erreurs, votes négatifs), distincte de l'ambre pour ne jamais être ambiguë.

Palette — mode clair

Pétrole#1B4B5Aaccent, nav

Sarcelle#5FB5A3positif, votes

Ambre#E8A33DCTA, score, catégories

Terracotta#C4634Aalerte négative

Sarcelle pâle#EEF5F3surfaces secondaires

Fond#F7F8FAarrière-plan

Palette — mode sombre

Fond nuit#0D2027arrière-plan sombre

Surface#132E38cartes

Pétrole clair#5E9EAEaccent sur fond sombre

Sarcelle clair#6CCBB4positif, thématiques

Ambre clair#F2B755score, catégories

Terracotta clair#D9765Ealerte négative

Thèmes de couleurs — pourquoi trois niveaux

Clair / sombre : le choix est proposé au visiteur (persisté localement) et respecte automatiquement la préférence système (prefers-color-scheme). Le sombre n'est pas une simple inversion : les teintes sont éclaircies (ex. pétrole → pétrole clair) pour conserver les contrastes sur fond nuit.
Haut contraste (HC) : variante pensée pour la basse vision — encres extrêmes (noir/blanc), bordures renforcées (2 px), liens soulignés. Le HC conserve les identités de couleur (catégories ambre, thématiques sarcelle) pour ne pas perdre l'information.
Accessibilité vérifiée : chaque paire texte/fond respecte au minimum le niveau AA du WCAG (contraste ≥ 4,5:1 pour le texte, ≥ 3:1 pour les composants) — vérifié par calcul sur chaque couleur de la palette.

Catégories vs thématiques — la distinction accessible

Les catégories et les thématiques ne se distinguent jamais par la couleur seule : trois indices redondants sont combinés (daltonisme, basse vision).

Catégorie Thématique

Couleur : ambre (catégorie, chaude) vs sarcelle (thématique, froide).
Remplissage : puce pleine vs puce en contour.
Forme et icône : coins carrés + 🗂 vs pill + 🏷.

Typographies

Inter — le corps du texte : lisibilité optimale à l'écran, neutre et moderne (Google Fonts, avec repli système).
Space Grotesk — les titres et le logo : un caractère légèrement technique qui évoque la machine, sans perdre en élégance.
JetBrains Mono — les données : scores, dates, coûts, code. La monospace « instrument de mesure » colle à l'esprit radar.

Choix techniques

Le thème est appliqué par variables CSS (--bg, --accent, …) : changer de charte ou de thème ne touche aucun composant.
Le anti-flash : le thème est posé sur <html> avant le premier rendu (script inline) pour éviter un flash blanc en mode sombre.
Le branding est piloté par configuration (Branding:Theme) : staging et production en Radar, développement en classic.
Les graphiques de la page Coûts IA sont en SVG natif stylé par ces mêmes variables — aucune dépendance JavaScript externe, aucun tracker de polices ou de graphiques.