Keros Design System

Fondations, composants et patterns métier pour la modernisation progressive d'AMCO — version V0 (artboard + tokens + composants HTML interactifs).

Composants livrés

V0 — base initiale

Patterns métier

Compteurs, anomalies, KPI…

Tokens CSS

45+

Couleurs, espaces, typo

Cible accessibilité

WCAG 2.1

Explorer

Couleurs, typographie, espacements, rayons, ombres, icônes, règles de densité et d'accessibilité.

Boutons, champs, badges, KPI, tableaux, tabs, accordion, modale, drawer, toasts, états spéciaux.

Listing compteurs, synthèse, dashboard anomalies, détail d'anomalie, commentaires, statut API.

Consommer les tokens. Référencer css/tokens.css dans votre projet (React/Vite ou Vue), puis utiliser les variables (var(--color-primary)) plutôt que des valeurs en dur.
Réutiliser les composants. Reproduire le markup HTML et les classes k-* dans votre framework. Les comportements (modal, drawer, tabs) peuvent être recréés dans React/Vue sans changer le visuel.
Lire design.md. Pour chaque composant : rôle, variantes, états, règles d'usage, erreurs à éviter.
Documenter toute variante. Toute évolution d'un composant ou nouveau token doit être tracé dans le changelog du design system.
Préserver la progressivité. Les classes k-* sont préfixées pour cohabiter en iFrame ou micro-frontend avec AMCO existant.