Keros DS — Foundations

Couleurs

Trois familles : marque, neutres, fonctionnelles. Les sévérités d'anomalies ont leur sous-palette dédiée.

Marque (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

Fonctionnelles

Success

#16A34A

--color-success

Warning

#D97706

--color-warning

Danger

#DC2626

--color-danger

Info

#0891B2

--color-info

Sévérités d'anomalies

Faible

#64748B

--color-sev-low

Moyenne

#D97706

--color-sev-medium

Élevée

#EA580C

--color-sev-high

Critique

#DC2626

--color-sev-critical

Palette data viz

Série 1

--chart-1

Série 2

--chart-2

Série 3

--chart-3

Série 4

--chart-4

Série 5

--chart-5

Série 6

--chart-6

Typographie

Pile système moderne : Inter, "Segoe UI", system-ui, sans-serif. Valeurs chiffrées en tabular-nums.

Display · 30/700Détection d'anomalies--fs-30

Title · 24/700Compteur EAU-12347--fs-24

H2 · 20/600Mesures sur 30 jours--fs-20

H3 · 18/600Anomalies confirmées--fs-18

Body · 14/400Le compteur a enregistré une consommation supérieure à la moyenne mobile sur 24h.--fs-14

Label · 12/500Période d'observation--fs-12

Mono · 13tenant_id=TEEO-0042 / ANO-00478--font-mono

Espacements

Échelle à 4px. Toujours consommer via tokens, ne pas mettre de valeurs en dur.

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

Densité de ligne tableau : 40 px par défaut, 32 px en mode compact (k-table--compact). Marges de section : 32 px verticalement (--space-8).

Rayons & ombres

radius-sm · 4px

radius-md · 8px

radius-lg · 12px

radius-pill

Ombres

shadow-sm

shadow-md

shadow-lg

États

Tous les composants définissent au minimum les états : default, hover, active, focus, disabled, loading. Les conteneurs prévoient en plus empty et error.

Accessibilité

Contraste : minimum 4.5:1 sur le texte normal (AA), 3:1 sur le texte large et les icônes informatives.
Focus visible : tous les composants interactifs exposent un focus ring (--focus-ring) — jamais désactivé sans alternative.
Navigation clavier : ordre logique, raccourcis pour les actions clés (Échap ferme drawer/modal).
Cibles cliquables : hauteur minimum 28px, recommandée 36px+ (norme tactile 44px sur mobile).
Labels : tout champ a un label visible ou un aria-label explicite.
États non basés sur la couleur uniquement : badges combinent couleur + libellé ; les courbes d'anomalies ont un overlay + marker.
Tableaux : entêtes th ; aria-sort sur colonnes triables.

Tokens CSS — extrait

Source de vérité : css/tokens.css. À recopier tel quel dans tout projet Keros.

:root {
  --color-primary:       #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-bg:            #F8FAFC;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F1F5F9;
  --color-border:        #E2E8F0;
  --color-text:          #0F172A;
  --color-text-muted:    #475569;

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

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08);

  --font-sans: "Inter","Segoe UI",system-ui,sans-serif;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px;
}