---
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.