SatAff/docs/design-system-kiwui.md

# Référence design system — KiwUI for web app (DEKRA)

> Source : Figma « KiwUI for web app – Design System DEKRA » (fichier `EIWttg1O7Lt8y8QzMW5ygs`).
> Tokens extraits via l'intégration Figma. Document de cadrage **visuel** pour la phase maquettage.
> ⚠️ Les tokens préfixés **❌** dans Figma sont **dépréciés** : ne pas les utiliser (listés en fin de document).

## 1. Principes

- **Design system** officiel DEKRA pour les applications web (équipe KiwUI).
- Police : **Noto Sans**.
- Identité : dominante **verte DEKRA** (vert logo + verts foncés), gris neutres, et couleurs **sémantiques** (succès / info / avertissement / danger).
- ~120 composants / 1 200+ variantes dans la bibliothèque (boutons, etc.).

## 2. Couleurs

### 2.1 Vert logo (identité)
| Token | Hex |
|-------|-----|
| Logo green 500 | `#008143` |

### 2.2 Vert foncé (Dark green) — couleur primaire d'interface
| Token | Hex |
|-------|-----|
| Dark green 50 | `#f2f8f6` |
| Dark green 100 | `#cce1dc` |
| Dark green 200 | `#b3d3cb` |
| Dark green 300 | `#80b5a9` |
| Dark green 400 | `#4d9786` |
| **Dark green 500** | `#006b52` |
| Dark green 600 | `#01604a` |
| Dark green 700 | `#015642` |
| Dark green 800 | `#014031` |
| Dark green 900 | `#002019` |

### 2.3 Vert vif (Bright green) — accent
| Token | Hex |
|-------|-----|
| Bright green 50 | `#efffe4` |
| Bright green 100 | `#c8fea1` |
| Bright green 200 | `#b0fd78` |
| Bright green 300 | `#9ee46c` |
| Bright green 400 | `#7bb154` |
| Bright green 500 | `#527638` |
| Bright green 600 | `#466530` |

### 2.4 Jaune (secondaire)
| Token | Hex |
|-------|-----|
| Yellow 50 | `#fff9e0` |
| Yellow 100 | `#ffe066` |
| Yellow 200 | `#ffcc00` |
| Yellow 300 | `#e6b800` |
| Yellow 400 | `#bf9900` |
| Yellow 500 | `#876c00` |
| Yellow 600 | `#735c00` |
| secondary/yellow WCAG 700 | `#594700` |

### 2.5 Gris (neutres)
| Token | Hex |
|-------|-----|
| Gray 50 | `#f8f8f8` |
| Gray 100 | `#ededed` |
| Gray 200 | `#d2d2d2` |
| Gray 300 | `#b4b4b4` |
| Gray 400 | `#9d9d9d` |
| Gray 500 | `#696969` |
| Gray 600 | `#595959` |
| Gray 700 | `#444444` |
| Gray 800 | `#353535` |
| Gray 1000 | `#1e1e1e` |
| Neutral 50 | `#fafafa` |

### 2.6 Couleurs sémantiques

**Succès (Light green)**
| Token | Hex |
|-------|-----|
| 50 | `#f0f7ea` |
| 100 | `#d1e8c0` |
| 200 | `#b2d996` |
| 300 | `#93ca6b` |
| 400 | `#64b32c` |
| 500 | `#467d1f` |
| 600 | `#386519` |
| 700 | `#2b4d13` |
| 800 | `#1e360d` |
| 900 | `#101d07` |

**Info (Dark blue)**
| Token | Hex |
|-------|-----|
| 50 | `#f5f7f8` |
| 100 | `#e6eaee` |
| 200 | `#ccd5dd` |
| 300 | `#b3c0cc` |
| 400 | `#8097aa` |
| 500 | `#4d6d88` |
| 600 | `#335877` |
| 800 | `#002e55` |
| 900 | `#001c33` |

**Avertissement (Orange)**
| Token | Hex |
|-------|-----|
| 50 | `#fef6ed` |
| 100 | `#fbdebf` |
| 200 | `#f8c48c` |
| 300 | `#f4a34c` |
| 400 | `#ef7d02` |
| 500 | `#af5b00` |
| 600 | `#944d00` |
| 700 | `#733c00` |
| 800 | `#542b00` |

