# Système de design KERN

## Aperçu de l’interface du système de design KERN

Modifiez la note, annulez ou confirmez sa suppression, restaurez-la et changez l’apparence.

## Référence de conception du système de design KERN

Extrait de @kern-ux/native 2.8.2 ; les choix de mise en page de l’application sont indiqués séparément.

### Typographie et géométrie

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Default font | Fira Sans | Chargez le fichier font-face du package ; CSS ne charge pas les fichiers de police à lui seul. |
| Static sizes | 16 / 18 / 21px | Texte statique petit, moyen et grand. |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | Typographie adaptative de moyen à 2x-large. |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | Le package modifie les jetons adaptatifs à cette requête média. |
| Font weights | 400 / 500 / 600 | Normal, moyen et semi-gras. |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | Jetons d’espacement nommés, et non une échelle à incréments uniformes. |
| Border widths | 0 / 1 / 2 / 4 / 8px | La bordure par défaut est de 2px. |
| Radii | 0 / 2 / 4 / 8px / 50% | Aucun, petit, par défaut, grand et circulaire. |
| Focus outline | 4px | Le contour focus-visible par défaut utilise le rôle de focus contextuel de l’action. |
| Specimen width | 800px | Choix propre à l’application, et non jeton de conteneur KERN. |
### Correspondance des couleurs sémantiques

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | Un même rôle sémantique change selon le thème. |
| Light action | darkblue-700 | --kern-color-action-default ; on-action est blanc. |
| Dark action | darkblue-300 | On-action devient noir. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | L’attribut explicite prévaut sur la préférence du système. |
## Guide complet du système de design KERN

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design KERN : HTML natif, CSS et comportement du navigateur

### Contenu du package

> KERN native 2.8.2 fournit les composants CSS et les polices. L’exemple importe directement ces fichiers : le bouton, la zone de texte, Details et Dialog sont des éléments natifs avec des classes KERN. Aucun fournisseur React ni constructeur de composant JavaScript n’est nécessaire. L’application fournit la logique de décision autour de la boîte de dialogue ; le style, à lui seul, n’efface pas un champ de saisie.

1. Installez le package natif dans la version épinglée.

2. Copiez ensemble sa feuille de style et ses polices, en conservant leurs chemins relatifs.

3. Enregistrez l’exemple complet ci-dessous et servez le répertoire via HTTP.

Consultez la spécification associée

## Système de design KERN : Fira Sans et typographie adaptative

### Chargez explicitement la typographie

kern.min.css référence Fira Sans ; fonts/fira-sans.css déclare les fontes et les ressources WOFF2 associées par chemin relatif. Conservez le répertoire des polices intact pour éviter qu’une feuille de style apparemment correcte n’utilise silencieusement une police de remplacement. Les tailles de texte statique restent de 16, 18 et 21px, tandis que les jetons adaptatifs de titre et de sous-titre changent à 768px. Utilisez un élément de titre pour définir la hiérarchie et la classe KERN appropriée pour son traitement visuel. L’exemple conserve un seul h1 et donne à la boîte de dialogue son propre h2.

Consultez la spécification associée

## Système de design KERN : espacement, largeur et mise en page adaptative

### Distinguez les jetons de la composition

KERN expose des jetons d’espacement nommés de 0 à 192 px, avec des incréments de 2 et 4 px pour les petites valeurs. Les jetons de bordure et de rayon suivent des échelles distinctes. L’exemple adopte un rythme vertical de 24 px et une rangée d’actions avec retour à la ligne. La largeur maximale du contenu, fixée à 800 px, et la largeur maximale de la boîte de dialogue, fixée à 560 px, sont des choix explicites propres à l’application ; aucune des deux n’est présentée comme une largeur universelle de conteneur KERN. Sur les écrans étroits, les marges internes de la page passent à 16 px et la boîte de dialogue reste contenue dans la fenêtre d’affichage. Aucune hauteur minimale correspondant à celle de la fenêtre n’est appliquée au document, ce qui évite une boucle de redimensionnement lors de son intégration.

