Initial commit — specs pré-projet SatPRO + site de présentation (viewer, annotations, gestion des accès)
This commit is contained in:
@@ -0,0 +1,203 @@
|
||||
# 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 |
|
||||
Reference in New Issue
Block a user