**Danger (Red)**
| Token | Hex |
|-------|-----|
| 50 | `#fdf2f2` |
| 100 | `#f8d9d9` |
| 200 | `#f3bfbf` |
| 300 | `#ed9999` |
| 400 | `#e36666` |
| 500 | `#d10000` |
| 600 | `#bc0000` |
| 700 | `#9d0000` |
| 800 | `#7d0000` |
| 900 | `#3f0000` |

### 2.7 Tokens sémantiques d'usage (rôles)
| Rôle | Valeur |
|------|--------|
| text-primary | `#1e1e1e` |
| text-btn-primary | `#ffffff` |
| text-btn-secondary-neutral | `#006b52` |
| surface-primary | `#ffffff` |
| surface-secondary-bold | `#006b52` |
| surface-btn-overlay-dark | `#353535b2` |
| border-primary | `#696969` |
| border-secondary | `#d2d2d2` |
| border-icon-primary | `#ffffff` |
| border-icon-tertiary | `#353535` |
| White | `#ffffff` |

### 2.8 Ombres / effets
| Token | Définition |
|-------|-----------|
| shadow-soft | `#1e1e1e26` (noir ~15 % alpha) |
| Card / Modal drop shadow | drop-shadow offset (0,0), **radius 10**, spread 0, couleur shadow-soft |

## 3. Typographie

Police unique : **Noto Sans**. Styles nommés relevés :

| Style | Famille | Poids | Taille | Interligne |
|-------|---------|-------|--------|------------|
| 22px Semibold – Big text | Noto Sans | 600 | 22 | 32 |
| 14px Regular – Text | Noto Sans | 400 | 14 | 18 |
| 13px Regular – Text | Noto Sans | 400 | 13 | 18 |
| 13px Regular – Button | Noto Sans | 400 | 13 | 18 |

> Letter-spacing : 0 sur tous les styles relevés.
> Taille de base relevée : `Size/18px | 1rem` = 18.

## 4. Boutons (taxonomie des variantes)

Le composant **Button** se décline selon plusieurs axes (relevés dans la bibliothèque) :

- **Importance** : `Primary`, `Secondary`, `Tertiary`.
- **Status** : `Neutral`, `Negative` (danger), `Disabled` (+ variantes dépréciées `❌ Neutral_alt`).
- **State** : `Default`, `Hover`, `Focus`, `Pressed step 1`, `Pressed step 2`, `Disabled`.
- **Contenu** : icône seule / texte seul / icône + texte.
- Variantes composées : `Button Group`, `isbreadcrumb`.

Repères de couleur boutons :
- **Primary / Neutral** : fond vert foncé `#006b52` (surface-secondary-bold), texte blanc.
- **Secondary / Neutral** : texte vert `#006b52` (text-btn-secondary-neutral), fond clair / bordure.
- **Negative** : palette **Red (Danger)** (`#d10000` et dérivés).
- **Disabled** : neutres gris.

## 5. ⚠️ Tokens dépréciés (ne pas utiliser)

Préfixés `❌` dans Figma — remplacés par les sémantiques ci-dessus :

- `❌ Blue` (toute l'échelle 50→900) → utiliser **Info / Dark blue**.
- `❌ text-secondary_alt`, `❌ text-btn-secondary-neutral_alt`, `❌ surface-secondary_alt` (`#0f508a`).
- `❌ Neutral_alt` (états de boutons).

## 6. Correspondance avec le site des specs

Le site de présentation des specs applique un sous-ensemble de ces tokens (voir
`site/frontend/src/styles.scss`). Correspondance retenue :

| Usage site | Token KiwUI |
|------------|-------------|
| Vert principal (en-tête, accents) | Dark green 500 `#006b52` |
| Vert logo (ponctuel) | Logo green 500 `#008143` |
| Vert foncé (titres, hover) | Dark green 700 `#015642` |
| Fond clair de section | Dark green 50 `#f2f8f6` |
| Texte principal | `#1e1e1e` |
| Bordures | Gray 200 `#d2d2d2` |
| Fond gris | Gray 50 `#f8f8f8` |
| Succès / Info / Warning / Danger | Sémantiques §2.6 |
| Police | Noto Sans |