Consultez la spécification associée

## Couleurs sémantiques et apparence du système de design KERN

### Changez les rôles, pas les valeurs hexadécimales isolées

Le paquet utilise les propriétés sémantiques CSS pour le texte, les actions, l’arrière-plan et la mise en évidence du focus. Les palettes claire et sombre modifient ces rôles de façon cohérente. Par exemple, en mode clair, action-default correspond à darkblue-700 et, en mode sombre, à darkblue-300 ; sa couleur de premier plan passe quant à elle du blanc au noir. L’exemple définit data-kern-theme sur html et présente un bouton à l’état enfoncé. La préférence ne s’applique qu’à ce document ; elle n’est pas enregistrée. Supprimer l’attribut explicite permet à la feuille de style de suivre prefers-color-scheme.

Consultez la spécification associée

## Une note modifiable avec libellé — système de design KERN

### Gardez les consignes à portée de main

La zone de texte utilise kern-form-input__input à l’intérieur de kern-form-input, avec un véritable libellé associé à l’identifiant de la zone. L’aide possède son propre identifiant et reste liée au champ via aria-describedby. Cette note facultative est locale : l’exemple ne simule ni erreurs de champ obligatoire ni enregistrement sur un serveur. Le bouton Restaurer l’exemple rétablit la valeur initiale et place le focus sur le champ modifiable. Une zone de statut annonce le résultat sans remplacer le libellé ni déplacer le focus vers un texte non interactif.

Consultez la spécification associée

## Informations complémentaires avec Details — système de design KERN

### Laissez le navigateur gérer l’affichage

L’élément details gère son propre état d’ouverture ; son élément summary sert de déclencheur. KERN ajoute kern-details__header, un petit élément span pour le titre et kern-details__body pour la présentation. L’exemple y place les informations sur la conservation, car elles sont complémentaires. Les consignes obligatoires, les erreurs et l’action de suppression restent visibles en dehors du contenu masqué. Le comportement clavier natif permet l’activation sans gestionnaire de clic supplémentaire ni état aria-expanded redondant.

- Rédigez un résumé descriptif et concis.

- Ne placez pas d’autre bouton ni de lien dans l’élément summary.

- Pour regrouper des divulgations connexes, utilisez un accordéon au lieu de déguiser des actions sans rapport en éléments Details.

Consultez la spécification associée

## Une confirmation avec une issue sûre — système de design KERN

### Structure et contrôle

La boîte de dialogue est associée à son titre h2 et décrite par une courte explication des conséquences. L’en-tête, le corps et le pied de page utilisent les classes documentées de KERN. showModal() place la boîte de dialogue native au premier plan ; close() met fin à l’interaction. Le focus initial est placé sur Conserver la note grâce à autofocus. La touche Échap ferme la boîte sans modifier le texte, et l’écouteur de fermeture replace le focus sur Supprimer la note. Seule l’action Oui, supprimer efface le contenu. Les clics sur l’arrière-plan sont volontairement sans effet, car il s’agit d’une confirmation de suppression. Cette approche suit les recommandations documentées pour les décisions importantes plutôt que de reprendre sans discernement le gestionnaire de fermeture au clic sur l’arrière-plan de l’exemple générique.

Consultez la spécification associée

## Intégration et champ d’application — système de design KERN

### Installez toute la chaîne de dépendances

La configuration ci-dessous installe une version précise d’un seul paquet et copie sa CSS ainsi que son répertoire de polices. L’exemple complet inclut sa propre CSS de mise en page, l’attribut de thème racine, la structure DOM et la gestion des événements. Après l’intégration à un véritable formulaire, testez les deux issues de la boîte de dialogue, la touche Échap et les écrans étroits. Le code de KERN est distribué sous licence EUPL ; le site distingue ses contenus textuels et graphiques, soumis à la licence CC BY-NC-SA. Cet exemple original ne reprend pas l’identité d’une autorité et ne laisse pas entendre qu’un service a fait l’objet d’un audit d’accessibilité. Une véritable application nécessite toujours la persistance des données, la validation côté serveur et l’évaluation du parcours utilisateur complet.

