44 lines
2.3 KiB
Markdown
44 lines
2.3 KiB
Markdown
---
|
|
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.
|