SatAff/.kiro/steering/design-system.md

inclusion

inclusion
always

Design system — KiwUI for web app (DEKRA)

Toute interface, maquette ou composant produit pour SatPRO doit respecter le design system KiwUI DEKRA. Référence détaillée (palette complète, typographie, boutons) : docs/design-system-kiwui.md. Source : Figma EIWttg1O7Lt8y8QzMW5ygs.

Règles essentielles

• IMPORTANT : ne jamais coder en dur une couleur hex. Utiliser les variables CSS de tokens (voir site/frontend/src/styles.scss, préfixe --ds-) ou le token KiwUI nommé.
• Police : Noto Sans partout. Pas d'autre famille sans décision explicite.
• Vert d'interface principal : Dark green 500 #006b52 (surfaces/accents). Vert logo #008143 réservé aux usages identitaires ponctuels.
• Couleurs sémantiques pour les états : succès (light green), info (dark blue), avertissement (orange), danger (red). Voir la référence pour les échelles.
• IMPORTANT : ne pas utiliser les tokens préfixés ❌ (dépréciés dans Figma), notamment l'ancienne échelle ❌ Blue et les *_alt. Utiliser les sémantiques.

Boutons (KiwUI)

• Axes : Importance (Primary / Secondary / Tertiary), Status (Neutral / Negative / Disabled), State (Default / Hover / Focus / Pressed), icône/texte/les deux.
• Primary/Neutral : fond #006b52, texte blanc. Secondary/Neutral : texte #006b52, fond clair/bordure. Negative : palette Red. Disabled : gris neutres.

Flux Figma → code (quand on maquettera)

Quand on implémentera un écran depuis Figma :

1. get_design_context sur le(s) nœud(s) ciblé(s) ; si trop volumineux, get_metadata puis re-cibler. Ajouter get_screenshot pour la fidélité visuelle.
2. Traduire la sortie Figma (souvent React + Tailwind) vers la stack réelle du projet (le site des specs est en Angular + SCSS), en réutilisant les tokens --ds-.
3. Utiliser les sources d'assets localhost fournies par le serveur Figma telles quelles ; ne pas installer de nouveaux packages d'icônes ni créer de placeholders.
4. Viser une parité visuelle 1:1 et valider contre le screenshot Figma.

Note : nous sommes en phase « specs pré-projet ». Les règles de design system techniques complètes (create_design_system_rules) seront générées quand la stack de maquettage sera figée. Ce fichier fixe déjà le cadre visuel à respecter.