Kit — le design system
Cette page rend tous les jetons, tous les composants et tous leurs états, sur les quatre combinaisons thème × registre. Les rapports de contraste sont calculés au build à partir de src/styles/tokens.css, jamais recopiés à la main.
Cette page n’est jamais construite en production : sa route n’existe que dans l’image de préproduction.
Les quatre combinaisons
Thème clair · Registre Ludique
Ariane
Ariane t’aide à comprendre ce que fait un modèle génératif, et surtout ce qu’il ne fait pas. Le fil, c’est la suite d’idées qui relie chaque leçon à la suivante.
const fil = ["cadrage", "rédaction", "vérification"];
- Normal
- Survol
- Focus
- Désactivé
- Message de réussite
- Message d’erreur
- Message d’avertissement
- Message d’information
Thème clair · Registre Sobre
Ariane
Ariane t’aide à comprendre ce que fait un modèle génératif, et surtout ce qu’il ne fait pas. Le fil, c’est la suite d’idées qui relie chaque leçon à la suivante.
const fil = ["cadrage", "rédaction", "vérification"];
- Normal
- Survol
- Focus
- Désactivé
- Message de réussite
- Message d’erreur
- Message d’avertissement
- Message d’information
Thème sombre · Registre Ludique
Ariane
Ariane t’aide à comprendre ce que fait un modèle génératif, et surtout ce qu’il ne fait pas. Le fil, c’est la suite d’idées qui relie chaque leçon à la suivante.
const fil = ["cadrage", "rédaction", "vérification"];
- Normal
- Survol
- Focus
- Désactivé
- Message de réussite
- Message d’erreur
- Message d’avertissement
- Message d’information
Thème sombre · Registre Sobre
Ariane
Ariane t’aide à comprendre ce que fait un modèle génératif, et surtout ce qu’il ne fait pas. Le fil, c’est la suite d’idées qui relie chaque leçon à la suivante.
const fil = ["cadrage", "rédaction", "vérification"];
- Normal
- Survol
- Focus
- Désactivé
- Message de réussite
- Message d’erreur
- Message d’avertissement
- Message d’information
Couleurs
| Jeton | clair · ludique | clair · sobre | sombre · ludique | sombre · sobre |
|---|---|---|---|---|
--surface-0 | #faf6ec | #faf6ec | #14151a | #14151a |
--surface-1 | #fffdf6 | #fffdf6 | #1c1e26 | #1c1e26 |
--surface-2 | #efe7d5 | #efe7d5 | #262933 | #262933 |
--texte-fort | #16130d | #16130d | #f8f6f0 | #f8f6f0 |
--texte-normal | #2c281f | #2c281f | #e3e0d7 | #e3e0d7 |
--texte-faible | #5b5344 | #5b5344 | #a9a396 | #a9a396 |
--bordure | #2c281f | #2c281f | #b9b3a5 | #b9b3a5 |
--accent | #a63220 | #8a4034 | #ff9c7a | #e0b0a4 |
--accent-contraste | #fffdf6 | #fffdf6 | #14151a | #14151a |
--accent-parcours | #a63220 | #8a4034 | #ff9c7a | #e0b0a4 |
--parcours-agrume | #96490b | #7a5326 | #ffb257 | #d9b78c |
--parcours-menthe | #186b4e | #33604f | #62d3a4 | #a3c9ba |
--parcours-myrtille | #4b42b5 | #4e4a80 | #adaaf7 | #b6b3d6 |
--parcours-framboise | #a5296a | #7d4160 | #ff96c5 | #d4aac0 |
--parcours-ardoise | #3f5566 | #455360 | #a8c4d8 | #b0c0cc |
--succes | #1a6340 | #1a6340 | #63d09a | #63d09a |
--erreur | #a32721 | #a32721 | #ff9b91 | #ff9b91 |
--avertissement | #845000 | #845000 | #ffb95c | #ffb95c |
--info | #0f5c86 | #0f5c86 | #7cc7ee | #7cc7ee |
Contrastes mesurés
Thème clair · Registre Ludique
| Usage | Premier plan | Fond | Rapport | Seuil | Verdict |
|---|---|---|---|---|---|
| Titre sur la page | --texte-fort #16130d | --surface-0 #faf6ec | 17.17:1 | 4.5:1 | Conforme |
| Corps de texte sur la page | --texte-normal #2c281f | --surface-0 #faf6ec | 13.60:1 | 4.5:1 | Conforme |
| Métadonnée ou légende sur la page | --texte-faible #5b5344 | --surface-0 #faf6ec | 7.03:1 | 4.5:1 | Conforme |
| Texte dans une carte | --texte-normal #2c281f | --surface-1 #fffdf6 | 14.42:1 | 4.5:1 | Conforme |
| Texte sur un élément survolé | --texte-normal #2c281f | --surface-2 #efe7d5 | 11.92:1 | 4.5:1 | Conforme |
| Métadonnée dans une carte | --texte-faible #5b5344 | --surface-1 #fffdf6 | 7.46:1 | 4.5:1 | Conforme |
| Contour d’un contrôle | --bordure #2c281f | --surface-0 #faf6ec | 13.60:1 | 3.0:1 | Conforme |
| Contour d’une carte | --bordure #2c281f | --surface-1 #fffdf6 | 14.42:1 | 3.0:1 | Conforme |
| Lien et anneau de focus | --accent #a63220 | --surface-0 #faf6ec | 6.27:1 | 4.5:1 | Conforme |
| Lien dans une carte | --accent #a63220 | --surface-1 #fffdf6 | 6.65:1 | 4.5:1 | Conforme |
| Texte d’un bouton principal | --accent-contraste #fffdf6 | --accent #a63220 | 6.65:1 | 4.5:1 | Conforme |
| Message de réussite | --succes #1a6340 | --surface-0 #faf6ec | 6.70:1 | 4.5:1 | Conforme |
| Message d’erreur | --erreur #a32721 | --surface-0 #faf6ec | 6.78:1 | 4.5:1 | Conforme |
| Message d’avertissement | --avertissement #845000 | --surface-0 #faf6ec | 6.21:1 | 4.5:1 | Conforme |
| Message d’information | --info #0f5c86 | --surface-0 #faf6ec | 6.72:1 | 4.5:1 | Conforme |
| Accent de parcours — agrume | --parcours-agrume #96490b | --surface-0 #faf6ec | 5.97:1 | 4.5:1 | Conforme |
| Accent de parcours — menthe | --parcours-menthe #186b4e | --surface-0 #faf6ec | 5.98:1 | 4.5:1 | Conforme |
| Accent de parcours — myrtille | --parcours-myrtille #4b42b5 | --surface-0 #faf6ec | 7.08:1 | 4.5:1 | Conforme |
| Accent de parcours — framboise | --parcours-framboise #a5296a | --surface-0 #faf6ec | 6.22:1 | 4.5:1 | Conforme |
| Accent de parcours — ardoise | --parcours-ardoise #3f5566 | --surface-0 #faf6ec | 7.19:1 | 4.5:1 | Conforme |
Thème clair · Registre Sobre
| Usage | Premier plan | Fond | Rapport | Seuil | Verdict |
|---|---|---|---|---|---|
| Titre sur la page | --texte-fort #16130d | --surface-0 #faf6ec | 17.17:1 | 4.5:1 | Conforme |
| Corps de texte sur la page | --texte-normal #2c281f | --surface-0 #faf6ec | 13.60:1 | 4.5:1 | Conforme |
| Métadonnée ou légende sur la page | --texte-faible #5b5344 | --surface-0 #faf6ec | 7.03:1 | 4.5:1 | Conforme |
| Texte dans une carte | --texte-normal #2c281f | --surface-1 #fffdf6 | 14.42:1 | 4.5:1 | Conforme |
| Texte sur un élément survolé | --texte-normal #2c281f | --surface-2 #efe7d5 | 11.92:1 | 4.5:1 | Conforme |
| Métadonnée dans une carte | --texte-faible #5b5344 | --surface-1 #fffdf6 | 7.46:1 | 4.5:1 | Conforme |
| Contour d’un contrôle | --bordure #2c281f | --surface-0 #faf6ec | 13.60:1 | 3.0:1 | Conforme |
| Contour d’une carte | --bordure #2c281f | --surface-1 #fffdf6 | 14.42:1 | 3.0:1 | Conforme |
| Lien et anneau de focus | --accent #8a4034 | --surface-0 #faf6ec | 6.79:1 | 4.5:1 | Conforme |
| Lien dans une carte | --accent #8a4034 | --surface-1 #fffdf6 | 7.20:1 | 4.5:1 | Conforme |
| Texte d’un bouton principal | --accent-contraste #fffdf6 | --accent #8a4034 | 7.20:1 | 4.5:1 | Conforme |
| Message de réussite | --succes #1a6340 | --surface-0 #faf6ec | 6.70:1 | 4.5:1 | Conforme |
| Message d’erreur | --erreur #a32721 | --surface-0 #faf6ec | 6.78:1 | 4.5:1 | Conforme |
| Message d’avertissement | --avertissement #845000 | --surface-0 #faf6ec | 6.21:1 | 4.5:1 | Conforme |
| Message d’information | --info #0f5c86 | --surface-0 #faf6ec | 6.72:1 | 4.5:1 | Conforme |
| Accent de parcours — agrume | --parcours-agrume #7a5326 | --surface-0 #faf6ec | 6.29:1 | 4.5:1 | Conforme |
| Accent de parcours — menthe | --parcours-menthe #33604f | --surface-0 #faf6ec | 6.64:1 | 4.5:1 | Conforme |
| Accent de parcours — myrtille | --parcours-myrtille #4e4a80 | --surface-0 #faf6ec | 7.44:1 | 4.5:1 | Conforme |
| Accent de parcours — framboise | --parcours-framboise #7d4160 | --surface-0 #faf6ec | 6.95:1 | 4.5:1 | Conforme |
| Accent de parcours — ardoise | --parcours-ardoise #455360 | --surface-0 #faf6ec | 7.31:1 | 4.5:1 | Conforme |
Thème sombre · Registre Ludique
| Usage | Premier plan | Fond | Rapport | Seuil | Verdict |
|---|---|---|---|---|---|
| Titre sur la page | --texte-fort #f8f6f0 | --surface-0 #14151a | 16.86:1 | 4.5:1 | Conforme |
| Corps de texte sur la page | --texte-normal #e3e0d7 | --surface-0 #14151a | 13.81:1 | 4.5:1 | Conforme |
| Métadonnée ou légende sur la page | --texte-faible #a9a396 | --surface-0 #14151a | 7.26:1 | 4.5:1 | Conforme |
| Texte dans une carte | --texte-normal #e3e0d7 | --surface-1 #1c1e26 | 12.59:1 | 4.5:1 | Conforme |
| Texte sur un élément survolé | --texte-normal #e3e0d7 | --surface-2 #262933 | 10.99:1 | 4.5:1 | Conforme |
| Métadonnée dans une carte | --texte-faible #a9a396 | --surface-1 #1c1e26 | 6.62:1 | 4.5:1 | Conforme |
| Contour d’un contrôle | --bordure #b9b3a5 | --surface-0 #14151a | 8.72:1 | 3.0:1 | Conforme |
| Contour d’une carte | --bordure #b9b3a5 | --surface-1 #1c1e26 | 7.96:1 | 3.0:1 | Conforme |
| Lien et anneau de focus | --accent #ff9c7a | --surface-0 #14151a | 8.93:1 | 4.5:1 | Conforme |
| Lien dans une carte | --accent #ff9c7a | --surface-1 #1c1e26 | 8.14:1 | 4.5:1 | Conforme |
| Texte d’un bouton principal | --accent-contraste #14151a | --accent #ff9c7a | 8.93:1 | 4.5:1 | Conforme |
| Message de réussite | --succes #63d09a | --surface-0 #14151a | 9.56:1 | 4.5:1 | Conforme |
| Message d’erreur | --erreur #ff9b91 | --surface-0 #14151a | 8.98:1 | 4.5:1 | Conforme |
| Message d’avertissement | --avertissement #ffb95c | --surface-0 #14151a | 10.71:1 | 4.5:1 | Conforme |
| Message d’information | --info #7cc7ee | --surface-0 #14151a | 9.77:1 | 4.5:1 | Conforme |
| Accent de parcours — agrume | --parcours-agrume #ffb257 | --surface-0 #14151a | 10.20:1 | 4.5:1 | Conforme |
| Accent de parcours — menthe | --parcours-menthe #62d3a4 | --surface-0 #14151a | 9.87:1 | 4.5:1 | Conforme |
| Accent de parcours — myrtille | --parcours-myrtille #adaaf7 | --surface-0 #14151a | 8.56:1 | 4.5:1 | Conforme |
| Accent de parcours — framboise | --parcours-framboise #ff96c5 | --surface-0 #14151a | 9.04:1 | 4.5:1 | Conforme |
| Accent de parcours — ardoise | --parcours-ardoise #a8c4d8 | --surface-0 #14151a | 10.02:1 | 4.5:1 | Conforme |
Thème sombre · Registre Sobre
| Usage | Premier plan | Fond | Rapport | Seuil | Verdict |
|---|---|---|---|---|---|
| Titre sur la page | --texte-fort #f8f6f0 | --surface-0 #14151a | 16.86:1 | 4.5:1 | Conforme |
| Corps de texte sur la page | --texte-normal #e3e0d7 | --surface-0 #14151a | 13.81:1 | 4.5:1 | Conforme |
| Métadonnée ou légende sur la page | --texte-faible #a9a396 | --surface-0 #14151a | 7.26:1 | 4.5:1 | Conforme |
| Texte dans une carte | --texte-normal #e3e0d7 | --surface-1 #1c1e26 | 12.59:1 | 4.5:1 | Conforme |
| Texte sur un élément survolé | --texte-normal #e3e0d7 | --surface-2 #262933 | 10.99:1 | 4.5:1 | Conforme |
| Métadonnée dans une carte | --texte-faible #a9a396 | --surface-1 #1c1e26 | 6.62:1 | 4.5:1 | Conforme |
| Contour d’un contrôle | --bordure #b9b3a5 | --surface-0 #14151a | 8.72:1 | 3.0:1 | Conforme |
| Contour d’une carte | --bordure #b9b3a5 | --surface-1 #1c1e26 | 7.96:1 | 3.0:1 | Conforme |
| Lien et anneau de focus | --accent #e0b0a4 | --surface-0 #14151a | 9.47:1 | 4.5:1 | Conforme |
| Lien dans une carte | --accent #e0b0a4 | --surface-1 #1c1e26 | 8.64:1 | 4.5:1 | Conforme |
| Texte d’un bouton principal | --accent-contraste #14151a | --accent #e0b0a4 | 9.47:1 | 4.5:1 | Conforme |
| Message de réussite | --succes #63d09a | --surface-0 #14151a | 9.56:1 | 4.5:1 | Conforme |
| Message d’erreur | --erreur #ff9b91 | --surface-0 #14151a | 8.98:1 | 4.5:1 | Conforme |
| Message d’avertissement | --avertissement #ffb95c | --surface-0 #14151a | 10.71:1 | 4.5:1 | Conforme |
| Message d’information | --info #7cc7ee | --surface-0 #14151a | 9.77:1 | 4.5:1 | Conforme |
| Accent de parcours — agrume | --parcours-agrume #d9b78c | --surface-0 #14151a | 9.63:1 | 4.5:1 | Conforme |
| Accent de parcours — menthe | --parcours-menthe #a3c9ba | --surface-0 #14151a | 10.08:1 | 4.5:1 | Conforme |
| Accent de parcours — myrtille | --parcours-myrtille #b6b3d6 | --surface-0 #14151a | 9.03:1 | 4.5:1 | Conforme |
| Accent de parcours — framboise | --parcours-framboise #d4aac0 | --surface-0 #14151a | 8.95:1 | 4.5:1 | Conforme |
| Accent de parcours — ardoise | --parcours-ardoise #b0c0cc | --surface-0 #14151a | 9.77:1 | 4.5:1 | Conforme |
Espace, rayon, ombre
Espace, rayon, ombre
-
--espace-3xs -
--espace-2xs -
--espace-xs -
--espace-s -
--espace-m -
--espace-l -
--espace-xl -
--espace-2xl -
--espace-3xl
-
--rayon-s -
--rayon-m -
--rayon-l -
--rayon-plein -
--ombre-dure -
--ombre-douce
Mouvement
-
--duree-instant -
--duree-rapide -
--duree-normal -
--duree-lent -
--courbe-sortie -
--courbe-entree -
--courbe-rebond
Sous prefers-reduced-motion: reduce, une règle unique de
themes.css ramène ces quatre durées à 1ms.
Typographie
-
--police-corpsAriane — àâäæçéèêëîïôöœùûüÿ 0123456789 -
--police-titreAriane — àâäæçéèêëîïôöœùûüÿ 0123456789 -
--police-codeAriane — àâäæçéèêëîïôöœùûüÿ 0123456789
Composants et états