Initial commit — specs pré-projet SatPRO + site de présentation (viewer, annotations, gestion des accès)

2026-10-12 12:11:04 +02:00
commit 30608afd9e
77 changed files with 20581 additions and 0 deletions
@@ -0,0 +1,43 @@
+---
+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.