Consultez la spécification associée

## Exemples de composants — système de design KERN

### Exemple complet de note native et de confirmation

L’ensemble du balisage du document, la mise en page CSS et le comportement de l’application ; installez les ressources avec le bloc de configuration.

```
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
```

Référence du code

## Configuration de l’agent du système de design KERN

### Point de départ de l’implémentation

Aucune étape de compilation ni aucun framework d’interface utilisateur ne sont requis. Conservez le répertoire de polices, car le CSS utilise des chemins relatifs vers les fichiers WOFF2. L’archive ZIP de l’exemple complet fonctionnel, disponible dans les sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/kern.html. N’ouvrez pas les exemples utilisant des modules via file://.

```
npm install --save-exact @kern-ux/native@2.8.2
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
```

### Un prompt pour votre projet

```
Créez l’exemple local de note d’atelier avec @kern-ux/native 2.8.2 CSS et la police Fira Sans fournie. Assemblez une zone de texte kern-form-input avec libellé, un élément natif Details pour les informations complémentaires et une kern-dialog avec en-tête, corps et pied de page correctement libellés. Ouvrez-la avec showModal(), placez le focus sur Conserver la note avec autofocus, permettez à la touche Échap d’annuler sans modifier le texte et effacez la note uniquement après l’action Oui, supprimer. Au moment de la fermeture, replacez le focus sur le déclencheur et proposez l’action Restaurer l’exemple. Faites basculer data-kern-theme entre les modes clair et sombre sans inventer de nouveaux jetons de palette. Conservez les choix de largeur initiaux de l’application et gardez la note locale ; aucun téléversement, brouillon côté serveur ni affirmation concernant un service public n’est nécessaire.
```

## Sources et champ d’application — système de design KERN

Démonstration originale utilisant le code de KERN. Elle ne suppose ni identité gouvernementale, ni stockage persistant, ni certification d’accessibilité.

- Présentation de KERN Contexte de l’administration publique et accès aux ressources.

- Système de design Fondations, composants et principes du système.

- Guide d’intégration Configuration documentée du paquet natif et des feuilles de style.

- Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire.

## Ressources associées — système de design KERN

### Michigan Forty Two

Découvrez le flux de travail WordPress pris en charge par Forty-Two, sa palette Web et ses modèles d’annuaire, au moyen d’un exemple fonctionnel de filtre par rôle et domaine de recherche.

### Aksel

Utilisez les véritables tokens ax de Aksel v8, la densité native des tableaux et la structure sémantique de leurs en-têtes. Triez et sélectionnez des dossiers de suivi fictifs tout en comparant les thèmes clair et sombre.

### NHS système de design

Utilisez la typographie NHS.UK, l’espacement adaptatif, les choix groupés par boutons radio et des détails contextuels pour créer un parcours clair de choix de rendez-vous.


- [Référence de mise en œuvre](https://www.kern-ux.de/komponenten/dialog/)
- [Source](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Consultez la spécification associée](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [Consultez la spécification associée](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Consultez la spécification associée](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [Consultez la spécification associée](https://www.kern-ux.de/komponenten/form-inputs/)
- [Consultez la spécification associée](https://www.kern-ux.de/komponenten/details/)
- [Consultez la spécification associée](https://www.kern-ux.de/komponenten/dialog/)
- [Consultez la spécification associée](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [Référence du code](https://www.kern-ux.de/komponenten/dialog/)
- [Présentation de KERN Contexte de l’administration publique et accès aux ressources.](https://www.kern-ux.de/)
- [Système de design Fondations, composants et principes du système.](https://www.kern-ux.de/design-system/)
- [Guide d’intégration Configuration documentée du paquet natif et des feuilles de style.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)