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 |
