Services publics et éducation · Nouvelle ressource
Système de design NL.
Composez une interface de service public à partir de composants créés par des contributeurs et d’un thème explicite. Cette référence utilise Utrecht CSS pour illustrer la correspondance des tokens, l’anatomie d’une liste de données et deux thèmes originaux associés au même flux de modification.
Composants natifs de bouton et de liste de données Utrecht CSS 9.0.15, jetons du thème d’origine et interaction de l’application. · Référence de mise en œuvre
02
Système de design NL Référence de conception
Composition concrète d’un contributeur : @utrecht/component-library-css 9.0.15. Les noms des jetons publics et les classes sont des API de la bibliothèque examinée ; les valeurs numériques et les couleurs indiquées comme « exemple » sont des paramètres d’origine propres à l’application, et non une spécification universelle de NL Design System.
NL Design System prend explicitement en charge la combinaison de contributions provenant de plusieurs organisations, tout en permettant à chacune de décrire sa charte graphique au moyen de jetons de design. En pratique, l’adoption repose donc sur le choix d’une implémentation de composants et d’un thème. Cette page présente l’implémentation de contributeur Utrecht CSS et un thème de démonstration d’origine.
Ce choix ne signifie pas qu’Utrecht est l’implémentation de référence de tous les composants NL Design System. Il offre au lecteur une démarche reproductible sans inventer de police nationale, de couleur bleue ou d’échelle d’espacement. Le package natif CSS utilisé est @utrecht/component-library-css 9.0.15.
Système de design NL Jetons des composants publics
Gardez les valeurs de l’application en dehors de la bibliothèque CSS
Le thème fourni définit des propriétés personnalisées publiques --utrecht-* sur un conteneur. Le bouton utilise ces valeurs, tandis que sa classe détermine la structure du composant. Les variables commençant par --_utrecht- sont des calculs internes de la bibliothèque CSS examinée ; les modifier directement lierait l’application à des détails d’implémentation.
Le turquoise #005a5b et le violet #57328c de l’exemple sont des couleurs d’origine de l’application. Elles illustrent un habillage de marque que l’on peut remplacer sans reprendre l’identité visuelle d’une municipalité. Toutes deux sont associées à un texte blanc pour les actions, et une nuance distincte est définie pour l’état au survol. Aucune couleur n’est présentée comme une valeur officielle de jeton NL Design System.
css
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
La démonstration définit Arial, sans-serif à 18px avec une interligne de 1.6 pour la lecture de documents. Le premier thème utilise un titre de 32px et un rayon de 4px pour les boutons ; le second conserve la même taille de texte, facile à lire, avec un rayon de 8px et un titre avec empattements. Ces changements de thème sont volontairement bien visibles.
Lorsque son jeton est absent, le bouton natif a une taille minimale de bloc de 44px. Notre thème définit 48px, ainsi que des marges internes explicites dans les axes de bloc et en ligne. Il s’agit d’un CSS API réel avec une valeur choisie par l’application, et non d’une dimension supposée valable dans tout l’écosystème. La mise en page utilise une largeur maximale de contenu de 56rem et des espacements de 24px, définis par cet exemple.
Système de design NL Structure d’une liste de données
Une liste de définitions pour des valeurs nommées
Le reçu utilise un élément dl avec .utrecht-data-list et le modificateur .utrecht-data-list--rows. Chaque .utrecht-data-list__item regroupe une clé dt et une valeur dd. Le modificateur rows active la grille adaptative, les espacements entre les lignes et les bordures ; sans lui, la liste de données de base n’active pas cette mise en page. HTML reste lisible avant le chargement d’un thème.
Notre reçu indique un lieu de retrait, une référence et l’article sélectionné. Il ne s’agit pas d’un tableau de données répétées : chaque clé désigne un attribut différent d’une même demande. Sur les écrans étroits, la clé et la valeur s’affichent l’une sous l’autre. L’application définit les tokens des lignes afin que les noms de lieux longs s’affichent sans être tronqués.
Utilisez dt pour le nom de l’attribut et dd pour sa valeur actuelle.
Placez chaque paire clé-valeur dans le conteneur d’élément documenté.
Autorisez les identifiants et les noms de lieux longs à passer à la ligne plutôt que d’élargir la page.
Une classe de bouton ne fournit pas un processus de travail
.utrecht-button fournit le composant de base, tandis que .utrecht-button--primary-action sélectionne le groupe de tokens d’apparence principale. L’élément natif doit toujours avoir type=button pour une action locale qui ne doit pas soumettre le formulaire englobant. La liste de données reste en lecture seule jusqu’à ce que l’application ouvre un panneau de modification.
Dans la démonstration, le bouton Modifier le lieu de retrait affiche un groupe de boutons radio natifs dans un fieldset. L’enregistrement met à jour la valeur de la liste de définitions et annonce le nouveau lieu dans une zone de statut à annonce polie. L’annulation ferme le panneau sans modifier la valeur enregistrée. Ces comportements relèvent du code de l’application ; l’installation du bundle CSS seul ne les implémente pas.
Système de design NL Changer de thème en toute sécurité
Modifiez le conteneur, conservez les données
Le sélecteur de thème modifie data-theme sur le conteneur externe. Les classes des composants, les valeurs des données et le bouton radio sélectionné restent inchangés. Cela illustre concrètement la séparation de la marque blanche : un même reçu et une même interaction peuvent prendre en charge différentes identités visuelles.
Ici, le changement de thème est une démonstration destinée au développement, et non un paramètre qu’un service public est tenu de proposer. Dans un véritable service destiné à plusieurs organisations, choisissez le thème à partir d’une configuration fiable de l’application. Les valeurs du thème ne doivent pas modifier l’éligibilité, la validation ni la signification d’un statut.
Chargez une seule fois le composant versionné CSS.
Appliquez les tokens de thème pertinents à un élément conteneur.
Rendez le même balisage de composant sémantique dans ce conteneur.
Vérifiez la mise au point, le retour à la ligne et les couleurs des états pour chaque thème pris en charge.
Le modèle relais NL Design System décrit la progression des contributions vers des normes partagées. La présence d’un composant dans un dépôt communautaire ne garantit pas, à elle seule, que toutes ses compositions sont prêtes pour la production. Vérifiez l’implémentation sélectionnée, les états pris en charge et le niveau de maturité actuel dans la documentation du composant.
L’aperçu conserve une légende visible pour les choix de lieu, annonce le résultat enregistré et replace le focus sur le bouton déclencheur après la modification. Le changement de thème ne supprime pas le focus. L’écran reste utilisable avec les commandes clavier natives des boutons radio et les contours de focus de l’application ; ces vérifications complètent les tests du composant contributeur, sans les remplacer.
Installez le package CSS vérifié et importez dist/index.css avec un bundler compatible avec CSS, puis votre feuille de style de thème. Les composants de liste de données et de bouton CSS utilisés ici ne nécessitent ni fournisseur React ni initialiseur de composant JavaScript. Le script de l’application d’origine gère la modification, l’enregistrement, l’annulation et le changement de thème.
Le code source du composant fourni est sous licence EUPL-1.2. Conservez les avis de source et de licence lors de sa distribution, et ne déduisez pas d’une licence de code le droit de réutiliser le logo d’une municipalité. Cet exemple propose volontairement des thèmes originaux et n’utilise aucun emblème municipal.
Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></html>
Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.
Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.
04
Système de design NL Configuration de l’agent IA
Point de départ de l’implémentation
L’aperçu autonome charge localement la même bibliothèque native CSS versionnée. Les composants de bouton et de liste de données CSS seuls ne nécessitent pas de fournisseur React. La bibliothèque doit être accompagnée des valeurs de thème originales. Le ZIP de l’exemple complet fonctionnel dans les sources fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/nl-design-system.html. N’ouvrez pas les exemples utilisant des modules avec file://.
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez @utrecht/component-library-css 9.0.15 pour une liste de définitions de reçu et un bouton principal. Fournissez un thème original limité à un conteneur au moyen des tokens publics --utrecht-*, sans modifier les variables internes --_utrecht-*. Permettez la modification du lieu avec des choix radio libellés, des actions d’enregistrement et d’annulation, une annonce polie de la mise à jour et le retour du focus. Présentez un deuxième thème original sans remplacer le balisage des composants ni perdre les données. Indiquez que toutes les valeurs numériques du thème sont des choix propres à l’application.
05
Système de design NL Sources et périmètre
NL Design System est un écosystème indépendant des marques. Cet exemple pédagogique sélectionne une implémentation contributrice et deux thèmes originaux ; il ne revendique aucun style visuel national et n’utilise pas l’identité d’une municipalité.
