Artboard Keros — fondations, data viz, composants métier

Vue d'ensemble visuelle des fondations et composants prévus pour Keros / AMCO Avancé. Aperçu autonome (HTML/CSS, sans dépendance) — sert de référence avant la mise en œuvre du design system interactif.

Ouvrir le design system

1 · Couleurs

Foundations

Palette primaire

Primary
#2563EB
--color-primary
Primary hover
#1D4ED8
--color-primary-hover
Primary active
#1E40AF
--color-primary-active
Primary soft
#DBEAFE
--color-primary-soft

Neutres / surfaces

Background
#F8FAFC
--color-bg
Surface
#FFFFFF
--color-surface
Surface alt
#F1F5F9
--color-surface-alt
Border
#E2E8F0
--color-border
Text soft
#94A3B8
--color-text-soft
Text
#0F172A
--color-text

Couleurs fonctionnelles

Success
#16A34A
--color-success
Warning
#D97706
--color-warning
Danger
#DC2626
--color-danger
Info
#0891B2
--color-info

Sévérités d'anomalie

Faible
#64748B
--color-sev-low
Moyenne
#D97706
--color-sev-medium
Élevée
#EA580C
--color-sev-high
Critique
#DC2626
--color-sev-critical

Palette data viz catégorielle

Série 1
#2563EB
--chart-1
Série 2
#0891B2
--chart-2
Série 3
#16A34A
--chart-3
Série 4
#D97706
--chart-4
Série 5
#DC2626
--chart-5
Série 6
#7C3AED
--chart-6

Tous les couples couleur/texte respectent un contraste ≥ 4.5:1 sur fond clair (WCAG AA pour le texte normal). Les badges utilisent des fonds adoucis (`-bg`) pour garantir la lisibilité.

2 · Typographie

Foundations
Display
Détection d'anomalies — vue d'ensemble
30 / 700 / -0.01em
Title
Compteur EAU-12347 · Secteur Nord
24 / 700
H2
Mesures sur les 30 derniers jours
20 / 600
H3
Anomalies confirmées
18 / 600
Body
Le compteur a enregistré une consommation supérieure à la moyenne mobile sur 24h, à confirmer par le technicien terrain.
14 / 400
Label
Période d'observation
12 / 500
Mono
EAU-12347 / tenant_id=TEEO-0042
13 / mono

Pile recommandée : Inter, "Segoe UI", system-ui, sans-serif. Valeurs chiffrées des tableaux et KPI en tabular-nums.

3 · Espacements, rayons, ombres

Foundations

Espacements (échelle 4px)

4 px
--space-1
8 px
--space-2
12 px
--space-3
16 px
--space-4
24 px
--space-6
32 px
--space-8
48 px
--space-12

Rayons

radius-sm · 4px
radius-md · 8px
radius-lg · 12px
radius-pill

Ombres

shadow-sm
shadow-md
shadow-lg

Densité : ligne de tableau 36-40 px par défaut ; mode compact 28-32 px activable. Marges des sections internes : 16/24 px. Marges externes de page : 24/32 px.

4 · Icônes (échantillon)

Foundations

Recommandation : pack monochrome Lucide ou Phosphor, stroke 1.5, tailles 16/20/24. Couleur via currentColor.

5 · Data visualization

Aperçus SVG sans dépendance

Courbe temporelle + overlay anomalie

120 90 60 30 14/05 16/05 18/05 20/05
Consommation (m³) Période anormale

Histogramme de consommation

120 90 60 30 L M M J V S D L M M

Donut — répartition par sévérité

48 anomalies Critique · 40% Élevée · 30% Moyenne · 20% Faible · 10%

Graphique combiné (barres + courbe)

Volume (m³) Température (°C)

Jauge simple

72% utilisation réseau

Heatmap légère — anomalies par heure × jour

LMM JVSD

Sparkline en carte KPI

Anomalies critiques (7j)
14
▲ +3 vs sem. dernière
Volume distribué (m³)
12 840 m³
▼ -2,3 % vs J-1

6 · Composants métier

Aperçus visuels

Boutons

Champs & filtres

Identifiant compteur Format : PREFIX-NNNNN
Type d'anomalie
Commentaire
Email Adresse email invalide.

FilterBar

Période · 7 derniers jours Secteur · Tous Sévérité · Critique, Élevée Statut · Toutes

Badges statut & sévérité

Neutre Confirmée En cours Nouvelle Requalifiée Résolue
Faible Moyenne Élevée Critique

KPI grid & MetricCard

Anomalies ouvertes
42
▲ +6 vs 7j
Sévérité critique
9
▲ +2
Délai moyen de qualification
3,2 j
▼ -0,4 j
Taux faux positifs (30j)
8,4 %
▼ -1,1 pt

Cartes d'anomalie

Dépassement seuil — EAU-12347

Secteur Nord · détectée le 19/05 14:08 · Keros AI v0.2
Critique En cours

Sous-consommation — ENE-08812

Secteur Est · détectée le 20/05 02:14 · SDS v1.7
Moyenne Nouvelle

Tableau dense d'anomalies

ID Compteur Secteur Type Sévérité Statut Détectée le ↓
ANO-00478EAU-12347NordDépassement seuilCritiqueEn cours20/05 09:14
ANO-00477ENE-08812EstSous-consommationMoyenneNouvelle20/05 02:14
ANO-00474EAU-12101SudDérive lenteÉlevéeConfirmée19/05 17:42
ANO-00471ENE-08120OuestPic instantanéÉlevéeRequalifiée19/05 11:20
ANO-00466EAU-12005NordDonnée manquanteFaibleRésolue18/05 22:01

Drawer (détail d'anomalie), Timeline, Modal, Toast

ANO-00478 · Dépassement seuil

Compteur
EAU-12347
Secteur
Nord
Détectée le
20/05/2026 09:14
Sévérité
Critique
Statut
En cours
Modèle
Keros AI v0.2 · score 0.93

Timeline d'événements

20/05 09:14
Anomalie détectée — score 0.93
Keros AI v0.2
20/05 10:02
Commentaire ajouté par J. Dupont
"À vérifier sur site — possible fuite"
20/05 11:30
Statut passé à "En cours"

Modal de confirmation

Requalifier cette anomalie ?
L'anomalie passera au statut "Requalifiée" et un commentaire métier sera demandé. Cette action est journalisée.

Toasts

✓ Anomalie confirmée ⚠ Statut requalifié ✕ Échec de la sauvegarde

Bandeau d'alerte & états spéciaux

⚠
Service de détection en mode dégradé
Les anomalies des 30 dernières minutes peuvent être incomplètes. Retour à la normale prévu à 12:00.
✕
Connexion à l'API perdue
Dernière donnée reçue il y a 14 minutes. Vérifiez la santé du micro-service ingestion.
∅
Aucune anomalie sur ce périmètre
Modifiez les filtres ou élargissez la période pour voir des résultats.
⟳
Chargement des données…

AppShell & navigation micro-service

Keros › TEEO · TENANT-0042 Préprod
reynholds.reinette RR
Keros/ Anomalies/ Dashboard

Dashboard anomalies — 7 derniers jours

Ouvertes
42
Critiques
9
Faux positifs
8,4%
Délai qualif.
3,2j

L'AppShell présenté ci-dessus est neutre et peut être embarqué tel quel dans une iFrame depuis AMCO. Les tokens et préfixes CSS (.kr-) évitent les collisions avec les styles AMCO existants.