Identité
Charte graphique
« Vide spatial / pupille ambre » : l'esthétique du cinéma de science-fiction, en retenue. Un noir profond, un blanc lunaire légèrement chaud, un seul accent ambre utilisé avec parcimonie, un bleu glacier plus rare encore. Pas de néon ni de dégradé. Toutes les couleurs sont des variables CSS (src/app/globals.css), déclinées en thème sombre (par défaut) et clair.
Emblème
« Iris » : deux anneaux fins et une pupille ambre. Un capteur qui observe et mesure, sans visage ni silhouette de robot. Les anneaux prennent la couleur du texte et la pupille la couleur de marque : l'emblème s'adapte aux deux thèmes. Taille minimale : 16 px (favicon src/app/icon.svg).
Logotype : « embodied » en Geist Sans légère, « rank » en semi-grasse, tout en minuscules avec un espacement large (0,14 em), à la manière d'un générique de film. Les sur-titres suivent la même logique : petites capitales espacées (classe .eyebrow).
Marque
Actions, liens, repères, dégradés. Jamais pour coder une donnée.
--brand--brand-2--on-brandNeutres
Trois niveaux d'élévation, une bordure. Le fond de page reste le plus sombre.
--bg--surface--surface-2--border--controlTexte
Le texte n'emprunte jamais la couleur d'une série de graphique.
--text--muted--faintÉtats
Toujours accompagnés d'un libellé ou d'une icône.
--good--warn--badDonnées (graphiques)
Palette catégorielle validée (lisibilité pour les daltoniens et contraste), dans un ordre fixe : une série garde sa couleur même quand on en masque d'autres. Pointillé neutre = référence (moyenne, robot idéal).
--series-1--series-2--series-3--series-4--series-5--series-allMise en page
- Bandeaux pleine largeur (en-têtes, sections phares, pied de page) : fond qui court d'un bord à l'autre, halo de marque et grille technique.
- Conteneurs : 1 280 px pour la lecture, 1 600 px pour les grands tableaux, 768 px pour le texte long. Marges latérales de 16 à 40 px.
- Composants :
Section,PageBanddanssrc/components/layout/Section.tsx.